Zur Boardunity Forenstartseite
  #1  
Alt 19.10.2005, 23:34
Benutzerbild von Michael Przybyla
Mitglied
 
Registriert seit: 02.2003
Beiträge: 184

CSS Dropdowns ohne Hindernisse


Ich glaube so manch einer von euch wird CSS Dropdowns kennen.

Praktisch wie ich finde, allerdings sind die meisten Umsetzungen mit Hacks nur so vollgestopft - und auch nicht unbedingt sematisch korrekt. Und wozu das ganze? Genau, der liebe Internet Explorer.

Da ich schon seit längeren einen anderen Weg gehen will, und auch kann, erarbeite ich gerade eine Umsetzung die sematisch korrekt und auch keine Hacks beinhalten soll.

Wie würde ich mich doch freuen, wenn alle Browser die CSS 2.1 Selektoren vollkommen unterstützen würden.

Schließlich müssen wir irgendwann einen Schritt nach vorne tun, die Zukunft bringt viel gutes: CSS 3, XHTML 2 usw. usw..

So genug geschrieben.

Code:
<dl class="dropdown">
	<dt>CSS Dropdown</dt>
	<dd>
		<ul>
			<li>
				<a href="#" title="Ebene 1">Ebene 1</a>
				<ul>
					<li>
						<a href="#" title="Ebene 2">Ebene 2</a>
					</li>
				</ul>
			</li>
		</ul>
	</dd>
</dl>
Wie ich finde sematisch korrekter als manch andere Lösung, die z.b. headings benutzt. Eine Definations Liste ist hier völlig i. O., besser wäre natürlich eine Navigations Liste, aber das unterstützt bisher meines Wissens nach noch kein Browser.

Und zum guten Schluss noch ein bissle CSS, und das gute Stück ist fertig.

Code:
.dropdown dt,
.dropdown a
{
	cursor: pointer;
}

.dropdown ul
{
	display: none;
}


.dropdown:hover > dd > ul
, .dropdown:hover > dd > ul > li:hover > ul
{
	display: block;
}
So, wenn sich nun einer fragen sollte was das ganze soll - ganz einfach - ich wollte damit nur zeigen das die Zukunft uns vieles erleichtert.

Was ist eure Meinung dazu?

Vorallem würden mich noch andere Ansätze interessieren, z. B. solche, die CSS 3 und/oder XHTML 2 benutzen.
  #2  
Alt 20.10.2005, 01:13
Benutzerbild von TRS
TRS TRS ist offline
Mitglied
 
Registriert seit: 02.2003
Ort: Berlin
Beiträge: 990
Ich bin bereits ein großer Freund des :hover Pseudoklasse geworden und nutze es für eine Reihe an Kleinigkeiten. Zum Beispiel lass ich in Tabellen gerne die einzelnen Reihen hervorheben, wenn ein Nutzer mit dem Mauszeiger drüberfährt. Nutzer des IE bleiben dann zwar außen vor, aber verpassen du sie deswegen auch nichts.

Nur kurze Anmerkungen zu deinem Quelltext: Du solltest keine Definitionsliste wählen, sondern eine geordnete oder ungeordnete Liste (je nach Aufbau der Navigation). Es handelt sich um keine klassische Definition von Begriffen.

Außerdem wäre es sinnvoller, die Elemente mit Hilfe von position: absolute; left: -200em; aus dem sichtbaren Bereich zu entfernen. Bestimmte Screenreader ignorieren Elemente, die mit Hilfe von display: none; ausgeblendet werden und ich vermute an dieser Stelle, dass die :hover Implementierung ebenfalls nicht sauber dort abläuft.

Gruß

  #3  
Alt 20.10.2005, 12:28
Benutzerbild von Michael Przybyla
Mitglied
 
Registriert seit: 02.2003
Beiträge: 184
Zitat:
Zitat von Reimer
Nur kurze Anmerkungen zu deinem Quelltext: Du solltest keine Definitionsliste wählen, sondern eine geordnete oder ungeordnete Liste (je nach Aufbau der Navigation). Es handelt sich um keine klassische Definition von Begriffen.
Ich habe schon viele Diskussionen darüber gelesen, wie man eine Navigation sematisch korrekt darstellen könnte/sollte.

Es gab z. B. welche die die Lösung mit headings bevorzugt haben.

Beispiel:
Code:
<h2>Navigation</h2><ul><li>Navigationspunkt</li></ul>
Und es gab welche die einfach nur eine Liste bevorzugt haben, so ähnlich wie du.

Doch ich bin der Meinung das hier eine Definationsliste völlig ok ist, ich gehe sogar so weit und behaupte das sie sematisch gesehen am geeignetesten ist.

Vl. kurz eine Erklärung wieso ich der Meinung bin - auch wenn ich nicht gut im Erklären bin :

Wenn man einen Punkt in der Navigation festlegt, der noch Unterpunkte enthält, definiert man M. m. nach diesen oberen Punkt - ich sagte es doch, ich bin nicht gut im Erklären .

Vl. sollte ich mein Beispiel von oben noch etwas umbauen, in etwa so:

Code:
		<dl class="dropdown">
			<dt>Navigation</dt>
			<dd>
				<ol>
					<li>
						<dl>
							<dt><a href="#" title="Ebene 1">Ebene 1</a></dt>
							<dd>
								<ol>
									<li>
										<a href="#" title="Punkt 1">Punkt 1</a>
									</li>
									<li>
										<a href="#" title="Punkt 2">Punkt 2</a>
									</li>
								</ol>
							</dd>
						</dl>
					</li>
				</ol>
			</dd>
		</dl>
Die Navigations Listen in XHTML 2 gehen da einen ähnlichen weg.

Zitat:
Zitat von Reimer
Außerdem wäre es sinnvoller, die Elemente mit Hilfe von position: absolute; left: -200em; aus dem sichtbaren Bereich zu entfernen. Bestimmte Screenreader ignorieren Elemente, die mit Hilfe von display: none; ausgeblendet werden und ich vermute an dieser Stelle, dass die :hover Implementierung ebenfalls nicht sauber dort abläuft.
An die lieben Screenreader habe ich garnicht gedacht.
Da muss ich dir jetzt mal zustimmen.

Btw: Auch wenn es egal sein kann, ein kleiner Tipp: Niemals einen Wert über 1000em nehmen (oder waren es 1000px?), Opera zeigt sonst einen horizontalen Scrollbalken an.

Aber ich kann dich beruhigen, ich habe das ganze getestet, es funktioniert.

Btw: Ich habe das ganze mal zusammengefasst und bei mir hochgeladen: CSS Dropdowns.

Obwohl ich mir mit der geordneten Liste nicht so sicher bin, aann sollte man eine geordnete und wann eine ungeordnete Liste nehmen?

Ich war bisher zumindest der Meinung das wenn die Navigation einen bestimmten Ablaut hat, denn man folgen sollte, nimmt man eine geordnete Liste, ansonsten eine ungeordnete.

  #4  
Alt 20.10.2005, 17:11
Benutzerbild von TRS
TRS TRS ist offline
Mitglied
 
Registriert seit: 02.2003
Ort: Berlin
Beiträge: 990
Zitat:
Zitat von Michael Przybyla
Wenn man einen Punkt in der Navigation festlegt, der noch Unterpunkte enthält, definiert man M. m. nach diesen oberen Punkt - ich sagte es doch, ich bin nicht gut im Erklären .
Wenn ich mir über die Nutzung eines Elements unsicher bin, so wähle ich eine einfache Technik um dies zu prüfen: Wie würde ich auf einem Blatt Papier die Informationen veröffentlichen und wie übertrage ich diese dann in das Internet.

Eine Definitionsliste, sie sagt es eigentlich bereits aus, ist eine Liste an Definitionen. Ein Beispiel für eine Definitionsliste wäre http://de.selfhtml.org/html/text/anzeige/dl_dt_dd.htm - In deinem Beispiel definierst du zwar in der Tat die Navigation als die Liste, aber es trifft eigentlich nicht auf den Verwendungszweck zu.

Ich bevorzuge die Einleitung mit Hilfe einer Headline, da Nutzer von Screenreadern beispielsweise zwischen Headlines navigieren können. So sind sie sofort in der Lage die Navigation inklusive sämtlicher Links zu überspringen.

Zitat:
Zitat von Michael Przybyla
Btw: Auch wenn es egal sein kann, ein kleiner Tipp: Niemals einen Wert über 1000em nehmen (oder waren es 1000px?), Opera zeigt sonst einen horizontalen Scrollbalken an.
Ich nutze 200em, entspricht in meinem Style 2000 Pixel, und besitze das Problem nicht. Allerdings könnte dies ein Grund sein, warum ich ab und zu solche Seiten antreffe

  #5  
Alt 21.10.2005, 13:01
Benutzerbild von Michael Przybyla
Mitglied
 
Registriert seit: 02.2003
Beiträge: 184
Zitat:
Zitat von Reimer
Ich bevorzuge die Einleitung mit Hilfe einer Headline, da Nutzer von Screenreadern beispielsweise zwischen Headlines navigieren können. So sind sie sofort in der Lage die Navigation inklusive sämtlicher Links zu überspringen.
Hättest du da ein paar gute Links für mich?
Konnte nichts finden, das mit weiterhelfen würde.

Außerdem würde es mich freuen wenn du mir Links zukommen lassen könntest, die sich mit Definitionslisten beschäftigen und wie man sie richtig einsetzt.

Ich werde später mal meine Lesezeichen durchforsten und dann ebenfalls ein paar Links posten.

Danke.

  #6  
Alt 21.10.2005, 17:22
Benutzerbild von TRS
TRS TRS ist offline
Mitglied
 
Registriert seit: 02.2003
Ort: Berlin
Beiträge: 990
Zitat:
Zitat von Michael Przybyla
Hättest du da ein paar gute Links für mich?
Konnte nichts finden, das mit weiterhelfen würde.
Mit guten Links kann ich leider nicht dienen. Ich hatte mal vor ein paar Monaten ein Video gesehen, in welchem eine blinde Surferin während eines Surfgangs die Zugänglichkeit von Websites kommentierte. Das ganze hatte ich über drei Ecken als DVD erhalten, aber die liegt in Deutschland. Irgendwo im Netz soll es etwas ähnliches geben.

Zitat:
Zitat von Michael Przybyla
Außerdem würde es mich freuen wenn du mir Links zukommen lassen könntest, die sich mit Definitionslisten beschäftigen und wie man sie richtig einsetzt.
Zitat:
Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description.
http://www.w3.org/TR/html401/struct/lists.html#edef-DL

Zitat:
Definitionslisten sind für Glossare gedacht. Glossare bestehen aus einer Liste von Einträgen. Die Einträge eines Glossars bestehen aus einem zu definierenden Ausdruck (z.B. ein Fachbegriff) und der zugehörigen Definition.
http://de.selfhtml.org/html/text/listen.htm#definition

  #7  
Alt 23.10.2005, 00:10
Benutzerbild von Philipp Gérard
Zeitdenken
 
Registriert seit: 09.2003
Ort: Wien
Beiträge: 828
Ich habe so etwas gerade gebaut und dabei einfache Listen benutzt. Das ganze sieht so in der Art aus und funktioniert je nach Wunsch mit Java-Script oder Pseudoklassen wie :hover bestens. In meinem Beispiel habe ich Java-Script verwendet, um die Kompatibilität zu technisch rückständigen Browsern (die meistens auch nicht JS deaktiviert haben...hehe) zu gewährleisten.

Code:
<li><a href="#" onclick="return toogleList('jenes');">Jenes/a>
	<ul id="jenes" onclick="return toogleList('jenes');">
		<li><a href="?page=article">Jenes</a></li>
		<li><a href="?page=photoset">Dies</a></li>
		<li><a href="?page=illustration">Das</a></li>
	</ul>
</li>
Die CSS-Implementation noch dazu...

Code:
ul#navigation {
	padding: 0;
	margin: 0;
	list-style: none;
	margin-bottom: 10px; 
	border-bottom: 1px solid black;
}
#navigation li {
	float: left;
	position: relative;
	margin-right: 3px;
	width: 6.5em;
	border: 1px solid #333333;
	padding: 5px;
	background-color: #CCC;
	text-align: center;
}
#navigation li ul {
	display: none;
	position: absolute; 
	top: 1.5em;
	left: 0;
	padding: 0;
	margin: 0;
	list-style: none;
	margin-top: 7px;
}
#navigation li ul li {
	padding: 5px;
	margin: 0;	
	margin-bottom: 1px;
	background-color: #F1F1F1;
}
#navigation li > ul {
	top: auto;
	left: auto;
}
#navigation li:hover {
	background-color: white;
}
#navigation a {
	text-decoration: none;
}
#navigation a:hover {
	text-decoration: none;
}
Diese Technik ist gerade für Textbrowser und Screenreader ideal, da Listen eine Navigation ideal auszeichnen. Michaels Demo kann Safari übrigens keine Navigation entlocken

__________________
Philipp Gérard
Gewöhnliche Menschen denken nur daran, wie sie ihre Zeit verbringen. Ein intelligenter Mensch versucht sie zu nützen. - Arthur Schopenhauer
Antwort


Stichworte
-

Themen-Optionen
Thema bewerten
Thema bewerten:

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

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wie tabellarische Daten mit CSS ausgeben? amroth Programmierung und Datenbanken 13 03.08.2005 20:25






1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24