image with text underneath

Hello i was wondering if anyone could tell me the semantic way to code this example. What i need is an image which will be a link with text underneat which will also be a link.



Anyhelp is appreciated, also how would i get a little grey container around the whole image and the text.

 

Cant you just code the HTML like this:

<a href="#" class="imageAndLink"><img src="image1.jpg" alt="Image 1" /><span>text 1</span></a>
<a href="#" class="imageAndLink"><img src="image2.jpg" alt="Image 2" /><span>text 2</span></a>
<a href="#" class="imageAndLink"><img src="image3.jpg" alt="Image 3" /><span>text 3</span></a>
<a href="#" class="imageAndLink"><img src="image4.jpg" alt="Image 4" /><span>text 4</span></a>

Code (markup):

and then the CSS like

.imageAndLink
{
    display:block;
    background: #EEEEEE;
    width:100px;
    float:left;
    margin-right:10px;
    text-align:center;
    padding:10px;
}


.imageAndLink img
{
    width:100px;
    height:100px;
    float: left
}

.imageAndLink span
{
    clear:left;
}

Code (markup):

Validates for me

 

that is absolutely brilliant mate thanks for taking the time.

heres how it sort of looks just now:

http://www.juicingforum.co.uk/vegbenefits.php

if i was wanting to make the grey background dissapear on hover what would i add the hover too. And when i tried to make the grey bits wider it wouldnt let me.

cheers again.

 

To remove the gray on hover add this css :

.imageAndLink:hover{
background:transparent;
}

Code (markup):

 

No probs.

.imageAndLink
{
    display:block;
    background: #EEEEEE;
    width:100px;
    float:left;
    margin-right:10px;
    text-align:center;
    padding:10px;
}

.imageAndLink:hover
{
    background:#FFFFFF;
}

.imageAndLink img
{
    width:100px;
    height:100px;
    float: left
}

.imageAndLink span
{
    clear:left;
}

Code (markup):

 

smashing guys thanks its looking good now.

cheers again

 

Uhm, you don't need the span, or the float on the img. Just set the img to display:block; and AGAIN - avoid putting the same class on a bunch of elements in a row people....

<div class="imageLinks">
	<a href="#">
		<img src="image1.jpg" alt="Image 1" />
		text 1
	</a>
	<a href="#">
		<img src="image2.jpg" alt="Image 2" />
		text 2
	</a>
	<a href="#">
		<img src="image3.jpg" alt="Image 3" />
		text 3
	</a>
	<a href="#">
		<img src="image4.jpg" alt="Image 4" />
		text 4
	</a>
</div>

Code (markup):

with this CSS

.imageLinks {
	/* wrap our floats, avoid any clearing nonsense later */
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats in IE */
}

.imageLinks a {
	float:left;
	display:inline; /* prevent IE margin doubling */
	padding:10px;
	margin-right:10px;
	width:100px;
	text-align:center;
	background:#EEE;
}

.imageLinks a:active,
.imageLinks a:focus,
.imageLinks a:hover {
	background:#FFF;
}

.imageLinks img {
	display:block;
	width:100px;
	height:100px;
}

Code (markup):

All you really need. Oh, I tossed some self clearing behavior on there too. Remember, not every ejaculation deserves a name - aka don't go throwing classes on a bunch of like sibling elements. Classes are for when they are DIFFERENT from each-other, not when they are the same. If they are the same, style off a parent element.

Oh, I also threw :active and :focus on there so people navigating with keyboards or on handhelds aren't left out in the cold.