Hola Borja,
Asi por encima, creo que podrias agrupar los div y los dl
de:
<div id="izquierda">
<dl id="fotos">
a:
<dl id="fotos">
y los estilos que le aplicas a izquierda y fotos se los aplicas todos a
fotos.
lo mismo con derecha.
Y asi quitas los ids izquierda y derecha, que no se refieren al contenido o
estructura sino a la presentación.
(si en un furturo decides ponerlo al reves seria incongruente)
Y por otro lado en:
#fotos dl{
}
estas dando estilo a los dl DENTRO del id foto, con lo que no hace nada.
Puedes poner:
#fotos{
}
lo mismo con :
#textos dl{
}
Seran las prisas, como yo, que pongo <li>...<li/>
Un saludo,
Edu
----- Original Message -----
From: "Kaktum" <[EMAIL PROTECTED]>
To: "Ovillo, la lista de CSS en castellano" <ovillo@lists.ovillo.org>
Sent: Wednesday, May 04, 2005 8:27 PM
Subject: Re: [Ovillo] Tabla compleja: ¿Accesible?
Mi gran problema es que la tabla que quiero hacer contiene imagenes y
textos, y presentados de manera lineal no son muy estéticos.
Con todo lo que me habeis dicho se me ha ocurrido crear dentro del mi
<div> "contenedor" otros <div> con anchos en % (Ya que quiero un
diseño liquido 100%) en los que presentaré los datos con listas de
definición, de manera que pueda simular una tabla. Por ejemplo, puedo
poner las fotos en la izquierda y los textos en la derecha. Además asi
podria controlar independientemente con el CSS los atributos de los
<dl> <dt> y <dd> para la parte de fotos y para la parte de texto.
La cosa quedaría algo así
Código del HTML:
<!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>
<title>Ficha del animal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<style>
#contenedor {
width: 100%;
font-family: sans-serif;
}
#izquierda {
float: left;
width: 50%;
}
#derecha {
float: left;
width: 40%;
margin-left: 1em;
}
#fotos dl{
width: 100%;
border: 1px solid #cccccc;
}
#fotos dt{
margin-bottom:2.4em;
padding: -2.4em;
width: 100%;
font-weight:bold;
border: 1px solid #666666;
background-color: #99CC66;
}
#fotos dd{
width: 100%;
border: 1px solid #cccccc;
margin-left: 0%;
margin-top: -2.4em;
padding: -3.4em;
background-color: #FFFFFF;
}
#textos dl{
width: 100%;
border: 1px solid #cccccc;
}
#textos dt{
margin-bottom: 2.4em;
padding: -2.4em;
width: 30%;
margin-left: 0%;
border: 1px solid #666666;
background-color: #99CC66;
font-weight:bold;
}
#textos dd{
width: 70%;
border: 1px solid #cccccc;
margin-left: 31%;
margin-top: -3.5em;
padding: -2.4em;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div id="contenedor" title="Ficha del animal">
<h2>Ficha del animal</h2>
<div id="izquierda">
<dl id="fotos">
<dt>Imagen</dt>
<dd><img src="buho.jpg"/></dd>
<dt>Distribución</dt>
<dd><img src="distrib_buho.jpg"/></dd>
<dt>Hábitat</dt>
<dd><img src="habitat.jpg" alt="Imagen Hábitat"/></dd>
</dl>
</div>
<div id="derecha">
<dl id="textos">
<dt>Nombre científico</dt>
<dd> Buho buho</dd>
<dt>Orden</dt>
<dd>Strigiformes</dd>
<dt>Familia</dt>
<dd>Strigidos</dd>
</dl>
</div>
</div>
</body>
</html>
----------------------------------------------------------------
¿Está bien hecho?
Gracias a [EMAIL PROTECTED] por la ayuda. Un saludo:
Borja Sanz
kaktum
_______________________________________________
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://ovillo.org/mailman/listinfo/ovillo
_______________________________________________
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://ovillo.org/mailman/listinfo/ovillo
