Foros del Web » Creando para Internet » CSS »

No toma el float

Estas en el tema de No toma el float en el foro de CSS en Foros del Web. Amigos foreros, estoy tratando de crear un menu con css siguiendo un tuto que encontre en la red. tengo esto en mi web @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); ...
  #1 (permalink)  
Antiguo 23/11/2010, 09:25
Avatar de el_cesar  
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.411
Antigüedad: 16 años, 6 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.......
  #2 (permalink)  
Antiguo 23/11/2010, 09:32
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: No toma el float

Revisandolo con el firebug, tu li no tiene ningún estilo, de hecho es como si no estuviera escrito, fíjate pq es eso.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #3 (permalink)  
Antiguo 23/11/2010, 09:46
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: No toma el float

Vos tenes esto:
Código CSS:
Ver original
  1. #navi li a{
  2. background-color:#000000;
  3. color:#FFFFFF;
  4. display:block;
  5. font-size:11px;
  6. padding:4px 0;
  7. text-align:center;
  8. text-decoration:none;
  9. }

agregale el float:left; y listo
Slds.-
  #4 (permalink)  
Antiguo 23/11/2010, 10:08
Avatar de el_cesar  
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.411
Antigüedad: 16 años, 6 meses
Puntos: 20
Respuesta: No toma el float

Cita:
Iniciado por DragonX Ver Mensaje
Vos tenes esto:
Código CSS:
Ver original
  1. #navi li a{
  2. background-color:#000000;
  3. color:#FFFFFF;
  4. display:block;
  5. font-size:11px;
  6. padding:4px 0;
  7. text-align:center;
  8. text-decoration:none;
  9. }

agregale el float:left; y listo
Slds.-

Listo ya le puse el float y lo acomoda horizontalmente, pero no me sale el efecto ni los espacios, asi es como se ve ahora www.crmbusiness.biz/practica/propuesta
__________________
Say no more.......
  #5 (permalink)  
Antiguo 23/11/2010, 10:13
Avatar de el_cesar  
Fecha de Ingreso: mayo-2001
Ubicación: Cali
Mensajes: 2.411
Antigüedad: 16 años, 6 meses
Puntos: 20
Respuesta: No toma el float

ya logre el espaciado modificando el padding en #navi li a {

pero ahora no me sale el cambio de color cuando el mouse esta sobre el enlace
__________________
Say no more.......

Etiquetas: float
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 01:26.