capas con css en IE bien, en NS mal.

derkenuke · #1 (**permalink**) 04/04/2004, 08:49

Hola, acabo de empezar a trabajar con paginas para que sean compatibles con IE y NS por primera vez. Estoy intentando hacer un layout de una pagina con capas y css. Aunque en IE se ve bien, en netscape las capas se montan unas encima de otras, y no se como solucionarlo. El codigo es este.

Código PHP:

  <html> 
 
<head> 
<title>MI PAGINA!</title> 
<style> 
div { 
    border:solid 1px black; 
} 
#cabecera { 
    width:100%; 
} 
 
#centro { 
    margin: 10px 10px 10px 10px; 
} 
#contenido { 
    float:left; width:70%; 
} 
#columna_derecha { 
    float:right; width:27%;  
    text-align:left; 
} 
 
#pie { 
    width:100%; text-align:center;  
} 
</style> 
</head> 
 
<body> 
<div id="cabecera"> 
    CABECERA 
</div> 
 
<div id="centro"> 
contenido del centro 
    <div id="contenido"> 
        CONTENIDO<br /> 
        aki iran muchisimas cosas interesantes para contar 
    </div> 
     
    <div id="columna_derecha"> 
        COLUMNA_DER<br />mi columna 
    </div> 
</div> 
 
<div id="pie"> 
    PIE<br />Aki se explicaran cosas referentes a la pagina. 
</div> 
 
 
 
</body> 
 
</html>

Tambien me gustaria saber porque si pongo:

Código PHP:

  #centro { 
    margin: 10px 10px 10px 10px; 
}

el div llamado centro tiene 10px de margen arriba y a los lados, pero no abajo. ¿Cómo se pone correctamente para que deje separacion con el contenido de abajo?

Muchas gracias.

derkenuke · #2 (**permalink**) 04/04/2004, 16:34

He hecho un logro, en NS he conseguido que la capa de abajo quede mas o menos bien posicionada, sigue sin marcarse el margin de 10px, pero por lo menos no se monta. Basta con poner en #pie:

Código PHP:

  clear:both;

Y asi conseguiremos que ocupe una linea sin admitir nada a los lados.

PatomaS · #3 (**permalink**) 05/04/2004, 02:20

Hola

Bueno, primero, para que puedas leer las referencias sobre los márgenes, puedes usar esta página:

http://www.w3.org/TR/CSS2/box.html

Si quieres especificar mágenes iguales para todos, solo indicas:

margin: 10px;

si quieres un margen diferente para alguno, lo indicas específicamente:

margin-left: 20px;

Respecto a la página que mandabas, bueno, hice una prueba con ella y creo que esto es más o menos lo que quieres ¿no?

Código:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
div {
    border:solid 1px black;
}
#cabecera {
	position: absolute;
	top: 0px;
	left: 0px;
	width:100%;
}
#centro {
	position: absolute;
	top: 20px;
	left: 0px;
	width: 97%;
	margin: 10px;
}
#contenido {
	position: absolute;
	top: 20px;
	left: 0px;
	width: 70%;
}
#columna_derecha {
	position: absolute;
	top: 20px;
	left: 70%;
	width: 30%; 
	text-align: left;
}
#pie {
	position: absolute;
	top: 100px;
	left: 0px;
	width: 100%;
	text-align: center; 
}
</style>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<div id="cabecera">
    CABECERA
</div>
<div id="centro">
contenido del centro
    <div id="contenido">
        CONTENIDO<br />
        aki iran muchisimas cosas interesantes para contar
    </div>
    <div id="columna_derecha">
        COLUMNA_DER<br />mi columna
    </div>
</div>
<div id="pie">
    PIE<br />Aki se explicaran cosas referentes a la pagina.
</div>
</body>
</html>

Suerte

Felicidad

PatomaS · #4 (**permalink**) 05/04/2004, 02:22

Olvidé preguntar antes

¿con qué versión de netscape lo estabas viendo?.

el código que te pase, se tiene que ver bien en todos los navegadores que soporten css2, como te lo pasé con una cabecera de xhtml, tambien lo debe entender, pero si la sustituyes por una de html 4.0o 4.01, debería funcionar igual.

Felicidad

derkenuke · #5 (**permalink**) 05/04/2004, 05:32

Gracias por responder, la solucion me ha funcionado perfectamente. Lo de los bordes lo pongo asi mas que nada porque cambio los valores cada muy poco para hacer pruebas y asi me ahorro escribir (soy un vago

)

Utilizo IE 6.0 y NS 6.2.

Gracias otra vez.

PascalC · #6 (**permalink**) 05/04/2004, 14:48

NS6.2 no lo utiliza nadie, deberías instalar netscape 7.1 o un mozilla/firefox reciente.

derkenuke · #7 (**permalink**) 05/04/2004, 15:02

Ok, gracias por el consejo, no sabia por que version iban, me lo acababa de bajar.