Hola a todos, creo que lo mejor es que edite el mensaje y empiece de nuevo. Lo que quiero es que mi web se visualice perfectamente en el navegador de Firefox sea cual sea la resolución de pantalla o el zoom del navegador.
La estructura de mi hoja de estilo sería la siguiente:
Una imagen de fondo en el body, una en la capa contenedor, un menú, otra en la capa cabecera , otra en la capa contenido y otra en el footer para el pie de página.
Lo que quiero es que se vayan conteniendo unas dentro de otra. Todas las imágenes de fondo las he creado copn un ancho de 800 px, ya que he leido que es la dimensión idónea.
El código css es el siguiente (de momento):
Código PHP:
body {
font-family:Verdana,Helvetica,Arial,sans-serif;
background:url(../imagenes/background.jpg);
background-repeat:no-repeat;
font-size:28px;
height:100%;
width:100%;
overflow:hidden;
padding:0;
margin: 0;
}
#contenedor{
position: relative;
height:90%;
width:90%;
background: url(../imagenes/contenido.jpg);
background-repeat:no-repeat;
}
#cabecera{
position: relative;
background:url(../imagenes/headeraptgt2.jpg);
background-repeat:no-repeat;
}
#contenido{
position: absolute;
width:100%;
height:150%;
background-image:url(../imagenes/recuadro.jpg);
background-repeat:no-repeat;
}
#menu{
position: absolute;
z-index:1;
top: 75px;
left: 50px;
width:100%;
height:40%;
}
ul.menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:33px;
font-size:.6em;
background:url(imagenes/menu.jpg) repeat-x top left;
font-family:Verdana,Helvetica,Arial,sans-serif;
border:1px solid #000;
margin:0;
padding:0;
top:133px;
left:150px;
}
ul.menu li {
display:block;
float:left;
margin:0;
padding:0;
}
ul.menu li a {
float:left;
color:#A79787;
text-decoration:none;
height:24px;
padding:9px 15px 0;
}
ul.menu li a:hover,.current {
color:#fff;
background:url(images/bg.png) repeat-x top left;
}
ul.menu .current a {
color:#fff;
font-weight:700;
}
ul.menu.blue{
background-color: #0B0B3B;
}
ul.menu.blue li a:hover, .menu.red li.current {
background-color:#DE3330;
}
y mi código del index.html el siguiente:
Código PHP:
<body>
<div id="contenedor">
<div id="cabecera"></div>
<div id="menu">
<ul class="menu blue">
<li class="current"><a href="index.html" title="">Historia</a></li>
<li><a href="servicios.html" title="">Servicios</a></li>
<li><a href="aptgt-contacto.html" title="" >Contacto</a></li>
<li><a href="#" title="">Proyectos</a></li>
<li><a href="#" title="">Urbanismo</a></li>
<li><a href="#" title="">Área Clientes</a></li>
</ul>
</div>
<div id="contenido">
</div>
<div id="footer">
</div>
</div>
</body>
El problema es queno consigo que se visualice en Firefox sea cual sea la resolución de la pantalla. Además al aumentar o disminuir el zoom del navegador se descolocan las capas y las imágenes.
Necesito ayuda, estoy desesperado.
Gracias a todos. Un saludo.