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;
}