Foros del Web » Creando para Internet » CSS »

Problemas posicionando capas en Mozilla.

Estas en el tema de Problemas posicionando capas en Mozilla. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/10/2004, 05:17
 
Fecha de Ingreso: febrero-2004
Ubicación: Madrid
Mensajes: 65
Antigüedad: 13 años, 10 meses
Puntos: 0
Problemas posicionando capas en Mozilla.

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&iacute;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.
  #2 (permalink)  
Antiguo 14/10/2004, 09:49
 
Fecha de Ingreso: abril-2004
Ubicación: Valencia
Mensajes: 436
Antigüedad: 13 años, 7 meses
Puntos: 8
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.
  #3 (permalink)  
Antiguo 15/10/2004, 02:39
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola eltransito prueba cambiando el % de los "width" por medidas en pixeles. por ejemplo width:350px;

Saludosss
  #4 (permalink)  
Antiguo 15/10/2004, 06:26
 
Fecha de Ingreso: febrero-2004
Ubicación: Madrid
Mensajes: 65
Antigüedad: 13 años, 10 meses
Puntos: 0
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> 
  #5 (permalink)  
Antiguo 18/10/2004, 05:39
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 4 meses
Puntos: 1
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
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #6 (permalink)  
Antiguo 18/10/2004, 11:34
 
Fecha de Ingreso: febrero-2004
Ubicación: Madrid
Mensajes: 65
Antigüedad: 13 años, 10 meses
Puntos: 0
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.
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 01:49.