hallo zusammen,
ich versuche nun meine webseite ein wenig zu überarbeiten.
ttc-tobi.bplaced.net/neues_design.php
ein hoizontales menü ist eingebaut, nur stellt sich mir jetzt die frage wie ich untermenüs realisieren kann.
gibts es irgendwo vorlagen die man sich zu gemüte führen kann, oder hilfreiche informationen, die expliciet solche menus betreffen?
mfg tobsp
machst wieder ne unter liste mit
[quote=“comjag”]machst wieder ne unter liste mit
eine liste mit ul und li zu machen sollte nicht das problem darstellen. sondern wie man das genau ins css schreiben muß
Sollen die Untermenüs denn auch horizontal weiterlaufen oder
unter dem Hauptmenüpunkt horizontal weiterlaufen oder soll
das interaktiv aufklappen, sobald man über den Menüpunkt
fährt (:hover)?
Zum einen gibt es da einige Möglichkeiten, was man da als
Untermenü realisiert haben will, zum anderen gibt es da im
Detail zahlreiche Varianten, wie man das mehr oder weniger
sinnvoll mit CSS umsetzen kann.
Du könntest also erstmal das komplette Menü als Listenstruktur
notieren und dir überlegen, wie das dann dekoriert aussehen
soll und das kannst du dann je nach deinen Vorstellungen z.B.
durch Positionierung, Abständen und Anzeigeeigenschaften
umsetzen.
Als ersten Schritt solltest du jedenfalls alle Fehler entfernen und
den gleichen Wert für id nicht mehrmals im Dokument
verwenden. Du solltest dich entscheiden, ob du HTML oder
XHTML verwenden willst und das dann auch konsequent
durchziehen statt da unsinnig zu mischen.
Und wenn du wirklich XHTML verwendest (und das dann trotzdem
als text/html auslieferst), solltest du entweder gar kein
style-Element verwenden, sondern eine externe CSS-Datei,
aber wenn du das verwendest, wenigstens die CSS-Anweisungen
nicht wieder auskommentieren (das mag bei HTML für antike
Programme im letzten Jahrtausend mal sinnvoll gewesen sein,
bei XHTML bedeutet das aber schlichtweg, daß der Inhalt von
style nicht interpretiert werden soll, wenn die Datei als XHTML
interpretiert wird und nicht als fehlerhaftes HTML.
Dann könntest du durchaus mit einem Selektor wie
’div#menu ul ul’ gezielt auf ‘Damen 1’ als Untermenü zugreifen
und das anders dekorieren oder anordnen als das Hauptmenü.
ich danke für die links.
ich hab nun ein menu mal eingepflegt, das design passt zwar farblich noch nicht aber immerhin hab ich das menu reingeschafft
Es krankt ein wenig daran, daß zwar die letzten drei
Menühauptpunkte (wieviele hängt von der aktuellen
Schriftgröße des Nutzers ab) in die nächste Zeile springen,
weil nicht genug Platz ist (Breitenbegrenzung in px?), der
Hintergrund aber nicht mitspringt, so daß die Schriftfarbe auf
dem hellen Hintergrund der nächsten Zeile nicht mehr so gut
lesbar ist.
Lästig ist auch, daß in den Unterpunkten die Texte immer
nach rechts überstehen, offenbar, weil da eine dumme
Breitenbegrenzung in px drinsteht ;o)
Ganz so einfach ist es also nicht, das passabel hinzubekommen ;o)
ja, einfach ist es nicht, leider.
ich weiß, da muß man noch ein wenig im css rumfeilen.
genauso wie am code, wenn ich mir da die ganzen fehler ansehe die der validator anzeigt 
kommt noch sehr viel arbeit auf mich zu
gleich zu beginn mal ein sorry für den doppelpost
der validator zeigt 52 Errors, 1 warning
validator.w3.org/check?uri=http% … ne&group=0
wie kann ich diese beheben, bzw was sagen die fehler aus?
Generelle Strategie beim Beheben der Fehler ist vorne anfangen
und sich dann weiter durcharbeiten.
Wenn man Glück hat, verschwinden dann einige Folgefehler.
Den gewünschten doctype kopierst du einfach aus der
angegebenen Liste.
Dann geht es wohl damit weiter, daß du vergessen hast, ein
ul oder ol zu öffnen, mußt du dann eben noch vor die li setzen.
Dann mußt du eben gucken, ob die anderen Listenfehler
noch stehenbleiben. Mußt du dann sorgfältig gucken, daß das
korrekt ineinander verschachtelt ist, daran liegen dann wohl
auch die zahlreichen angegebenen parsing-Fehler.
Dann heißt es in XHTML natürlich
und nicht
.
danke für die tipps, validator gibt grünes licht
ich nun auch ein wenig am css rumgefeilt
ttc-tobi.bplaced.net/neues_design/
die einzelnen navigationspunkte habe ich versucht zu bearbeiten, leider komme ich bei “turniere”, "jugend "und “1950 bis heute” an meine leistungsgrenze und bekomme die korrekte darstellung nicht in griff.
wäre jemand so nett und würde mir ein wenig auf die sprünge helfen.
danke
Das ist vom CSS her ziemlich scheusslich …
Sehr unübersichtlich, und auch irgendwie nicht doll, dass du für jeden Menüpunkt auf zweiter Ebene wieder eigenen Formatierungen vornehmen musst.
Mit dem Untermenü auf dritter Ebene ist dann jedenfalls das Problem, dass die width-Angabe, die sie auf grund irgendeines Selektors in deinem Chaos-CSS haben, nicht passend ist.
Sowas sollte man so umsetzen, dass man möglichst wenig feste Breiten angibt.
Bei sowieso absolut positionierten Elementen gilt width:auto, so lange du nichts anderes vorgibst.
[quote=“chrisb”]Das ist vom CSS her ziemlich scheusslich …
Sehr unübersichtlich, und auch irgendwie nicht doll, dass du für jeden Menüpunkt auf zweiter Ebene wieder eigenen Formatierungen vornehmen musst.
Mit dem Untermenü auf dritter Ebene ist dann jedenfalls das Problem, dass die width-Angabe, die sie auf grund irgendeines Selektors in deinem Chaos-CSS haben, nicht passend ist.
Sowas sollte man so umsetzen, dass man möglichst wenig feste Breiten angibt.
Bei sowieso absolut positionierten Elementen gilt width:auto, so lange du nichts anderes vorgibst.[/quote]
das dacht ich mir, ich wußte mir nur leider nicht anderster zu helfen, als dass so zu machen wie es im moment ist
sorry doppelpost
ich hab das auto mal eingefügt, ändert aber nicht viel
ttc-tobi.bplaced.net/neues_design/
triplepost, sorry aber komm immer noch nicht ganz an mein ziel
ttc-tobi.bplaced.net/neues_design_1/
ist der aktuelle stand.
hab ein wenig weitergemacht, auch wenn das css immer noch scheusslich aussieht. ich hab jetzt die untermenüs mit exakter px-zahl angegeben. auch wenns umständlich ist. aber so habe ich erreicht dass die einzelnen untermenüs so groß sind wie ich sie haben möchte. nun habe ich ein problem mit der weiteren ebene. diese größe läßt sich nicht festlegen, bzw nur einmalig für alle.
.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
{[b]left:130px[/b]; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:149px; z-index:200; height:auto;}ich möchte diese weitere ebene auch jede für sich festelegen, wie kann ich dies machen?
und die ebene darunter auch noch.
außerdem zeigt mir der ie6 unter Sonstiges kein menu an, woran liegt das?
mein kompletter code schaut so aus:
<span class="preload2"></span>
<ul class="menu2">
<li class="top"><a href="index.php" id="mannschaften" class="top_link"><span class="down">MANNSCHAFTEN</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub_mannschaften">
<li><a href="damen1.php">Damen 1</a></li>
<li><a href="damen2.php">Damen 2</a></li>
<li><a href="herren1.php">Herren 1</a></li>
<li><a href="herren2.php">Herren 2</a></li>
<li><a href="herren3.php">Herren 3</a></li>
<li><a href="herren4.php">Herren 4</a></li>
<li><a href="herren5.php">Herren 5</a></li>
<li><a href="herren6.php">Herren 6</a></li>
<li><a href="jugend.php">Jugend</a></li>
<li><a href="schuelerA.php">Schüler A</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="index.php" id="turniere" class="top_link"><span class="down">TURNIERE</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub_turniere">
<li><a href="index.php" class="fly">Ping-Pong-Café<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="ppc2009.php/">2009</a></li>
<li><a href="index.php" class="fly">2010<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="ppc2010.php">2010</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="ppcArchiv">Archiv</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="mid"><a href="index.php" class="fly">Karlsbad Cup<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="karlsbadCup2009.php">2009</a></li>
<li><a href="karlsbadCupArchiv.php">Archiv</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="mid"><a href="index.php" class="fly">Vereinsmeisterschaften<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="vmErwachsene.php">Erwachsene</a></li>
<li><a href="vmJugend.php">Jugend</a></li>
<li><a rel="oeffneneuesfenster" href="dateien/archiv_sportliches/archiv_Vereinsmeisterschaften.pdf">Archiv</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="turniererfolge.php">Turniererfolge</a></li>
<li><a href="turniervorschau.php">Turniervorschau</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="index.php" id="jugend" class="top_link"><span class="down">JUGEND</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub_jugend">
<li><a href="jugendAllgemein.php">Allgemein</a></li>
<li><a href="jugendAnsprechpartner.php">Ansprechpartner</a></li>
<li><a href="jugendTraining.php">Training</a></li>
<li><a href="index.php" class="fly">Mannschaften<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="jugend.php">Jugend</a></li>
<li><a href="schuelerA.php">Schüler A</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="jugendAuswaertsfahrten.php">Auswärtsfahrten</a></li>
<li><a href="index.php" class="fly">Veranstaltungen<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="jugendFreizeit.php">Freizeit</a></li>
<li><a href="jugendAusflug.php">Ausflug</a></li>
<li><a href="jugendTrainingstag.php">Trainingstag</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="index.php" id="termine" class="top_link"><span class="down">TERMINE</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub_termine">
<li><a rel="oeffneneuesfenster" href="dateien/gesamtspielplan.pdf">Gesamtplan</a></li>
<li><a href="termine2009.php">Termine 2009</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="index.php" id="presse" class="top_link"><span class="down">PRESSE</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub_presse">
<li><a href="presseAktuell.php">Aktuell</a></li>
<li><a href="presse2009.php">2009</a></li>
<li><a href="presseArchiv.php">Archiv</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="index.php" id="bis_heute" class="top_link"><span class="down">1950 bis HEUTE</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub_1950bisheute">
<li><a href="chronik.php">50 Jahre SVL/TTC</a></li>
<li><a href="30jahreTTC.php">30 Jahre TTC</a></li>
<li><a href="trikots_ttc.php">Trikotarchiv</a></li>
<li><a href="index.php" class="fly">In Memorium<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="karlSpiegel.php">Karl Spiegel</a></li>
<li><a href="bertholdBrecht.php">Berthold Brecht</a></li>
<li><a href="dorisRied.php">Doris Ried</a></li>
<li><a href="wernerKohlmueller.php">Werner Kohlmüller</a></li>
<li><a href="brunoRohrer.php">Bruno Rohrer</a></li>
<li><a href="wolfgangRupp.php">Wolfgang Rupp</a></li>
<li><a href="uteSchmidt.php">Ute Schmidt</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="index.php" id="aktivitaeten" class="top_link"><span class="down">AKTIVITÄTEN</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub_aktivitaeten">
<li><a href="jahresabschlussfeier.php">Jahresabschlussfeier</a></li>
<li><a href="maiAusflug.php">1. Mai</a></li>
<li><a href="jahresausflug.php">Jahresausflug</a></li>
<li><a href="dorffest.php">Dorffest</a></li>
<li><a href="jugendFreizeit.php">Freizeit</a></li>
<li><a href="damenfreizeit.php">Damenfreizeit</a></li>
<li><a href="jahresausklang.php">Jahresausklang</a></li>
<li><a href="hochzeiten.php">Hochzeiten</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="index.php" id="verein" class="top_link"><span class="down">VEREIN</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub_verein">
<li><a href="news.php">News</a></li>
<li><a href="verwaltung.php">Verwaltung</a></li>
<li><a href="spiellokal.php">Spiellokal</a></li>
<li><a href="mitgliedschaft.php">Mitgliedschaft</a></li>
<li><a href="trainingszeiten.php">Trainingszeiten</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="index.php" id="sonstiges" class="top_link"><span class="down">SONSTIGES</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub_sonstiges">
<li><a href="sponsoren.php">Sponsoren</a></li>
<li><a href="links.php">Links</a></li>
<li><a href="bildergalerie.php">Galerie</a></li>
<li><a href="gaestebuch.php">Gästebuch</a></li>
<li><a href="tibo.php">Tibo</a></li>
<li><a href="bundesliga.php">Bundesliga</a></li>
<li><a href="regeln.php">TT-Regeln</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>und das dazugehörige css:
.preload2 {background: url(grafiken_navi/button4.gif);}
.menu2 {padding:0 0 0 4px; margin:0; list-style:none; height:35px; background:#fff url(grafiken_navi/button1a.gif) repeat-x; position:relative; font-family:arial; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 9px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 17px 0 12px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(grafiken_navi/down.gif) no-repeat right top;}
.menu2 li a.top_link:hover {color:#fff; background: url(grafiken_navi/button4.gif) no-repeat;}
.menu2 li a.top_link:hover span {background:url(grafiken_navi/button4.gif) no-repeat right top;}
.menu2 li a.top_link:hover span.down {background:url(grafiken_navi/button4a.gif) no-repeat right top;}
.menu2 li:hover > a.top_link {color:#fff; background: url(grafiken_navi/button4.gif) no-repeat;}
.menu2 li:hover > a.top_link span {background:url(grafiken_navi/button4.gif) no-repeat right top;}
.menu2 li:hover > a.top_link span.down {background:url(grafiken_navi/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_mannschaften {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:83px; height:auto;}
.menu2 :hover ul.sub_mannschaften li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_mannschaften li a {display:block; font-size:14px; height:20px; width:77px; 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_mannschaften li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_mannschaften li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_mannschaften li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_turniere {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:190px; height:auto;}
.menu2 :hover ul.sub_turniere li {display:block; height:20px; position:relative; float:left; width:184px;}
.menu2 :hover ul.sub_turniere li a {display:block; font-size:14px; height:20px; width:184px; 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_turniere li a.fly {background:#fff url(grafiken_navi/arrow.gif) 178px 7px no-repeat;}
.menu2 :hover ul.sub_turniere li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_turniere li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 178px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_jugend {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:150px; height:auto;}
.menu2 :hover ul.sub_jugend li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_jugend li a {display:block; font-size:14px; height:20px; width:144px; 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_jugend li a.fly {background:#fff url(grafiken_navi/arrow.gif) 133px 7px no-repeat;}
.menu2 :hover ul.sub_jugend li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_jugend li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 133px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_termine {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:109px; height:auto;}
.menu2 :hover ul.sub_termine li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_termine li a {display:block; font-size:14px; height:20px; width:103px; 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_termine li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_termine li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_termine li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_presse {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:64px; height:auto;}
.menu2 :hover ul.sub_presse li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_presse li a {display:block; font-size:14px; height:20px; width:58px; 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_presse li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_presse li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_presse li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:auto; height:auto;}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:auto;}
.menu2 :hover ul.sub li a {display:block; font-size:14px; height:20px; width:auto; 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(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_1950bisheute {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:136px; height:auto;}
.menu2 :hover ul.sub_1950bisheute li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_1950bisheute li a {display:block; font-size:14px; height:20px; width:130px; 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_1950bisheute li a.fly {background:#fff url(grafiken_navi/arrow.gif) 120px 7px no-repeat;}
.menu2 :hover ul.sub_1950bisheute li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_1950bisheute li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 120px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_aktivitaeten {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:167px; height:auto;}
.menu2 :hover ul.sub_aktivitaeten li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_aktivitaeten li a {display:block; font-size:14px; height:20px; width:161px; 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_aktivitaeten li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_aktivitaeten li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_aktivitaeten li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_verein {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:122px; height:auto;}
.menu2 :hover ul.sub_verein li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_verein li a {display:block; font-size:14px; height:20px; width:116px; 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_verein li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_verein li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_verein li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul.sub_sonstiges {left:2px; top:35px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:95px; height:auto;}
.menu2 :hover ul.sub_sonstiges li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub_sonstiges li a {display:block; font-size:14px; height:20px; width:89px; 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_sonstiges li a.fly {background:#fff url(grafiken_navi/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub_sonstiges li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub_sonstiges li a.fly:hover {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(grafiken_navi/arrow_over.gif) 80px 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:130px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:149px; z-index:200; height:auto;}ich danke euch schon mal vorab für eure ganze mühe.
mfg tobsp
Breite eines Elementes in Pixeln festlegen, welches Text
enthält, ist insofern schlecht, als du nicht wissen kannst, welche
Schriftgröße beim Nutzer eingestellt ist. Das kann dann schnell
das gesamte Layout schreddern. Besser sind da Einheiten wie
em oder ex, da kann man das Verhalten deutlich besser
abschätzen.
Wenn du die Eigenschaften für verschiedene Verschachtelungen
einzeln angeben willst, darfst du sie eben nicht per Komma
auflisten, dann also:
Eigenschaften für alle:
.menu2:hover ul
{
…
}
Eingenschaften für zweite Ebene:
.menu2:hover ul:hover ul
{
…
}
und so weiter …
Man kann natürlich auch mit Klassen arbeiten, sofern
angegeben und verschieden, muß man aber nicht.
‘left:130px’ ist keine gültige Angabe für einen
Eigenschaftswert.
mittlerweile bin ich schon recht weit, aber ich stehe noch vor einem problemchen, wie ihr im screen:
http://ttc-tobi.bplaced.net/neues_design_1/screen_neues_design_1.JPG
sehen könnt, machen mir noch ein bis zwei sachen probleme.
ich hab jetzt beim validator folgende meldung:
Line 30, Column 56: ID “kopflink” already defined
… href=“index.php”>Home - Sitemap<
An “id” is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).
Line 30, Column 10: ID “kopflink” first defined here
Home - <a id=“kopflink” href="sitemap.p
Doctype: XHTML 1.0 Strict
wie kann ich dies beheben?
