CSS zarovnání menu na střed

Od: Datum: 12.09.12 22:45 odpovědí: 6 změna: 13.09.12 09:40

Mám menu , ale má všechny položky namačkané na levou stranu. Jak mám položky vycentrovat?

#cssmenu ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:12px;
font-weight:bold;
background:transparent url('images/OFF.gif';) repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:4px solid #004c99;
border-top:1px solid #74b0c6;
}
#cssmenu li{
display:block;
float:left;
margin:0;
padding:0;
}
#cssmenu li a{
display:block;
float:left;
color:black;
text-decoration:none;
font-weight:bold;
padding:12px 20px 0 20px;
height:24px;
background:transparent url('images/DIVIDER.gif';) no-repeat top right;
}
#cssmenu li a:hover{
background:transparent url('images/HOVER.gif';) no-repeat top right;
}


avatar
Upozornění
Tato otázka je 4 roky bez odpovědi a proto byla uzavřena.
Máte-li podobnou otázku, a nenašli jste vhodnou odpověď, založte novou otázku.
Seznam odpovědí:
 
moment čekejte prosím, probíhá přenos dat...
Zobrazení struktury odpovědí v otázce
Skrytí struktury odpovědí v otázce
Zobrazení struktury odpovědí v otázce

 

Odpovědi na otázku:
Datum: 12.09.12 23:56
 
avatar

Když dáte i relevantní část html (nebo vytvoříte jsfiddle nebo podobně..), tak vám to někdo určitě opraví. Nebo odkaz.

Menu je zřejmě vodorovně, chcete mít kolem všech položek stejně místa (padding pro a už máte), nebo je chcete rozmístit rovnoměrně na šířku stránky? Bude jich vždy stejný počet?

Ve druhém případě bych se s tím nepáral a - jak je sám nesnáším - bych tam dal tabulku. Pro blokové prvky (ať už li, nebo divy) a proměnný počet prvků existuje řešení jen s využitím hacků nebo css3, ani jedno z nich není prakticky použitelné.

 
Od: minsan*
Datum: 13.09.12 00:02
 

Chtělo by to zaslat odkaz na ukázku, nebo alespoň jaký to menu generuje HTML kód a co přesně je řazeno chybně vlevo (jeslti jde o obrázek položky v menu, nebo textový odkaz).

Pokud je to klasický text, zkusil bych přidat

#cssmenu li {

text-align: center;
display:block;
float:left;
margin:0;
padding:0;
}

 
Datum: 13.09.12 03:25
 
avatar

#cssmenu ul, #cssmenu li { display: block; float: left; margin: 0; padding: 0; list-style-type: none; text-align: center; } Případněpřířaďte i nadřazenému bloku text-align: center;

 
Od: nikola777
Datum: 13.09.12 07:51
 

Kluci děkuji Vám moc za odpovědi, ale bohužel mi to nefunguje *nevi*. V menu bude několik odkazů, ale jsou nalepené na levou stranu. Potřebuji aby byly uprostřed a nalevo a napravo bylo místo stajné. Mrknete mi prosím někdo na to? Jste super dík

http://www.ulozto.own.cz/./fi…e383d472d3e5f0dba4729fc12.rar

Od: minsan*
Datum: 13.09.12 09:10
 

V tomhle případě jde o problém, který popisuje dzordz,

Pokud bude menu pevně dané, dá se to teoreticky upravit přes padding u :

#cssmenu li a{
display:block;
float:left;
color:black;
text-decoration:none;
font-weight:bold;
padding:12px 43px 0 44px;
height:24px;
background:transparent url('images/DIVIDER.gif';) no-repeat top right;
}

je to ale nedobré řešení, při každé změně textu v položce se to rozhodí - pokud bude pořád stejný počet položek v menu byla by pak možnost nastavit pevnou šířku prvku :

#cssmenu li a {
background: url("images/DIVIDER.gif") no-repeat scroll right top transparent;
color: black;
display: block;
float: left;
font-weight: bold;
height: 24px;
padding: 12px 20px 0;
text-decoration: none;
width: 100px;
}
Ohodnoceno: 2x
 
Od: nikola777
Datum: 13.09.12 09:40
 

Děkuji mnohokrát, už to funguje*ua*

 

 

 

Neneseme odpovědnost za správnost informací a za škodu vzniklou jejich využitím. Jednotlivé odpovědi vyjadřují názory jejich autorů a nemusí se shodovat s názorem provozovatele poradny Poradte.cz

 
Copyright © 2004-2016 Poradna Poradte.cz. Všechna práva na poradně Poradte.cz vyhrazena.