Hola lo más semanticamente correcto sería que los tratases como una lista
cada una de las imagenes como un item de la lista (li) ,.....

El xhtml sería así

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="liststyle.css"/>
<title>listas para imagenes</title>
</head>
<body>
<ul>
<li id="one">
<h3><a href="#">Primer item<img src="web_020.jpg" alt="" /></a></h3>
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li id="two">
<h3><a href="#">Segundo item<img src="web_021.jpg" alt="" /></a></h3>
<p>Lorem ipsum dolor sit amet.</p>
<li id="three">
<h3><a href="#">Tercer item<img src="web_022.jpg" alt="" /></a></h3>
<p>Lorem ipsum dolor sit amet.</p>
</ul>
</body>
</html>


Y el estilo (liststyle.css) sería :

h3 { margin : 0 10px;
padding : .5em 0 0 0;
font-size : 100%; }

p { margin : 0 10px;
padding : 0 0 .5em 0; }

ul { list-style-type : none;
width : 780px;
margin : 0;
padding : 0;
border-top : 20px solid #90305c; }

ul:after { content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden; }

li { position : relative;
float : left;
width : 260px;
padding : 2em 0; }

li#one { background : #e4ccd7 ; }
li#two { background : grey; }
li#three { background : #e4ccd7; }

h3 img { float : right; }


Espero que te sirva :)
Salu2..........
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo

Responder a