Soy yo otra vez con una última consulta o no

[jmb0286]

Sobre diseño web.

Yo busque información sobre, o más bien, pedí información sobre com centrar un div resultó logré hacerlo. Y ahora vengo uds. para que me den alguna respuesta de como hacer (porque como dije antes, soy novato. No hice nunca un curso de diseño web, y lo que se es a traves de videotutoriales y lo que se encuentra en la red)...en fin...

Tengo el siguient código web:

#menu {
background-color: #333;
clear: both;
float: left;
height: 30px;
width: 100%;
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
color: #FFF;
}

/*Aca biene el menu*/

#menu {
list-style:none;
margin:0;
padding:0;
}

#menu li {
margin:0px;
padding:0px;
border:0px;
float:left;
}

#menu li a {

display:block;
width:100px;
padding:1px;
text-decoration:none;
text-align:center;
font-size:11px;
color:#FFFFFF;
background-color: #333;
}
#menu li a:hover {
color:#99CC00;
background-color:#003366;

}
/*Aca termina el menu*/



div id="contenedor">
<div id="herramientas"></div>
<div id="cabecera"></div>
<div id="menu">
<ul id="menu">
<li><a href="index.html">INICIO</a></li>
<li><a href="html/musica.html">MÚSICA</a></li>
<li><a href="html/noticias.html">NOTICIAS</a></li>
<li><a href="html/videos.html">VIDEOS</a></li>
<li><a href="html/fotos.html">FOTOS</a></li>
<li><a href="html/blog.html">BLOG</a></li>
<li><a href="html/descargas.html">DESCARGAS</a></li>
<li><a href="html/contacto.html">CONTACTO</a></li>
</ul>
</div>
<div id="noticias"></div>
<div id="videos"></div>
<div id="imagenes"></div>
<div id="publicidad"></div>
<div id="copyright">Copyright 2011. Juan Matías Besio</div>
</div>


Resultado de la página se puede ver http://acceso-directo.net23.net

Lo que estoy buscando como resultado es que las opciones del menu se ajusten a las propiedades del <div id="menu">

Es decir no quiero que haya un segundo renglón, que quede todo en la misma línea ajustado perfectamente.

Desde ya gracias a todos nuevamente.

[Mariela_Fiad]

Hola, lo que sucede es que tienes fijado un ancho de 100px por cada enlace. Tienes dos opciones quitar el ancho y manejarte con padding-left y padding-right para separar a los enlaces uno del otro. O ajustar un ancho inferior a 100px en donde dice "#menu li a " en tu CSS

Opción 1: quité width: 100px y agregué un nuevo valor a padding:

Código CSS:

#menu li a {    
display:block; 
padding:1px  15px;
text-decoration:none;   
text-align:center;  
font-size:11px; 
color:#FFFFFF;  
background-color: #333;
}
 

Opción 2: Cambié el valor de width:

Código CSS:

#menu li a {    
display:block; 
width:80px; 
padding:1px;
text-decoration:none;   
text-align:center;  
font-size:11px; 
color:#FFFFFF;  
background-color: #333;
}
 

Si con 80px de ancho sigue mostrando un salto de línea reduce más hasta que quepa.

Saludos.

[jmb0286]

Mariela voy a probarlo, luego te digo como resulta. Gracias nuevamente.

[jmb0286]

Resultó, ahora voy a subirlo. jeje gracias.

[jmb0286]

Tengo una consulta que capaz que es una idiotez pero no me he dado cuenta por donde viene la mano. La página en aparentemente no tiene ninguin problema solo que en el menu, si te fijas bien no esta completo el cuadrado hay un minimo espacio entre el cuadro y los div que viene despues. No se donde puede estar problema porque si le pongo padding: 1px o más se ensancha más linea lo quite ta quedo con ese problema. No se que puede ser bueno gracias. Lo raro es que en firefox eso no pasa.

http://acceso-directo.net23.net