Dabei seit: 23.12.2007 Ort: deutschland Alter: - Geschlecht:
Verfasst Do 10.12.2009 17:28 Titel
3 navi (css) probleme
hallo zusammen,
ich bastel gerade an einer navi für eine internet seite un stoße an meine grenzen...
ich habe 3 problem mit einem reinen css-drop-down und flyout menu.
ich denke die probleme sind für profis minimal, aber für mich leider ausreichend, euch um hilfe zu beten.
das prinzip der navigation:
ich habe einen button. wenn ich mit der maus auf diesen button gehe, öffnet sich nach unten eine box mit weiteren menu punkten. wenn man über diese fährt, öffnet sich ein weitere box, diesmal aber nach rechts.
so nun zu meinem ersten problem: -> reihenfolge
ich habe pro button nun einen layer gemacht und diese posioniert. (die anderen menu punkte sollen sich nicht immer nach unten verschieben) wenn ich aber auf einen button gehe, dann öffnet sich die box nicht so richtig. sie scheint einfach hinter dem darunterliegenden button zu verstecken. wenn ich die unteren button aber nach unten verschiebe, dann klappt alles.
das zweite problem ist der rahmen:
die sich nach unten und rechts öffnen boxen, haben einen blauen rahmen. der ist jedoch auch um den button... kann ich den um den button weg machen? es gibt menu punkte, da öffnet sich keine box, da ist der button dann kleiner, da er ohne rahmen auskommt.
alternative wäre ja den button zu verkleinern, aber das ist für mich ne notlösung.
letzte problem:
die schriftfarbe ist mit der schriftfarbe der sich auf klappenen box identisch. auf den button soll sie aber weiß sein. wie kann ich das im css lösen, das die beiden nicht immer identisch sind?
hier die daten:
bevor ich den quelltext hier reinlade und euch abschrecke, lade ich sie lieber hoch;)
http://ul.to/i4yxgj
(ich hoffe das klappt mit dem zip)
Wer sonst noch fehler findet, immer schön drauf los
<div class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <a href="http://www.google.de">Lorem</a> ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div>
</div>
#startseite :hover > a {color:#fff; background:#fff url(../images/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
#startseite :hover ul {position:static; height:auto; margin-top:-1px; background:#fff;}
#startseite :hover ul :hover ul,
#startseite :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #005094;}
#startseite :hover ul li, #startseite :hover ul li a {background:#fff; text-align:left; text-indent:30px; }
#startseite :hover ul li.fly a {background: #fff url(../images/arrow.gif) no-repeat 120px center;}
#startseite :hover ul :hover {background:#944500; position:relative; z-index:100;}
#startseite a:hover ul li.fly a:hover {background:#944500 url(images/arrow.gif) no-repeat 120px center; color:#fff;}
#startseite :hover ul li.fly:hover > a {background:#944500 url(images/arrow.gif) no-repeat 120px center; color:#fff;}
#startseite :hover ul :hover ul li,
#startseite :hover ul :hover ul li a {background:#fff;}
#startseite :hover ul :hover ul :hover ul li {background:#fff; z-index:500;}
#startseite :hover ul :hover ul li.fly a {background: #fff url(../images/arrow.gif) no-repeat 120px center;}
#startseite :hover ul :hover ul :hover {z-index:500; background:#944500; color:#fff;}
#startseite a:hover ul a:hover ul li.fly a:hover {background:#944500 url(../images/arrow.gif) no-repeat 120px center; color:#fff;}
#startseite :hover ul :hover ul li.fly:hover > a {background:#944500 url(../images/arrow.gif) no-repeat 120px center; color:#fff;}
#startseite :hover ul :hover ul :hover ul li,
#startseite :hover ul :hover ul :hover ul li a {background:#fff;}
#startseite :hover ul :hover ul :hover ul :hover {background:#944500; color:#fff;}
#startseite :hover ul :hover ul :hover ul :hover a {color:#fff;}
#aktuelles :hover > a {color:#fff; background:#fff url(../images/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
#aktuelles :hover ul {position:static; height:auto; margin-top:-1px; background:#fff;}
#aktuelles :hover ul :hover ul,
#aktuelles :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #005094;}
#aktuelles :hover ul li, #aktuelles :hover ul li a {background:#fff; text-align:left; text-indent:30px; }
#aktuelles :hover ul li.fly a {background: #fff url(../images/arrow.gif) no-repeat 120px center;}
#aktuelles :hover ul :hover {background:#944500; position:relative; z-index:100;}
#aktuelles a:hover ul li.fly a:hover {background:#944500 url(images/arrow.gif) no-repeat 120px center; color:#fff;}
#aktuelles :hover ul li.fly:hover > a {background:#944500 url(images/arrow.gif) no-repeat 120px center; color:#fff;}
#aktuelles :hover ul :hover ul li,
#aktuelles :hover ul :hover ul li a {background:#fff;}
#aktuelles :hover ul :hover ul :hover ul li {background:#fff; z-index:500;}
#aktuelles :hover ul :hover ul li.fly a {background: #fff url(../images/arrow.gif) no-repeat 120px center;}
#aktuelles :hover ul :hover ul :hover {z-index:500; background:#944500; color:#fff;}
#aktuelles a:hover ul a:hover ul li.fly a:hover {background:#944500 url(../images/arrow.gif) no-repeat 120px center; color:#fff;}
#aktuelles :hover ul :hover ul li.fly:hover > a {background:#944500 url(../images/arrow.gif) no-repeat 120px center; color:#fff;}
#aktuelles :hover ul :hover ul :hover ul li,
#aktuelles :hover ul :hover ul :hover ul li a {background:#fff;}
#aktuelles :hover ul :hover ul :hover ul :hover {background:#944500; color:#fff;}
#aktuelles :hover ul :hover ul :hover ul :hover a {color:#fff;}
#manschaften :hover > a {color:#fff; background:#fff url(../images/slide_1.gif) no-repeat; z-index:500; white-space:nowrap;}
#manschaften :hover ul {position:static; height:auto; margin-top:-1px; background:#fff;}
#manschaften :hover ul :hover ul,
#manschaften :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #005094;}
#manschaften :hover ul li, #manschaften :hover ul li a {background:#fff; text-align:left; text-indent:30px; }
#manschaften :hover ul li.fly a {background: #fff url(../images/arrow.gif) no-repeat 120px center;}
#manschaften :hover ul :hover {background:#944500; position:relative; z-index:100;}
#manschaften a:hover ul li.fly a:hover {background:#944500 url(images/arrow.gif) no-repeat 120px center; color:#fff;}
#manschaften :hover ul li.fly:hover > a {background:#944500 url(images/arrow.gif) no-repeat 120px center; color:#fff;}
#manschaften :hover ul :hover ul li,
#manschaften :hover ul :hover ul li a {background:#fff;}
#manschaften :hover ul :hover ul :hover ul li {background:#fff; z-index:500;}
#manschaften :hover ul :hover ul li.fly a {background: #fff url(../images/arrow.gif) no-repeat 120px center;}
#manschaften :hover ul :hover ul :hover {z-index:500; background:#944500; color:#fff;}
#manschaften a:hover ul a:hover ul li.fly a:hover {background:#944500 url(../images/arrow.gif) no-repeat 120px center; color:#fff;}
#manschaften :hover ul :hover ul li.fly:hover > a {background:#944500 url(../images/arrow.gif) no-repeat 120px center; color:#fff;}
#manschaften :hover ul :hover ul :hover ul li,
#manschaften :hover ul :hover ul :hover ul li a {background:#fff;}
#manschaften :hover ul :hover ul :hover ul :hover {background:#944500; color:#fff;}
#manschaften :hover ul :hover ul :hover ul :hover a {color:#fff;}
__________________________________________________________________________________________________
falls noch was sein sollte, bitte melden!
Schönen Tag
Zuletzt bearbeitet von Smooth-Graphics am Fr 11.12.2009 10:56, insgesamt 3-mal bearbeitet
Dabei seit: 06.02.2008 Ort: Berlin Alter: - Geschlecht:
Verfasst Fr 11.12.2009 09:23 Titel
Unabhängig von Deinem Problem hast Du da leider eine von Stus ungeeigneten Navis erwischt: Jeder Haupt-Menüpunkt hat seine eigene ul, was dazu führt, dass der Link "Startseite" aus einer ul mit einem einzigen li besteht, und dann folgt die nächste ul für "Aktuelles" usw... Es ist mir rätselhaft, was Stu sich dabei denkt, denn die meisten seiner Navis sind ja korrekt, d.h. bestehen aus einer ul (die aber natürlich unendlich viele Unterebenen haben kann).
So ein DD-Menü ist sehr viel Arbeit, erst recht in der JS-freien Variante für IE < 7, und wenn Du Dir schon soviel Arbeit machst, dann mach es richtig und suche Dir auf Stus Seite ein geeignetes Markup (wie gesagt, die meisten seiner Navis haben dies).
Die Behebung Deiner Fehldarstellungen ist dann ein Selbstgänger, aber ich mache das nicht bei ungeeignetem Markup
Dabei seit: 06.02.2008 Ort: Berlin Alter: - Geschlecht:
Verfasst Fr 11.12.2009 11:03 Titel
mokleini hat geschrieben:
kann sein, das ich es auch kaputt gemacht habe
Nein, er hat wirklich solche Varianten auf seiner Seite
mokleini hat geschrieben:
Gegen Java habe ich nix
Java brauchst Du auch nicht, allenfalls JavaScript für den IE < 7 (Java ist etwas ganz anderes.)
mokleini hat geschrieben:
http://www.cssplay.co.uk/menus/skeleton4.html
was haltet ihr von dem? ist das für meine anforderungen in ordnung?
Das Markup ist okay - eine Liste mit weiteren Unterebenen.
Ich persönlich treibe allerdings für den IE < 7 diesen großen Aufwand nicht mehr, zumal man ein solches Menü bei jeder neuen IE-Generation überprüfen (und mit Pech überarbeiten) muss.
Ich schreibe ein DD-Menü ganz normal per li:hover und bringe dies dem IE < 7 (der ausschließlich a hovert) bei, indem er li beim Hovern per JS eine "echte" Klasse gibt: http://htmldog.com/articles/suckerfish/dropdowns/
Diese JS-Datei sollte man dem IE < 7 übrigens per "Conditional Comment" (Google) zuweisen, damit die anderen Browser damit nicht "belästigt" werden (und es erspart ihnen eine unnötige HTTP-Anfrage).
Zuletzt bearbeitet von heiko_rs am Fr 11.12.2009 11:06, insgesamt 1-mal bearbeitet
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.