ďťż

[CSS?] Rozwijane menu Z grafiką

Podstrony

telcocafe

Witam, jestem początkujący w temacie tworzenia stron www i mam pewnie problem z poziomym menu w css. Sprawa wygląda tak, chciałem zrobić rozwijane menu tak żeby w każdej linijce niżej była inna grafika z a:hover tylko nie wiem czy tak się da szukałem juz na wielu stronach, ale nigdzie się z tym nie spotkałem.

Będę wdzięczny za każdą pomoc.

background-image?

No to mam tylko że wtedy to pod wszystkimi jest jedno i to samo. I nie wiem czy trzeba coś przypisać każdej "linijce".

Nie nadajesz liście, a poszczególnym elementom ten styl albo używasz tagu img.

No udało mi się to zrobić w osobnym pliku html (użyłem id do każdego), ale teraz chciałem to wstawić na stronę właściwą i wszystko się poje***o :/ Skopiowałem style i wszystko, a na stronie nic nie ma. Ma ktoś jakiś pomysł?

PS: andrzej_aa dzięki za pomoc.

Możliwe, zależy co zrobiłeś nie tak.

No właśnie nie wiem wszystko wkleiłem i niby powinno działać, ale w miejscu gdzie ma być menu nic niema tylko jak się tam najedzie to wysuwa się lista z menu w czarnej okrojonej postaci.

Ech... Chodzi mi o to, że powinieneś rozjaśnić problem. Nie jesteśmy magikami, nie czytamy nikomu w myślach i przydałoby się, gdybyś wkleił jakikolwiek kod, który może powodować ten błąd. Może po prostu chodzi o ścieżki, np., dajesz file:///c:/docs/profil/pulpit/plik.gif zamiast plik.gif.
Użytkownik andrzej_aa edytował ten post 17 maj 2010, 12:32
Pierwszy kod tylko menu

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS DropDown Menu</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <meta http-equiv="X-UA-Compatible" content="IE=8" />  <link rel="stylesheet" type="text/css" media="screen,projection" href="style.css" /> </head> <body>  <div class="mainmenu"> <ul> <li id="klanmenu"><a href="/" target="_self" ></a><ul class="ul_ch"> <li id="forum"><a href="BlitzKrieg/klan_menu.html" target="_self" ></a></li> <li id="graczebk"><a href="#" target="_self" ></a></li> <li id="sparing"><a href="#" target="_self" ></a></li> <li id="server"><a herf="BlitzKrieg/klan_menu.html" target="_self" ></a></li> </ul> <li id="news"><a href="#" target="_self" ></a><ul class="ul_ch"> <li id="kampania"><a href="#" target="_self" ></a></li> <li id="bledyet"><a href="#" target="_self" ></a></li> <li id="cfg"><a href="#" target="_self" ></a></li> <li id="bindy"><a href="#" target="_self" ></a></li> </ul> <li id="kontakt"><a href="#" target="_self" ></a><ul class="ul_ch"> </ul> <li id="download"><a href="#" ></a></li> <li id="onas"><a href="#" ></a></li> </ul> </div>  </body> </html>

CSS (i tu jest dosyć namieszany)
@charset "utf-8"; /* CSS Document */ body { background-color: #ffffff; /* for pull-down menu to work in IE6*/ behavior:url("csshover2.htc"); } .a{ width:150px } #klanmenu{ background-image:url(BlitzKrieg/images/Button/Button1.jpg); width:150px; height:37px; } #news{ background-image:url(BlitzKrieg/images/Button/Button2.jpg); width:159px; height:37px; } #kontakt{ background-image:url(BlitzKrieg/images/Button/Button3.jpg); width:170px; height:37px; } #download{ background-image:url(BlitzKrieg/images/Button/Button4.jpg); width:163px; height:37px; } #onas{ background-image:url(BlitzKrieg/images/Button/Button5.jpg); width:158px; height:37px; } #forum{ background-image:url(BlitzKrieg/images/Pod_menu/forum1.jpg); width:182px; height:26px; } #graczebk{ background-image:url(BlitzKrieg/images/Pod_menu/gracze1.jpg); width:182px; height:26px; } #sparing{ background-image:url(BlitzKrieg/images/Pod_menu/sparing1.jpg); width:182px; height:26px; } #server{ background-image:url(BlitzKrieg/images/Pod_menu/serwer1.jpg); width:182px; height:26px; } #kampania{ background-image:url(BlitzKrieg/images/Pod_menu/kampania1.jpg); width:152px; height:26px; } #bledyet{ background-image:url(BlitzKrieg/images/Pod_menu/bledyet1.jpg); width:152px; height:26px; } #cfg{ background-image:url(BlitzKrieg/images/Pod_menu/cfg1.jpg); width:152px; height:26px; } #bindy{ background-image:url(BlitzKrieg/images/Pod_menu/bindy1.jpg); width:152px; height:26px; } #bindy a:hover{ background-image:url(BlitzKrieg/images/Pod_menu/bindy2.jpg); width:152px; height:26px; } /* pull-down mainmenu css */ .mainmenu{ float: left; width: 100%; padding: 0; } .mainmenu ul { float: left; width: 100%; height:37px; list-style: none; line-height: 1; background-image:url(BlitzKrieg/images/Tlo_menu.jpg); background-repeat:repeat-x; padding: 0; margin: 0 0 1em 0; } .mainmenu a, .mainmenu a:visited { display: block; text-decoration: none; padding: 18px 19px; width:26px; } .mainmenu ul ul a{ width:100%; height:26px; } .mainmenu ul a{ width:1%; } .mainmenu li { float: left; margin:0; padding:0; width:26px; } .mainmenu ul li { float:left; position:relative; width:26px; } .mainmenu ul li a { white-space:nowrap; width:1px; } .mainmenu li ul { position: absolute; left: -999em; height: auto; width:26px; background: #000; font-weight: normal; border-width: 1px; margin: 0; } .mainmenu li li { width:15em; height:26px; } .mainmenu li li a{ width:13em; height:26px; } .mainmenu li ul { margin: 0; } .mainmenu li ul ul { margin: -2.8em 0 0 13.5em; } .ul_ch, .mainmenu li:hover ul ul, .mainmenu li li:hover ul ul, .mainmenu li li li:hover ul ul, .mainmenu li li li li:hover ul ul, .mainmenu li li li li li:hover ul ul { left: -999em; } .mainmenu li:hover ul, .mainmenu li li:hover ul, .mainmenu li li li:hover ul, .mainmenu li li li li:hover ul, .mainmenu li li li li li:hover ul { left: auto; } .mainmenu li:hover>ul.ul_ch { left: auto; } #forum a:hover{ background: #000000; width:186px; height:26px; } .mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{ color:#800000; } .mainmenu li:hover li a, .mainmenu li li:hover li a, .mainmenu li li li:hover li a, .mainmenu li li li li:hover li a, .mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, .mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited { color:#FF0000; } .mainmenu li li:hover, .mainmenu li li li:hover, .mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover { background: #000; z-index:9999; } .mainmenu li li:hover a,.mainmenu li li li:hover a, .mainmenu li li li li:hover a, .mainmenu li li li li li:hover a { color: #800000; } .mainmenu ul ul a, .mainmenu ul ul a:visited, .mainmenu li li a, .mainmenu li li a:visited { color: #FF0000; } .mainmenu ul ul a:hover, .mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited , .mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited , .mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{ color: #800000; } .mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited , .mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited, .mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited, .mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{ color: #FF0000; } /* end of mainmenu css */

A tutaj już niby dodane do strony

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>BlitzKrieg</title> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <link href="copy of Style.css" rel="stylesheet" type="text/css" /> <style type="text/css">  </style> <body onload="MM_preloadImages('images/Button/Button1_2.jpg')"> <div id="outer_wrapper"> <div id="inner_wrapper"> <div id="content_wrapper"> <div id="Logo"> <p><img src="images/top_transpatern.gif" alt="Logo" width="800" height="176" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="poly" coords="208,68,218,107,161,128,98,166,2,165,2,104,181,62" href="index.html" alt="BlitzKrieg" /> </map> </p> <div class="mainmenu"> <ul> <li id="klanmenu"><a href="/" target="_self" ></a><ul class="ul_ch"> <li id="forum"><a href="BlitzKrieg/klan_menu.html" target="_self" ></a></li> <li id="graczebk"><a href="#" target="_self" ></a></li> <li id="sparing"><a href="#" target="_self" ></a></li> <li id="server"><a herf="BlitzKrieg/klan_menu.html" target="_self" ></a></li> </ul> <li id="news"><a href="#" target="_self" ></a><ul class="ul_ch"> <li id="kampania"><a href="#" target="_self" ></a></li> <li id="bledyet"><a href="#" target="_self" ></a></li> <li id="cfg"><a href="#" target="_self" ></a></li> <li id="bindy"><a href="#" target="_self" ></a></li> </ul> <li id="kontakt"><a href="#" target="_self" ></a><ul class="ul_ch"> </ul></li> <li id="download"><a href="#" ></a></li> <li id="onas" name="onas"><a href="#" ></a></li> </ul> </div> <div id="content_ineer"> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </div> <div id="footer_wraper"> <p><em>Copyright</em> © <em>2010 BlitzKrieg</em> </p> </div> </div> </body> </html>

CSS

<style type="text/css"> #klanmenu{ background-image:url(BlitzKrieg/images/Button/Button1.jpg); width:150px; height:37px; } #news{ background-image:url(BlitzKrieg/images/Button/Button2.jpg); width:159px; height:37px; } #kontakt{ background-image:url(BlitzKrieg/images/Button/Button3.jpg); width:170px; height:37px; } #download{ background-image:url(BlitzKrieg/images/Button/Button4.jpg); width:163px; height:37px; } #onas{ background-image:url(BlitzKrieg/images/Button/Button5.jpg); width:158px; height:37px; } #forum{ background-image:url(BlitzKrieg/images/Pod_menu/forum1.jpg); width:182px; height:26px; } #graczebk{ background-image:url(BlitzKrieg/images/Pod_menu/gracze1.jpg); width:182px; height:26px; } #sparing{ background-image:url(BlitzKrieg/images/Pod_menu/sparing1.jpg); width:182px; height:26px; } #server{ background-image:url(BlitzKrieg/images/Pod_menu/serwer1.jpg); width:182px; height:26px; } #kampania{ background-image:url(BlitzKrieg/images/Pod_menu/kampania1.jpg); width:152px; height:26px; } #bledyet{ background-image:url(BlitzKrieg/images/Pod_menu/bledyet1.jpg); width:152px; height:26px; } #cfg{ background-image:url(BlitzKrieg/images/Pod_menu/cfg1.jpg); width:152px; height:26px; } #bindy{ background-image:url(BlitzKrieg/images/Pod_menu/bindy1.jpg); width:152px; height:26px; } #bindy a:hover{ background-image:url(BlitzKrieg/images/Pod_menu/bindy2.jpg); width:152px; height:26px; } /* pull-down mainmenu css */ .mainmenu{ float: left; width: 100%; padding: 0; } .mainmenu ul { float: left; width: 100%; height:37px; list-style: none; line-height: 1; background-image:url(BlitzKrieg/images/Tlo_menu.jpg); background-repeat:repeat-x; padding: 0; margin: 0 0 1em 0; } .mainmenu a, .mainmenu a:visited { display: block; text-decoration: none; padding: 18px 19px; width:26px; } .mainmenu ul ul a{ width:100%; height:26px; } .mainmenu ul a{ width:1%; } .mainmenu li { float: left; margin:0; padding:0; width:26px; } .mainmenu ul li { float:left; position:relative; width:150px; height: 37px; } .mainmenu ul li a { white-space:nowrap; width:1px; } .mainmenu li ul { position: absolute; left: -999em; height: auto; width:26px; background: #000; font-weight: normal; border-width: 1px; margin: 0; } .mainmenu li li { width:15em; height:26px; } .mainmenu li li a{ width:13em; height:26px; } .mainmenu li ul { margin: 0; } .mainmenu li ul ul { margin: -2.8em 0 0 13.5em; } .ul_ch, .mainmenu li:hover ul ul, .mainmenu li li:hover ul ul, .mainmenu li li li:hover ul ul, .mainmenu li li li li:hover ul ul, .mainmenu li li li li li:hover ul ul { left: -999em; } .mainmenu li:hover ul, .mainmenu li li:hover ul, .mainmenu li li li:hover ul, .mainmenu li li li li:hover ul, .mainmenu li li li li li:hover ul { left: auto; } .mainmenu li:hover>ul.ul_ch { left: auto; } .mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{ color:#800000; } .mainmenu li:hover li a, .mainmenu li li:hover li a, .mainmenu li li li:hover li a, .mainmenu li li li li:hover li a, .mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, .mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited { color:#FF0000; } .mainmenu li li:hover, .mainmenu li li li:hover, .mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover { background: #000; z-index:9999; } .mainmenu li li:hover a,.mainmenu li li li:hover a, .mainmenu li li li li:hover a, .mainmenu li li li li li:hover a { color: #800000; } .mainmenu ul ul a, .mainmenu ul ul a:visited, .mainmenu li li a, .mainmenu li li a:visited { color: #FF0000; } .mainmenu ul ul a:hover, .mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited , .mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited , .mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited, .mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{ color: #800000; } .mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited , .mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited, .mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited, .mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{ color: #FF0000; } #outer_wrapper { text-align: left; margin-right: auto; margin-left: auto; background-image: url(images/BG-2_02.jpg); background-repeat: repeat-y; padding-top: 0px; } #inner_wrapper { margin-right: auto; margin-left: auto; background-image: url(images/top_tlo_transparent.gif); background-repeat: repeat-x; } #content_wrapper { width: 800px; margin-right: auto; margin-left: auto; background-repeat: no-repeat; } body { background-color: #000; /* for pull-down menu to work in IE6*/ behavior:url("csshover.htc"); } #content_ineer { float: left; width: 600px; border: 4px double #6C0000; margin-top: 20px; margin-bottom: 20px; text-align: center; font-size: 18px; font-family: "Times New Roman", Times, serif; padding-bottom: 25px; background-color: #300; color: #FFF; } #footer_wraper { background-image: url(images/Stopka_center.jpg); background-repeat: repeat-x; clear: both; font-family: Verdana, Geneva, sans-serif; padding-top: 1px; font-size: 12px; text-decoration: underline; float: none; padding-left: 50px; text-align: center; height: 40px; } body,td,th { color: #FFF; background-image: url(images/BG-2_02.jpg); background-repeat: repeat-y; margin-right: auto; margin-left: auto; } .obrazek_servera { text-align: left; width: 125px; clear: none; padding-left: 20px; float: left; border-bottom-width: 4px; border-bottom-style: double; border-bottom-color: #6c0000; background-color: #000; } .serwer { text-align: center; float: right; width: 335px; padding-top: 25px; font-size: 36px; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; text-decoration: underline; padding-right: 120px; border-bottom-width: 4px; border-bottom-style: double; border-bottom-color: #6C0000; padding-bottom: 35px; background-color: #000; } .szary{ color: #888888; text-decoration: underline; line-height: 30px; } .shadow { text-shadow: #808080 -5px 3px 4px; } .content_ineer { text-shadow:#555555 -4px 3px 2px; } .czerwony { color: #F00 } .zielony { color:#0F0 }

Ech. Nawet codebox nie działa.
Dobra, podaj link do strony, bo ja nic nie widzę, a nie chce mi się bawić w robienie grafik do tego.

O kurde ja to wrzuciłem serv to jeszcze bardzie się pomieszało.

http://wladektest.cba.pl

A miało wyglądać mniej więcej tak http://img692.images...0/stronkabk.jpg
Użytkownik Vladymir edytował ten post 17 maj 2010, 16:44
No cóż. Stronę pewnie oglądasz w IE :D W nazwach plików nie może być spacji.

U mnie pod IE to w ogóle już tragedia, a pod Operą jest tak samo jak pod FF ;]

Dobra już poprawione.
Użytkownik Vladymir edytował ten post 17 maj 2010, 17:15
Jak mają się obrazy pokazać, gdy ich nie ma? http://wladektest.cba.pl/BlitzKrieg/images/Button/Button2.jpg
Tak poza tym, to wywołujesz nieistniejącą funkcję MM_preloadImages().
Użytkownik andrzej_aa edytował ten post 17 maj 2010, 17:31
No właśnie wyskoczyło mi to w Firebug, ale nie wiedziałem co to :D

Ale ja jestem głupi... zaraz może mi się uda to skończyć. Wielkie dzięki za pomoc.
Użytkownik Vladymir edytował ten post 17 maj 2010, 17:35

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL