+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Poziome menu obrazkowe !!!PROBLEM!!! (/thread-poziome-menu-obrazkowe-problem)
Poziome menu obrazkowe !!!PROBLEM!!! - jim_100 - 25-10-2010
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;
}RE: Poziome menu obrazkowe !!!PROBLEM!!! - ixtab - 25-10-2010
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;
}RE: Poziome menu obrazkowe !!!PROBLEM!!! - jim_100 - 25-10-2010
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ą ?????
RE: Poziome menu obrazkowe !!!PROBLEM!!! - ixtab - 25-10-2010
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 %)
RE: Poziome menu obrazkowe !!!PROBLEM!!! - jim_100 - 25-10-2010
ixtab! duży szacunek genialnie mi to wyjaśniłem!! Wielkie dzięki!!!