Menu css 100%

martines · #1 (**permalink**) 05/02/2011, 11:24

He creado este menu, pero me falta como 1 o 2 px para que ocupe el 100%, dejo el codigo html y el css, la foto del head no me sale igual de alineada que el menu.

CSS

Código PHP:

  body {background-color: #CEE3F6} 
 
#head { 
      margin:1px;  
      } 
 
#menu {   
        width: 100%;  
        padding: 0;   
        float:left;  
        padding:5px; 
        height:auto; 
        font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif; 
        font-weight: bold; 
        } 
         
#menu ul, li { list-style-type: none; 
        } 
 
#menu ul  
        { margin: 0; 
        padding: 0; 
        } 
         
#menu li {   
         display: inline;   
         position:relative; 
         }   
#menu a {   
      text-decoration: none;   
      text-align: center; 
      width:13.28%;  
      float:left;   
      padding: 6px;   
      background-color: #2175bc;  
      display: block; 
      outline:none; 
      color: #fff; 
      }  
 
#menu a:hover { background: #CCCCCC; } 
 
#contenido { border: 3px solid #FF0000; width:420px; height:auto; padding:3px; margin:5px; float: left; } 
#creditos {border: 3px solid #FFFF00;  
          width:auto;  
          height:30px;  
          margin:5px;  
          clear: both; 
          }

HTML

Código PHP:

  <html> 
<head> 
<title>a</title> 
<link rel="stylesheet" href="style-general.css" type="text/css" media="all"> 
</head> 
<body> 
 
    <div id="head"><img src="files/head.jpg"</div> 
    <div id="menu"> 
        <ul> 
        <li><a href=”#”>EMPRESA</a></li>   
        <li><a href=”#”>HISTORIA</a></li>   
        <li><a href=”#”>PERSONAL</a></li>   
        <li><a href=”#”>FORMACION</a></li>   
        <li><a href=”#”>SERVICIOS</a></li>   
        <li><a href=”#”>CONTACTO</a></li>   
        <li><a href=”#”>PRIVADO</a></li>   
        </ul> 
    </div> 
    <div id="contenido">Div. 3 Contenido</div> 
    <div id="creditos">Div. 5 Creditos</div> 
</div> 
 
   
 
</body> 
</html>

sanxuan · #2 (**permalink**) 05/02/2011, 12:31

Por un lado le estás dando un margen de 1px a div#head. Por otro lado el fondo de color azul del menu lo declaras para #menu a en lugar de para div#menu.
Suelen aparecer en los navegadores un margen de 8px que puedes eliminar también si declaras la regla body{margin:0}.

martines · #3 (**permalink**) 06/02/2011, 10:31

Gracias ya esta solucionado, la ultima pregunta lo pongo en este enlace mismo, para centrar el menu al medio? Dejo el codigo.

CSS

Código PHP:

  body {background-color: #CEE3F6; 
     margin:0; 
    } 
 
#head { 
      margin:0px;  
      } 
 
#menu {   
        width: 100%;  
        padding: 0;   
        float:left;  
        padding:5px; 
        height:auto; 
        font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif; 
        font-weight: bold; 
        background-color: #2175bc;  
 
        } 
         
#menu ul, li { list-style-type: none; 
        } 
 
#menu ul  
        { margin: 0; 
        padding: 0; 
        } 
         
#menu li {   
         display: inline;   
         position:relative; 
         }   
#menu a {   
      text-decoration: none;   
      text-align: center; 
      width:13.28%;  
      float:left;   
      padding: 6px;   
      display: block; 
      outline:none; 
      color: #fff; 
      }  
 
#menu a:hover { background: #CCCCCC; } 
 
#contenido { border: 3px solid #FF0000; width:420px; height:auto; padding:3px; margin:5px; float: left; } 
#creditos {border: 3px solid #FFFF00;  
          width:auto;  
          height:30px;  
          margin:5px;  
          clear: both; 
          }

Kurozaki · #4 (**permalink**) 06/02/2011, 11:53

en #menu, no es necesario el float, ya que ocupas el 100% de ancho.

Y para alinearlo centrado, en "ul", dale un ancho automatico y margin 0 auto:

Código CSS:

Ver originalwidth:auto;
margin:0 auto;

Saludos

martines · #5 (**permalink**) 06/02/2011, 15:21

Gracias a todos ^^, la ultima pregunta y tengo esto acabado (por el momento), en el menú me gustaría que para separar entre una opción del menú y la otra apareciera una linea blanca, como no sabia como hacerlo e echo un borde-right y queda como quiero pero me gustaría quitar el ultimo. Se puede hacer algo parecido a lo que digo? Pero sin la opción border, o con la border pero quitando la ultima de la derecha.

CSS

Código PHP:

  body {background-color: #BDBDBD; 
     margin:0px; 
    } 
 
#head { 
      margin:0px;  
      margin-top:5px; 
      } 
 
#menu {   
        width: 100%;  
        padding: 0px;   
        float:right;  
        padding:0px; 
        height:auto; 
        font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif; 
        font-weight: bold; 
        background-color: #2175bc;  
        margin-top:5px; 
                } 
         
#menu ul, li { list-style-type: none; 
        } 
 
#menu ul  
        { width:auto; 
          margin:auto; 
        } 
         
#menu li {   
         display: inline;   
         position:relative; 
         }   
#menu a {   
      text-decoration: none;   
      text-align: center; 
      width:12.70%;  
      float:left;   
      padding: 6px;   
      display: block; 
      outline:none; 
      color: #fff; 
      cursor:pointer; 
      border-right: 1px solid #FFF; 
            }  
 
#menu a:hover { background: #CCCCCC; } 
 
#contenido { border: 3px solid #FF0000; width:420px; height:auto; padding:3px; margin:5px; float: left; } 
#creditos {border: 3px solid #FFFF00;  
          width:auto;  
          height:30px;  
          margin:5px;  
          clear: both; 
          }

sanxuan · #6 (**permalink**) 06/02/2011, 15:30

Puedes crear una clase para ese elemento, por ejemplo:
.Ultimo {border:0}
Y se la añades al elemento correspondiente.
<div id="menu">
<ul>
<li><a href=”#”>EMPRESA</a></li>
<li><a href=”#”>HISTORIA</a></li>
<li><a href=”#”>PERSONAL</a></li>
<li><a href=”#”>FORMACION</a></li>
<li><a href=”#”>SERVICIOS</a></li>
<li><a href=”#”>CONTACTO</a></li>
<li><a href=”#” class="Ultimo">PRIVADO</a></li>
</ul>
</div>

sanxuan · #7 (**permalink**) 06/02/2011, 15:51

Otras dos maneras de hacer lo mismo:
1. Le damos el borde sólo a los enlaces contenidos dentro de un li al que antecede otro li. Por tanto el primero no llega a tener borde.
#menu li+li a {
border-left: 1px solid blue; /* El borde que desees */
}

2.Le damos el borde a todos los elementos del menú y a continuación se lo quitamos al primer elemento del mismo.
#menu a {border-left: 1px solid white}
#menu li:first-child a {
border-left: none;
}