zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Matrix-Navigation mit DropDown - "Vererbung verhindern"?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.08.2008, 18:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2008
Beiträge: 5
madpotato befindet sich auf einem aufstrebenden Ast
Standard Matrix-Navigation mit DropDown - "Vererbung verhindern"?

Hallo zusammen,

ich sitze jetzt seit über zwei Tagen an einem Problem das mich verzweifeln lässt - aber mal von vorne:

Ich nutze die hier beschriebene Technik der "Matrix-Navigation" (einer großen Datei mit allen Zustandsgrafiken der Navigation) um ein rein mit CSS formatiertes Menü zu erstellen: Navigation MatrixReloaded @ Dan Rubin’s SuperfluousBanter

Die Technik ist relativ leicht, je nach body-ID und hover-ID wird der Hintergrund verschoben um einen Hover-Effekt zu erzielen und um eine alternative Grafik für den gerade ausgewählten Bereich (also z.B. "Startseite", "Galerie", etc.) anzuzeigen damit dieser als ausgewählt angezeigt wird.

Soweit funktioniert das gut - HIER MEINE BISHERIGE NAVIGATION IN AKTION: CAPTION_LINE

Nun zu meinem Problem: Ich möchte dieser Navigation eine Dropdown-Funktionalität hinzufügen um weitere Unterpunkte zur Auswahl anzubieten.
Da die Navigation über eine ungeordnete Liste formatiert wird, wollte ich dem Ganzen eine weitere ungeordnete Liste hinzufügen (in der Form ul#nav li ul {weitere Anweisungen}).
Leider werden alle Informationen des "Mutter-UL/LI-Tags" auch an die weiteren Unterpunkte vererbt - so findet sich hier vor allem ein "overflow:hidden", welches verhindert das die gewünschte Dropdown-Liste über die Größe der Navigation heraus sichtbar ist und weitere Anweisungen in der LI-Formatierung die mir Kopfzerbrechen bereiten (und die Dropdown-Liste nicht erscheinen lassen).

Die relevanten CSS-Styles im Einsatz sind hier sichtbar: http://www.madpotato.de/test/_lang/de/style.css

Der HTML-Code (wie er mir vorschwebt) ist dieser:

Code:
  <ul id="nav">
    <li id="sta"><a href="'.$myDomain.LINK_1.'">'.LINK_1.'</a></li>
    
    
    <li id="gal">
      <a href="'.$myDomain.LINK_11.'"></a>
      <ul> 
        <li><a href="c">Test-Dropdown</a> <!-- MUSS SICHER ANDERS GEMACHT WERDEN -->
          <ul> 
            <li><a href="d">Punkt 1</a></li> 
            <li><a href="e">Punkt 2</a></li> 
            <li><a href="f">Punkt 3</a></li> 
            <li><a href="g">Punkt 4</a></li> 
          </ul> 
        </li> 
      </ul> 
    </li>
... etc. etc...
Hat jemand eine Lösung für meine blinden Augen wie ich entweder der beschriebenen Matrix-Navigation die Dropdown-Funktionalität hinzufügen kann bzw. eine Möglichkeit die Vererbung dieser Attribute zu verhindern (wohl nicht möglich). Oder hat jemand einen Link zu einer alternativen, reinen CSS-basierten Navigation mit grafischen Hover-Effekten und Dropdown-Funktionalität?

Vielen Dank im Vorraus, jede Form von Input kann mir den Tag etwas leichter machen !
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.08.2008, 18:29
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Du kannst jegliche CSS-Eigenschaften für das Submenü zurücksetzen.

Und Deine Grafik hat 191 (!) kb, da unglaublich viel Redundanz.

Für eine Lösung, die auch bei deakt. Grafiken funktioniert, siehe http://xhtmlforum.de/40267-faq-h-ufi...tml#post296439
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.08.2008, 18:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2008
Beiträge: 5
madpotato befindet sich auf einem aufstrebenden Ast
Standard

Danke für die schnelle Antwort !

Wie kann ich die Eigenschaft denn zurücksetzen? Es gibt ja keine globale "Reset-Anweisung" die z.B. die overflow-Einstellung überschreibt. Und vor allem diese Einstellungen lassen sich für die Unterpunkte (UL/LI) irgendwie nicht überschreiben. Jede Hilfe wäre super !

Code:
ul#nav li a {
	position: absolute;
	top: 0;
	width: 124px;
	text-indent: -9000px;
	text-decoration: none;
	padding: 124px 0 0 0;
	overflow: hidden;
	height: 0px !important; 
	height /**/:118px; /* IE5/Win */
	background: transparent url(img/header_nav.png) no-repeat;
}
Die Grafik ist nur eine Vorabversion, ich werde sie noch etwas komprimieren. Allerdings ist der Vorteil das sie nur 1x geladen werden muss und in einem Stück (im Gegensatz zu vielen kleinen Grafiken) ausgeliefert wird.
Mit Zitat antworten
  #4 (permalink)  
Alt 17.08.2008, 18:39
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Zitat:
Es gibt ja keine globale "Reset-Anweisung" die z.B. die overflow-Einstellung überschreibt.
Und was ist overflow: visible; dann?

Siehe: overflow: Übergroßer Inhalt: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #5 (permalink)  
Alt 17.08.2008, 18:46
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von madpotato Beitrag anzeigen
Wie kann ich die Eigenschaft denn zurücksetzen?
Indem Du ihren Initialwert deklarierst.

Zitat:
Zitat von madpotato Beitrag anzeigen
Es gibt ja keine globale "Reset-Anweisung" die z.B. die overflow-Einstellung überschreibt.
Nein, aber es gibt den Initialwert "visible".

Zitat:
Zitat von madpotato Beitrag anzeigen
Die Grafik ist nur eine Vorabversion, ich werde sie noch etwas komprimieren.
Die Redundanz ist das Hauptproblem: Jeder Menüpunkt steht achtmal da, davon sechsmal absolut identisch.

Zitat:
Zitat von madpotato Beitrag anzeigen
Allerdings ist der Vorteil das sie nur 1x geladen werden muss
Das ist bei meinem Beispiel auch der Fall.
Mit Zitat antworten
  #6 (permalink)  
Alt 17.08.2008, 18:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2008
Beiträge: 5
madpotato befindet sich auf einem aufstrebenden Ast
Standard

Nun, natürlich hab' ich overflow:visible schon mal probiert aber so wie ich es sehe hat ja der "Container" des übergeordneten UL-Tags die Anweisung, nichts aus seinem vordefinierten height-Bereichs herauszulassen.

Nochmal konkret:
Die "Hauptnavigation" hat folgende Formatierung "nav#ul" für Liste und "nav#ul li" für die horizontalen Unterpunkte. Die Dropdown-Liste soll als untergeordnete Liste dieser Tags (also "nav#ul li ul" und "nav#ul li ul li") eingebaut werden. Alle Änderungen die ich dann für diese beiden Formatierungen eingebe werden aber leider NICHT übernommen (wenn ich die Anweisungen von nav#ul und nav#ul li temporär entferne funktioniert das Dropdown-Menü).

Vielleicht habe ich auch nur einen Denkfehler und es gibt eine einfache Lösung?! (das wär' was

Danke schon mal für Deine Mühe, vielleicht hast Du ja noch eine Idee !
Mit Zitat antworten
  #7 (permalink)  
Alt 17.08.2008, 19:02
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Poste mal ein Testcase, das die falsch formatierte Subnavi zeigt.
Mit Zitat antworten
  #8 (permalink)  
Alt 17.08.2008, 19:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2008
Beiträge: 5
madpotato befindet sich auf einem aufstrebenden Ast
Standard

Heiko, vielen Dank für Deine Mühe - ich weiß es sehr zu schätzen ! Wenn wir das irgendwie hinkriegen würd' ich Dir gerne ein Bier ausgeben

- Hier ist die Variante mit eingebauten DropDown-Menü die nicht funktioniert: CAPTION_LINE
- Und hier noch eine Variante mit deaktivierten Einstellungen des nav#ul li a-Tags: CAPTION_LINE (wie man sehen kann funktioniert das DropDown-Menü - leider ist es durch den overflow:hidden nur innerhalb der Navigation sichtbar - und natürlich funktioniert das eigentliche Menü nicht mehr)

Die jeweils relevanten Style-Informationen sind hier

- Fall 1: http://www.madpotato.de/test/1/_lang/de/style.css
- Fall 2: http://www.madpotato.de/test/2/_lang/de/style.css

Nochmals vielen Dank für Deine Mühe !
Mit Zitat antworten
  #9 (permalink)  
Alt 17.08.2008, 22:52
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Was genau soll den mit dem Submenü passieren? Momentan wirkt auf seine Links u.a. noch height: 0; und neg. text-indent.

Und zu Deiner Menü-Grafik: Grundsätzlich würden 2 Reihen reichen, einmal die helle und einmal die dunkle. Dazu käme dann noch eine winzige dritte Reihe, ebenfalls mit voller Breite, aber nur ca. 5px hoch, die ausschließlich den unteren Bereich mit den weißen Dreiecken liefert.

Das alles in einer Grafik würde denselben Zweck wie jetzt erfüllen, nur ohne Redundanz und daher mit ca. 75% geringerer Dateigröße (da 6 der momentan noch 8 kompletten Reihen wegfallen würden).
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.08.2008, 23:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2008
Beiträge: 5
madpotato befindet sich auf einem aufstrebenden Ast
Standard

Der Tip mit der Optimierung ist gut - werde ich bei Gelegenheit umsetzen - da die Webseite unerwartet früher fertig werden soll, stehe ich ziemlich unter Druck und werde Optimierungen dieser Art in einem späteren Update einpflegen.

Hier ist ein Screenshot wie ich mir die Navigation vorstelle: http://www.madpotato.de/test/dropdown.jpg (der untere Bereich ist natürlich das Dropdown-Menü... - ist schnell zusammen kopiert, der Inhalt macht natürlich keinen Sinn...)

Ich habe natürlich versucht andere height- und text-indent-Einstellungen für die Unter-Listen einzustellen, gebracht haben diverse Ideen nichts. Ich habe auch schon versucht dem Untermenü eine ander ID/Klasse zuzuweisen, das ändert aber irgendwie alles nichts an dem Teufelskreis das die EInstellungen der Haupt-Liste vererbt werden.

Geändert von madpotato (17.08.2008 um 23:18 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, dropdown, hover, matrix navigation, vererbung

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Navigation safari CSS 12 20.04.2011 12:11
Float-Problem? mischaef CSS 33 20.10.2010 17:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29
Dropdown Hover 3.Ebene klappt nicht auf Maztah CSS 0 22.03.2008 23:35
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 19:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:28 Uhr.