CODEWITHSUNDEEP
htmlcss
mjared
mjared

Reputation: 55

I'm trying to place text over image using z-index and position absolute?

I'm trying to position the text over image better so it displays better in a centered div. In resolutions below 1k pexels. It really needs to be displayed better for desktop resolutions. This is my webpage template and the content in the body is centered.

Website

If you view the page below 1k pixels it doesn't display correctly I wish for it to appear over the header about 10 pixels from left.

My HTML code where it is displayed.

<div id="header">
  <div class="textoverimage">
    <p>New two day trip - Zoo & New Years Eve<br /> Sydney Harbour 2012. Book now to avoid disappointment.  </p>
  </div>
  </div>

My CSS for the above elements.

#header {
    height: 205px;
    width: 960px;
    margin: 0px;
    padding: 0px;
    border-top: medium none #009933;
    border-right: medium none #009933;
    border-bottom: medium none #009933;
    border-left: medium none #009933;
    background: url(../_images/header.jpg) no-repeat;
}

.textoverimage {
    z-index: 100;
    position: absolute;
    left: 350px;
    top: 100px;
    right: 30px;
    bottom: 0px;
    height: 50px;
    width: 300px;
    border: medium none #03F;
    color: #FFF;
}

TYVY Jared

Upvotes: 0

Views: 274

Answers (2)

Pramod Bhoi
Pramod Bhoi

Reputation: 197

If you want to show your text over the image from left 10px give position: relative to parent div and left:10px to .textoverimage class and remove padding-left from paragraph p, here is the code:

.textoverimage{
  z-index: 100;
 position: absolute;
 left: 10px;
 top: 100px;
 right: 30px;
 bottom: 0px;
 height: 50px;
 width: 300px;
 border: medium none #03F;
 color: #FFF;
}

#header {
 height: 205px;
 width: 960px;
 margin: 0px;
 padding: 0px;
 border-top: medium none #009933;
 border-right: medium none #009933;
 border-bottom: medium none #009933;
 border-left: medium none #009933;
 background: url(../_images/header.jpg) no-repeat;
 position: relative;
}

p {
 padding: 15px 0;
 margin: 1px;
 vertical-align: text-top;
}
![screenshot][1]


  [1]: https://i.sstatic.net/vGARy.jpg

Upvotes: 1

slash197
slash197

Reputation: 9034

Your #header needs position: relative; If it's relative then you can set left: 10px on the .textoverimage and top as you wish.

Upvotes: 1

Related Questions