Como se soluciona este problema del menu

Citar

Escrito el 08 Nov 2008 03:50 am

hola amigos, en esta misma web encontre un tutorial de css
http://www.cristalab.com/tutoriales/130/crear-menus-de-navegacion-en-css-usando-listas.html
el problema que encuentro es que asi le coloque la propiedad "list-style:none;" me siguen saliendo viñetas... y por lo tanto el menu no me queda totalmente horizontal en la imagen que les pongo lo pueden entender mejor

aqui tabien les pongo el css

Código :

#navi li a {
   list-style:none;
   display:block;
   width:100px;
   padding:4px 0;
   text-decoration:none;
   text-align:center;
   font-size:11px;
   color:#FFFFFF;
   background-color:#000000;
   border-left:10px solid #666666;
   list-style-type: none;
   float:left;
}
#navi li a:hover {
   color:#99CC00;
   background-color:#003366;
   border-left-color:#99CC00;

}

este es el html

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<link href="Untitled-3.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="navi">
  <li><a href="#">inicio</a></li>
  <li><a href="#">acerca de</a></li>
  <li><a href="#">contactos</a></li>
</ul>
</body>
</html>

por si acaso todavia no me entienden lo que deseo hacer es que el menu queda horizontalmente no como sale en la imagen
salu2

Por Magc

11 de clabLevel

Envíale un mensaje privado

venezuela

Citar

Escrito el 08 Nov 2008 04:58 am

El list-style debes atribuírselo al "ul" o al "li", no al "a".

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell Héroes

Envíale un mensaje privado Web

Piccola Venezia...

@the_fricky

Citar

Escrito el 08 Nov 2008 05:55 pm

la verdad que sigo sin entender podrian decirme que es en si que debo modificarle al css

Por Magc

11 de clabLevel

Envíale un mensaje privado

venezuela

Citar

Escrito el 09 Nov 2008 05:50 am

Agrégale esto a tu css.

Código HTML :

#navi{
   list-style:none;
}

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell Héroes

Envíale un mensaje privado Web

Piccola Venezia...

@the_fricky

Citar

Escrito el 09 Nov 2008 11:07 pm

ok ya lo resolvi pero cuando lo visualizo en IE 7 se ve mal como el la imagen, no se mantienen todos e n la misma linea...

con firefox no tiene problemas solo ocurre con internet explorer 7
quien me puede explicar esto???
es urgente x favor...
aqui les pongo el css que tiene

Código :

#navi {
   list-style:none;
   margin:0;
   padding:0;
}
#navi li a {
   margin: 0px;
   display:block;
   width:100px;
   padding:4px 0;
   text-decoration:none;
   text-align:center;
   font-size:16px;
   color: #FFFFFF;
   background-color: #000066;
   border-left:10px solid #666666;
   float: left;

}
#navi li a:hover {
   color:#99CC00;
   background-color:#003366;
   border-left-color:#99CC00; 
}

Por Magc

11 de clabLevel

Envíale un mensaje privado

venezuela

Citar

Escrito el 10 Nov 2008 12:31 am

Código :

#navi ul
{
/*otras propiedades*/
list-style-type:none;
}

saludos

Por Maikel

BOFH

5575 de clabLevel

22 tutoriales
5 articulos

Genero:Masculino Team Cristalab

Envíale un mensaje privado

Claber de baja indefinida

@maikelsalazar

Citar

Escrito el 11 Nov 2008 02:56 am

no se porque pero quede igual

Por Magc

11 de clabLevel

Envíale un mensaje privado

venezuela

Citar

Escrito el 11 Nov 2008 03:19 am

Ah ya... no había leído tu css, sorry. Es así:

Código :

ul#navi
{
/*otras propiedades*/
list-style-type:none;
}

saludos

Por Maikel

BOFH

5575 de clabLevel

22 tutoriales
5 articulos

Genero:Masculino Team Cristalab

Envíale un mensaje privado

Claber de baja indefinida

@maikelsalazar

Citar

Escrito el 11 Nov 2008 10:32 pm

umm... ya te entiendo muchas gracias amigos por su interes.

Por Magc

11 de clabLevel

Envíale un mensaje privado

venezuela

Citar

Escrito el 11 Nov 2008 10:36 pm

no se que pasa pero sigue ocurriendo, mejor lo pongo vertical

Por Magc

11 de clabLevel

Envíale un mensaje privado

venezuela

Citar

Escrito el 11 Nov 2008 10:46 pm

Eh para ponerlo horizontal es algo como:

Código :

ul#navi {
   list-style-type:none;
   margin:0;
   padding:0;
}

ul#navi li
{
   float: left;
   margin:0;
   padding:0; 
}

ul#navi li a {
   margin: 0px;
   display:block;
   width:100px;
   padding:4px 0;
   text-decoration:none;
   text-align:center;
   font-size:16px;
   color: #FFFFFF;
   background-color: #000066;
   border-left:10px solid #666666;
}
ul#navi li a:hover {
   color:#99CC00;
   background-color:#003366;
   border-left-color:#99CC00; 
}

Por otro lado, esto te puede servir:
Tutorial de posicionamiento y layout en CSS

saludos

Por Maikel

BOFH

5575 de clabLevel

22 tutoriales
5 articulos

Genero:Masculino Team Cristalab

Envíale un mensaje privado

Claber de baja indefinida

@maikelsalazar

Citar

Escrito el 12 Nov 2008 02:50 am

Errr, no estas poniendo todo el css del tutorial, ese es el problema que tienes, ya que no viste lo que hace cada parte, siquiera copia todo el codigo, ya que hay varias declaraciones:

Código :

#navi {  
   list-style:none;
   margin:0;
   padding:0;
}
#navi li {
   margin:2px;
   padding:0; //Ya no necesito el padding, tambien quitare el borde que puse antes.
   float:left;
}
#navi li a {
   display:block; //Convertimos el vínculo en un bloque.
   width:100px;
   padding:4px 0;
   text-decoration:none;
   text-align:center;
   font-size:11px;
   color:#FFFFFF;
   background-color:#000000;
}
//Ahora vamos con el hover:
#navi li a:hover {
   color:#99CC00;
   background-color:#003366;
}

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell REC Héroes

Envíale un mensaje privado Web

London, UK

@ramono

Citar

Escrito el 13 Nov 2008 02:50 am

ok ya lo solucione se visualiza bien en firefox y IE gracias amigos por su interes
tal vez sea una tonteria pero para un novato como yo parece toda una complejidad...
jajajaja
salu2

Por Magc

11 de clabLevel

Envíale un mensaje privado

venezuela

Como se soluciona este problema del menu

Escribe una respuesta rapida