nicht angemeldet
Selektor-Problem bei vertikaler Knopf-Navigation
Hallo,
vor einiger Zeit hatte ich mit euch gemeinsam schon einmal einige Möglichkeien zur Formatierung von Listen als "Navbar" diskutiert.
Mit eurer Hilfe bin ich damals auch zu einer Lösung gekommen!
Nun, in einem neuen Webprojekt, bin ich auf ein ähnliches Problem gestossen, dass ich aber aufgrund andere Vorstellungen der Darstellung der Navigationsleiste noch nicht lösen konnte.
Ich benötige eine vertikale Liste von Buttons zur Navigation. Als Vorlage dient dient mir die exemplarische Umsetzung von http://css.maxdesign.com.au/listamatic/vertical13.htm.
Was mir an der Umsetzung nicht gefällt, dass hatte ich damals in dem Thread hier gelernt, ist, dass der aktive Link mit "<li id="active">" gekennzeichnet wird. Lieber würde ich diese Angabe weglassen und die Darstellung über geeignetes Selektieren der Elemente erreichen.
Ich bin aber leider noch nicht auf die richtige Lösung gestossen.
Wie kann ich denn (sozusagen) den Text in dem <li> ohne eingebettetes <a> formatieren, hier müsste ja z. B. ein Innenabstand angegeben werden!
Viele Grüße
Daniel
P.S.:
Der Quelltext zu dem Beispiel sieht wie folgt aus (im Original):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="top">
<head>
<title>Layout-Beispiele :: Navigation :: vertikale Buttons</title>
<link rel="stylesheet" type="text/css" href="ressources/screen.css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#navcontainer {
background: #f0e7d7;
width: 30%;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
text-transform: lowercase;
}
ul#navlist {
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 70%;
}
ul#navlist li {
display: block;
margin: 0;
padding: 0;
}
ul#navlist li a {
display: block;
width: 100%;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}
#navcontainer>ul#navlist li a {
width: auto;
}
ul#navlist li#active a {
background: #f0e7d7;
color: #800000;
}
ul#navlist li a:hover, ul#navlist li#active a:hover {
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
</style>
</head>
<body>
<h1>Navigation :: vertikale Buttons</h1>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
-
Was häst Du denn von
<li class="meineklasse">text</li>
?-
Was häst Du denn von
<li class="meineklasse">text</li>
?Hm, das ist eigentlich nicht das was ich suche. Unabhängig von der Frage, ob hier id oder class geeignet ist, handelt es sich ja im Prinzip um die gleiche Lösung, nur dass du "active" in "meineKlasse" umbenannt hast ;-)
Viele Grüße
Daniel-
Ich habs noch nicht begriffen!
Du hast doch sogar 2 id-Angaben zur Formatierung angegeben. Einmal besitzt <li> die ID "active" und einmal besitzt der darin enthaltene <a> die ID "current"
Über beide ließe sich doch ein Layout realisieren.
»»Wie kann ich denn (sozusagen) den Text in dem <li> ohne eingebettetes <a> formatieren, hier müsste ja z. B. ein Innenabstand angegeben werden!
Was soll wegfallen? Der <a>-Tag?
Innenabstand mit padding oder margin, je nach Wunsch.
Ich hoffe ich konnte Dir helfen, denn ich bin wirklich am Raten was Du eigentlich meinst.
-
-
-
Hallo Daniel
Wie kann ich denn (sozusagen) den Text in dem <li> ohne eingebettetes <a> formatieren, hier müsste ja z. B. ein Innenabstand angegeben werden!
Wenn zur Formatierung der Links unbedingt zwei ineinandergeschachtelte Elemente benötigt werden, würde ich keine extra Id oder Klasse sondern einfach ein span verwenden.
Es ist sowieso empfehlenswert, den Menüeintrag der aktuellen Seite nicht zu verlinken.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hallo Detlef,
Wenn zur Formatierung der Links unbedingt zwei ineinandergeschachtelte Elemente benötigt werden, würde ich keine extra Id oder Klasse sondern einfach ein span verwenden.
Es ist sowieso empfehlenswert, den Menüeintrag der aktuellen Seite nicht zu verlinken.Genau auf den Link zur gerade aktiven Seite möchte ich vermeiden. Ein span ist eine gute Idee! Das ist meiner Meinung nach vertretbar. Auch - so wie du ja selber anmerkst - dieses ausschließlich dazu dient die gewünschte Formatierung umzusetzen.
Nur "den Text zwischen dem <li>" kann man nicht selektieren, oder?
Viele Grüße
Danile-
Hallo Daniel
Nur "den Text zwischen dem <li>" kann man nicht selektieren, oder?
CSS-Selektoren funktionieren nicht rückwärts. Du kannst ein Element wunderbar über sich selbst und seine Vorfahren selektieren, aber nicht die Vorfahren anhand ihrer Nachfahren.
Du hast also die Möglichkeiten, entweder dem inaktiven Menüpunkt eine Id zu geben (<li id="aktiv">Inhalt</li>) oder statt eines Links ein anderes Element einzufügen, welches dann den Text enthält.
Wenn zur Formatierung der Menüeinträge nicht zwingend zwei Elemente erforderlich sind, wäre ich für die Variante mit der Id, ansonsten eben span oder auch strong für den Inhalt. Strong hätte noch den Vorteil, dass der Aktuelle Menüpunkt bei deaktiviertem CSS hervorgehoben wird.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-