Foros del Web » Creando para Internet » CSS »

Lista de definicion horizontal

Estas en el tema de Lista de definicion horizontal en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/10/2005, 12:21
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 21 años, 1 mes
Puntos: 10
Lista de definicion horizontal

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>
__________________
oohh... quisiera ser godines!!!
  #2 (permalink)  
Antiguo 19/10/2005, 17:58
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
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
  #3 (permalink)  
Antiguo 19/10/2005, 19:30
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 21 años, 1 mes
Puntos: 10
Gracias Rafael... pero mi idea es hacer todfo con una sola lista.
__________________
oohh... quisiera ser godines!!!
  #4 (permalink)  
Antiguo 20/10/2005, 00:38
Avatar de axiertxo  
Fecha de Ingreso: octubre-2005
Ubicación: España
Mensajes: 387
Antigüedad: 18 años, 5 meses
Puntos: 0
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">
<!--
#novedades {
margin:0;
padding:0;
}

#novedades dt {
width: 160px;
margin:0;

display:inline;
}

#novedades dd{
float:left;
margin:0;
padding:5px;
width: 160px;
}


-->
</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
__________________
El mundo exige resultados. No le cuentes a otros tus dolores del parto. Muéstrales al niño.
  #5 (permalink)  
Antiguo 20/10/2005, 10:11
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
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.
  #6 (permalink)  
Antiguo 20/10/2005, 17:20
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 21 años, 1 mes
Puntos: 10
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 ...
__________________
oohh... quisiera ser godines!!!
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 02:09.