Foros del Web » Creando para Internet » CSS »

listas desordenadas en capa ajustable

Estas en el tema de listas desordenadas en capa ajustable en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/06/2006, 13:46
 
Fecha de Ingreso: marzo-2006
Ubicación: Medellín
Mensajes: 93
Antigüedad: 11 años, 8 meses
Puntos: 0
listas desordenadas en capa ajustable

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!!
__________________
"Conocimiento adquirido y no compartido se perderá para siempre" :cool:
  #2 (permalink)  
Antiguo 17/06/2006, 14:00
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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?
__________________
oohh... quisiera ser godines!!!
  #3 (permalink)  
Antiguo 18/06/2006, 14:15
 
Fecha de Ingreso: marzo-2006
Ubicación: Medellín
Mensajes: 93
Antigüedad: 11 años, 8 meses
Puntos: 0
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!!
__________________
"Conocimiento adquirido y no compartido se perderá para siempre" :cool:
  #4 (permalink)  
Antiguo 18/06/2006, 21:46
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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>
__________________
oohh... quisiera ser godines!!!
  #5 (permalink)  
Antiguo 19/06/2006, 15:46
 
Fecha de Ingreso: marzo-2006
Ubicación: Medellín
Mensajes: 93
Antigüedad: 11 años, 8 meses
Puntos: 0
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">
<!--
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>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>
__________________
"Conocimiento adquirido y no compartido se perderá para siempre" :cool:
  #6 (permalink)  
Antiguo 19/06/2006, 20:30
Avatar de caneva  
Fecha de Ingreso: junio-2006
Ubicación: Sevilla (España)
Mensajes: 81
Antigüedad: 11 años, 6 meses
Puntos: 1
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?
__________________
Cita:
"El camino empieza renunciando al control, y volviéndose flexibles."
  #7 (permalink)  
Antiguo 19/06/2006, 21:44
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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.
__________________
oohh... quisiera ser godines!!!
  #8 (permalink)  
Antiguo 20/06/2006, 13:22
 
Fecha de Ingreso: marzo-2006
Ubicación: Medellín
Mensajes: 93
Antigüedad: 11 años, 8 meses
Puntos: 0
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!!
__________________
"Conocimiento adquirido y no compartido se perderá para siempre" :cool:
  #9 (permalink)  
Antiguo 20/06/2006, 15:51
 
Fecha de Ingreso: febrero-2006
Ubicación: Buenos Aires
Mensajes: 54
Antigüedad: 11 años, 10 meses
Puntos: 0
No entiendo para que es necesario agregar el clear:both? no basta sacandole el "float:left" al tag ul? porque usan posicion relativa?
  #10 (permalink)  
Antiguo 20/06/2006, 22:34
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
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".
__________________
oohh... quisiera ser godines!!!
  #11 (permalink)  
Antiguo 21/06/2006, 11:51
 
Fecha de Ingreso: febrero-2006
Ubicación: Buenos Aires
Mensajes: 54
Antigüedad: 11 años, 10 meses
Puntos: 0
ah, ok, ahora entendi..
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 00:10.