CODEWITHSUNDEEP
htmlcss
DarkBlueMullet
DarkBlueMullet

Reputation: 93

Having problems putting text on top of images

I am creating my very first website....

I am trying to create a tile image theme on my homepage. I have just about managed that and am now trying to put text on top of the images.

I managed to get the first image done quite well but when I am trying to add text to the second image, the text remains on the first picture?

Here is a link to a screen shot which better explains what is going on.

HTML for first working image:

<div id="maincontentcontainer">
    <div class="standardcontainer" id="example">
        <div class="image">
        <img src="the-view.jpg" style="float: left; width: 55%; margin-right: 1%; margin-bottom: 0.5em;" alt="The View">

<h2><span>Top Story - The View:<span class='spacer'></span><br /><span class ='spacer'>     </span>Local superstars head home to play a special one-off gig</span></i></h2>
        </div>

CSS for the first working image:

.image { 
position: relative; 
width: 100%; /* for IE 6 */
}

h2 { 
position: absolute; 
top: 200px; 
left: 0; 
width: 100%; 
}

h2 span { 
color: white; 
font: bold 24px/45px Helvetica, Sans-Serif; 
letter-spacing: -1px;  
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px; 
}

h2 span.spacer {
padding:0 5px;
}

Here is the HTML for the second image:

<div class="image">            
 <img src="stan-urban.jpg" style="float: left; width: 20%; bottom: 0px; margin-right: 1%; margin-bottom: 0em;" alt = "Stan Urban">
                                                                                                            <h3><span>Stan Urban:<span class='spacer'></span><br /><span class ='spacer'></span>Veteran returns</span></i></h3>
        </div>

Here is the CSS for the second image:

h3 { 
position: absolute; 
top: 184px; 
left: 0;   
width: 100%; 
}

h3 span { 
color: white; 
font: bold 10px/30px Helvetica, Sans-Serif; 
letter-spacing: -1px;  
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px; 
}

h3 span.spacer {
padding:0 5px;
}

Upvotes: 0

Views: 60

Answers (1)

Florin Pop
Florin Pop

Reputation: 5135

That is because you have possition:absolute. Add the the 2nd image left:200 or how much you want.

Upvotes: 1

Related Questions