Ustawienie img w menu

[dervi3]

Witam

Mam problem z ustawieniem ikonek w bg menu.

Prosze o pomoc.


kod html menu:

Kod:

        <div class="menubg">
            <ul>
            <li><a href="#" id="m1"></a></li>
            <li><a href="#" id="m2"></a></li>
            <li><a href="#" id="m3"></a></li>
            <li><a href="#" id="m4"></a></li>
            <li><a href="#" id="m5"></a></li>
            <li><a href="#" id="m6"></a></li>
            <li><a href="#" id="m7"></a></li>
            <li><a href="#" id="m8"></a></li>
            <li><a href="#" id="m9"></a></li>
            <li><a href="#" id="m10"></a></li>
            <li><a href="#" id="m11"></a></li>
                </ul>      </div>

Kod css menu:

Kod:

.menubg{ width:1006px; height:52px;  margin: 120px 0px 0px 10px; background-image:url('img/menu.png');}
    .menubg ul { list-style: none; margin: 0px; padding: 0;}
        .menubg li{ float: left;border:0px;}
    .menubg img{border:0px;}
#m1 {width:115px;height:38px;float:left;background-image:url('img/ms1.png'); }
#m1:hover {width:115px;height:38px;float:left;background-image:url('img/m1.png');}
#m2 {width:84px;height:38px;float:left;background-image:url('img/ms2.png'); }
#m2:hover {width:84px;height:38px;float:left;background-image:url('img/m2.png'); }
#m3 {width:70px;height:38px;float:left;background-image:url('img/ms3.png'); }
#m3:hover {width:70px;height:38px;float:left;background-image:url('img/m3.png'); }
#m4 {width:94px;height:38px;float:left;background-image:url('img/ms4.png'); }
#m4:hover {width:94px;height:38px;float:left;background-image:url('img/m4.png');}
#m5 {width:80px;height:38px;float:left;background-image:url('img/ms5.png'); }
#m5:hover {width:80px;height:38px;float:left;background-image:url('img/m5.png');}
#m6 {width:87px;height:38px;float:left;background-image:url('img/ms6.png'); }
#m6:hover {width:87px;height:38px;float:left;background-image:url('img/m6.png'); }
#m7{width:82px;height:38px;float:left;background-image:url('img/ms7.png'); }
#m7:hover {width:82px;height:38px;float:left;background-image:url('img/m7.png'); }
#m8 {width:79px;height:38px;float:left;background-image:url('img/ms8.png'); }
#m8:hover {width:79px;height:38px;float:left;background-image:url('img/m8.png');}
#m9 {width:72px;height:38px;float:left;background-image:url('img/ms9.png'); }
#m9:hover {width:72px;height:38px;float:left;background-image:url('img/m9.png'); }
#m10 {width:87px;height:38px;float:left;background-image:url('img/ms10.png'); }
#m10:hover {width:87px;height:38px;float:left;background-image:url('img/m10.png'); }
#m11 {width:76px;height:38px;float:left;background-image:url('img/ms11.png');}
#m11:hover {width:76px;height:38px;float:left;background-image:url('img/m11.png'); }

Strona demo: http://skypedesign.xaa.pl/dawid/webspell/

[maciejkk]

Witam

Mam problem z ustawieniem ikonek w bg menu.

Prosze o pomoc.

Jakich ikonek? - opisz szczegółowiej problem..

[Pedro84]

overflow:hidden dla div.menubg.

PS. Masz syf w kodzie.

[dervi3]

Pedro84: overflow:hidden dla div.menubg. NIE DZIAŁA. JAK TO DALEM W DIV-BGMENU to tylko bgmenu (belka) poszla troche na dol a ikony znikły..


Chodzi mi aby ikony: Strona główna Dryżyny Mecze Osiągniecia .. itd znazazły się na belce czyli tej > http://skypedesign.xaa.pl/dawid/webspell/img/menu.png

[Kartofelek]

A czy ty wiesz np, że lista wcale nie musi mieć szerokości LI?
Możesz np ustawić jej tło, odpowiednie wymiary, a li floatować do lewej. I to wystarczy.
Masz pomieszane z marginesami i wysokościami. Trochę logiki jest, ale umiejętności zabrakło.
Zmień: .menubg - daj overflow:hidden. .menu - wyrzuć te marginesy i daj je odpowienie (pewnie z 7px wystarczy).

Tak naprawdę .menubg jest zbędnym kodem, bo samo ul wystarczy (tak jak napisałem na początku)

[dervi3]

Jak teraz belke dać do góry ?

[Kartofelek]

wysokość headerów to twa odpowiedź.

[dervi3]

Tak dzieki nie spostrzegłem tego.

PS. Ktoś tam pisał "PS. Masz syf w kodzie." Co musze zmienić aby tego "syfu" nie mieć?
Co robie źle.


PS2. Mam problem z roratorem

Kod:

.stepcarousel {position: relative; border : 0px; overflow : scroll; width: 510px; height: 150px; left : 90px;  top : -40px;}

Stosuje top: -40px; bo jak nie dam - to nei chce isc do gory rorator da sie to jakos zrobic,jak ?

[Pedro84]

PS. Ktoś tam pisał "PS. Masz syf w kodzie." Co musze zmienić aby tego "syfu" nie mieć?
Co robie źle.

Puste elementy, stosujesz divy bez zastanowienia, nie domykasz metatagów, nie grupujesz selektorów w css.

[Kartofelek]

Nie no bywało gorzej. Ogólnie cięcie całkiem fajne, po prostu zagubiłeś się ze stylowaniem.
Co można zmienić:
Herb - daj w niego jakieś hasło, albo coś w tym rodzaju. Niech to będzie h1. Stylowanie takie samo + margin:0 + text-indent:-999px + overflow:hidden;
Osobiście to logo dał bym jako img, bo to w końcu logo - część informacji.
Header był objął divem "header" i w nim dopiero rozbił na części. Dzięki temu było by bardziej logicznie "modułowo".

Strzałki lewo i prawo to shitowy kod. Ale to pewnie skrypt robi.

Top belka - to samo jak w przypadku loga - daj ten tekst i go ukryj za pomocą overflow:hidden i text-indent:-9999px;

CSS - sformatuj to coś. Dodaj komentarze. Ostatnimi czasy widziałem fajne formatowanie np tak:

/* -------------------- sekcja head ---------------------- */
.blabla {
.....
}

/* --------------------- sekcja main ------------------- */

O wiele bardziej czytelne

Osobiscie stosuje 1 linijkowce, bo mi się najlepiej to czyta, ale to kwestia wyboru.
Ah i te metadatgi popraw, bo ci "notepa" zrobiła shita.

Na zakończenie. Skrypt "carousel" pewnie będzie na każdej stronie - daj go więc do odzielnego pliku

---

i zainstaluj sobie Firebuga