Centrare una barra dei menu orizzontale spia Lee Margolies - 11-05-2009
Sto cercando di centrare una barra dei menu orizzontale spia in una pagina. Per qualche ragione, vale a dire, FF e Safari sono tutti di sinistra che giustificano il menu e se non si dispone di una proprietà Padding (vedi sotto) in UL.Menubarhorizontal essa sposta l'intera barra di circa 20 pixel a destra.
Qualsiasi aiuto è possibile offrire è apprezzato...
Thanx,
LM
/ * Il contenitore esterno della barra dei menu, Una casella di auto larghezza senza Marginei o Padding * /
Ul.Menubarhorizontal
{
Margine: 0;
Padding: 0;
Ampiezza: 666px;
}
/ * Impostare la barra dei menu attiva con questa classe, AttuaLMente su Z-index per ospitare bug di rendering vale a dire: http:/ / therealcrisp.XS4ALL.NL / meuk / ie-zindexbug.html * /
Ul.Menubaractive
{
Z-index: 1000;
}
/ Contenitori voce di menu *, Bambini posizione rispetto a questo contenitore e una larghezza fissa * /
Ul.Menubarhorizontal li
{
List-style-type: None;
Font-size: 100%;
Posizione: Relativo;
Line-Altezza: -15;
Cursore: Puntatore;
Ampiezza: 133.2px;
Float: Sinistra;
}
/ * Sottomenu dovrebbe apparire al di sotto dei genitori (in alto: 0) con un più alto Z-index, Ma sono iniziaLMente fuori il lato sinistro dello schermo (-1000em) * /
Ul.Menubarhorizontal Ul
{
Margine: 0;
Padding: 0;
List-style-type: None;
Font-size: 100%;
Z-index: 1020;
Cursore: DefaUlt;
Sinistra: -1000em;
Ampiezza: 160px;
Posizione: Assoluta;
Background-Colore: # 005dab;
Colore: # fff;
}
/ * Sottomenu che sta dimostrando con designazione della classe menubarsubmenuvisible, Abbiamo fissato a sinistra per auto cosi 'si tratta sUllo schermo sotto la sua voce di menu principale * /
Ul.Menubarhorizontal Ul.Menubarsubmenuvisible
{
Sinistra: Auto;
}
/ * Contenitori voce di menu vengono stessa larghezza fissa come genitore * /
Ul.Menubarhorizontal li Ul
{
Font-family: Arial, Helvetica, Sans-serif;
Font-size: 12px;
Font-weight: Normale;
Ampiezza: 160px;
Border-Ampiezza: 1px 2px 1px 2px;
Border-style: Solid;
Border-Colore: # 005dab;
Background-Colore: Trasparente;
Float: None;
Margine: 0 0 0 -1.5%;
}
/ * Sottomenu che sta dimostrando con designazione della classe menubarsubmenuvisible, Abbiamo stabilito lasciato a 0 quindi si tratta sUllo schermo * /
Ul.Menubarhorizontal Ul.Menubarsubmenuvisible Ul.Menubarsubmenuvisible
{
Sinistra: Auto;
Superiore: 0;
}
/ * Le voci di menu sono un blocco di Coloree grigio chiaro con imbottitura e nessuna decorazione del testo * /
Ul.Menubarhorizontal uno
{
Visualizzare: Blocco;
Cursore: Puntatore;
Background-Colore: # fff;
Padding: 0.5em 0.75em;
Colore: # 005dab;
Text-decoration: None;
Text-align: Center;
}
/ * Le voci di menu che hanno il mouse sopra o Focus hanno uno sfondo blu e testo bianco * /
Ul.Menubarhorizontal uno:Hover, Ul.Menubarhorizontal uno:Focus
{
Background-Colore: # 005dab;
Colore: # fff;
}
Ul.Menubarhorizontal Ul a (
Text-align: Sinistra;
}
/ * Le voci di menu che si apre con sottomenu sono impostate per menubaritemHover con uno sfondo blu e testo bianco * /
Ul.Menubarhorizontal uno.MenubaritemHover, Ul.Menubarhorizontal uno.MenubaritemsubmenuHover, Ul.Menubarhorizontal uno.Menubarsubmenuvisible
{
Text-decoration: Nessuno
}
/ * Hack per IE: A stabilizzare l'aspetto delle voci di menu, la barra in Float è quello di mantenere cioè 5.0 di parsing * /
@ media screen, Proiezione
{
Ul.Menubarhorizontal li.Menubaritemie
{
Visualizzare: Inline;
F \ loat: Sinistra;
}
}
Ri: Centrare una barra dei menu orizzontale spia Fernando Mol - 11-06-2009
Hai bisogno per giocare con il tuo larghezze.
Adesso, Tutta la larghezza del menu non dividersi il numero di elementi del menu che hai. Ricordare, Schermi misure in pixel.
Modificare la larghezza della colonna centrale (dove avete il vostro menu di serie), e ne fanno una larghezza che può essere suddiviso in 5, Il numero di voci di menu che hai. Allora, Giocare con la larghezza del vostro voci di elenco e le frontiere per adattarlo.
Spero che questo aiuta
* Ricordo di condividere un link al vostro sito e per votare i post. Questo è un servizio gratuito per voi e per noi.
Ri: Centrare una barra dei menu orizzontale spia Lee Margolies - 11-06-2009
Grazie per l'aiuto...
Ho cercato di regolare la larghezza e si tratta ancora su di dimensioni troppo piccole o troppo lunga. Poiché il Spry è annidato in un tag div (navbar), Ho bisogno solo di adattare tale larghezza div a un multiplo di 5 o ho bisogno di andare più in alto nella catena?
Grazie di nuovo!
LM
Lee Margolies
http://www.Lmcreativemotion.com
Twitter: @ LMcreativemotio
Ri: Centrare una barra dei menu orizzontale spia Fernando Mol - 11-07-2009
Il menu è all'interno di un contenitore. Che il contenitore deve essere diviso per 5 a un numero quadrato.
Che è il numero che si deve dare per la larghezza di ogni elemento del menu. Considerando boders.
Io non sto dicendo esattamente dove mettere i numeri, Ma è un processo di tentativi ed errori, Ma spero che l'idea.
Seguire questa regola anche: Il numero divisibile deve essere una coppia.
* Ricordo di condividere un link al vostro sito e per votare i post. Questo è un servizio gratuito per voi e per noi.
