Foros del Web - Ver Mensaje Individual

kseso? · #10 (**permalink**) 22/07/2009, 13:47

En base a la galería que pones hecha en una lista (ul), mira a ver y comenta:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* { margin: 0px;
padding: 0px; outline: 0;
}
body {
    background-color: #ebeef2;
    margin:20px;
}
 
h3 {
    color:#838c98;
}
 
a {
    text-decoration: none;
}
 
#principal ul li span {
    color:#515151;
    font-family: Trebuchet MS;
    font-size: 9pt;
    margin-left:5px;
}
 
#principal {
    margin:0 auto;
    position: relative;
}
 
#principal ul {
    
}
 
#principal li {
    display:inline;
    float:left;
    margin: 5px;
    padding: 5px;
    background: #cdcdcd;
    width: 370px;
}
#principal ul li img {
    border:1px solid #EEE;
  float:left;
  margin-right:5px;
}
</style>
</head>
<body>
<div id="principal">
    <h3>GALER&Iacute;A CSS - Listas</h3>
    <ul>
        <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/2.jpg" alt=""/><span>Descripci&oacute;n de la imagen:<br /> y el texto descriptivo de la imagen que está a la izquierda para ver cómo se comporta.</span></a></li>
        <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/3.jpg" alt=""/><span>Descripci&oacute;n de la imagen</span></a></li>
        <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/4.jpg" alt=""/><span>Descripci&oacute;n de la imagen</span></a></li>
    </ul>
</div>
</body>
</html>

Un saludo