Foros del Web » Creando para Internet » CSS »

La capa contenedora se queda hasta con lo que está fuera.

Estas en el tema de La capa contenedora se queda hasta con lo que está fuera. en el foro de CSS en Foros del Web. Hola! tengo un problema con mi capa contenedora. Actualmente el resultado que tengo es el siguiente: img11.imageshack.us/img11/1466/55251109.jpg Pero cuando añado otra nueva capa después de ...
  #1 (permalink)  
Antiguo 06/05/2009, 03:22
 
Fecha de Ingreso: mayo-2008
Mensajes: 28
Antigüedad: 9 años, 7 meses
Puntos: 0
La capa contenedora se queda hasta con lo que está fuera.

Hola! tengo un problema con mi capa contenedora. Actualmente el resultado que tengo es el siguiente:

img11.imageshack.us/img11/1466/55251109.jpg

Pero cuando añado otra nueva capa después de la capa contenedora (la blanca yy grande) ocurre lo siguiente:

img11.imageshack.us/img11/5838/91373839.jpg

El codigo del archivo php es el siguiente:

Código:
<div id="cabecera">
		<img src="cabecera.png"/>
</div>

<br/>


<div id="contenedor_botonera">
	<div id="boton" class="boton_actual">
		Principal
	</div>
	<div id="boton" class="vacio">
		Información
	</div>
	<div id="boton" class="vacio">
		Ayuda
	</div>
</div>
	
<br/>

<div id="contenedor">

	<div id='bloque' class="bloque_principal">
		Bloque uno
	</div>
	
	<div id="contenedor_detalle">
		<div id='bloque' class="bloque_detalle_izquierda">
			Bloque dos
		</div>
		<div id='bloque' class="bloque_detalle_derecha">
			Bloque tres
		</div>
		<br/>
		<div id='bloque' class="bloque_detalle_izquierda">
			Bloque dos
		</div>
		<div id='bloque' class="bloque_detalle_derecha">
			Bloque tres
		</div>
	</div>
<div class='final'/>
</div>

<div id="contenedor">
<img src='firefox.png'/>
</div>
Y el CSS es el siguiente:

Código:
html, body {
background-color: #AAFF28;
text-align:center;
padding-top: 10px;
height: 100%;
}


#cabecera{
text-align: center;
width: 700px;
margin: 0px auto;
}

#contenedor_botonera{
text-align:center;
width: 700px;
margin: 0px auto;
}

#boton{
background-color: white;
border-top: 2px solid #77B31D;
border-left: 2px solid #77B31D;
border-right: 2px solid #77B31D;
font: 12px Verdana, Arial, Helvetica, sans-serif;
margin: 0px auto;
padding-top: 2px;
padding-left: 20px;
padding-right: 20px;
height: 16px;
float: left;
position: relative;
-webkit-border-top-left-radius: 40px;
-webkit-border-top-right-radius: 40px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-topright: 40px;
}

.boton_actual{
border-bottom: 2px solid white;
}

.vacio{}

#contenedor{
text-align:center;
background-color: white;
border: 2px solid #77B31D;
width: 700px;
margin: 0px auto;
padding: 15px 30px;
-moz-border-radius-bottomright: 40px;
-moz-border-radius-bottomleft: 40px;
-moz-border-radius-topright: 40px;
-moz-border-radius-topleft: 40px;
-webkit-border-top-left-radius: 40px;
-webkit-border-top-right-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-webkit-border-bottom-right-radius: 40px;
}

#contenedor_detalle{
border: 3px double #77B31D;
padding: 5px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
float:left;
width:230px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}

#bloque{
padding: 5px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
float:left;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}


.bloque_principal{
background-color: black;
color: white;
width: 400px;
margin-right:40px;
}

.bloque_detalle_izquierda{
background-color: #77B31D;
color: white;
width: 100px;
margin-right: 10px;
margin-bottom: 5px;
}

.bloque_detalle_derecha{
background-color: black;
color: white;
width: 100px;
}

.final{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

¿Alguna sugerencia para que la segunda capa se coloque correctamente?
  #2 (permalink)  
Antiguo 06/05/2009, 09:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: La capa contenedora se queda hasta con lo que está fuera.

Sin ver cuál es cada contenedor me aventuro a comentarte:
Cita:
#contenedor {padding: 15px 30px;}
le estás marcando una separación de todos sus contenidos respecto a los bordes (límites) de él.

Así que a los elementos contenidos en #contenedor que quieras neutralizar esa separación deberás darle un margen negativo para llevarlos a los bordes (límites) de él.

Por cierto, todas las propiedades que comienzan por "-moz" sólo te van a funcionar en el explorador Firefox.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 06/05/2009, 18:10
 
Fecha de Ingreso: mayo-2008
Mensajes: 28
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: La capa contenedora se queda hasta con lo que está fuera.

kseso gracias por responder, en primer lugar decirte que sólo estoy probando con la web por toquetear un poco de css, no es nada importante, por eso estoy usando para probar codigos para mozilla y safari (con webkit).

Con respecto a lo del padding, mañana probaré a ver si con este en negativo se soluciona.

Muchas gracias de nuevo
  #4 (permalink)  
Antiguo 07/05/2009, 04:18
 
Fecha de Ingreso: mayo-2008
Mensajes: 28
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: La capa contenedora se queda hasta con lo que está fuera.

No se ha solucionado :(
  #5 (permalink)  
Antiguo 07/05/2009, 06:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: La capa contenedora se queda hasta con lo que está fuera.

Estás son tus imágenes:




¿Cuál es tu objetivo? ¿Que el contenedor con las esquinas redondeadas con la imagen de ff se ponga por debajo del que muestras en la primera pic?

Si es así, no te supe comprender antes.

1º: como "contenedor" lo usas varias veces en el mismo documento debe ser una clase (.contendor) y no tener un identificar único (#contendor)
Pero eso no influye.

Puedes añadir a #contenedor la propiedad "clear: both", también puedes crear una clase nueva en tu css:
Cita:
.corte {clear: both;}
y en el html añadir
Cita:
<div id="contenedor">
<!-- contenido de "contenedor"-->
</div> <!-- cierre de "#contenedor"-->
<div class="corte"></div>
<div id="contenedor">
<!-- contenido del 2º "contenedor"-->
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 07/05/2009, 11:52
 
Fecha de Ingreso: mayo-2008
Mensajes: 28
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: La capa contenedora se queda hasta con lo que está fuera.

Gracias por subir las imágenes compañero. Si te fijas en el html, al final, dentro de la capa contenedora hay un <div class='final'/>, la clase .final hace el clear: both, pero no me lo soluciona. Te invito a que copies el css y el html y lo pruebes.

Un saludo y gracias!
  #7 (permalink)  
Antiguo 07/05/2009, 12:18
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: La capa contenedora se queda hasta con lo que está fuera.

Lo que te ocurre es que te has olvidado de cerrar el primer #contenedor. Te "comiste" un </div> que te pongo resaltado. Añade eso y ya se irá a su lugar
Cita:
<div class='final'/>
</div>
</div>
<div id="contenedor">
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 08/05/2009, 03:18
 
Fecha de Ingreso: mayo-2008
Mensajes: 28
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: La capa contenedora se queda hasta con lo que está fuera.

¡Es verdad! vaya fallo...gracias por responder!
  #9 (permalink)  
Antiguo 08/05/2009, 05:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: La capa contenedora se queda hasta con lo que está fuera.

Nah, no se las merecen.
El mérito fue tuyo al invitarme a copiar el código y de mi editor de código. Fue él quién me lo dijo
No se qué programa utilizas para escribir los códigos. Cualquiera medianamente bueno resalta esos despistes.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 08/05/2009, 09:21
 
Fecha de Ingreso: mayo-2008
Mensajes: 28
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: La capa contenedora se queda hasta con lo que está fuera.

El bloc de notas xD
  #11 (permalink)  
Antiguo 08/05/2009, 10:17
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: La capa contenedora se queda hasta con lo que está fuera.

Que editor de código utilizas para ver esos errores???
  #12 (permalink)  
Antiguo 08/05/2009, 10:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: La capa contenedora se queda hasta con lo que está fuera.

¿yo?
El pspad editor
Creo que los hay mejores, pero yo me siento cómodo con él.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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:55.