Image goes ontop of text, instead of underneath text.

@rtretheweySep 13.2012 — #To start, your code is full of syntax errors. Don't use semi-colons (';') in your HTML. Semi-colons are used as delimiters in CSS. The rest of your code looks like it's been copied and pasted over and over and jumbled.

Generally, when I want to create this kind of caption/overlay, I create a containing element (usually a <div>) to hold the individual elements so I can control the positioning locally with reference to the containing element.

<i>
 </i>&lt;style type="text/css"&gt;
 .captionBox { position:relative; top:0; left:0; width:430px; height:500px; z-index:1; }
 .captionBox img { position:absolute; top:0; left:0; z-index:1; }
 .captionBox p { position:absolute; bottom:0; left:0; z-index:2; }
 &lt;/style&gt;
 .
 .
 &lt;/head&gt;
 &lt;body&gt;
 .
 .
 &lt;div class="captionBox"&gt;
 &lt;img src="../Pictures/girltemp1.png" alt="girltemp1.png" id="girltemp1"&gt;
 &lt;p&gt;Then the contents&lt;/p&gt;
 &lt;/div&gt;

In the code above, I've set the <div> to position:relative so I can use absolute positioning on the internal elements to position them within the <div>, regardless where I insert that <div> in the page. I set the position of the <img> at the top/left of the <div> with a z-index of 1, and positioned the <p> to the bottom/left with a z-index of 2 so it's shown over the <img>.

That should get you started, but it would be a good idea to read some tutorial on absolute positioning. Good luck!

Image goes ontop of text, instead of underneath text.

2 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Image goes ontop of text, instead of underneath text.

2 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #CSS _↴