Zobacz temat - [Problem] Wyśrodkowanie menu

To jest tylko wersja do druku, aby zobaczyć pełną wersję tematu, kliknij TUTAJ
	phpBB2 by Przemo Support forów phpBB2 modified by Przemo

Ogólna pomoc dotycząca stylów - [Problem] Wyśrodkowanie menu

djpetrox - 23-09-2014, 10:47
Temat postu: [Problem] Wyśrodkowanie menu

Witam

Jak wyśrodkować menu?
Sam próbowałem w taki oto sposób:

Kod:

/* MENU */

#menu {
background: #7ca501;
float:center;
list-style: none;
margin: 0;
margin-left: 400px;
padding: 0;
width: 100%;
text-align:center
}
#menu li {
float: center;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#menu a {
background: #7ca501 url("images/seperator.gif") bottom right no-repeat;
color: #fff;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
#menu a:hover {
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color: #fff;
padding-bottom: 8px;

/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("formIE.css");

A oto efekt:
http://przemo.fsmods.ct8.pl/
http://screenshooter.net/100056715/vrsgtfx

Oneitatsu - 23-09-2014, 11:08

Nie ma czegoś takiego, jak "float: center". Można do lewej albo do prawej strony pojemnika. Kiedy stosujesz "margin", a zdefiniowana jest także szerokość obiektu, wtedy korzystaj z atrybutu "auto", czyli "margin: 0 auto;".
"text-align" służy do wyśrodkowywania tekstu i lepiej nie stosować go w budowie blokowej - choćby dla zasady.

Istnieją dodatkowe sposoby centrowania (pozycjonowanie z ujemnym marginesem np.), ale czy jest sens to tutaj opisywać? Twój wybór.

djpetrox - 23-09-2014, 12:34

Jestem dość zielony jeśli chodzi o CSS, więc może podpowiedziałbyś mi, w którym miejscu co wstawić.

Oneitatsu - 23-09-2014, 16:49

Mnie przez gardło nie przeszłoby takie pytanie, szczerze.

Jeśli ma swój kawałek miejsca (ftp), lub jakiś localhost, to polecam ci stworzyć na uboczu katalog do przeprowadzania testów. Stwórz tam sobie dwa pliki na początek: index.html i style.css. Niech pierwszy zawiera standardowy schemat (html, head, body...) i łączy się z plikiem .css. Od tej chwili możesz sobie testować rzeczy do woli. W przypadku "zacięcia" na jakiejś funkcji, zawsze masz w sieci poradniki - np. http://www.w3schools.com/ .

Na szybko:

Cytat:

ul#menu {
list-style-type: none;
min-width: 500px;
width: 500px;
margin: 0 auto; margin-top: 4px;
padding: 0;
background-color: #7ca501;
}

ul#menu li {
float: left
margin: 0;
padding: 0;
font: 67.5% "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

ul#menu a {
display: block;
float: left;
padding: 8px 12px;
background: #7ca501 url("images/seperator.gif") bottom right no-repeat;
color: white;
text-decoration: none;
}

ul#menu a:hover {
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color: white
}