Lo que voy a hacer ahora, no debería hacértelo, pero me has cogido tan sumidamente aburrido, que ya que lo he echo, pues que tenga un sentido, jajajajajaja. Pero vamos que no esta bonito. Bueno ahí lo llevas:
Tener las siguientes consideraciones
La página ocupara el ancho de todo el explorador. Realizar las correcciones para suponer una pantalla genérica de 3x4
El margen y padding del documento debe ser 0px.
Utilizar como imagen de fondo de la página la imagen fondo.jpg. De tal forma que no se repita ni se vea afectada con el scroll. La posición debe ser centrada. Color de fondo blanco.
body{
width:100%;
height:100%;
margin:0;
padding:0;
background:white url('fondo.jpg') no-repeat center center;
}
El ancho de el contenedor principal debe ser 800 px, ocupara todo lo alto que pueda y debe estar centrado en la pagina.
#principal{
width:800px;
margin:0 auto;
}
El contenedor cabecera debe tener un ancho de 800 px y altura de 60 px. La imagen de fondo será cabecera.jpg, centrada y no se repetirá. .La letra deberá ser 300 % de su tamaño original, de color rojo e italica (cursiva). La posición de esta capa no debe variar con el scroll de la página y ocupara la posición adecuada para sobreponerse a la capa contenido. Su posición es pegada al margen superior y centrada.
#cabecera{
width:800px;
height:60px;
position:fixed;
background: url('cabecera.jpg') no-repeat;
font-size:300%;
color:red;
font-style:italic;
}
El contenedor menu no debe verse afectado por el scroll de la pagina, y estará situado en las coordenadas 0,0. Su ancho será de un de 100px y la altura la de toda la página. La imagen de fondo será adorno.png, que se repetira y estará alineada superiormente y centrada horizontalmente.
#menu{
width:100px;
height:100%;
position:fixed;
top:0;
left:0;
background: red url('adorno.png') repeat left top;
}
El contenedor menú-izq no debe verse afectado por el scroll de la pagina, y estará situado a la derecha y arriba. Su ancho será de un de 100px y la altura la de toda la página. La imagen de fondo será adorno.png, que se repetira y estará alineada superiormente y centrada horizontalmente.
#menu-izq{
width:100px;
height:100%;
position:fixed;
top:0;
left:94%;
background: red url('adorno.png') repeat left top;
}
El contenedor contenido tendrá el texto justificado y ocupara tendrá de ancho 740 px. Estará desplazado respecto al margen superior 60px. La letra será color darkblue. Cuando se solapa con la cabecera deberá quedarse debajo.
#contenido{
padding-top:60px;
text-align:justify;
width:740px;
color:darkblue;
}
Crear la clase centrado que centre un texto.
.centrado{
text-align:center;
}
Crear el estilo asociado a la etiqueta h1 para que el texto sea color darkviolet
h1{
color:darkviolet;
}
Crear el estilo asociado a la etiqueta h2 para que el texto sea color darkgreen
h2{
color:darkgreen;
}
Crear el estilo asociado a la etiqueta h3 para que el color sea violet.
h3{
color:violet;
}
Crear el estilo asociado a los <li> de menu de tal forma qeu su indent sea -15px y la imagen de viñeta punto.jpg.
li{
text-indent: -15px;
list-style-image: url('punto.jpg');
}
Crear un estilo asociado a los enlaces para sean de color negro, negrita y sin subrayado. Al pasar por encima del enlace el color cambiará a rojo
a{
color:black;
text-decoration:none;
font-weight:900;
}
a:hover{
color:red;
}
La pagina vendría a verse algo así
Nota: esta fea porque he ido cogiendo las primeras imagenes que iban apareciendo... pero vamos, que eso es lo de menos.
Espero que lo revises y veas cada estilo, si alguno no lo entiendes, pues comenta. Bueno un saludo y espero que te sirva.
edito: el menu-izq he echo una copia del otro, porque en el que tu propusiste estaba vacio. jeje
