Foros del Web » Creando para Internet » CSS »

Ordenamiento de los DIVs

Estas en el tema de Ordenamiento de los DIVs en el foro de CSS en Foros del Web. Soy muy muy nuevo en hacer sitios usando CSS y DIVs, pero quiero hacerles una consulta... Cree esta base que tiene un contenedor del 100.75% ...
  #1 (permalink)  
Antiguo 22/09/2008, 17:36
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Pregunta Ordenamiento de los DIVs

Soy muy muy nuevo en hacer sitios usando CSS y DIVs, pero quiero hacerles una consulta...

Cree esta base que tiene un contenedor del 100.75% de la página, al mismo se acoplan 2 DIVs más que uno queda a derecha y otro a izquierda, en este ejemplo son de color rojo, luego serán imágenes...

Luego hay un header de 750px que dentro contiene tres lineas y un texto que dice "Hola"

El problema es que los contenedores que muestran los laterales en rojo quedan por encima del header, cuando debería ser al reves...

Espero que se entienda... Es decir el Header entero con todo su contenido debe estan por encima del contenedor y los 2 divs a cada lado...

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<style>
body {
	margin-left: 0px;
	margin-top: 0px;
	background-color: #000000;
	color: #fff;
	font-family: Arial;
	font-size: 14pt;
	font-weight: bold;
	text-align: center;
}
#contenedor {
	background-color: #000000;
    width: 100.75%;
    text-align: left;
    height: 500px;
}
#logoizq {
	background-color: #ff3300;
    width: 200px;
    height: 320px;
	float: left;
}
#logoder {
	background-color: #ff3300;
    width: 200px;
    height: 320px;
	float: right;
}
#header {
    width: 750px;
    height: 110px;
    padding: 0px;
	margin: 0px auto;
	float: center;
}
#linea1 {
	background-color: #ffffff;
    width: 100%;
    height: 3px;
}
#linea2 {
	background-color: #003300;
    width: 100%;
    height: 20px;
}
#linea3 {
	background-color: #ffffff;
    width: 100%;
    height: 3px;
}

</style>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Title</title>
</head>

<body>
<div id="contenedor">
<div id="logoizq"></div>
<div id="logoder"></div>
<div id="header"><div id="linea1"></div><div id="linea2">Hola</div><div id="linea3"></div></div>
</div>


</body>
</html>
  #2 (permalink)  
Antiguo 22/09/2008, 17:54
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
Respuesta: Ordenamiento de los DIVs

Para que tu cajas se puedan supoerponer en el caso que estàs queriendo hacer, deberías usar posiciones absolutas. Prueba con esto:

Cita:
#logoizq {background-color: #ff3300;
width: 200px;
height: 320px;
position: absolute;
top: 0;
left: 0;
}
#logoder { background-color: #ff3300;
width: 200px;
height: 320px;
position: absolute;
top: 0;
right: 0;
}
#header { width: 750px;
height: 110px;
padding: 0px;
margin: 0px auto;
position: relative;
}
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 22/09/2008, 20:32
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Ordenamiento de los DIVs

Mil gracias, ahora funciona perfecto y tambien si llamo primero al header queda por atras y si lo llamo despues queda por delante...

No sabía del comando position, lleré mas sobre el mismo y sobre css en general, estoy empezando a entender sus ventajas...

(Es que yo era amante de las tablas)

Gracias...
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 15:52.