Clean way to place text over image?

[LEGO-Mafia]

Hi all.

I would like to be able to put text over an image as in this example I've made

http://www.minifigtimes.com/test1.png

The idea behind it is that I would like to be able to use the same image on different pages but with different text associated with it. This would save me space on my server. Another benefit is that it allows me to easily update the text rather than changing text on an image.

I would design all my images to have a blank section beneath so I could use this to write perhaps 4 lines of text. I am not sure if this approach is recommended..?

I would also like to use a CSS class, so I could define the font style of the text..

Any help on the code / recommendations are greatly appreciated! Thanks

[scragar]

<div class='img left'><img src='...'><p>Some text</p></div>
.left{float: left;}
.right{float: right;}

[LEGO-Mafia]

Thanks scragar.

I am having some problem simply with the layout of my page now as I have to nest the div in your code in another div and its not doing what I want to do.

I'll post another thread on page layout and hopefully solve both issues :)

[scragar]

Post it here if you want, I'm no good at creative things, but I know CSS like the back of my hand.

[LEGO-Mafia]

Thanks well , I just posted this thread..

http://www.webdeveloper.com/forum/showthread.php?t=200744

basically I would like to use the code in your first response for allowing me to write under a picture but I think using DIVs is good for layout.

I am weak in both css and divs etc but I am trying to start a new using best practices where possible.

I attempted to implement your code on http://www.minifigtimes.com/

but I had to remove the <p> and </p> tags. I replaced with a pile of <br> tags but the text below the image is not directly under the image, its off to the left a bit. Anyway it seems a mess to me so I thought this new idea with 3 'boxes' /divs? for the layout might be easier.

[scragar]

.right a{
display: block;
}
Just make the link a block element instead of inline.

[LEGO-Mafia]

I am not sure I am doing what you suggest.

In my css file, http://www.minifigtimes.com/default.css , I've replaced

.left{float: left;}
.right{float: right;}

with

.right a{
display: block;
}

.left a{
display: block;
}

Is that what you suggested?

If so I still have a problem. Likely to do with existing code.

The relevant part of my HTML is:


<div id="wrap">

<h4>LFC Fire Ferguson As Legoland United Claim Third Derby Victory Of The Season</h4>
<br>

<a href="aaa-news-shorts.html">

<div class='img right'><img src='test2.png' id="minifig" /></a>
<p>The Legoland Derby is by far the biggest football fixture in the nation and attracted a record crowd of 1911 crazed minifigs</p>
</div>


<p>
The 2008/2009 season will go down in the history books as the season in which Legoland United's starlet Mathew Edile decided both meetings
between the nation's two most prestigious clubs in his debut season. Again coming on as a substitute, Somalian Edile netted twice in nine minutes
to turn around a game in which up until the 61st minute Legoland FC lead United 2-1. Edile, a 2008 graduate of the Reds' youth academy, value has soared
and is now rumoured to be a &pound;10m January transfer target for fallen giants Lion Lakers.
<br>
<br>
The Derby kicked off with LFC lying in second place, a point adrift of surprise league leaders Ajax Skerries, whilst United lay in fourth position, four
behind the Helmets. In a typically dirty affair referee Ferocious Corpus was kept busy dishing out the yellow cards but the tie sprunge to life in 38th
minute as LFC forward Adrian Mutu connected to a cross from Marco Materazzi to volley home from 8 yards and claim his first goal of the season since his move from
Fiorentina. LFC went into the half-time break all smiles leading 0-1 in the San Siro whilst United's minifigs endured a barrage of insults and missiles from the
Blues' supporters.
<br>
<br>
The second period began well for the reigning champions as their own impressive youth player Geoffrey Macintyre pounced in the 49th minute and placed the ball under
United custodian Francesco Antonioli to make it 0-2 to the visitors. The goal sparked wild celebrations amongst the LFC fans who expressed their joy by hurling bricks
dug up from the San Siro stands at the security forces. Yet their high spirits did not last long when 2 minutes later United's prodigal son Alex Taribello
headed past LFC 'keeper Francesco Toldo reducing the deficit. Then on came Edile and LFC saw a crucial three points slip from their grasp as the striker
first restored parity and then gave Mr United's minifigs the lead.

<a href="002.shtml">Read More</a>

</p>

<!--end wrap--></div>

As I did not come up with the code for this wrap, how to change it is Greek to me.

[scragar]

Mind me asking why you are including the default CSS file twice?

<div class="img right" style="border: 1px solid black; padding: 20px; float: right; width: 250px; max-width: 250px;">
<a href="aaa-news-shorts.html" style="display: block;">
<img id="minifig" src="test2.png"/>
</a>
<p style="width: 100%;"> The Legoland Derby is by far the biggest football fixture in the nation </p>
</div>
That's what I put in firebug for it to work out, so this CSS should work perfectly:
.right{
float: right;
}
.img{
border: 1px solid black;
padding: 20px;
}
.right a, .left a{
display: block;
}
.left p, .right p{
width: 100%;
}

<div class="img right" style="width: 250px">
<a href="aaa-news-shorts.html">
<img id="minifig" src="test2.png"/>
</a>
<p> The Legoland Derby is by far the biggest football fixture in the nation </p>
</div>

[LEGO-Mafia]

Thanks for all the help scragar!! much appreciated.

I have played around with it a bit and I was just going to ask 1 thing about how to make the text start right under the border of the image. If you see http://www.minifigtimes.com/ you will notice that the text is just a tiny bit to the left.

The other thing was, I just checked IE and got a surprise because the image isn't even appearing to the right of the text, it is placed above the text. :mad:

It seems this is not related to your code though but must have been wrong in IE before today :confused: unless it is just IE8 which I downloaded today...