+- 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ł: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Ustawienie img w menu (/thread-ustawienie-img-w-menu)
Strony:
1
2
Ustawienie img w menu - dervi3 - 02-01-2011
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/
RE: Ustawienie img w menu - maciejkk - 02-01-2011
(02-01-2011, 19:36)dervi3 napisał(a): Witam
Mam problem z ustawieniem ikonek w bg menu.
Prosze o pomoc.
Jakich ikonek? - opisz szczegółowiej problem..
RE: Ustawienie img w menu - Pedro84 - 02-01-2011
overflow:hidden dla div.menubg.
PS. Masz syf w kodzie.
RE: Ustawienie img w menu - dervi3 - 04-01-2011
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
RE: Ustawienie img w menu - Kartofelek - 04-01-2011
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)
RE: Ustawienie img w menu - dervi3 - 04-01-2011
Jak teraz belke dać do góry ?
RE: Ustawienie img w menu - Kartofelek - 04-01-2011
wysokość headerów to twa odpowiedź.
RE: Ustawienie img w menu - dervi3 - 04-01-2011
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 ?
RE: Ustawienie img w menu - Pedro84 - 04-01-2011
(04-01-2011, 15:48)dervi3 napisał(a): PS. Ktoś tam pisał "PS. Masz syf w kodzie." Co musze zmienić aby tego "syfu" nie mieć?Puste elementy, stosujesz divy bez zastanowienia, nie domykasz metatagów, nie grupujesz selektorów w css.
Co robie źle.
RE: Ustawienie img w menu - Kartofelek - 04-01-2011
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