zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Little Boxes Bd.2 - 2.Menüebene

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.11.2009, 16:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.10.2009
Beiträge: 11
Teaser befindet sich auf einem aufstrebenden Ast
Standard Little Boxes Bd.2 - 2.Menüebene

Hallo,

bin gerade dabei, die zwei Bücher von Hr. Müller durchzuarbeiten. Bis jetzt kann ich gut folgen. Doch eine Sache verstehe ich nicht.

Um die zweite Menüebene zu gestalten wird folgendes im Buch geschrieben:

#seite02 li#navi02 li a,
#seite0201 li#navi02 li a,
#seite0201 li#navi02 li strong,

#seite03 li#navi03 li a,
#seite0302 li#navi03 li a,
#seite0302 li#navi03 li strong, {
background: #ffeda0;
border: none;
}

a) warum werden für die zweite Ebene wieder die ID-Refernzen #seite02 und #seite03 (1.Ebene) verwendet?

b) warum entsteht ein breiterer Rand zwischen 1. und zweiter Menüebene, wenn man diese Zeilen (z.B. für #seite03) weglässt?

Zumal ja in einem früheren Arbeitsschritt die 1px breite border-bottom vom Kopfbereich ja durch eine Hintergrundgrafik ersetzt wurde. Somit dürfte es doch zu gar keiner Doppelbildung eines Rahmens kommen, oder?

Bin übrigens jetzt neu hier und dies ist mein erster Eintrag/ erste Frage.
Find ich alles recht spannend.

Nebenbei gefragt (Stichpunkt IE-Patches)
Macht es eigentlich Sinn, alle möglichen Patches, die man hier (und anderswo) findet, in einer Musterdatei zusammenzufassen und im HTML-Link immer darauf zu verweisen, egal, ob man nun alle Patches benötigt oder nicht?

Gruß
Teaser (Michael)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.11.2009, 18:20
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

Zitat:
Zitat von Teaser Beitrag anzeigen
Nebenbei gefragt (Stichpunkt IE-Patches)
Macht es eigentlich Sinn, alle möglichen Patches, die man hier (und anderswo) findet, in einer Musterdatei zusammenzufassen und im HTML-Link immer darauf zu verweisen, egal, ob man nun alle Patches benötigt oder nicht?
so auf die Schnelle:
Nein das macht keinen Sinn.

Es kann durchaus vorkommen, das so ein nicht benötigter Conditional Comment zu Darstellungsproblemen führt.

Z.B. braucht der IE manchmal position:relative; um ein Darstellungsproblem zu beseitigen.
Dadurch ändert man aber die Stapelreihenfolge auf der Z-Achse, d.h. Elemente können sich dann unerwünschterweise falsch aufeinanderschichten.

Deshalb immer nur die Anweisungen für den IE definieren, die man wirklich braucht.

Ich glaub diese unselige YAML-Framework hat so eine Datei mit jeder Menge IE-Pauschal-Hacks.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.11.2009, 20:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.10.2009
Beiträge: 11
Teaser befindet sich auf einem aufstrebenden Ast
Standard IE-Patches

O.k. Das leuchtet mir ein.
Nun hab ich hier und bei Peter Müller gelesen, dass, wenn der Firefox eine Seite so darstellt wie ich sie mir vorstelle und der IE nicht, es wahrscheinlich an dessen Eigenarten liegt.

Nur - wie finde ich bei den vielen Patches, die es für diesen Browser in seinen vielen Versionen gibt, den, der für "meinen" Fall zutrifft?
Gibt es da online irgendwo eine Art Liste nach der Art: Wenn.... dann...?

Gruß

Teaser / Michael
Mit Zitat antworten
  #4 (permalink)  
Alt 04.11.2009, 20:56
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Na, dann bin ich ja wohl dran mit antworten. Ich nehme mal an, dass du mit deiner Frage Kapitel 7 meinst, "Horizontale Navigation mit zwei Ebenen": Und du bist auf S. 150. Stimmt's? Hat ein bisschen gedauert, bis ich die Stelle gefunden habe. Das ist über zwei Jahre her

Zitat:
Zitat von Teaser Beitrag anzeigen
a) warum werden für die zweite Ebene wieder die ID-Refernzen #seite02 und #seite03 (1.Ebene) verwendet?
#seite02 li#navi02 li a selektiert nicht die 1. Ebene. li li bedeutet "ein Listenelement in einem Listenelement". Was gleichbedeutend ist mit der 2. Navigationsebene. Bei der ersten Ebene ist das ein bisschen anders. Schau dir die Selektoren noch mal genau an.

Zitat:
Zitat von Teaser Beitrag anzeigen
b) warum entsteht ein breiterer Rand zwischen 1. und zweiter Menüebene, wenn man diese Zeilen (z.B. für #seite03) weglässt?
Breiteren Rand kann ich nicht entdecken. In dem Schritt werden A und STRONG gestaltet, weil sie ansonsten einen border aus Zeile 31 erben (von "#navibereich a,#navibereich strong") und deshalb dann anders aussehen.
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«
Mit Zitat antworten
  #5 (permalink)  
Alt 04.11.2009, 21:09
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Teaser Beitrag anzeigen
Gibt es da online irgendwo eine Art Liste nach der Art: Wenn.... dann...?
Der erste Versuch ist immer hasLayout (Details dazu: LB1 online und "Über hasLayout") für die relevanten Elemente.

Blättere in "Little Boxes 2" einfach mal ein bisschen weiter, in Kapitel 9 bei der vertikalen Navigation wird das ausführlich gezeigt, wie das geht (ab S. 193).
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«

Geändert von pmmueller (04.11.2009 um 21:19 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 05.11.2009, 08:19
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Teaser Beitrag anzeigen
Nur - wie finde ich bei den vielen Patches, die es für diesen Browser in seinen vielen Versionen gibt, den, der für "meinen" Fall zutrifft?
Gibt es da online irgendwo eine Art Liste nach der Art: Wenn.... dann...?
jep, gibbet:

Der Standardartikel über HasLayout
Adobe Bugliste
Bugsammlung
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #7 (permalink)  
Alt 05.11.2009, 16:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.10.2009
Beiträge: 11
Teaser befindet sich auf einem aufstrebenden Ast
Standard Breite Linie zwischen den zwei Menüreihen

Hallo Peter (falls ich dich so nennen darf).

Das mit li li ist mir schon klar bei #seite02 li#navi02 li a.
Was mich verwundert ist der Anfang mit#seite02, die sich - meiner Ansicht nach - doch auf die 1. Menüreihe bezieht, da alle Seiten der 2. Reihe vierstellig sind (0201, 0202 etc.).

Meine Logik hätte mir #seite0201 li#navi 02 li a vorgeschlagen und DAS irritiert mich eben ein wenig.

Natürlich, deine Beschreibung funzt, aber ich will eben dem "warum" auf dem Grund gehen, damit ich das Prinzip verstehe.

Und was die breitere Linie angeht:
Wenn du z.B. die Zeile #seite03 li#navi03 li a aus dem Stylesheet rausnimmst, so abspeicherst und dir die Seite dann mal im Firefox oder IE anschaust, dann ist zwischen der 1. und 2. Reihe eine dickere Linie zu sehen, deren Ursprung ich mir nicht erklären kann.

Kannst Du mir das erklären?

Und danke übrigens an hubspe für die Links!!
Mit Zitat antworten
  #8 (permalink)  
Alt 05.11.2009, 21:53
Benutzerbild von pmmueller
Autor von "Little Boxes"
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Ort: Groningen (Niederlande)
Beiträge: 292
pmmueller sorgt für eine eindrucksvolle Atmosphärepmmueller sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Teaser Beitrag anzeigen
Meine Logik hätte mir #seite0201 li#navi02 li a vorgeschlagen und DAS irritiert mich eben ein wenig.
Dann verstehe ich die Frage gar nicht mehr, die Zeile kommt doch direkt danach:
Code:
#seite02 li#navi02 li a, 
#seite0201 li#navi02 li strong ...
Der erste Selektor greift, wenn Seite 2 angeklickt wird und die zweite Ebene erscheint, aber noch keine Unterseite ausgewählt ist. Meinst du das?
Zitat:
Zitat von Teaser Beitrag anzeigen
Wenn du z.B. die Zeile #seite03 li#navi03 li a aus dem Stylesheet rausnimmst, so abspeicherst und dir die Seite dann mal im Firefox oder IE anschaust, dann ist zwischen der 1. und 2. Reihe eine dickere Linie zu sehen, deren Ursprung ich mir nicht erklären kann. Kannst Du mir das erklären?
Ich habe mal den kompletten Style auskommentiert. Die Links sind dann wie erwartet nicht formatiert, aber dickere Linien kann ich nicht erkennen (siehe Screenshot, links mit und rechts ohne Style).
Angehängte Grafiken
Dateityp: jpg lb2_k7_s150.jpg (59,5 KB, 8x aufgerufen)
__________________
HTML & CSS lernen: »Einstieg in CSS« + »Flexible Boxes« | CMS lernen: »Websites erstellen mit Contao«
Mit Zitat antworten
  #9 (permalink)  
Alt 27.11.2009, 13:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.10.2009
Beiträge: 11
Teaser befindet sich auf einem aufstrebenden Ast
Standard 2.Menüebene

Hallo Peter,

etwas späte Antwort, aber ich war beruflich mom etwas arg eingespannt.
Das mit der zweiten Ebene habe ich jetzt endlich begriffen. Die Anweisung
#seite02 li#navi02 li a. ist ja sowas wie eine Pfadangabe.

Mich hat in dem Kapitel über die Gestaltung der zweiten Menübebene immer der Bezug auf das #seite02 gewundert, die ja was mit der 1. Ebene zu tun hat:

#seite02 li#navi02 li a,
#seite0201 li#navi02 li a,
#seite0201 li#navi02 li strong,

#seite03 li#navi03 li a,
#seite0302 li#navi03 li a,
#seite0302 li#navi03 li strong, {
background: #ffeda0;

Aber wenn man das als eine Pfadangabe sieht, ist das natürlich klar.

Also: ich danke für die Hilfe.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 27.11.2009, 14:10
Benutzerbild von emti
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.06.2008
Ort: 23816 Groß Niendorf
Beiträge: 700
emti sorgt für eine eindrucksvolle Atmosphäreemti sorgt für eine eindrucksvolle Atmosphäre
Standard

@hubspe
Die Bugsammlung kannte ich auch noch nicht.
__________________
Gruß Michael
SketchAtomTransmit
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
menü, menübuttons, menügestaltung, menüleiste, zwei menüebenen

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
Little Boxes Dieter Ressourcen 43 15.11.2011 04:05
Little Boxes Teil 1: Crashkurs zu HTML und CSS online lesen pmmueller Ressourcen 6 25.02.2010 16:17
Bescheid: Little Boxes - Teil 0 (Null) pmmueller Ressourcen 29 28.12.2008 16:54
Little Boxes - Varianten FloZen Offtopic 14 03.06.2008 12:10
little Boxes paracelsus CSS 5 07.08.2007 19:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:30 Uhr.