listas desordenadas en capa ajustable

arleyb · #1 (**permalink**) 17/06/2006, 12:46

Sucede que tengo una lista desordenada dentro de una capa que tiene un ancho de 637px en el centro de la pantalla, deseo que toda la lista esté dentro de un cuadrado con un fondo de color en el cual su ancho se ajuste al ancho del contendio de la lista y su alto se ajuste al numero de items de la lista y poder darle un poco de ubicacion. La verdad es que he intentado de mil maneras hacerlo y no lo he logrado, he buscado en varias partes y no he podido darle solución a algo tan aparentemente fácil. Necesito la ayudita de alguien que sepa como arreglarlo, mil gracias!!

safe · #2 (**permalink**) 17/06/2006, 13:00

hola arleyb. No me queda muy claro que es lo que queres lograr. ¿quieres que la capa con un ancho de 637px se ajuste al ancho de la lista o quieres que adentro de esa capa este la lista con un fondo de color?

arleyb · #3 (**permalink**) 18/06/2006, 13:15

Haber, lo que quiero es que dentro de esa capa de 637px exista otra capa que contiene una lista desordenada, pero que esa misma capa se ajuste al ancho del texto de la lista y tenga un color de fondo (la capa de 637px debe permanecer tal y como esta, sin ninguna modificación). Gracias!!

safe · #4 (**permalink**) 18/06/2006, 20:46

a ver si este ejemplo te sirve.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
<!--
div#contenedor {
	width: 637px; 
	background-color:#333; 
	margin: 50px auto; 
	padding:25px;
	overflow:hidden;
}
div#contenedor ul { 
	float:left;
	background-color:#CCC;
	padding: 20px;
	position:relative;
	top: 0;
	left: 50px;
}
-->
</style>
</head>
<body>
<div id="contenedor">
  <ul>
  	<li>aaaaaaaaaaaaaa</li>
	<li>bbbbbbbbbbbbbbbbbbb</li>
	<li>cccccccccccccccccccccccccccccccccccccccccccccc</li>
	<li>ddddddddddddddddddddddddddd</li>
  </ul>
</div>
</body>
</html>

arleyb · #5 (**permalink**) 19/06/2006, 14:46

Safe, muchas gracias por tu respuesta, pero surge un problema al agregar después de la lista up+arrafo y es que éste queda alrededor de la capa de la lista y por debajo; como haría para que el texto apareciera debajo del recuadro en donde se encuentra la lista y no que aparesca a su lado derecho?

Ejemplo:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">

</style>
</head>
<body>
<div id="contenedor">
<ul>
<li>aaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbbbbb</li>
<li>cccccccccccccccccccccccccccc</li>
<li>ddddddddddddddddddddddddddd</li>
</ul>
<p>Nam quis quam at nunc pretium eleifend. Praesent ipsum sapien, aliquam a, scelerisque sit amet, consectetuer in, arcu. Maecenas at wisi in augue tempor tincidunt. Fusce viverra ante gravida quam. Vestibulum varius lacus vitae lorem. Sed malesuada. Maecenas non urna vitae metus elementum imperdiet. Donec justo enim, pulvinar ultricies, dapibus aliquam, laoreet sed, libero. Ut odio purus, ultricies in, condimentum non, tincidunt ac, odio. Nulla eget velit. Suspendisse massa. asdasdasd praesent tincidunt. Nam quis quam at nunc pretium eleifend.asdasdasdsad. Maecenas at wisi in augue tempor tincidunt. Fusce viverra ante gravida quam. Vestibulum varius lacus vitae lorem. Sed malesuada. Maecenas non urna vitae metus elementum imperdiet. Donec justo enim, pulvinar ultricies, dapibus aliquam, laoreet sed, libero. Ut odio purus, ultricies in, condimentum non, tincidunt ac, odio. Nulla eget velit. Suspendisse massa. asdasdasd praesent tincidunt. Nam quis quam at nunc pretium eleifend.asdasdasdsad.</p>
</div>
</body>
</html>

caneva · #6 (**permalink**) 19/06/2006, 19:30

Código:

#contenedor p
{
clear: both;
margin: 0;
border: 0;
padding: 0;
}

Prueba añadiendo eso. Porcierto, ¿por qué usáis "div#identificador" en vez de "#identificador" directamente?

safe · #7 (**permalink**) 19/06/2006, 20:44

tendrias que agregar esto en el CSS

Código:

div#contenedor p{
	clear:both;
}

Perdon, no habia leido el post de caneva.

Caneva: yo por lo general uso div#id por costumbre nada mas. Se me hace mas facil a la hora de editar el CSS.

arleyb · #8 (**permalink**) 20/06/2006, 12:22

Muchas gracias por su colaboración, sirvió a la perfección aunque a la hora de colocarle un poco de posición en el IE se ven unas que otras incompatibilidades con respecto a el Firefox, pero de todas formas mil gracias!!

epoj · #9 (**permalink**) 20/06/2006, 14:51

No entiendo para que es necesario agregar el clear:both? no basta sacandole el "float:left" al tag ul? porque usan posicion relativa?

safe · #10 (**permalink**) 20/06/2006, 21:34

Hola epoj...
El float:letf; es para que el ancho del ul se adapte al ancho del texto mas largo. Por ende es necesario usar el clear:both; para que el parrafo se posicione abajo y no al lado del ul flotante.
Y lo de la posicion relativa lo puse porque arley pidio "poder darle un poco de ubicacion".

epoj · #11 (**permalink**) 21/06/2006, 10:51

ah, ok, ahora entendi..