Foros del Web » Creando para Internet » CSS »

problema con posiciones css

Estas en el tema de problema con posiciones css en el foro de CSS en Foros del Web. Tengo cierto problemilla con las posiciones resulta que teng o un div con id contenido y otro con id lateral que esta n e nglobados ...
  #1 (permalink)  
Antiguo 17/04/2008, 02:35
 
Fecha de Ingreso: enero-2007
Mensajes: 3
Antigüedad: 10 años, 10 meses
Puntos: 0
problema con posiciones css

Tengo cierto problemilla con las posiciones resulta que teng o un div con id contenido y otro con id lateral que esta n e nglobados en un id cuerpo.

La intencion de la web es q ue s ea liquida, el problema que al redimensionar la we b l a c apa con id contenido se come la capa con id latera l.
A part e es conseguir que sea toda la web liquida y uno de los pr oblemas es que me crea un espacio a la izquierda del id contenido.

Os dejo la direccion de la web http://www.newbalearen.com/~toni/
Alguna solucion.

CSS

html,body{
margin: 0;
padding: 0;
background-color: white;
font-family: "Verdana";
font-size: 0.75em;
line-height: 14px;
overflow: auto;
width: 100%;
} color: #ffcc00;

#contenedor {
width: 100%;
}
#cabecera{
width: 100%;
height: 158px;
background: url(../img/background.gif) repeat-x ;
}
#cabecera .left{
position: absolute;
top: 0;
left: 0;
width: 566px;
height: 125px;
/*float: left;*/
background: url(../img/left.png) no-repeat left;
}
#cabecera .right{
background: url(../img/right.png) no-repeat right ;
width: 500px;
height: 125px;
position: absolute;
top: 0;
right: 0;
}
#banner {
width: 100%;
height: 150px;
background: url(../img/banner_fondo.jpg) repeat-x bottom;
}
#cuerpo {
position: absolute;
top: 0;
left: 0;
width: 100%;
/*display: none;*/
}
/*lateral*/

#lateral{
position:absolute;
top: 180px;
left:10px;
color: white;
/*width: 20%;*/
/*display: none;*/
/*float: left;*/
}
#lateral .top {
background: url(../img/top_lateral.png) no-repeat ;
width: 190px;
height: 19px;
position: relative;
top:0;
}
#lateral .bottom {
background: url(../img/bottom_lateral.png) no-repeat ;
width: 190px;
height: 19px;
position: relative;
bottom:0;
}

/*Contenido*/

#contenido {
position:absolute;
top:320px;
right: 0;
margin-left: 200px;
background: olive;
min-height: 100%;
width: 80%;
}
#recomendaciones {
padding: 10px;
}
#recomendaciones #recomendacion {
background: black;
height: 200px;
width: 50%;
float: left;
}
#recomendaciones #superoferta {
width: 48%;
height: 480px;
background: aqua;
float: right;
}
#buscador{
height: 100px;
background: lime;
}
#footer{
height: 33px;
background: url(../img/menu.gif) repeat-x black;
text-align: center;
color: white;
position: absolute;
bottom: 0;
width: 100%;
}
  #2 (permalink)  
Antiguo 17/04/2008, 02:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: problema con posiciones css

Pues esto se debe a que estás poniendo todo en posiciones absolutas, y mientras al lateral le marcas la distancia desde la izquierda (left: 10px;), al contenido se lo marcas desde la derecha (right: 0px;).

Entonces es lógico que te ocurra esto: cuando reduces la ventana, el lateral se queda quieto porque sigue a la misma distancia de la izquierda, y el contenido se deplaza, porque la parte derecha, que es desde la que marca la distancia, se desplaza. Y se monta porque todo tiene posición absoluta, lo que permite que las cajas se monten unas encima de otras.

Mikel.
  #3 (permalink)  
Antiguo 17/04/2008, 02:52
 
Fecha de Ingreso: enero-2007
Mensajes: 3
Antigüedad: 10 años, 10 meses
Puntos: 0
Re: problema con posiciones css

Entonces que solución ves. Es que la verdad me estoy rompiendo la cabeza y no veo las cosas claras.

Un saludo y gracias por todo
  #4 (permalink)  
Antiguo 17/04/2008, 02:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: problema con posiciones css

No es la mejor solución ni mucho menos, porque no me parece buena práctica usar tantas posiciones absolutas, pero bueno, cmo estamos para buscar soluciones a un problema concreto, lo que puedes hacer es quitarle el right: 0; y el margin-left: 200px; y ponerle left: 200px; a tu selector "contenido".

Si has entendido la explicación, se trata de que ambas cajas tengas marcada la distancia desde un mismo sitio, en este caso la izquierda.

Mikel.
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 12:05.