Accesibilidad Web, sin tablas

carscx · #1 (**permalink**) 21/07/2009, 01:09

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.

hades87 · #2 (**permalink**) 21/07/2009, 02:11

Estos resutlados de Google, creo que te podrían venir bien

kseso? · #3 (**permalink**) 21/07/2009, 02:38

Hola Carscx.
Al contener tus códigos imágenes no accesibles, no puedo imaginar qué alineación pretendes.

No obstante, si lo que presentan son datos (y las imágenes son un dato más) organizados en filas y columnas con una separación uniforme entre ellos y bajo un título o categoría cada una de ellas (las filas o columnas), eso son datos tabulados. Y para presentarlos, lo más accesible y semántico que hay es utilizar tablas. El único punto a tener en cuenta es que los estilos de las mismas van en el css, no en ellas.

De todas formas, si no encuentras la solución en alguno de los enlaces de Hades87, pon un enlace a tu página y seguimos el tema.

Un saludo

carscx · #4 (**permalink**) 21/07/2009, 06:36

Genial!! Muchas gracias por las respuestas, ya lo he conseguido, claro, estaba buscando por el camino equivocado. Las imagenes si son accesibles, tienen su atributo alt y title. CReo que en el codigo publicado no aparece, pero vamos que si lo son.

Muchas gracias de nuevo.

kseso? · #5 (**permalink**) 21/07/2009, 06:50

oppssss!

al decir "accesibles" me refería para mi navegador al cargar tú código y ver la composición visual que pretendías. A nada más

Bien está lo que bien acaba.

Un saludo

carscx · #6 (**permalink**) 22/07/2009, 12:35

Reabro el tema,

El motivo, es que copie tal cual una galería que aparece en varios sitios como ejemplo.
Galeria de ejemplo
Bien, pues el caso es que mis jefes, quieren que la descripción de la imagen, aparezca en la parte de la derecha, en lugar de abajo y bueno, pues la verdad, que ni idea como hacerlo sin usar tablas.

Si podéis echarme un cable, os lo agradecería.

Gracias de antemano.

Saludos,

carscx · #7 (**permalink**) 22/07/2009, 12:36

Por cierto, el código lo podéis ver aquí.
Código de la galería

kseso? · #8 (**permalink**) 22/07/2009, 12:46

en el ejemplo que enlazas el primero, deja así estas clases:

Cita:

.contenedorfoto {
background-color:#F5F7F9;
border-bottom:1px solid #A5A7AA;
border-right:1px solid #A5A7AA;
float:left;
margin:10px;
padding:5px;
text-align:center;
}
.contenedorfoto span {
color:#515151;
float:right;
font-family:Trebuchet MS;
font-size:9pt;
padding-left:5px;
}

y elimina los que hay entre la imagen y el span
Visto sólo en FF
Prueba y comenta, que me parece que ie dirá algo (por no variar) (creo que tendrás que darle una anchura/anchura mínima/anchura máxima a .contenedor foto para que ie no ocupe toda la línea horizontal con cada uno)

Una pregunta: en el ejemplo, "Descripción de la imagen" está en un 'span' formando parte del enlace como la imagen, tu intención es añadir la descripción al lado de la imagen o que se muestre en el destino del enlace? Si es lo primero, se puede modificar algo ese código.

Un saludo

carscx · #9 (**permalink**) 22/07/2009, 13:00

Muchas gracias por la respuesta tan rápida, pero sigue igual,

Código Codigo CSS:

Ver original/* CSS para galeria */
.contenedorfoto {
background-color:#F5F7F9;
border-bottom:1px solid #A5A7AA;
border-right:1px solid #A5A7AA;
float:left;
margin:10px;
padding:5px;
text-align:center;
}
img {
    width:70px;
    height:70px;
}
.contenedorfoto span {
color:#515151;
float:right;
font-family:Trebuchet MS;
font-size:9pt;
padding-left:5px;
}

Código Codigo HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Galeria</title>
    <link href="estilo.css" rel="stylesheet" type="text/css" />
   </head>
<body>
<div id="principal">
   <h3>GALERÍA CSS</h3>
   <div class="contenedorfoto"><a href="#"><img src="1.jpg" border="0" alt=""/></a><span>Descripción de la imagen</span></div>
   <div class="contenedorfoto"><a href="#"><img src="2.jpg" border="0" alt=""/></a><span>Descripción de la imagen</span></div>
   <div class="contenedorfoto"><a href="#"><img src="3.jpg" border="0" alt=""/></a><span>Descripción de la imagen</span></div>
   <div class="contenedorfoto"><a href="#"><img src="4.jpg" border="0" alt=""/></a><span>Descripción de la imagen</span></div>
   <div class="contenedorfoto"><a href="#"><img src="5.jpg" border="0" alt=""/></a><span>Descripción de la imagen extrañamente larga</span></div>
</div>
</body>
</html>

El poner el tamaño a las imagenes, es porque la imagen es mayor de las que quiero mostrar, no se si afectara.
Aqui va una captura de como me lo muestra:

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

carscx · #11 (**permalink**) 22/07/2009, 14:04

Eres un genio, si señor, jejeje. Funciona correctamente, en FF, no lo he probado IE, que seguro que ahi me da problemas.

De todas formas, ¿que es lo que hace que se mueva de un sitio a otro? Agradezco mucho el codigo ya hecho, y me gusta mucho el copy paste, pero tambien me gusta aprender.
¿Para que sirve esto?

Código CSS:

Ver original#
* { margin: 0px;
#
padding: 0px; outline: 0;
#
}

¿Es la propiedad "inline" la que hace que se muestre asi?

Gracias por todo, Saludos,

kseso? · #12 (**permalink**) 22/07/2009, 14:29

Es un mini reset

Lo que hacemos es flotar la imagen a la izquierda.
Y ahora que lo veo mejor, cambia a esto:

Cita:

#principal li {
list-style-tipe: none;
float:left;
margin: 5px;
padding: 5px;
background: #cdcdcd;
width: 370px;
}

pues float y display como que no

Por cierto, con esa disposición, si la descripción es lo suficientemente larga, pasará a colocarse debajo de la imagen.

Aunque personalmente no colocaría todo dentro del enlace, sino que la imagen iría por un lado, metería un hnº para el título de la foto y la descripción la incluiría en .

Un saludo

carscx · #13 (**permalink**) 22/07/2009, 15:09

Cita:

Iniciado por kseso?

Es un mini reset

Lo que hacemos es flotar la imagen a la izquierda.
Y ahora que lo veo mejor, cambia a esto:

pues float y display como que no

Por cierto, con esa disposición, si la descripción es lo suficientemente larga, pasará a colocarse debajo de la imagen.

Aunque personalmente no colocaría todo dentro del enlace, sino que la imagen iría por un lado, metería un hnº para el título de la foto y la descripción la incluiría en .

Un saludo

Tendré en cuenta lo de la descripcion.

Y mi intencion era hacer eso que me has dicho, poner el titulo con un hnº y la desc entre 

De nuevo, muchisimas gracias,