Jak wyśrodkować menu poziome (CSS)


(Squall Ask) #1

Witam!

Mam pytanie jak wyśrodkować menu poziome w css, ponieważ gdy nadam polecenie float: left, menu jest poziome, lecz gdy zmienie na float: center, przerzuci się na środek lecz, robi się pionowe.


(manieKMP) #2

Float nadajesz dla obiektów menu, wyśrodkować możesz poprzez “margin: 0 auto;” zadeklarowanym rodzicowi, który powinien mięć określoną szerokość.


(Squall Ask) #3

Mój kod:

Mógłbyś powiedzieć gdzie to zmienić?


(manieKMP) #4
#menu ul { list-style-type: none; margin: 0 auto; width: suma_szerokości_potomków;}

#menu li { margin: 0 0 .2em 0; float: left;}

#menu a { display: block; color: #FFF; background-color: #036; width: 9em; padding: .5em .8em; text-decoration: none; text-align: center;}

#menu a:hover{ background-color: #369; color: #FFF; }

Za “suma_szerokości_potomków” podaj odpowiednią wartość (nadałeś dla “a” szerokość 9em + 1.6em -suma lewego i prawego 0.8 dopełnienia-, czyli 10.6em x liczba elementów w menu).


(Squall Ask) #5

Wyśrodkowało się, lecz wciąż robi się pionowe :frowning:


(manieKMP) #6

No to gdzieś masz błąd lub inny obiekt powoduje problem, przykład (z dwoma elementami menu, menu o szerokości 21,2em).


(Squall Ask) #7

(manieKMP) #8

(Squall Ask) #9

Dziękuję ci dobry człowieku :slight_smile:

A w jaki sposób mogę teraz nadać rozmiar (szerokość) stronie?


(manieKMP) #10

Szerokość Twojej strony znajduje się w #container {width: 1000px; margin: 0 auto;}, ale jak będziesz ją zmniejszać lub zwiększać, zajmij się też szerokościami w:

#sideleft {width: 700px; float: left;}

#sideright {width: 300px; float: left; font-family: Courier New; font-size: 12px;}

Poza tym jeżeli dodasz ramkę dla tych obiektów, odejmij od ich szerokości, szerokość tej ramki (border lewy i prawy razy dwa).

A i jeszcze jedno, jak będziesz dodawał jakiś obiekt pod lewym i prawym panelem (np. stopę), wklej przed nim

(jest on w kodzie strony…), jest on po to by likwidować działanie float’u obiektów go poprzedzających.


(Squall Ask) #11

Czy w owym

trzeba coś wpisywać, czy zostawić pusty, i dodawać obiekt/y?


(manieKMP) #12

Zostawiasz pusty, tak jak ten za “menu” i przed “content”.


(Szymek) #13

W pliku HTML menu wstaw w znaczniki

menu