Foros del Web » Creando para Internet » CSS »

Problema con capas y 3 columnas

Estas en el tema de Problema con capas y 3 columnas en el foro de CSS en Foros del Web. tengo una página y la he maquetado así: la cuestión es que yo la quiero así: en la css tengo: #contenido {position: relative; background-image: url(imagen.gif); ...
  #1 (permalink)  
Antiguo 03/03/2005, 11:33
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
Problema con capas y 3 columnas

tengo una página y la he maquetado así:


la cuestión es que yo la quiero así:


en la css tengo:
#contenido {position: relative; background-image: url(imagen.gif); background-repeat: no-repeat; top: -30px; width: 443px; height: 311px; left: 7px;}

#sidebar2 {position: relative; width: 135px; font-size: 10pt; background-color: #F4F4F4; text-align: center; right: 7px; top: 5px; border: solid 2px #ffffff;}
#sidebar2_dentro {position: relative; width: 135px; z-index: 10; height: 220px; float: right;}

donde #sidebar2_dentro es un div que está dentro de el div #sidebar2... el div #sidebar2 está dentro de #cuerpo, pero #menu esta fuera de #cuerpo... a ver si me'xpliqué bien ^^....


gracias
  #2 (permalink)  
Antiguo 03/03/2005, 12:20
Avatar de dlg
dlg
 
Fecha de Ingreso: febrero-2005
Ubicación: Madrid - España
Mensajes: 23
Antigüedad: 12 años, 9 meses
Puntos: 0
fijate en este codigo:

Código:
<div id="izquierda" style="float:left; width:150px; margin-top:20px;">izquierda
<div id="centro" style="float:left; width:150px;">centro
<div id="derecha" style="float:left; width:150px; margin-top:20px;">derecha
Espero que te sirva.

Un saludo
__________________
DeltaIdeas
  #3 (permalink)  
Antiguo 03/03/2005, 12:22
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
el problema es que MENU (izquierda) está fuera del contenido principal, es decir, los otros dos están agrupados en otro div.

saludos
  #4 (permalink)  
Antiguo 03/03/2005, 12:27
Avatar de dlg
dlg
 
Fecha de Ingreso: febrero-2005
Ubicación: Madrid - España
Mensajes: 23
Antigüedad: 12 años, 9 meses
Puntos: 0
pues entonces es lo mismo. Solo tienes que meter izquierda y derecha en otro div:

Código:
<div id="lateral">
<div id="izquierda" style="float:left; width:150px; margin-top:20px;">izquierda</div>
<div id="centro" style="float:left; width:150px;">centro</div>
</div>
<div id="derecha" style="float:left; width:150px; margin-top:20px;">derecha</div>
A lo mejor no te estoy entendiendo bien.

Un saludo
__________________
DeltaIdeas
  #5 (permalink)  
Antiguo 03/03/2005, 12:29
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
jeje... gracias.. orita pruebo...
  #6 (permalink)  
Antiguo 08/03/2005, 11:19
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
tengo la siguiente css:
Código:
#cuerpo {
	position: relative;
	width: 480px;
	float: left;
}

#menu {
	position: relative; 
	width: 155px; 
	overflow: hidden;
	float: left;
	background-color: #ffffff;
}

#noticias {
	position: relative;
	width: 443px;
	height: 311px;
}

#login {
	position: relative;
	width: 100px;
	padding-left: 640px;
}
donde #cuerpo contiene todo, noticias es la capa principal, #menu es la capa de la izquierda y #login es la capa de la derecha, ésta última se me tira hacia abajo.

gracias
  #7 (permalink)  
Antiguo 08/03/2005, 12:52
 
Fecha de Ingreso: febrero-2005
Ubicación: En un BLINK
Mensajes: 184
Antigüedad: 12 años, 10 meses
Puntos: 0
155 + 443 + 100 = 698
698 > 480

Las tres columnas no te van a entrar en ese ancho de #cuerpo.
  #8 (permalink)  
Antiguo 08/03/2005, 12:53
Avatar de TheGhost  
Fecha de Ingreso: noviembre-2003
Ubicación: Peru
Mensajes: 348
Antigüedad: 14 años
Puntos: 0
Fijate en algo jesusbet...dices que #cuerpo contiene #menu, #login y #noticias dentro suyo. #cuerpo tiene como width 480px y si los demás estan adentro, deberían sumar sus width's 480px, lo cual no sucede, por eso login se te va para abajo.
Intenta de que la suma de las width's de menu, login y noticias, sea 480px

Post-editado: xDD con un minuto de diferencia Remo:Erdosain
Para agregar, que si aún asi no te funciona...quitale los position:relative y a #noticias agregale solo el position:absolute


Saludos
The Ghost

Última edición por TheGhost; 08/03/2005 a las 13:01
  #9 (permalink)  
Antiguo 08/03/2005, 13:00
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
sabes una cosa??? tienes razón, menú está FUERA de cuerpo, y dentro de cuerpo está noticias y login...
  #10 (permalink)  
Antiguo 09/03/2005, 10:04
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
el problema es que en firefox va bien, pero en internet explorer no...
  #11 (permalink)  
Antiguo 09/03/2005, 11:22
Avatar de dlg
dlg
 
Fecha de Ingreso: febrero-2005
Ubicación: Madrid - España
Mensajes: 23
Antigüedad: 12 años, 9 meses
Puntos: 0
Supongo que tu problema es que en IE las columnas se quedan unas debajo de otras y en firefox en cambio, se quedan bien, es decir, se quedan una al lado de la otra. Esto es debido a un error del navegador de bill que deja un margen de unos 3 pixels no se sabe por que entre capa y capa. Para solucionar esto sin resignarte al mandato del señor bill, puedes hacer uso de uno de los muchos fallos de IE y es utilizar este codigo:

Código:
* html #capa {
	 width: de 3 a 5 pixels menos que el real
}
Este codigo css es totalmente valido y solo lo coje IE.

Un saludo
__________________
DeltaIdeas
  #12 (permalink)  
Antiguo 09/03/2005, 11:27
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
anda la osa, no sabía esa... grax, orita lo pruebo...

saludos
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 16:57.