3 obrazki w div - dlaczego się rozwala?

[disaster]

Dziwny temat, bo nie wiem do końca jak zapytać.
Popatrzcie niżej:

obecny kod jednego z divów

Kod:

<div id="menu_gora">
            <a href="......" title="Katalog "><img src="img/katalog.png" alt="Katalog "/></a><a href="......." title="Poradnik"><img src="img/poradnik.png" alt="Poradnik"/></a><a href="........." title="Zapytanie ofertowe"><img src="img/zapytanie_ofertowe.png" alt="Zapytanie ofertowe"/></a>
        </div>

I teraz jeden kłopot. Jeśli powyższe pola menu są jedno za drugim w kodzie, czyli bez

Kod:

<br />

to wyświetlają się jedn obok drugiego i jest ok.

Ale jak chciałem dla czytelności kodu dać tak:

Kod:

<div id="menu_gora">
<a href="......" title="Katalog "><img src="img/katalog.png" alt="Katalog "/></a>
<a href=".........." title="Poradnik"><img src="img/poradnik.png" alt="Poradnik"/></a>
<a href="......." title="Zapytanie ofertowe"><img src="img/zapytanie_ofertowe.png" alt="Zapytanie ofertowe"/></a>
        </div>

To już górna menu wygląda inaczej, tzn zapytanie_ofertowe schodzi na stronie poniżej katalogu i poradnika. Gdzie robię błąd, bo ja go nie widzę.

[Pedro84]

Zarzuć CSSem. Już widzę jeden błąd - poważny. Jeśli to menu, to powinno być zrobione na liście.

[Ancik]

Witaj,

Znajdź jakiś tutorial, jak powinno się bydowac menu, bo z tego co widzę, nie masz o tym pojęcią i próbujesz to zrobic, bazując na swoim doświadczeniu. Poczytaj trochę najpierw. Jak wspomniał Pedro powyżej, menu powinno byc oparte na liście, nie na linkach w divie. Pozatym bez raczej nie masz szans na powodznie.

Pozdrawiam.

[disaster]

Zarzuć CSSem. Już widzę jeden błąd - poważny. Jeśli to menu, to powinno być zrobione na liście.

Kod:

div.menu_gora {
    width: 544px;
    height: 153px;
    float: right;
    background: url('img/menu.png');
}

---

Witaj,

Znajdź jakiś tutorial, jak powinno się bydowac menu, bo z tego co widzę, nie masz o tym pojęcią i próbujesz to zrobic, bazując na swoim doświadczeniu. Poczytaj trochę najpierw. Jak wspomniał Pedro powyżej, menu powinno byc oparte na liście, nie na linkach w divie. Pozatym bez raczej nie masz szans na powodznie.

Pozdrawiam.

Daj sobie spokój z takim odpowiedziami. Każdy głupi mże napisać: "pocztaj tutorial".

Ja chciałem takiego rozwiązania, więc pytam odnośnie tego co robiłem.

[Kartofelek]

"Pozatym bez raczej nie masz szans na powodznie." Jak to nie ma na powodzenie? Zrobienie menu na ul to stosowana praktyka, którą można zastosować. Jak zrobisz inaczej, nie urwie ci głowy.

Twoje menu powinno wyglądać tak:

<ul class="menu_gora">
<li class="menu_gora_katalog"><a href="">Katalog</a></li>
<li class="menu_gora_poradnik"><a href="">Poradnik</a></li>
<li class="menu_gora_zapytanie"><a href="">Zapytanie ofertowe</a></li>
</ul>

Reszta to stylowanie.

.menu_gora {list-style-type:none; margin:0; padding:0; float:right; background:url(img/menu.png) no-repeat; width:544px; height:153px;}
.menu_gora li {float:left; width:.....px; height:153px;}
.menu_gora .menu_gora_katalog {background:url(img/katalog.png) no-repeat;}
.menu_gora .menu_gora_poradnik {background:url(img/poradnik.png) no-repeat;}
.menu_gora .menu_gora_zapytanie {background:url(img/img/zapytanie_ofertowe.png) no-repeat;}
.menu_gora li a {width:100%; height:153px; display:block; text-indent:-999px; overflow:hidden;}

Było to już milion razy na tym forum.

[disaster]

"Pozatym bez raczej nie masz szans na powodznie." Jak to nie ma na powodzenie? Zrobienie menu na ul to stosowana praktyka, którą można zastosować. Jak zrobisz inaczej, nie urwie ci głowy.

Twoje menu powinno wyglądać tak:

<ul class="menu_gora">
<li class="menu_gora_katalog"><a href="">Katalog</a></li>
<li class="menu_gora_poradnik"><a href="">Poradnik</a></li>
<li class="menu_gora_zapytanie"><a href="">Zapytanie ofertowe</a></li>
</ul>

Reszta to stylowanie.

.menu_gora {list-style-type:none; margin:0; padding:0; float:right; background:url(img/menu.png) no-repeat; width:544px; height:153px;}
.menu_gora li {float:left; width:.....px; height:153px;}
.menu_gora .menu_gora_katalog {background:url(img/katalog.png) no-repeat;}
.menu_gora .menu_gora_poradnik {background:url(img/poradnik.png) no-repeat;}
.menu_gora .menu_gora_zapytanie {background:url(img/img/zapytanie_ofertowe.png) no-repeat;}
.menu_gora li a {width:100%; height:153px; display:block; text-indent:-999px; overflow:hidden;}

Było to już milion razy na tym forum.

Dałeś .menu_gora li jako jedno. A img tego menu mają rózne szer.

[Pedro84]

Dałeś .menu_gora li jako jedno. A img tego menu mają rózne szer.

Dodaj sobie klasy i styluj, trochę samodzielności. Ziemniaczek Ci gotowe rozwiązanie podał.

[disaster]

Dałeś .menu_gora li jako jedno. A img tego menu mają rózne szer.

Dodaj sobie klasy i styluj, trochę samodzielności. Ziemniaczek Ci gotowe rozwiązanie podał.

Na pewno nie jest to gotowe rozwiązanie pod img menu, które mają różne szerokości

[Pedro84]

Dałeś .menu_gora li jako jedno. A img tego menu mają rózne szer.

Dodaj sobie klasy i styluj, trochę samodzielności. Ziemniaczek Ci gotowe rozwiązanie podał.

Na pewno nie jest to gotowe rozwiązanie pod img menu, które mają różne szerokości

Rozumiesz ten kod? Nie zauważyłem, ale tam masz klasy, przenieś tylko szerokość!!

[disaster]

Dałeś .menu_gora li jako jedno. A img tego menu mają rózne szer.

Dodaj sobie klasy i styluj, trochę samodzielności. Ziemniaczek Ci gotowe rozwiązanie podał.

Na pewno nie jest to gotowe rozwiązanie pod img menu, które mają różne szerokości

Rozumiesz ten kod? Nie zauważyłem, ale tam masz klasy, przenieś tylko szerokość!!

Rozumiem. Przypisać szerokości dla każdej klas menu tak? To po co .menu_gora li {float:left; width:.....px; height:153px;} ???