Menu css background

[DoPeY-BBS]

Código CSS:

<style type=text/css>
*   {
    margin: 0;
    padding: 0;
}
 
 body {
        background-color: #121212;
        margin: 0;
        padding: 0;
        font-size:13px;
        font-family:Arial, Helvetica, sans-serif;
        line-height: 16px;
    }
    
#Contenedor {
        width:1000px;
        background-color:  #222;
        margin: 0 auto;
        
}
#Cabecera {
        background-color: #333;
        padding:30px;
        }
h1 {
font-size:25pt;
margin:0;
}
 
h2 {
font-size:15pt;
color:#FFFFFF;
padding-top:20px;
}
a {
color:#FFFFCC;
text-decoration:none;
}
 
a:hover {
text-decoration:underline;
}
#menu {
    background-color: #A52A2A;
}
 
#menu ul {
    list-style: none;
}
#menu ul li {
    float: left;
 
}
 

EL problema consiste en que en #menu no acepta el background y estoy usando el komodo edit y el firefox (ultimas versiones ambos)

si quito el float left pues el background aparece ¿a que se debe esto?

Código HTML:

<div id="Contenedor"><!-- Principio Contenedor -->
         <div id="Cabecera"><!-- Principio Cabecera -->
            <div id="logo">
         <h1><a href="#">Black & Death Metal por un tubo</a></h1>
                <h2>Un placer para tus oidos </h2>
         </div>
            </div><!-- Final Cabezera -->
         
        <div id="menu">
             <ul>
                 <li><a href="inicio.html">INICIO</a></li>
                 <li><a href="biografia.html">BIOGRAFIA </a></li>
                 <li><a href="contacto.html">CONTACTO</a></li>
            </ul>
        </div>
 

[IEKK]

esos floats....

Código CSS:

#menu {
     float:left;
     background-color: #A52A2A;
}
 

Y si quieres que se alargue en toda la capa contenedor usa también width:100%;

[DoPeY-BBS]

El float me sigue sin funcionar. pero se arreglo lo del background

[IEKK]

¿Qué float se supone que tienes mal? Dime la capa y como se supone debería verse. Si no, poco puedo decir.

[DoPeY-BBS]

Deberia verse uno al lado del otro y no uno abajo del otro como paso con tu metodo, ahora hago lo siguiente, le doy un ancho de 100% y un color al #menu pero no me responde cuando le pongo el float left en menu ul li..

Edit: Amigo, he podido resolver el problema, simplemente le aplique un height a la capa #menu

[karlos2101]

pues envés de hacer

otro {
float:left;
}

aga esto::

otro {
display: inline-block;
}

inline-block lo que hace es que evita los saltos de linea de los li , por mi parte le recomiendo que utilize inline-block

ya que si quiere evitar el salto de linea de los li tiene que hacerle un float: left; ah cada uno para que pueda evitar el salto de linea.

ul li {
float:left;
}


eso fue lo que le entendí si no pues me avisa y me explica con mas detalle.

[karlos2101]

ah y otro dato , Acuerdese que existe html5 y que tiene nuevas etiquetas. y que evita utilizar divs innecesariamente ejemplo.

en ves de utilizar el div con el id="menu".

<div id="menu">
<ul>
<li><a href="inicio.html">INICIO</a></li>
<li><a href="biografia.html">BIOGRAFIA </a></li>
<li><a href="contacto.html">CONTACTO</a></li>
</ul>
</div>


puedes utilizar el tag nav para declarar menus.

<nav id="menu">
<ul>
<li><a href="inicio.html">INICIO</a></li>
<li><a href="biografia.html">BIOGRAFIA </a></li>
<li><a href="contacto.html">CONTACTO</a></li>
</ul>
</nav>



es mejor que busques un libro de html5 te dejo este miralo... Actualisese

http://mejorando.la/guia-html5/?utm_source=mdw&utm_medium=home&utm_campaign=guias