Foros del Web » Creando para Internet » CSS »

Listas desordenadas anidadas y Display

Estas en el tema de Listas desordenadas anidadas y Display en el foro de CSS en Foros del Web. Tengo dos listas desordenadas (llamemosles sublistas), anidadas dentro de otra lista, también desordenada (llamemosle lista principal). El tema es que quiero que las sublistas se ...
  #1 (permalink)  
Antiguo 21/06/2006, 12:23
Avatar de caneva  
Fecha de Ingreso: junio-2006
Ubicación: Sevilla (España)
Mensajes: 81
Antigüedad: 11 años, 6 meses
Puntos: 1
Listas desordenadas anidadas y Display

Tengo dos listas desordenadas (llamemosles sublistas), anidadas dentro de otra lista, también desordenada (llamemosle lista principal). El tema es que quiero que las sublistas se muestren como una lista normal, pero a su vez que la lista principal que las contiene haga que se muestren las sublistas como columnas dentro de ella misma.

El código es el siguiente:

Código:
<div id="listas">
<p>Bla,bla,bla,bla</p>
<ul> <!-- Lista principal -->    
    <li>
        <h1>Lista 1:</h1>
        <ul> <!-- Lista secundaria 1 -->
            <li>Elemento 1.1</li>
            <li>Elemento 1.2</li>
        </ul>
    </li>
    <li>
        <h1>Lista 2:</h1>
        <ul> <!-- Lista secundaria 2-->
            <li>Elemento 2.1</li>
            <li>Elemento 2.2</li>
        </ul>
    </li>
</ul>
</div>
Cita:
#listas p
{
margin: 0px;
border: 0px;
padding: 15px;
text-indent: 25px;
background: #CCCCCC;
}

#listas ul li h1
{
padding: 8px 8px 8px 10px;
margin: 0px;
border: 0px;
font: 18px Verdana, "Trebuchet MS", Arial, sans-serif;
background: #999999;
}

#listas ul
{
margin: 0px;
border: 0px;
padding: 15px;
}

#listas ul li /*Esto se supone que hace que la lista se vea en dos columnas*/
{
display: inline;
}

#listas ul li ul li
{
display: list-item; /*Esto se supone que hace que las dos sublistas se vean como una lista normal*/
list-style-type: square;
margin: 0px 0px 0px 20px;
border: 0px;
padding: 0px;
}
Aprobechando el post me gustaría preguntar si #listas ul li h1 {} es equivalente a #listas h1 {} en mi caso, porque he probado y el resultado es el mismo, aunque supongo que la primera es más correcta que la segunda ¿no?:

Gracias por su tiempo.
__________________
Cita:
"El camino empieza renunciando al control, y volviéndose flexibles."

Última edición por caneva; 21/06/2006 a las 19:26
  #2 (permalink)  
Antiguo 21/06/2006, 19:27
Avatar de caneva  
Fecha de Ingreso: junio-2006
Ubicación: Sevilla (España)
Mensajes: 81
Antigüedad: 11 años, 6 meses
Puntos: 1
Para cumplimentar la información el código anterior se muestra así en el navegador:


Cuando el objetivo es que se vea así:

Sin usar float claro, he aquí el problema con las listas desordenadas anidadas y la propiedad display.
__________________
Cita:
"El camino empieza renunciando al control, y volviéndose flexibles."
  #3 (permalink)  
Antiguo 22/06/2006, 10:56
Avatar de caneva  
Fecha de Ingreso: junio-2006
Ubicación: Sevilla (España)
Mensajes: 81
Antigüedad: 11 años, 6 meses
Puntos: 1
Por más vueltas que le doy no se que estoy haciendo mal, o hay algún error sintáctico, o bien conceptual, o bien simplemente que lo que pretendo hacer es inviable del todo. Agradecería que alguien me dijera si es posible al menos y a partir de ahí ya intentaré buscarme la vida; me gustaría saber que el tunel tiene salida antes de meterme de lleno.
__________________
Cita:
"El camino empieza renunciando al control, y volviéndose flexibles."
  #4 (permalink)  
Antiguo 23/06/2006, 21:09
 
Fecha de Ingreso: febrero-2005
Mensajes: 670
Antigüedad: 12 años, 10 meses
Puntos: 0
¿No querés usar float por algún motivo en particular?
Porque con un mínimo cambio a tu hoja de estilos podrías lograr el efecto que buscás:
Código:
#listas p
{
	margin: 0px;
	border: 0px;
	padding: 15px;
	text-indent: 25px;
	background: #CCCCCC;
}

#listas ul li h1
{
	padding: 8px 8px 8px 10px;
	margin: 0px;
	border: 0px;
	font: 18px Verdana, "Trebuchet MS", Arial, sans-serif;
	background: #999999;
}

#listas ul
{
	margin: 0px;
	border: 0px;
	padding: 15px 0;
}

#listas ul li /*Esto se supone que hace que la lista se vea en dos columnas*/
{
	list-style-type: none;
	float: left;
	margin-left: 15px;
}

#listas ul li ul li
{
	display: list-item; /*Esto se supone que hace que las dos sublistas se vean como una lista normal*/
	float: none;

}
Código:
	<div id="listas">
		<p>Bla,bla,bla,bla</p>
		<ul> <!-- Lista principal -->    
			<li>
				<h1>Lista 1:</h1>
				<ul> <!-- Lista secundaria 1 -->
					<li>Elemento 1.1</li>
					<li>Elemento 1.2</li>
				</ul>
			</li>
			<li>
				<h1>Lista 2:</h1>
				<ul> <!-- Lista secundaria 2-->
					<li>Elemento 2.1</li>
					<li>Elemento 2.2</li>
				</ul>
			</li>
		</ul>
	</div>
Suerte
Fede
__________________
Federico H. García
Desarrollo Web
www.federicog.com.ar
  #5 (permalink)  
Antiguo 26/06/2006, 10:57
 
Fecha de Ingreso: febrero-2006
Ubicación: Buenos Aires
Mensajes: 54
Antigüedad: 11 años, 10 meses
Puntos: 0
Quizas te pueda ayudar leer como se manejan aqui las listas, tambien:
http://somerandomdude.net/projects/webdev/divless/

Saludos! Damian.
__________________
pan con pan comida de redundantes.

www.objetoepsilon.com.ar
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 19:28.