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>
Necesito ayuda, estoy desesperado.
Gracias a todos. Un saludo.
