Foros del Web » Creando para Internet » CSS »

Capa derrama contenido sobre otra

Estas en el tema de Capa derrama contenido sobre otra en el foro de CSS en Foros del Web. Amigos: Tengo un diseño tipico (header, 3 columnas y footer) y tengo el problema que la capa de la columna central (que yo llamo "cuerpo"), ...
  #1 (permalink)  
Antiguo 14/11/2007, 07:43
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Exclamación Capa derrama contenido sobre otra

Amigos:

Tengo un diseño tipico (header, 3 columnas y footer) y tengo el problema que la capa de la columna central (que yo llamo "cuerpo"), a veces invade el espacio de la capa "right".

Eso sucede cuando lo que tengo en "cuerpo" es mas largo (en contenido) que lo que hay en "right" ... entonces se derrama alla! (gracias desde ya!!!)

A continuacion los CSS:

body {
text-align : center;
margin : 10px auto;
}

#header {
background : #ffffff;
color : inherit;
border : 0px dashed #ffffff;
clear : both;
margin : 0 0 0px 0px;
padding-botton : 10px;
}

#menudo {
background : #ffffff;
color : inherit;
border : 0px dashed #ffffff;
clear : both;
margin : 0 0 0px 0px;
padding-botton : 10px;
}


#left {
background : #efefef;
color : inherit;
border : 0px dashed #ffffff;
width : auto;
float : left;
text-align : left;
margin-left: 10px;
padding-right : 40px;
}

#right {
background : #efefef;
color : inherit;
border : 0px dashed #ffffff;
float : right;
text-align : left;
margin-right: 10px;
padding-left : 40px;
}

#cuerpo {
background : #efefef;
color : inherit;
border : 0px dashed #ffffff;
width : auto 650px;
margin : 30px 10px 50px 250px;
text-align : left;
padding-right : 30px;
}

#footer {
background : #c9c9c9;
color : inherit;
border : 0px dashed #ffffff;
clear : both;
height : 30px;
width : auto;
margin : 10px 0 0 0;
padding : 10px;
}
__________________
Salu2!
  #2 (permalink)  
Antiguo 14/11/2007, 07:55
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Re: Capa derrama contenido sobre otra

<body>

<div id='header'>
</div>

<div id='menudo'>
</div>


<div id="contendedor">

<div id='left'>

<div id="widget">
</div>

</div>

<div id='right'>

<div id="widget">
</div>

<div id="widget">
</div>

<div id="widget" style="display:none">
</div>

</div>

<div id='cuerpo'>
<center>

</center>
</div>

</div>
<div id='footer'></div>

</body>
__________________
Salu2!
  #3 (permalink)  
Antiguo 14/11/2007, 08:06
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Re: Capa derrama contenido sobre otra

Si agrego la propiedad " overflow:hidden;" en #cuerpo .... en FireFox se arregla pero en IE.... empieza a derramar sobre e otro lado ("left")

__________________
Salu2!
  #4 (permalink)  
Antiguo 14/11/2007, 08:16
 
Fecha de Ingreso: marzo-2007
Ubicación: Santiago, Chile
Mensajes: 42
Antigüedad: 10 años, 8 meses
Puntos: 1
Re: Capa derrama contenido sobre otra

quizás es por los pixeles, revisa bien tu wireframe. (A las medidas le falta la terminacni px)
En tu header hay codigo mal escrito
padding-botton : 10px;

Debería ser BOTTOM
  #5 (permalink)  
Antiguo 14/11/2007, 08:25
axz
 
Fecha de Ingreso: mayo-2005
Mensajes: 360
Antigüedad: 12 años, 6 meses
Puntos: 10
Re: Capa derrama contenido sobre otra

Italico76 te sigo desde el otro foro ... oye, aparte de lo que comenta Skizobass, tienes un error que bien puede afectar el identificador ID debe ser único en tu página, y el id widgetlo asignas varias veces, esto no debería, aunque claro, nunca lo usas en los estilos, pero cuidado ...

revisando ...
  #6 (permalink)  
Antiguo 14/11/2007, 08:31
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Re: Capa derrama contenido sobre otra

Gracias chicos!!!!! ya corregi el problema ortografico.........y voy a hacer caso de no repetir el ID (aunque creia que eso era mejor para aplicar a todos las mismas propiedades)

Se me escapaban unos enlaces...y con DIV no los podia contener asi que hice la variacion reeemplazando DIV por TABLE y quedo asi (funcionando)


<table align='left' style='margin-top:25px; margin-left:25px; margin-right:25px;' >

bla bla bla (enlaces)

</table>

La tabla no tiene ni TR ni TD ni nada!!!!
__________________
Salu2!
  #7 (permalink)  
Antiguo 14/11/2007, 08:37
axz
 
Fecha de Ingreso: mayo-2005
Mensajes: 360
Antigüedad: 12 años, 6 meses
Puntos: 10
Re: Capa derrama contenido sobre otra

Italico76, no desistas de usar DIVS, jeje, al principio cuesta, pero cuando le entiendes te facilita muchas cosas ... en cuanto a lo que dices de aplicar a varios contenedores el mismo estilo es más bien la propiedad class a la que te refieres, para hacer referencia a la clase en los estilos utiliza el punto (.) algo así:

Código HTML:
<style type="text/css">
.widget
{
  color: red;
  background-color: black;
}
</style>
...
<div class="widget">contenido widget</div>
<div class="widget">contenido widget</div>
...
<div class="widget">contenido widget</div>
<div class="widget">contenido widget</div>
...
Saludos, ¿quieres que le sigamos intentando con DIVS o mejor lo dejamos por el momento?
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 02:04.