MENUS: desplazar a izquierda solapas

[Italico76]

Hola amigos: voy a volver a molestarlos (siiii una vez mas!) porque tengo un menú donde las solapas que dicen "| Inicio | opcion1 | opcion2 | etc .... " me aparece demasiado a derecha y cuando intento correrla hacia izquierda con margin-left se me superponen todas las leyendas.

Les dejo los CSS a ver si me ayudan:

#navigation{
height:27px;
width: 800px;
line-height:27px;
margin:-8px 10px 10px 0px;
_margin:-8px 10px 10px 0px;
background: $menubgcolor;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #888888;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.825em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:$menuhoverbgcolor ;
color:#000000;
text-decoration:none;
}

La web donde esta implementado tiene esta implementado es esta (es el menu que esta arriba de la foto)

AHHH el problema es que depende donde ponga el margin-left, o se superponen los textos de cada solapa O BIEN, se corre todo el menu hacia izquierda PERO se mueve con el color que lo rodea (y aparece ese color bordo arriba del margen gris que bordea el DIV central)

GRACIAS!!!!!

[Italico76]

Hey..... nadie me puede ayudar con esto ?

[Proguri]

Hi !

Aqui estaba el problema:

Código HTML:

#navigation{
height:27px;
width: 800px;
line-height:27px;
margin:-8px 10px 10px 0px;
_margin:-8px 10px 10px 0px;
background: $menubgcolor;
}

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

#navigation li{
float:left;
border-right:1px solid #888888;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.825em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background:$menuhoverbgcolor ;
color:#000000;
text-decoration:none;
}

Si te fijas te daras cuenta que los "LIs" tienen Padding y Margin propio, se los eliminas, y luego a cada uno le aplicas por ejemplo un padding (como ya lo estabas haciendo)

Espero te sea util!

-ByE-

[Italico76]

Proguri: si toco la linea que dice ....

padding:0 10px;

... se me superponen todas las leyendas :(

[PedroRodas]

podrias poner el div con position relative, y ajustarlo con left

[Mikmoro]

Iniciado por Italico76

Proguri: si toco la linea que dice ....
... se me superponen todas las leyendas :(

Creo que lo que te dice Proguri es que añadas este selector a tu css, que es lo correcto:

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