Foros del Web » Creando para Internet » CSS »

div autoampliable

Estas en el tema de div autoampliable en el foro de CSS en Foros del Web. Tengo un div "contenedor" con un div dentro llamado "contenido" , cuando lleno "contenido" se atoamplía hacia abajo para que quepa lo que pongo y ...
  #1 (permalink)  
Antiguo 27/10/2005, 15:24
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
div autoampliable

Tengo un div "contenedor" con un div dentro llamado "contenido" , cuando lleno "contenido" se atoamplía hacia abajo para que quepa lo que pongo y desborda por abajo al "contenedor ¿cómo se hace para que esto no suceda y el "contenedor" se autoamplíe también?
He probado con {overflow: auto;} y con {heigth: 100%} y no funciona.

#contenedor {
position: absolute;
left: 175px;
top: 261px;
width: 574;
height: 100%;
}
#contenido {
position: absolute;
top: 25px;
left: 20px;
background-color: #FFCC33;
width: 534px;
}

<div id="contenedor">
<div id="contenido">
<p>blabla blabla blabla blabla blabla blabla</p>
</div>
</div>

He buscado por el foro pero no encuentro pistas, gracias por la ayuda.
  #2 (permalink)  
Antiguo 27/10/2005, 16:01
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
es por el "position : absolute"
Cita:
Iniciado por http://www.ignside.net/man/css/posicionamiento.php
Los elementos "absolutamente" posicionados dentro de un documento HTML (y tambien los elementos "children" que engloba) no forman parte del fluir general del resto de elementos del documento. Su posición es asignada independientemente de la que ocupen el resto de los elementos del documento.

Por defecto, el contenido de una pagina (por ejemplo los bloques de texto de cada párrafo) se adapta automáticamente al tamaño de la ventana, alargando o acortando las líneas, etc, colocando un párrafo detrás de otro, segun se va leyendo el archivo, acomodándo entre si los distintos elementos que integran el documento. A esta adaptabilidad llamamos fluir (flow), o flujo html.

Pues bien, los elementos posicionados de forma absoluta no fluyen con los demás, colocándose de forma independiente, incluso superponiendose a otros elementos. Los elementos de este tipo, por ello, se consideran fuera del flujo HTML, en cuanto a que pueden colocarse en cualquier sitio del documento, independientemente de su situación en el código fuente
No hay necsidad muchas veces de posicionar un div de esa manera, podrias dejarlo asi:
Código:
#contenedor {
margin-left: 175px;
margin-top: 261px;
width: 574px;
}
#contenido {
margin-top: 25px;
margin-left: 20px;
background-color: #FFCC33;
width: 534px;
}
  #3 (permalink)  
Antiguo 27/10/2005, 17:31
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
Gracias por tus consejos RoC, efectivamente es como tú dices, así funciona muy bien, lo que sucede es que ahora no me funciona el "margin-top" (sí funciona el "margin left") la capa contenido queda pegada al borde superior de la capa contenedor y no hay manera de bajarla, también tengo una capa "pie" abajo que tiene que quedar separada del borde inferior e igualmente se queda pegada.

.contenedor {
margin-left: 175px;
margin-top: 160px;
width: 574px;
z-index: 2;
}
.contenido {
position: relative;
margin-top: 40px;
margin-left: 20px;
width: 534px;
padding-top: 60px;
padding-bottom: 40px;
padding-left: 20px;
padding-right: 20px;
z-index: 3;
}
.pie {
bottom: 10px;
margin-left: 20px;
width: 534px;
z-index: 3;
height: 20px;
padding-left: 20px;
padding-right: 20px;
}
  #4 (permalink)  
Antiguo 27/10/2005, 17:42
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
ponle un padding-top al contenedor y un margin-top al pie, quitale el bottom y el z-index
  #5 (permalink)  
Antiguo 27/10/2005, 17:55
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
Con el padding-top se ha arreglado lo del margen superior, pero con lo otro no se arregla el pie, si te he entendido bien, es esto:

.pie {
margin-top: 10px;
margin-left: 20px;
width: 534px;
height: 20px;
padding-left: 20px;
padding-right: 20px;
}

pero a mí no me funciona
Muchas gracias y disculpa tantas preguntas, es mi "primera vez"
  #6 (permalink)  
Antiguo 27/10/2005, 18:58
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
pon el html en todo caso
  #7 (permalink)  
Antiguo 27/10/2005, 19:20
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
Ahí va, lo he editado para que sea mas corto

<div id="contenedor" class="contenedor">
<div id="contenido" class="contenido">
<div id="titulo" class="titulo">fffffffffffff</div>
<img src="imagen.jpg" alt="imagen1" width="200" height="301" class="imgizquierda">
<p> texto texto texto texto texto texto </p>
<img src="imagen.jpg" alt="imagen1" width="200" height="133" class="imgderecha">
<p>texto texto texto texto texto</p>
</div>
<div id="pie" class="pie"><p>texto texto texto texto</p></div>
</div>

.contenedor {
padding-top: 30px;
margin-left: 175px;
margin-top: 160px;
width: 574px;
background-color: Blue;
z-index: 10;
}
.contenido {
margin-left: 20px;
margin-right: 20px;
background-color: #FFCC33;
width: 534px;
padding: 30 20 40 20px;
z-index: 3;
.pie {
margin-top: 10px;
margin-left: 20px;
width: 534px;
background-color: #FFCC33;
height: 20px;
text-align: center;
padding: 10 20 10 20px;
}
  #8 (permalink)  
Antiguo 27/10/2005, 19:46
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
mmmm creo que te falta cerrar una llave, pero cual es el problema del pie, yo lo veo asi
  #9 (permalink)  
Antiguo 27/10/2005, 19:53
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
Yo tambien lo veo así, lo que quiero es levantarlo unos px para que no quede pegado al borde del contenedor
  #10 (permalink)  
Antiguo 27/10/2005, 19:59
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
ahhhhhhh
entonces ponle un padding-bottom al contenedor
y ese <div id="titulo" class="titulo">fffffffffffff</div> debes reemplazarlo por un
<h1 id="titulo" class="titulo">fffffffffffff</h1>
y ¿ porque eso de repetir el id y class, si solo aplicas estilo a las clases?
  #11 (permalink)  
Antiguo 27/10/2005, 20:06
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
Por fin. No hay nada como saber... los fallos que me comentas y que ahora mismo corrijo se deben a lo poquísimo que sé, pues estoy dando los primeros pasos, es mi primera web hecha de mala manera con tablas y que estoy intentando pasar a capas y Css, un auténtico lío... de verdad.
Muchas gracias
  #12 (permalink)  
Antiguo 28/10/2005, 09:34
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
de repente esto te sirve:
http://html.conclase.net
http://www.ignside.net/man/css/
Diseñorama :Tutoriales:Diseña una página con código semántico
Diseñorama :Articulos:El Modelo de Cajas
y para mi algo que es super didactico y basico:
El tuto de los tes chanchitos webmasters:
Capitulo 1 , Capitulo 2, Capitulo 3
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 07:45.