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.
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.
Float nadajesz dla obiektów menu, wyśrodkować możesz poprzez “margin: 0 auto;” zadeklarowanym rodzicowi, który powinien mięć określoną szerokość.
Mój kod:
Mógłbyś powiedzieć gdzie to zmienić?
#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).
Wyśrodkowało się, lecz wciąż robi się pionowe
No to gdzieś masz błąd lub inny obiekt powoduje problem, przykład (z dwoma elementami menu, menu o szerokości 21,2em).
Dziękuję ci dobry człowieku
A w jaki sposób mogę teraz nadać rozmiar (szerokość) stronie?
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.
Czy w owym
trzeba coś wpisywać, czy zostawić pusty, i dodawać obiekt/y?
Zostawiasz pusty, tak jak ten za “menu” i przed “content”.
W pliku HTML menu wstaw w znaczniki
menu