Poziome menu obrazkowe !!!PROBLEM!!!

[jim_100]

Witam!

Panowie i Panie proszę o radę z poziomym menu obrazkowy??? o to adres strony: http://www.mojastronka2010.strefa.pl/ nie mogę ustawić menu żeby znajdowało się na środku div-a o id menu! pozycjonuje mi przyciski do lewej strony a ja chcę że w divie menu przyciski były po równo na środku ustawione!!

Proszę o pomoc ewentualnie jeśli całe menu źle zrobiłem to czekam na konkretną poradę jak zrobić to lepiej!!!!

A i jeszcze jedna sprawa: zauważyłem że po załadowaniu strony jak przesuwam po menu to taki dziwny mignięcie obrazka jest a później już zdjęcia ładnie się wczytują bez mignięcia jak pozbyć się tego ????

Poniżej podaje kod CSS:

Kod:

body{
margin: 0px;
padding: 0px;
text-align: center;
background-color: #e0e2d8;
}


div#kontener {
width: 780px;
margin: 0px auto;
text-align: justify;
}


div#naglowek{
margin: 0px;
height: 50px;
}

div#naglowek h1{
margin: 0px;
visibility: hidden;
}






#menu {

border: 1px dashed #CCCCCC;
margin: 0px auto;
width: 780px;
height: 42px;
}


#menu ul {
list-style-type: none;
overflow: auto;
margin: 0px;
padding: 0px;

}



#menu ul li {
float: left;  
margin: 0px auto;
}



#start {
margin: 0px auto;
display: block;
height: 42px;
width: 120px;
background: url('menu-start.png')no-repeat;
}
  #start:hover {
background: url('menu-start-on.png')no-repeat;
}


#oferta {
margin: 0px auto;
display: block;
height: 42px;
width: 120px;
background: url('menu-oferta.png')no-repeat;
}
  #oferta:hover {
background: url('menu-oferta-on.png')no-repeat;
}





#kontakt {
margin: 0px auto;
display: block;
height: 42px;
width: 120px;
background: url('menu-kontakt.png')no-repeat;
}
  #kontakt:hover {
background: url('menu-kontakt-on.png')no-repeat;
}



#blee {
margin: 0px auto;
display: block;
height: 42px;
width: 120px;
background: url('menu-blee.png')no-repeat;
}
  #blee:hover {
background: url('menu-blee-on.png')no-repeat;
}





div#belka {
padding: 0px;
margin: 0px;
height: 16px;
background: transparent url('belka.png') no-repeat;
}


div#tresc {
background: transparent url('tlo-tresc.png') repeat-y;
}


div#tresc h1 {
margin-top: 0px;
margin-bottom: 0px;
}

div#tresc * {
padding-left: 30px;
padding-right: 30px;
}


div#stopka{
height: 110px;
background: transparent url('stopka.png') no-repeat;
}

div#stopka2{
height: 115px;
background: transparent url('stopka2.png') no-repeat;
margin-bottom: 50px;
}


div#tresc p{
margin-bottom: 0px;
padding-bottom: 0px;
}

[ixtab]

Zamień:

Kod:

#menu ul {
list-style-type: none;
overflow: auto;
margin: 0px;
padding: 0px;

}

na:

Kod:

#menu ul {
list-style-type: none;
overflow: hidden;
width:490px;
margin: 0 auto;
padding: 0;
}

Co do "migających" obrazków: obrazek "miga", bo się ładuje. CSS pobiera i wczytuje ten obraz dopiero po najechaniu myszką, bo klasa jest ustawiona na Hover. To normalne. Ale... można się tego pozbyć. Musisz jednak edytować grafikę, mianowicie wrzucić (przykład) "menu-oferta.png" oraz "menu-oferta-on.png" do jednego obrazka... Zrób sobie dokument o wymiarach 120x84 px. (120px to szerokośc elementu menu, pozostaje bez zmian, a 84px to podwojona wysokość elementu menu). Otwórz "menu-oferta.png" i "menu-oferta-on.png". Wrzuć je obydwa do dokumentu, który przed chwilą utworzyłeś (120x84) i ułóż jeden pod drugim, ale tak, żeby na siebie nie nachodziły. Wrzuć "menu-oferta.png" na górę, pozostały na dół. Zapisz jako "menu-oferta.png" i wyślij na serwer. Teraz w CSS, zamiast podawać nowy obraz dla #oferta:hover, zmieniasz mu po prostu sposób wyświetlania, a zatem:

Kod:

#oferta {
margin: 0px auto;
display: block;
height: 42px;
width: 120px;
background: url('menu-oferta.png')no-repeat top center;
}
#oferta:hover {
background: url('menu-oferta.png')no-repeat bottom center;
}

[jim_100]

ok! dzięki zadziałało tylko jeśli mógłbyś mi jeszcze wyjaśnić skąd się wzięło to 490px ????? i co z tym mignięciem obrazków które mają się pojawić po najechaniu myszką ?????

[ixtab]

Dopisałem już o obrazkach, a 490px wzięło się stąd, że wszystkie elementy menu (<li>) razem wzięte mają mniej-więcej taką szerokość. Jeśli jakiś div ma być wyświetlany na środku, to poza automatycznym marginesem musi mieć określoną szerokość (w px lub %)

[jim_100]

ixtab! duży szacunek genialnie mi to wyjaśniłem!! Wielkie dzięki!!!