Problemas posicionando capas en Mozilla.

eltransito · #1 (**permalink**) 14/10/2004, 04:17

Hola, sé que soy muy pesado, estoy aprendiendo mucho en este foro gracias a sus consejos pero aún me queda mucho…sobre todo en lo que respecta a posicionar bloques y hacer estructuras.

Estaba haciendo una estructura, les pongo el código:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
div#centrada{ position:absolute;
top:0;
left:10%;
width:80%;
display: block;
border: 0px;
}
div#cabecera{
vertical-align: top;
width: 100%;
height: 75px;
margin-bottom: 0px;
border: 1px solid;

}
div#bordesuperior{
margin: 0;
width: 100%;
height: 20px;
border: 1px solid;
}
div#content{
margin: 0px;
width: 100%;
height: auto;
border: 1px solid;
display: inline;
}
div#posts{
float: left;
width: 70%;
height: auto;
margin: 0px;
border: 1px solid;
}
div#menu{
float: right;
width: 30%;
height: auto;
border: 1px solid;
}
div#bordeinferior{
margin: 0px;
width: 100%;
height: 20px;
border: 1px solid;
}
div#footer{
margin: 0px;
width: 100%;
height: 20px;
border: 1px solid;
vertical-align: baseline;
}

</style>

<body>
<div id= "centrada">
<div id="cabecera">
<h1>Cabecera.</h1>
</div>
<div id="bordesuperior">
<p>Borde superior></p>
</div>
<div id="content">
<div id="posts">

</div>
<div id="menu">
<p>Menú.</p>
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li></ul>
</div>
</div>
<div id="bordeinferior">
<p>Borde inferior</p>
</div>
<div id="footer">
<p>Footer.</p>
</div>
</div>
</body>
</html>

El resultado que quería conseguir lo consigo en explorer:

Sin embargo en Mozilla no consigo posicionar bien las capas, se superponen varias:

Seguro que me pueden decir algo y gracias por anticipado.

cnyx · #2 (**permalink**) 14/10/2004, 08:49

La verdad es que yo tambien tengo problemas, pero en mi caso se ve perfecto en el Mozilla, en el konqueror, en el epiphany y en el galeon, pero sin embargo en el explorer se ve asi:
http://www.eneascenter.com

No tengo ni idea porque me aparece no mas una palabra en cada linea. Alguien me puede dar una idea sin tener que poner el .css?? es que ahora mismo no consigo entrar en el ftp.

gracias, saludos.

kahlito · #3 (**permalink**) 15/10/2004, 01:39

Hola eltransito prueba cambiando el % de los "width" por medidas en pixeles. por ejemplo width:350px;

Saludosss

eltransito · #4 (**permalink**) 15/10/2004, 05:26

Como no encontraba la solución(tampoco era lo del ancho pero gracias kahlito) me he olvidado del código y lo he empezado de nuevo de otra manera. Con el siguiente código si se ve igual en Mozilla y explorer(en otros navegadores no lo he probado). Ahora ya tengo la estructura que quería pero la verdd es que sigo picado por saber que está mal en el código de arriba.

Código HTML:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>estructura</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
 #centrada
{
position:absolute;
width: 80%;
color: #333;
top:0;
left:10%;
display: block;
border: 1px solid grey
}

#cabecera
{

border: 1px solid gray;
}
#bordesuperior
{
width: 100%;
margin-bottom: 0px;
border: 1px solid grey;
}





#menu
{
float: right;
width: 30%;
margin: 0;
border: 1px solid grey
}

#content
{
margin-right: 30%;
border: 1px solid gray;
}

#footer
{
clear: both;
margin: 0;
border: 1px solid gray;
}
#bordeinferior
{
width: 100%;
margin-top: 0 px;
border: 1px solid grey
}




</style>

<body>
 <div id="centrada">
<div id="cabecera">
<div id="bordesuperior">
</div>
</div>

<div id="menu">

</div>
<div id="content">
</div>
<div id="footer">
<div id="bordeinferior">
</div>
</div>
</div>
</body>

PascalC · #5 (**permalink**) 18/10/2004, 04:39

Hay muchas cosas, entre ellas :
- La DTD es incorrecta
- pusiste un display:inline en un bloque
- pusiste width:100% en muchas ocasiones en vez de dejar width:auto; (cuando pones bordes a un bloque y le dices que tiene un width de 100%), el ancho total del bloque es width:100% + bordes porque width se refiere al ancho del contenido y no al ancho total con los bordes, paddings y margins)
- haces salir cajas del flujo del documento (float) sin restablecer el flujo en los bloques alrededor (clear) o mediante un div vacio con clear (<div style="clear:both;"></div>)

Otras observaciones :
- vertical-align no se aplica a los bloques
- no es necesario precisar que un div es un bloque o que sus margenes estan a cero ya que son caracteristicas por defecto de los divs
- también creo que tienes "divitis" ;) usar divs para los bordes me parece algo excesivo

eltransito · #6 (**permalink**) 18/10/2004, 10:34

Muchas gracias, tus observaciones me serán muy útiles. Sólo una cosa, he usado divs para los bordes superior e inferior porque quería que la parte de arriba y de abajo tuvieran un fondo diferente, una imagen que le de un aspecto redondeado a la caja. Muchas gracias, estamos aquí para aprender y el equivocarnos nos hace avanzar. Saludos.