Text above an image

[Pennywise]

I have 3 images side by side

image - image - image

I want text above each image but each time I try it I mess it up.

The images are 170x255 and the width of everything cant be more then 580 as It then overlaps and I need each row to have 3 images.

The code I use is

<div style="text-align: center;"><a href="urlhere" target="_blank"> <img src="urlhere" alt="" border="0"></a> - <a href="urlhere" target="_blank"><img src="urlhere" alt="" border="0"></a> - <a href="urlhere" target="_blank"><img src="urlhere" alt="" border="0"><br></a>&nbsp; </div>

Thnx

[zackc]

Make a couple of divs or a table with three cells above the image. For a table you could use...

<table border="0px" cellpadding="2" cellspacing="0"><tr><td width="image width here">text text text</td> ... repeat 2 more times ... </tr></table><br />Your image code here.

Zack

[Tyssen]

Put each image and text pair inside a container and then float all the containers left.

[zackc]

If you are not sure how to do what Tyssen said here is what you need to do...

CSS:

<style type="text/css">
#textcontain {
width: 500px;
text-align: center;
}

#container1 {
float: left;
width: width px;
text-align: center;
}

#container2 {
float: left;
width: width px;
text-align: center;
}

#container3 {
float: left;
width: width px;
text-align: center;
}
</style>

The HTML:

<div id="1">text</div><div id="2">text</div><div id="3">text</div>

This is what I think... The css is right, but it is either that html or reversed - div 3, div 2, div 1.
Zack

[Tyssen]

Except that you could cut down on code by making it a class instead of repeating the code for different IDs which are essentially the same. I'd actually use an unordered list and just style the list items.

[zackc]

I forgot about that .classid method of doing the task. An unordered list would probably be extra code, wouldn't it? The class method you proposed would be perfect, and is what I would do. Anway in order to do that for your website, Ross, use this code...

CSS:

<style type="text/css">
.div1 {
float: left;
text-align: center;
width: your width;
}
</style>

And just use span, or div class in your html to use the class method.
Zack

[Tyssen]

An unordered list would probably be extra code, wouldn't it?

Not really. Instead of:

 <div class="image"></div>
 <div class="image"></div>
 <div class="image"></div>

you'd have:

 <ul class="images">
 <li></li>
 <li></li>
 <li></li>
 </ul>

OK, so you have two extra lines of code, but you don't have to specify a class for each list item.
But it's not all just about saving code; if you have a list of images/caption pairs, then the correct semantic choice of tag is an unordered list. Using divs imparts no semantic meaning for your content.

[zackc]

Very true, that will definately work, and divs may not be the semantic way, but it just goes to show that you can complete these kinds of tasks with lots of seperate possibilities! And 2 lines of extra code put in perspective is practically nothing, so the class method will work with divs and ul's equally.
Zack

[Pennywise]

I cant seem to get this to work

I do what you say and the text is above the image for one image but when I add the other 2 images instead of staying side by side they go below each other.

[DaveMaxwell]

I cant seem to get this to work

I do what you say and the text is above the image for one image but when I add the other 2 images instead of staying side by side they go below each other.

It would probably help greatly if you'd post the html and the css code you're using. That way no one is guessing.

[Pennywise]

The ones they posted, it happened on all there examples as I tried them all, the images wouldnt stay side by side but always went underneath each other instead.

[Tyssen]

Like Dave says, we need to see your code. What's been suggested should work and if it's not it means there's something wrong with your implementation.

[Pennywise]

<div id="1">text</div><a href="urlhere" target="_blank"> <img src="test.jpg" alt="" border="0"></a> - <div id="2">text</div> <a href="urlhere" target="_blank"><img src="test.jpg" alt="" border="0"></a> - <div id="3">text</div><a href="urlhere" target="_blank"><img src="test.jpg" alt="" border="0"><br></a></div>

[Tyssen]

The image/text pairs are s'posed to go in the same div.

[Pennywise]

I'm really not good at this as you can see, I just tried this as thats what I thought you meant but it didnt work

<div id="1">text<a href="test" target="_blank"> <img src="test.jpg" alt="" border="0"></a></div> - <div id="2">text<a href="urlhere" target="_blank"><img src="test.jpg" alt="" border="0"></a></div>- <div id="3">text<a href="urlhere" target="_blank"><img src="test.jpg" alt="" border="0"></div>

Obviously completely wrong.

[Tyssen]

Two things:
1. we need to see the CSS
2. you need to explain how it's not working

[Pennywise]

The css is

/* CSS Document */
*
{
	margin:0;
	padding:0;
}
body
{
	background:#FFF;
	font-family:Trebuchet MS;
}
#container
{
	margin:5px;
	width:auto;
	width:1000px;
	margin:0px auto;
}
.banner
{
	width:441px;
	height:150px;
	background-image:url('images/banner.gif');
	float:left;
}
.bannerRight
{
	width:74px;
	height:150px;
	float:left;
	background-image:url('images/banner_right.gif');
}
.adsTop
{
	width:466px;
	height:150px;
	float:left;
}
.adsTop img
{
	border:0;
	margin-top:35px;
}
.divider
{
	height:6px;
	background:url('images/divider.gif');
	background-repeat:repeat-x;
	margin-bottom:10px;
	font-size:0;
}
.sidebar
{
	width:203px;
	float:left;
	background:#FFD3E7;
}
.sidebar h1
{
	background:url('images/h1_white.gif');
}
.sidebar h2
{
	background:url('images/h1.gif');
}
.sidebar h1,
.sidebar h2
{
	width:198px;
	background-repeat:no-repeat;
	background-color:#FFD3E7;
	color:#FD1D81;
	padding-left:5px;
	padding-top:5px;
	font-style:italic;
	font-size:12px;
	clear:both;
}
.sidebar ul
{
	padding:3px;
}
.sidebar li
{
	font-size:12px;
	background:url('images/fade_dots.gif') no-repeat left bottom;
	color:#FD0171;
	list-style:none;
}
.sidebar a
{
	text-decoration:none;
	color:#FD0171;
	font-size:12px;
}
.sidebar img
{
	border:2px solid #FFA1CC;
	margin:3px;
}

#middle
{
	float:left;
	margin:7px;
}
#middle .roundbox
{
	background:#FFEDF5;
	width:570px;
	text-align:center;
}
#middle .roundtop,
#middle .roundbottom
{
	height:5px;
	width:570px;
	font-size:0px;
}
#middle .roundtop
{
	background:url('images/roundTop.gif') no-repeat;
}
#middle .roundbottom
{
	background:url('images/roundBottom.gif') no-repeat;
	margin-bottom:10px;
}
#middle .girl
{
	margin:0px;
	padding:0px;
}
#middle .girl img
{
	border:2px solid #DCDCDC;
}
.footer
{
	border-top:2px solid #FF6CAD;
	background:#FFD3E7;
	margin-top:10px;
	color:#FD0171;
	font-size:12px;
}
.footer a
{
	text-decoration:none;
	padding:2px;
	color:#FD0171;
}
.footer i
{
	font-style:normal;
	float:left;
}
.footer em
{
	float:right;
	font-style:normal;
	margin-right:10px;
}
#middle h1
{
	color:#9F9F9F;
	font-family:Tahoma;
	font-size:18pt;
	font-weight:bold;
}
#middle h1 em
{
	color:#FD0171;
	font-style:normal;
}
#middle p
{
	font-family:Tahoma;
	font-size:12px;
	margin:0px;
	padding:0px;
	float:left;
	width:570px;
}
#middle p a,
#middle p a:hover
{
	color:#FD0171;
	text-decoration:underline;
}
#textcontain {
width: 500px;
text-align: center;
}

#container1 {
float: left;
width: width px;
text-align: center;
}

#container2 {
float: left;
width: width px;
text-align: center;
}

#container3 {
float: left;
width: width px;
text-align: center;
}

And its not working because the images don't stay side by side, instead they go underneath each other.

So instead of image-image-image its

image
image
image

Thanks for the help

[Tyssen]

 #container1 {
 float: left;
 width: width px;
 text-align: center;
 }
 
 #container2 {
 float: left;
 width: width px;
 text-align: center;
 }
 
 #container3 {
 float: left;
 width: width px;
 text-align: center;
 }

Two main problems:
1. your CSS has #container1, #container2 and #container3 but your HTML IDs are 1, 2 & 3 (incidentally, you can't start ID or class names with a numeral). The IDs in the HTML need to match up with those in the CSS.
2. width: width px - you're actually s'posed to replace the width in bold with a number of your own choosing, e.g. 100px.

[Pennywise]

Sorry yeah I did replace the width, I just copy and pasted what Zack wrote so you knew what one I was doing.

As for the 'your CSS has #container1, #container2 and #container3 but your HTML IDs are 1, 2 & 3' - Isn't that what he told me to do?

So how do I fix it?

Thnx

[Tyssen]

I've already told you - if you have #container1 in your CSS, then you have to have a div in your HTML with an ID of #container1.
You're right that's what Zack had originally but I guess he didn't think you'd take it so literally.

[gnarly]

I've already told you - if you have #container1 in your CSS, then you have to have a div in your HTML with an ID of #container1.

<pedant>Not quite. If you have #container1 in your css, your HTML element should have id="container1"</pedant>

[Pennywise]

So can you tell me what the html should be exactly pls? Knowing me I will just mess it up.

Thanks.

[Tyssen]

Well, to go with my original suggestion:

 <ul id="containers">
 <li>text<a href="test" target="_blank"> <img src="test.jpg" alt=""></a></li>
   <li>text<a href="urlhere" target="_blank"><img src="test.jpg" alt=""></a></li>
 <li>text<a href="urlhere" target="_blank"><img src="test.jpg" alt=""></li>
 </ul>
 
 /* CSS */
 ul#containers { text-align: center; overflow: hidden; }
ul#containers li { float: left; width: 100px; /* you can change the width to whatever you want, but should probably equal the width of your images */ }

[zackc]

Oh, I am sorry for the confusion, I guess I didn't explain it well enough. Tyssen just gave you the exact code you need to implement in your code. Good luck with your site!
Zack