Foros del Web » Creando para Internet » CSS »

Menu css 100%

Estas en el tema de Menu css 100% en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/02/2011, 11:24
 
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 7 años, 7 meses
Puntos: 0
Menu css 100%

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 {  
        
width100%; 
        
padding0;  
        
float:left
        
padding:5px;
        
height:auto;
        
font100"Trebuchet MS"ArialHelveticasans-serif;
        
font-weightbold;
        }
        
#menu ul, li { list-style-type: none;
        
}

#menu ul 
        
margin0;
        
padding0;
        }
        
#menu li {  
         
displayinline;  
         
position:relative;
         }  
#menu a {  
      
text-decorationnone;  
      
text-aligncenter;
      
width:13.28%; 
      
float:left;  
      
padding6px;  
      
background-color#2175bc; 
      
displayblock;
      
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
          
clearboth;
          } 
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">Div3 Contenido</div>
    <
div id="creditos">Div5 Creditos</div>
</
div>

  

</
body>
</
html
  #2 (permalink)  
Antiguo 05/02/2011, 12:31
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Menu css 100%

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}.
  #3 (permalink)  
Antiguo 06/02/2011, 10:31
 
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Menu css 100%

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 {  
        
width100%; 
        
padding0;  
        
float:left
        
padding:5px;
        
height:auto;
        
font100"Trebuchet MS"ArialHelveticasans-serif;
        
font-weightbold;
        
background-color#2175bc; 

        
}
        
#menu ul, li { list-style-type: none;
        
}

#menu ul 
        
margin0;
        
padding0;
        }
        
#menu li {  
         
displayinline;  
         
position:relative;
         }  
#menu a {  
      
text-decorationnone;  
      
text-aligncenter;
      
width:13.28%; 
      
float:left;  
      
padding6px;  
      
displayblock;
      
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
          
clearboth;
          } 
  #4 (permalink)  
Antiguo 06/02/2011, 11:53
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: Menu css 100%

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 original
  1. width:auto;
  2. margin:0 auto;

Saludos
__________________
Diseñador y Desarrollador web :)
  #5 (permalink)  
Antiguo 06/02/2011, 15:21
 
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Menu css 100%

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 {  
        
width100%; 
        
padding0px;  
        
float:right
        
padding:0px;
        
height:auto;
        
font100"Trebuchet MS"ArialHelveticasans-serif;
        
font-weightbold;
        
background-color#2175bc; 
        
margin-top:5px;
                }
        
#menu ul, li { list-style-type: none;
        
}

#menu ul 
        
width:auto;
          
margin:auto;
        }
        
#menu li {  
         
displayinline;  
         
position:relative;
         }  
#menu a {  
      
text-decorationnone;  
      
text-aligncenter;
      
width:12.70%; 
      
float:left;  
      
padding6px;  
      
displayblock;
      
outline:none;
      
color#fff;
      
cursor:pointer;
      
border-right1px 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
          
clearboth;
          } 
  #6 (permalink)  
Antiguo 06/02/2011, 15:30
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Menu css 100%

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>
  #7 (permalink)  
Antiguo 06/02/2011, 15:51
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Menu css 100%

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

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:06.