Tema: No toma el float
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/11/2010, 09:25
Avatar de el_cesar
el_cesar
 
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.423
Antigüedad: 22 años, 10 meses
Puntos: 20
No toma el float
Amigos foreros, estoy tratando de crear un menu con css siguiendo un tuto que encontre en la red.

tengo esto en mi web

Código HTML: 
Ver original
  1. <div class="contenedor">
  2.  
  3.     <div class="header">
  4.  
  5.         <div class="logo"></div>
  6.  
  7.         <div class="buscador"></div>
  8.         <div class="menu">
  9.             <ul id="navi">
  10.               <li><a href="#">inicio</a></li>
  11.               <li><a href="#">acerca de</a></li>
  12.               <li><a href="#">contactos</a></li>
  13.             </ul>
  14.         </div>
  15.  
  16.     </div>
  17.  
  18.  
  19.  
  20. </div>
  21.  
  22.  
  23.  
  24. </body>

y mi hoja de estilos es

Código CSS: 
Ver original
  1. body {
  2.  
  3.     background-color: #CCCCCC;
  4.  
  5.     margin-top: 0;
  6.  
  7. }
  8.  
  9. .contenedor {
  10.  
  11. margin:0 auto 0 auto; 
  12.  
  13. margin-top: 0;
  14.  
  15. top: 0px;
  16.  
  17. width:800px;
  18.  
  19. background-color:#FFFFFF;
  20.  
  21. }
  22.  
  23. .header {
  24.  
  25. position: relative;
  26.  
  27. width: 800px;
  28.  
  29. height: 75px;
  30.  
  31.  
  32.  
  33. }
  34.  
  35.  
  36.  
  37. .logo { 
  38.  
  39. position: relative;
  40.  
  41. width: 222px;
  42.  
  43. height: 75px;
  44.  
  45. background-image:url(../images/logo.jpg);
  46.  
  47. }
  48.  
  49.  
  50.  
  51. .buscador { 
  52.  
  53. position: absolute;
  54.  
  55. width: 222px;
  56.  
  57. height: 75px;
  58.  
  59. margin-top: -75px;
  60.  
  61. left: 578px;
  62.  
  63. background-color: #000000;
  64.  
  65. }
  66. .menu {
  67. position: relative;
  68. width: 800px;
  69. height:15px;
  70. background-color:#000000;
  71. }
  72.  
  73. #navi {  
  74.     list-style:none;
  75.     margin:0;
  76.     padding:0;
  77.     }
  78. //luego a los elementos de la lista...
  79. #navi li {
  80.     margin:2px;
  81.     padding:0; //Ya no necesito el padding, tambien quitare el borde que puse antes.
  82.     float:left;
  83.     }
  84.  
  85. #navi li a {
  86.     display:block; //Convertimos el vínculo en un bloque.
  87.     width:100px;
  88.     padding:4px 0;
  89.     text-decoration:none;
  90.     text-align:center;
  91.     font-size:11px;
  92.     color:#FFFFFF;
  93.     background-color:#000000;
  94. }
  95. //Ahora vamos con el hover:
  96. #navi li a:hover {
  97.     color:#99CC00;
  98.     background-color:#003366;
  99. }

Pero resulta que el menu al que le aplico #navi no toma el float ni los efectos, es mas se ve asi www.crmbusiness.biz/practica/propuesta


gracias
__________________
Say no more.......