Hola amigos,
Necesito crear una tabla sin tablas, jejeje. Es decir, tengo las siguientes listas ul li, para alinear las distintas imagenes. Aqui va el HTML
Código HTML:
<body>
<div id="cabecera" class="ciudadanos"><img src="ban-usuarios.jpg"></div>
<div id="contenido">
<div id="imagenes_izq">
<ul class="imagenes_iz">
<li><a href="#"><img src="info-ico.png" title="Información" alt="Información"></a></li>
<li><a href="#"><img src="centros-ico.jpg" title="Centros y Servicios" alt="Centros y Servicios"></a></li>
<li><a href="#"><img src="donaciones-ico.jpg" title="Donaciones y Transplantes" alt="Donaciones y Transplantes"></a></li>
<li><a href="#"><img src="epidemiologia-ico.jpg" title="Epidemiologia" alt="Epidemiologia"></a></li>
<li><a href="#"><img src="tarjeta-ico.jpg" title="Tarjeta Sanitaria" alt="Tarjeta Sanitaria"></a></li>
<li><a href="#"><img src="sugerencias-ico.jpg" title="Reclamaciones y Sugerencias" alt="Reclamaciones y Sugerencias"></a></li>
</ul>
</div>
<div id="enlaces_iz">
<ul class="enlaces_iz">
<li><h2><a href="#">Información<br></a><span class="descripcion">Para los ciudadanos, pacientes, familiares</span></h2></li>
<li><h2><a href="#">Información<br></a><span class="descripcion">Para los ciudadanos, pacientes, familiares</span></h2></li>
<li><h2><a href="#">Información<br></a><span class="descripcion">Para los ciudadanos, pacientes, familiares</span></h2></li>
<li><h2><a href="#">Información<br></a><span class="descripcion">Para los ciudadanos, pacientes, familiares</span></h2></li>
<li><h2><a href="#">Información<br></a><span class="descripcion">Para los ciudadanos, pacientes, familiares</span></h2></li>
</ul>
</div>
<div id="enlaces_de">
<ul class="enlaces_der">
<li><h2><a href="usuarios/informacion/informacion-general-a-ciudadanos">Información<br></a><span class="descripcion">Para los ciudadanos, pacientes, familiares</span></h2></li>
<li><h2><a href="usuarios/informacion/informacion-general-a-ciudadanos">Información<br></a><span class="descripcion">Para los ciudadanos, pacientes, familiares</span></h2></li>
<li><h2><a href="usuarios/informacion/informacion-general-a-ciudadanos">Información<br></a><span class="descripcion">Para los ciudadanos, pacientes, familiares</span></h2></li>
<li><h2><a href="usuarios/informacion/informacion-general-a-ciudadanos">Información<br></a><span class="descripcion">Para los ciudadanos, pacientes, familiares</span></h2></li>
<li><h2><a href="usuarios/informacion/informacion-general-a-ciudadanos">Información<br></a><span class="descripcion">Para los ciudadanos, pacientes, familiares</span></h2></li>
<li><h2><a href="usuarios/informacion/informacion-general-a-ciudadanos">Información<br></a><span class="descripcion">Para los ciudadanos, pacientes, familiares</span></h2></li>
</ul>
</div>
<div id="imagenes_de">
<ul class="imagenes_der">
<li><a href="usuarios/informacion/informacion-general-a-ciudadanos"><img src="citaprevia-ico.jpg" title="Información" alt="Información"></a></li>
<li><a href="usuarios/informacion/informacion-general-a-ciudadanos"><img src="citaprevia-ico.jpg" title="Información" alt="Información"></a></li>
<li><a href="usuarios/informacion/informacion-general-a-ciudadanos"><img src="citaprevia-ico.jpg" title="Información" alt="Información"></a></li>
<li><a href="usuarios/informacion/informacion-general-a-ciudadanos"><img src="citaprevia-ico.jpg" title="Información" alt="Información"></a></li>
<li><a href="usuarios/informacion/informacion-general-a-ciudadanos"><img src="citaprevia-ico.jpg" title="Información" alt="Información"></a></li>
<li><a href="usuarios/informacion/informacion-general-a-ciudadanos"><img src="citaprevia-ico.jpg" title="Información" alt="Información"></a></li>
</ul>
</div>
</div>
</body>
Y aqui el CSS
Código CSS:
Ver originalbody {
background: #FFF;
font-family: Verdana, Arial;
margin:0;
padding:0px;
}
img {
border:0px;
}
#cabecera {
width:580px;
margin:0px;
}
.ciudadanos { /*Estilo de la cabecera*/
font-family: Verdana;
font-size:20px;
width:580px;
color: #F00;
background-image: url(ban-usuarios.jpg) no-repeat;
width:435px;
margin:0px;
}
#contenido
h2 {
color:#F00;
font-family: Verdana;
text-decoration: none;
font-size: 10pt;
height:70px;
padding-top:0px;
}
a {
text-decoration:none;
color: #0174DF;
margin-left: 0px;
}
ul {
margin:0px;
margin-left:0px;
list-style:none;
}
#imagenes_izq { /*Columna 1 */
position:absolute;
width:70px;
left:0px;
}
.imagenes_iz {
padding:0px;
}
#enlaces_iz { /*Columna 2 */
position:absolute;
width:220px;
left:70px;
}
.enlaces_iz {
padding:0px;
}
#imagenes_de { /*Columna 3 */
position:absolute;
width:70px;
left:290px;
}
.imagenes_der {
padding:0px;
}
#enlaces_de { /*Columna 4 */
position:absolute;
width:220px;
left:360px;
}
.enlaces_der {
padding:0px;
}
.descripcion {
color:#999;
font-size: 7pt;
text-decoration: none;
margin-top:0px;
padding:5px;
}
Bien, pues no consigo que me quede alineado, como podria hacerlo para dejarlo todo alineado. No puedo usar tablas por los problemas con accesibilidad.
Saludos, y Muchas gracias.