Lista de definicion horizontal

safe · #1 (**permalink**) 19/10/2005, 12:21

Quiero utilizar un lista de definicion para mostrar un informacion que tiene tres titulos y sus respectivos textos.
La idea es mostrar los tres conjuntos en tres columnas donde en cada una sale el titulo y abajo su texto.
Tengo casi todo solucionado salvo que si a los DT no le pongo "display: inline" me aparece cada "columna" desplazada para abajo justo a la altura del DT anterior. Y si si se lo pongo no puedo darle un anco especifico, y los 3 DTs me quedan todos pegaditos.

Les dejo el codigo para ver si alguno de los expertos me ayuda a ver la luz (espero que no sea la del final del tunel!):

Código:

<!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">
<head>
<style type="text/css">
<!--
#novedades {
	margin:0;
	padding:0;
}

#novedades dt {
	width: 160px;
	margin:0;
	padding:0;
	display:inline;
}

#novedades dd{
	float:left;
	margin:0;
	padding:5px;
	width: 160px;
}
-->
</style>
</head>

<body>
<dl id="novedades">
	<dt>Avisos Clasificados</dt>
	<dd>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
		<a href="#">Ingresar</a>
	</dd>
	<dt>Guia de Odontologos</dt>
	<dd>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
		<a href="#">Ingresar</a>
	</dd>
	<dt>Empresas</dt>
	<dd>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
		<a href="#">Ingresar</a>
	</dd>
</dl>
</body>
</html>

Rafael · #2 (**permalink**) 19/10/2005, 17:58

A ver que tal

Código PHP:

   
<dl style="float: left; width: 100; display: block;">

<dt>Hola

<dd>Adios

</dl>

 
 
<dl style="float: left; width: 100; display: block;">

<dt>Hola

<dd>Adios

</dl>

safe · #3 (**permalink**) 19/10/2005, 19:30

Gracias Rafael... pero mi idea es hacer todfo con una sola lista.

axiertxo · #4 (**permalink**) 20/10/2005, 00:38

ra en que lo tienes hecho ya la solucion que he creido conveniente es esta

Cita:

<!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">
<head>
<style type="text/css">

</style>
</head>

<body>
<dl id="novedades">
<dt style="padding-right:50px;">Avisos Clasificados</dt>
<dd>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
<a href="#">Ingresar</a>
</dd>
<dt style="padding-right:38px;">Guia de Odontologos</dt>
<dd>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
<a href="#">Ingresar</a>
</dd>
<dt>Empresas</dt>
<dd>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.
<a href="#">Ingresar</a>
</dd>
</dl>
</body>
</html>

Lo unico que hay que hacer es poner un estilo al DT con un padding derecho. Lo malo de esta tecnica es que el padding ira en funcion del ancho del titular. Pero por lo menos te he solucionado el problema.

Saludos

Rafael · #5 (**permalink**) 20/10/2005, 10:11

Solo que cuando reduces la ventana del navegador los dt bajan por pedacitos cuando el dd ya cambió de renglón, como que le hace falta un contenedor superior, que en ese caso lo lógico sería el dl.

safe · #6 (**permalink**) 20/10/2005, 17:20

Muchas gracias a los dos por responder... voy probar las diferentes alternativas (las suyasy las que encontre con google) y veré cual se adapta mejor ...