|
|||
Problem mit CSS Menü
Hallo Leute,
ich bin neu hier, und Anfänger also habt etwas Nachsicht... Ich habe auf meiner Seite, an der ich gerade arbeite ein Menü erstellt. Die Hauptmenüpunkte werden mir korrekt angezeigt, die Untermenüpunkt jedoch leider nicht. Der Hover-Effekt funktioniert noch, aber die Unterpunkte öffnen sich gar nicht erst. Im CSS selbst und im HTML Code habe ich keinen Fehler finden können. Vielleicht findet Ihr ja des Rätsels Lösung? Ich habe Euch die Dateien/Seite auf ...::: Freiwillige Feuerwehr Rothenburgsort/Veddel :::... hochgeladen! Vielen Dank im Voraus für Eure Hilfe. EDIT: Hier noch den HTML-Code: HTML-Code:
<link href="style.css" rel="stylesheet" type="text/css"> <title>...::: Freiwillige Feuerwehr Rothenburgsort/Veddel :::...</title> <style type="text/css"> <!-- .Stil3 {font-size: 9px} body,td,th { color: #D4D4D4; } --> </style> <span class="Stil3"> </span><br> <table width="869" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="3" valign="top"><div align="left"><img src="content/startseite/header.png" width="920" height="320"></div> </td> </tr> <tr> <td width="66" valign="top"><div align="left"><img src="menu_img/button1a_links.gif" width="116" height="40"></div> <div align="left"></div></td> <td width="100" bgcolor="#FFFFFF" valign="top"> <span class="preload2"></span> <ul class="menu2"> <li class="top"><a href="index-2.html" target="_self" class="top_link"><span class="down">AKTUELLES</span></a> <!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub"> <li><a href="1_feuerwehr.html">Feuerwehr News</a></li> <li><a href="1_termine.html">Termine</a></li> <li><a href="1_einsaetze.html" class="fly">Einsätze</a> <table><tr><td> <ul> <li><a href="1_einsaetze.html">Einsätze 2008</a></li> <li><a href="1_statistiken.html">Statistiken</a></li> <li><a href="1_pol_einsaetze.html">Polizei</a></li> </ul></td></tr></table> </li> <li><a href="1_wetterwarnungen.html">Wetterwarnungen</a></li> <li><a href="1_rescuedays2009.html">2009</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="2_ihrefeuerwehr.html" target="_self" class="top_link"><span class="down">FEUERWEHR</span></a> <table><tr><td> <ul class="sub"> <li><a href="2_ihrefeuerwehr.html">Ihre Feuerwehr</a></li> <li><a href="2_einsatzgebiet.html" class="fly">Einsatzgebiet</a> <table><tr><td> <ul> <li><a href="2_einsatzgebiet.html">Einsatzgebiet</a></li> <li><a href="2_harksheide.html">W1</a></li> <li><a href="2_garstedt.html">W2</a></li> <li><a href="2_glashuette.html">W3</a></li> <li><a href="2_friedrichsgabe.html">W4</a></li> </ul> </td></tr></table> </li> <li><a href="2_jugendfeuerwehr.html">Jugendfeuerwehr</a></li> <li><a href="2_ausbildung.html">Ausbildung</a></li> <li><a href="2_technik.html" class="fly">Technik</a> <table><tr><td> <ul> <li><a href="2_fuhrpark.html">Fuhrpark</a></li> <li><a href="2_kleidung.html">Kleidung</a></li> <li><a href="2_alarmierung.html">Alarmierung</a></li> </ul></td></tr></table> </li> <li><a href="2_geschichte.html">Geschichte</a></li> <li><a href="2_mitmachen.html">Mitmachen!</a></li> </ul> </td></tr></table> </li> <li class="top"><a href="3_amt37.html" target="_self" class="top_link"><span class="down">AMT</span> </a> <table><tr><td> <ul class="sub"> <li><a href="3_amt37.html">Amt</a></li> <li><a href="3_ftz.html">FW Techn. Zentrum</a></li> <li><a href="3_leitstelle.html">Leitstelle</a></li> <li><a href="3_brandschutzerziehung.html">Brandschutzerz.</a></li> </ul> </td></tr></table> </li> <li class="top"><a href="4_wichtig.html" target="_self" class="top_link"><span class="down">WICHTIG</span> </a> <table><tr><td> <ul class="sub"> <li><a href="4_notruf.html">Notruf 112</a></li> <li><a href="4_erstehilfe.html">Erste Hilfe</a></li> <li><a href="4_sonderrechte.html">Sonderrechte</a></li> <li><a href="4_brandschutz.html" class="fly">Brandschutz</a> <table><tr><td> <ul> <li><a href="4_umgangmitfeuer.html">Umgang mit Feuer</a></li> <li><a href="4_feuerloescher.html">Feuerlöscher</a></li> <li><a href="4_rauchmelder.html">Rauchmelder</a></li> <li><a href="4_nachdemfeuer.html">Nach dem Feuer</a></li> </ul></td></tr></table> </li> <li><a href="4_krisenintervention.html">Krisenintervention</a></li> <li><a href="4_kinder.html">Kinder</a></li> <li><a href="4_imstrassenverkehr.html">Im Straßenverkehr</a></li> <li><a href="4_verkehrsunfall.html">Verkehrsunfälle</a></li> <li><a href="4_erdgas.html">Erdgas</a></li> </ul> </td></tr></table> </li> <li class="top"><a href="5_service.html" target="_self" class="top_link"><span class="down">SERVICE</span> </a> <table><tr><td> <ul class="sub"> <li><a href="5_downloads.html">Downloads</a></li> <li><a href="5_links.html">Links</a></li> <li><a href="5_kontakt.html">Kontakt</a></li> <li><a href="5_impressum.html">Impressum</a></li> </ul> </td></tr></table> </li> </ul> </td> <td width="64"><div align="right"><img src="menu_img/button1a_rechts.gif" width="65" height="40"></div></td> </tr> <tr> <td width="66" bgcolor="#050040"><img src="main_img/Hauptseite_rund_02_langer_strich.gif" alt="" width="116" height="410" border="0" align="top"></td> <td bgcolor="#050040" class="scroll"> <div class="scroll"> <p>So, </p> <p> </p> <p>nun</p> <p> </p> <p>ist</p> <p> </p> <p>es</p> <p> </p> <p>schon</p> <p> </p> <p>ziemlich</p> <p> </p> <p>spät</p> <p> </p> <p>oder</p> <p> </p> <p>soll</p> <p> </p> <p>ich</p> <p> </p> <p>sagen</p> <p> </p> <p>früh?</p> </div> </td> <td bgcolor="#050040"><div align="left"><img src="main_img/Hauptseite_rund_05_langer_strich.gif" alt="" width="65" height="410" border="0" align="top"></div></td> </tr> <tr> <td width="66" height="60" bgcolor="#050040"><div align="left"><span class="Stil1"><img src="main_img/Hauptseite_rund_02_kleine_ecke.gif" alt="" width="116" height="60" border="0" align="top"></span></div></td> <td bgcolor="#050040"><img src="menu_img/Hauptseite_rund_02_kurzer_strich_mitte.gif" width="740" height="60"></td> <td><div align="left"><span class="Stil1"><img src="main_img/Hauptseite_rund_05_kleine_ecke.gif" alt="" width="65" height="60 " border="0" align="top"></span></div></td> </tr> </table> <p align="center" class="Stil1 Stil2">Copyright © Freiwillige Feuerwehr Rothenburgsort/Veddel. Alle Rechte vorbehalten.</p> Und hier das CSS: Code:
body { background-color: #D4D4D4; } .Stil1 { font-family: Arial, Helvetica, sans-serif; font-size: x-small; } .Stil2 { font-size: x-small; color: #666666; } .scroll { overflow: auto; position: relative; height: 380px; width: 100%; } .preload2 {background: url(menu_img/button4.gif);} .menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(menu_img/button1a.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif; } .menu2 li.top {display:block; float:left; position:relative;} .menu2 li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#ffffff; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;} .menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:40px;} .menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(menu_img/down.gif) no-repeat right top;} .menu2 li a.top_link:hover {color:#fff; background: url(menu_img/button4.gif) no-repeat;} .menu2 li a.top_link:hover span {background:url(menu_img/button4.gif) no-repeat right top;} .menu2 li a.top_link:hover span.down {background:url(menu_img/button4a.gif) no-repeat right top;} .menu2 li:hover > a.top_link {color:#fff; background: url(menu_img/button4.gif) no-repeat;} .menu2 li:hover > a.top_link span {background:url(menu_img/button4.gif) no-repeat right top;} .menu2 li:hover > a.top_link span.down {background:url(menu_img/button4a.gif) no-repeat right top;} .menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;} /* Default link styling */ /* Style the list OR link hover. Depends on which browser is used */ .menu2 a:hover {visibility:visible;} .menu2 li:hover {position:relative; z-index:200;} /* keep the 'next' level invisible by placing it off screen. */ .menu2 ul, .menu2 :hover ul ul, .menu2 :hover ul :hover ul ul, .menu2 :hover ul :hover ul :hover ul ul, .menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} .menu2 :hover ul.sub { left:2px; top:40px; background: #fff; padding:3px 0; border:1px solid #000000; white-space:nowrap; width:110px; height:auto; } .menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;} .menu2 :hover ul.sub li a {display:block; text-align:left; font-size:11px; height:20px; width:104px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;} .menu2 :hover ul.sub li a.fly {background:#fff url(menu_img/arrow.gif) 95px 7px no-repeat;} .menu2 :hover ul.sub li a:hover {background:#CC0000; color:#fff;} .menu2 :hover ul.sub li a.fly:hover {background:#CC0000 url(menu_img/arrow_over.gif) 95px 7px no-repeat; color:#fff;} .menu2 :hover ul li:hover > a.fly {background:#CC0000 url(menu_img/arrow_over.gif) 95px 7px no-repeat; color:#fff;} .menu2 :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul :hover ul, .menu2 :hover ul :hover ul :hover ul :hover ul :hover ul {left:107px; top:-4px; background: #fff; padding:3px 0; border:1px solid #000000; white-space:nowrap; width:110px; z-index:200; height:auto;} Geändert von SMundt (06.01.2009 um 22:59 Uhr) |
Sponsored Links |
|
|||
[Invalid] Markup Validation of http://f-3917.de/test2/index-2.html - W3C Markup Validator
Du solltest deine Seite erstmal in eine richtige HTML-Struktur bringen. Hier fehlt ja wirklich ALLES. Kein Doctype, kein <head>, <body>, vom <html> ganz zu schweigen. Wie soll das Code:
body { background-color: #D4D4D4; } Code:
.Stil3 {font-size: 9px} body,td,th { color: #D4D4D4; } "Back to the roots" kann ich da nur sagen. Edit: Habe mal einen Screenshot angehängt. So sieht die Seite bei mir aus. Also ist dein Menü erstmal das kleinste Problem Geändert von regloh (07.01.2009 um 16:44 Uhr) |
Sponsored Links |
|
|||
Zitat:
Selbst in HTM 4.01 strict ist html, head und body optional . |
|
|||
Zitat:
Was natürlich trotzdem keinen Effekt zeigt, sind die CSS-Angaben für das body-Tag :P Zitat:
Geändert von regloh (07.01.2009 um 18:12 Uhr) |
|
|||
Zitat:
Colors and backgrounds Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Hach ja, der Ton... Finde ich persönlich auch nicht schön, aber mehr als die Hälfte der Mannschaft bei uns hat sich dafür entschieden...
Hab ihn auf der Testseite jetzt mal für Euch (ich denke hier wird sich geduzt, oder?) deaktiviert. So, ich habe wie gewünscht und erfordert die Seite im Code neu strukturiert. Durch den Validator läuft sie jetzt einwandfrei. Neu hochgeladen habe ich die auch. Bei welchem Browser war das Layout dermaßen verschoben? Ich habe hier den IE7 und den FF und da hat er mir das so nicht angezeigt. Nichts desto trotz läuft das Menü leider immer noch nicht Hier der Code der HTML-Seite: HTML-Code:
<?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>...::: Freiwillige Feuerwehr Rothenburgsort/Veddel :::...</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <span class="Stil3"> </span><br> <table width="869" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="3" valign="top"><div align="left"><img src="content/startseite/header.png" width="920" height="320" alt=""></div> </td> </tr> <tr> <td width="66" valign="top"><div align="left"><img src="menu_img/button1a_links.gif" width="116" height="40" alt=""></div> <div align="left"></div></td> <td width="100" bgcolor="#FFFFFF" valign="top"> <span class="preload2"></span> <ul class="menu2"> <li class="top"><a href="index-2.html" target="_self" class="top_link"><span class="down">AKTUELLES</span></a> <ul class="sub"> <li><a href="1_feuerwehr.html">Feuerwehr News</a></li> <li><a href="1_termine.html">Termine</a></li> <li><a href="1_einsaetze.html" class="fly">Einsätze</a> <table><tr><td> <ul> <li><a href="1_einsaetze.html">Einsätze 2008</a></li> <li><a href="1_statistiken.html">Statistiken</a></li> <li><a href="1_pol_einsaetze.html">Polizei</a></li> </ul></td></tr></table> </li> <li><a href="1_wetterwarnungen.html">Wetterwarnungen</a></li> <li><a href="1_rescuedays2009.html">2009</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="2_ihrefeuerwehr.html" target="_self" class="top_link"><span class="down">FEUERWEHR</span></a> <table><tr><td> <ul class="sub"> <li><a href="2_ihrefeuerwehr.html">Ihre Feuerwehr</a></li> <li><a href="2_einsatzgebiet.html" class="fly">Einsatzgebiet</a> <table><tr><td> <ul> <li><a href="2_einsatzgebiet.html">Einsatzgebiet</a></li> <li><a href="2_harksheide.html">W1</a></li> <li><a href="2_garstedt.html">W2</a></li> <li><a href="2_glashuette.html">W3</a></li> <li><a href="2_friedrichsgabe.html">W4</a></li> </ul> </td></tr></table> </li> <li><a href="2_jugendfeuerwehr.html">Jugendfeuerwehr</a></li> <li><a href="2_ausbildung.html">Ausbildung</a></li> <li><a href="2_technik.html" class="fly">Technik</a> <table><tr><td> <ul> <li><a href="2_fuhrpark.html">Fuhrpark</a></li> <li><a href="2_kleidung.html">Kleidung</a></li> <li><a href="2_alarmierung.html">Alarmierung</a></li> </ul></td></tr></table> </li> <li><a href="2_geschichte.html">Geschichte</a></li> <li><a href="2_mitmachen.html">Mitmachen!</a></li> </ul> </td></tr></table> </li> <li class="top"><a href="3_amt37.html" target="_self" class="top_link"><span class="down">AMT</span> </a> <table><tr><td> <ul class="sub"> <li><a href="3_amt37.html">Amt</a></li> <li><a href="3_ftz.html">FW Techn. Zentrum</a></li> <li><a href="3_leitstelle.html">Leitstelle</a></li> <li><a href="3_brandschutzerziehung.html">Brandschutzerz.</a></li> </ul> </td></tr></table> </li> <li class="top"><a href="4_wichtig.html" target="_self" class="top_link"><span class="down">WICHTIG</span> </a> <table><tr><td> <ul class="sub"> <li><a href="4_notruf.html">Notruf 112</a></li> <li><a href="4_erstehilfe.html">Erste Hilfe</a></li> <li><a href="4_sonderrechte.html">Sonderrechte</a></li> <li><a href="4_brandschutz.html" class="fly">Brandschutz</a> <table><tr><td> <ul> <li><a href="4_umgangmitfeuer.html">Umgang mit Feuer</a></li> <li><a href="4_feuerloescher.html">Feuerlöscher</a></li> <li><a href="4_rauchmelder.html">Rauchmelder</a></li> <li><a href="4_nachdemfeuer.html">Nach dem Feuer</a></li> </ul></td></tr></table> </li> <li><a href="4_krisenintervention.html">Krisenintervention</a></li> <li><a href="4_kinder.html">Kinder</a></li> <li><a href="4_imstrassenverkehr.html">Im Straßenverkehr</a></li> <li><a href="4_verkehrsunfall.html">Verkehrsunfälle</a></li> <li><a href="4_erdgas.html">Erdgas</a></li> </ul> </td></tr></table> </li> <li class="top"><a href="5_service.html" target="_self" class="top_link"><span class="down">SERVICE</span> </a> <table><tr><td> <ul class="sub"> <li><a href="5_downloads.html">Downloads</a></li> <li><a href="5_links.html">Links</a></li> <li><a href="5_kontakt.html">Kontakt</a></li> <li><a href="5_impressum.html">Impressum</a></li> </ul> </td></tr></table> </li> </ul> </td> <td width="64"><div align="right"><img src="menu_img/button1a_rechts.gif" width="65" height="40" alt=""></div></td> </tr> <tr> <td width="66" bgcolor="#050040"><img src="main_img/Hauptseite_rund_02_langer_strich.gif" alt="" width="116" height="410" border="0" align="top"></td> <td bgcolor="#050040" class="scroll"> <div class="scroll"> <p>So, </p> <p> </p> <p>nun</p> <p> </p> <p>ist</p> <p> </p> <p>es</p> <p> </p> <p>schon</p> <p> </p> <p>ziemlich</p> <p> </p> <p>spät</p> <p> </p> <p>oder</p> <p> </p> <p>soll</p> <p> </p> <p>ich</p> <p> </p> <p>sagen</p> <p> </p> <p>früh?</p> </div> </td> <td bgcolor="#050040"><div align="left"><img src="main_img/Hauptseite_rund_05_langer_strich.gif" alt="" width="65" height="410" border="0" align="top"></div></td> </tr> <tr> <td width="66" height="60" bgcolor="#050040"><div align="left"><span class="Stil1"><img src="main_img/Hauptseite_rund_02_kleine_ecke.gif" alt="" width="116" height="60" border="0" align="top"></span></div></td> <td bgcolor="#050040"><img src="menu_img/Hauptseite_rund_02_kurzer_strich_mitte.gif" width="740" height="60" alt=""></td> <td><div align="left"><span class="Stil1"><img src="main_img/Hauptseite_rund_05_kleine_ecke.gif" alt="" width="65" height="60" border="0" align="top"></span></div></td> </tr> </table> <p align="center" class="Stil1 Stil2">Copyright © Freiwillige Feuerwehr Rothenburgsort/Veddel. Alle Rechte vorbehalten.</p> </body> </html> Geändert von SMundt (07.01.2009 um 19:14 Uhr) |
|
|||
Dieses Menü von Stu Nicholls, von dem noch Fragmente in deinem Code zu finden sind, ist einfach nicht geeignet für Anfänger.
Fang von vorne an, nimm das Original. Ändere nicht die HTML-Kommentare. Überprüfe nach jeder einzelnen Änderung im Stylesheet die Funktion in den Browsern. Noch besser: Verwende es gar nicht. In den FAQ findest du einen Link zum Suckerfish-Menü. Damit kannst du dir das grundsätzliche Vorgehen erarbeiten. Der IE darf sich nicht im Quirksmodus befinden. Dein Doctype ist ungeeignet. Informier dich zum "Doctype-Switch".
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS menü IE - Problem | -SD- | CSS | 4 | 25.04.2011 22:10 |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 17:09 |
Tab Menü Problem | BloodHunger | CSS | 6 | 22.12.2008 17:04 |
Menue Css Problem | AKraisser | CSS | 11 | 27.11.2008 17:40 |