Foros del Web » Creando para Internet » CSS »

Accesibilidad Web, sin tablas

Estas en el tema de Accesibilidad Web, sin tablas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/07/2009, 02:09
Avatar de carscx  
Fecha de Ingreso: noviembre-2008
Mensajes: 227
Antigüedad: 9 años
Puntos: 10
Accesibilidad Web, sin tablas

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 original
  1. body {
  2.     background: #FFF;
  3.     font-family: Verdana, Arial;
  4.     margin:0;
  5.     padding:0px;
  6. }
  7. img {
  8.     border:0px;
  9. }
  10.  
  11. #cabecera {
  12.     width:580px;
  13.     margin:0px;
  14.     }
  15. .ciudadanos { /*Estilo de la cabecera*/
  16.     font-family: Verdana;
  17.     font-size:20px;
  18.     width:580px;
  19.     color: #F00;
  20.     background-image: url(ban-usuarios.jpg) no-repeat;
  21.     width:435px;
  22.     margin:0px;
  23. }
  24.  
  25. #contenido
  26. h2 {
  27.     color:#F00;
  28.     font-family: Verdana;
  29.     text-decoration: none;
  30.     font-size: 10pt;
  31.     height:70px;
  32.     padding-top:0px;
  33. }
  34. a {
  35.     text-decoration:none;
  36.     color: #0174DF;
  37.     margin-left: 0px;
  38.     }
  39. ul {
  40.     margin:0px;
  41.     margin-left:0px;
  42.     list-style:none;
  43. }
  44. #imagenes_izq { /*Columna 1 */
  45.     position:absolute;
  46.     width:70px;
  47.     left:0px;  
  48. }
  49. .imagenes_iz {
  50.     padding:0px;
  51. }
  52. #enlaces_iz { /*Columna 2 */
  53.     position:absolute;
  54.     width:220px;
  55.     left:70px;
  56.  
  57. }
  58. .enlaces_iz {
  59.     padding:0px;
  60. }
  61. #imagenes_de { /*Columna 3 */
  62.     position:absolute;
  63.     width:70px;
  64.     left:290px;
  65. }
  66. .imagenes_der {
  67.     padding:0px;
  68. }
  69. #enlaces_de { /*Columna 4 */
  70.     position:absolute;
  71.     width:220px;
  72.     left:360px;
  73. }
  74. .enlaces_der {
  75.     padding:0px;
  76. }
  77. .descripcion {
  78.     color:#999;
  79.     font-size: 7pt;
  80.     text-decoration: none;
  81.     margin-top:0px;
  82.     padding:5px;
  83. }

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.
__________________
Frontend Developer
JS+HTML5+CSS3
Backend Developer
PHP+MySQL
  #2 (permalink)  
Antiguo 21/07/2009, 03:11
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Accesibilidad Web, sin tablas

Estos resutlados de Google, creo que te podrían venir bien
__________________
No diseñes usando tablas.

Última edición por hades87; 22/07/2009 a las 16:00
  #3 (permalink)  
Antiguo 21/07/2009, 03:38
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Accesibilidad Web, sin tablas

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 21/07/2009, 07:36
Avatar de carscx  
Fecha de Ingreso: noviembre-2008
Mensajes: 227
Antigüedad: 9 años
Puntos: 10
Respuesta: Accesibilidad Web, sin tablas

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.
__________________
Frontend Developer
JS+HTML5+CSS3
Backend Developer
PHP+MySQL
  #5 (permalink)  
Antiguo 21/07/2009, 07:50
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Accesibilidad Web, sin tablas

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 22/07/2009, 13:35
Avatar de carscx  
Fecha de Ingreso: noviembre-2008
Mensajes: 227
Antigüedad: 9 años
Puntos: 10
Respuesta: Accesibilidad Web, sin tablas

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,
__________________
Frontend Developer
JS+HTML5+CSS3
Backend Developer
PHP+MySQL
  #7 (permalink)  
Antiguo 22/07/2009, 13:36
Avatar de carscx  
Fecha de Ingreso: noviembre-2008
Mensajes: 227
Antigüedad: 9 años
Puntos: 10
Respuesta: Accesibilidad Web, sin tablas

Por cierto, el código lo podéis ver aquí.
Código de la galería
__________________
Frontend Developer
JS+HTML5+CSS3
Backend Developer
PHP+MySQL
  #8 (permalink)  
Antiguo 22/07/2009, 13:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Accesibilidad Web, sin tablas

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 <br /> 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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 22/07/2009 a las 14:15
  #9 (permalink)  
Antiguo 22/07/2009, 14:00
Avatar de carscx  
Fecha de Ingreso: noviembre-2008
Mensajes: 227
Antigüedad: 9 años
Puntos: 10
Respuesta: Accesibilidad Web, sin tablas

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

Código Codigo CSS:
Ver original
  1. /* CSS para galeria */
  2. .contenedorfoto {
  3. background-color:#F5F7F9;
  4. border-bottom:1px solid #A5A7AA;
  5. border-right:1px solid #A5A7AA;
  6. float:left;
  7. margin:10px;
  8. padding:5px;
  9. text-align:center;
  10. }
  11. img {
  12.     width:70px;
  13.     height:70px;
  14. }
  15. .contenedorfoto span {
  16. color:#515151;
  17. float:right;
  18. font-family:Trebuchet MS;
  19. font-size:9pt;
  20. padding-left:5px;
  21. }

Código Codigo HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4.    <head>
  5.       <title>Galeria</title>
  6.     <link href="estilo.css" rel="stylesheet" type="text/css" />
  7.    </head>
  8. <body>
  9. <div id="principal">
  10.    <h3>GALERÍA CSS</h3>
  11.    <div class="contenedorfoto"><a href="#"><img src="1.jpg" border="0" alt=""/></a><span>Descripción de la imagen</span></div>
  12.    <div class="contenedorfoto"><a href="#"><img src="2.jpg" border="0" alt=""/></a><span>Descripción de la imagen</span></div>
  13.    <div class="contenedorfoto"><a href="#"><img src="3.jpg" border="0" alt=""/></a><span>Descripción de la imagen</span></div>
  14.    <div class="contenedorfoto"><a href="#"><img src="4.jpg" border="0" alt=""/></a><span>Descripción de la imagen</span></div>
  15.    <div class="contenedorfoto"><a href="#"><img src="5.jpg" border="0" alt=""/></a><span>Descripción de la imagen extrañamente larga</span></div>
  16. </div>
  17. </body>
  18. </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:
__________________
Frontend Developer
JS+HTML5+CSS3
Backend Developer
PHP+MySQL
  #10 (permalink)  
Antiguo 22/07/2009, 14:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Accesibilidad Web, sin tablas

En base a la galería que pones hecha en una lista (ul), mira a ver y comenta:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css </title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * { margin: 0px;
  7. padding: 0px; outline: 0;
  8. }
  9. body {
  10.     background-color: #ebeef2;
  11.     margin:20px;
  12. }
  13.  
  14. h3 {
  15.     color:#838c98;
  16. }
  17.  
  18. a {
  19.     text-decoration: none;
  20. }
  21.  
  22. #principal ul li span {
  23.     color:#515151;
  24.     font-family: Trebuchet MS;
  25.     font-size: 9pt;
  26.     margin-left:5px;
  27. }
  28.  
  29. #principal {
  30.     margin:0 auto;
  31.     position: relative;
  32. }
  33.  
  34. #principal ul {
  35.    
  36. }
  37.  
  38. #principal li {
  39.     display:inline;
  40.     float:left;
  41.     margin: 5px;
  42.     padding: 5px;
  43.     background: #cdcdcd;
  44.     width: 370px;
  45. }
  46. #principal ul li img {
  47.     border:1px solid #EEE;
  48.   float:left;
  49.   margin-right:5px;
  50. }
  51. </head>
  52. <div id="principal">
  53.     <h3>GALER&Iacute;A CSS - Listas</h3>
  54.     <ul>
  55.         <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>
  56.         <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>
  57.         <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>
  58.     </ul>
  59. </div>
  60. </body>
  61. </html>

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 22/07/2009, 15:04
Avatar de carscx  
Fecha de Ingreso: noviembre-2008
Mensajes: 227
Antigüedad: 9 años
Puntos: 10
Respuesta: Accesibilidad Web, sin tablas

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
  1. #
  2. * { margin: 0px;
  3. #
  4. padding: 0px; outline: 0;
  5. #
  6. }

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

Gracias por todo, Saludos,
__________________
Frontend Developer
JS+HTML5+CSS3
Backend Developer
PHP+MySQL
  #12 (permalink)  
Antiguo 22/07/2009, 15:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Accesibilidad Web, sin tablas

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 <p></p>.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 22/07/2009, 16:09
Avatar de carscx  
Fecha de Ingreso: noviembre-2008
Mensajes: 227
Antigüedad: 9 años
Puntos: 10
Respuesta: Accesibilidad Web, sin tablas

Cita:
Iniciado por kseso? Ver Mensaje
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 <p></p>.

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 <p></p>

De nuevo, muchisimas gracias,
__________________
Frontend Developer
JS+HTML5+CSS3
Backend Developer
PHP+MySQL
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:52.