Tema: Básico
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 03/01/2013, 03:59
Avatar de jomaruro
jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 7 meses
Puntos: 361
Respuesta: Básico

Hola:

He repasado tu código y aparte de quitar el width del body del html porque no es necesario si usas css, he modificado un poquito tu hoja de estilos y ahora debes compararlos. Lógicamente, debes adaptarlo a tu gusto.

Este es el modificado:

Código CSS:
Ver original
  1. * {
  2.     margin:0 auto;
  3.     padding:0;
  4. }
  5.  
  6. body{
  7.     width:909px;
  8. }
  9. .contenedor{
  10.     width:100%;
  11.     border:1px solid #0000ff;
  12. }
  13.  
  14. .cabecera{
  15.     position:absolute;
  16.     width:100%;
  17.     height:13%;
  18. }
  19. .menu{
  20.     width:100%;
  21.     display: block;
  22.     overflow: hidden;
  23.     width:100%;
  24.     height:10%;
  25. }
  26.  
  27. #fondoRojoMenu{
  28.     display:block;
  29.     overflow:hidden;
  30.     margin:100px 0px 0px 0px;
  31.     background:#E4062C;
  32. }
  33.  
  34. #menuHorizontal {
  35.     float:right;
  36.     padding: 0px 0px 0px 0px;
  37. }
  38.  
  39. #menuHorizontal li {
  40.     display: inline;
  41.     padding-bottom:30px;
  42. }
  43. #menuHorizontal li a {
  44.     font-family: Arial;
  45.     font-size:20px;
  46.     text-decoration: none;
  47.     float:left;
  48.     padding: 10px;
  49.     background-color: #E4062C;
  50.     color: #fff;
  51. }
  52.  
  53. #menuHorizontal li a:hover {
  54.     background-color: black;
  55.     margin-top:-2px;
  56.     padding-bottom:12px;
  57. }
  58.  
  59. .contenido{
  60.     position:absolute;
  61.     top:25%;
  62.     width:100%;
  63.     height:100%;
  64. }

Unos pequeños apuntes:

1.- El body es una etiqueta html no una clase ni un id y en tu hoja css lo tienes definido con un punto no es necesario ponerle el punto.
2.- Para entender la primera etiqueta que he puesto en el css (el *) busca información sobre reset css, es muy útil utilizarlo.
3.- He aumentado a 909px el ancho de la página, sinó el menú no cabe en su contenedor y se descoloca, otra opción sería dejarlo en 900 y reducir un poco el tamaño de las fuentes del menú.
4.- En #menuHorizontal tienes un padding de 180px, cómo no sé que función tiene lo he puesto a cero. Tu verás si te vale así.

Saludos.