Problem zu selektieren

[Daniel N.]

Hallo,

irgendwie komme ich mit den verschiedenen Selektoren in css noch nicht richtig zurecht. Wie kann ich die Klassen "aktiv" für folgende HTML-Konstruktion "ansprechen":

  
<div id="haupt-navigation">  
<ul class="navigation">  
 <li><a href="#">Punkt 1</a></li>  
 <li><a href="#" class="aktiv">Punkt 2</a></li>  
 <li><a href="#">Punkt 3</a></li>  
 <li><a href="#">Punkt 4</a></li>  
</ul>  
</div>  

Die id "haupt-navigation" soll dabei nicht verwendet werden, da die Formatierung auch für weitere Bestandteile der Klasse "navigation" verwendet werden soll.

Viele Grüße
Daniel

[Auge]

Hallo

irgendwie komme ich mit den verschiedenen Selektoren in css noch nicht richtig zurecht. Wie kann ich die Klassen "aktiv" für folgende HTML-Konstruktion "ansprechen":

<div id="haupt-navigation">
<ul class="navigation">
<li><a href="#">Punkt 1</a></li>
<li><a href="#" class="aktiv">Punkt 2</a></li>
<li><a href="#">Punkt 3</a></li>
<li><a href="#">Punkt 4</a></li>
</ul>
</div>

  
~~~css
.aktiv {}  
a.aktiv {}  
.navigation .aktiv {}  
.navigation a.aktiv {}  
ul.navigation a.aktiv {}  
ul.navigation li a.aktiv {}

Wobei sich die Frage stellt, warum der Menüpunkt der gerade geladenen Seite überhaupt ein Link sein muss.

Tschö, Auge

[Gunnar Bittersmann]

Hello out there!

Wobei sich die Frage stellt, warum der Menüpunkt der gerade geladenen Seite überhaupt ein Link sein muss.

Muss er nicht. Sollte er auch nicht: „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Das Markup sähe dann so aus:

<div id="haupt-navigation">  
  <ul class="navigation">  
    <li><a href="#">Punkt 1</a></li>  
    <li class="aktiv">Punkt 2</li>  
    <li><a href="#">Punkt 3</a></li>  
    <li><a href="#">Punkt 4</a></li>  
  </ul>  
</div>

Wobei die Klasse "aktiv" nicht nötig ist; es kann ja '.navigation li' und '.navigation li a' selektiert werden.

Wobei sich die Frage stellt, wozu das umschließende 'div'-Element nötig sein soll. Warum nicht

<ul id="haupt-navigation"> class="navigation">  
  <li><a href="#">Punkt 1</a></li>  
  <li class="aktiv">Punkt 2</li>  
  <li><a href="#">Punkt 3</a></li>  
  <li><a href="#">Punkt 4</a></li>  
</ul>

See ya up the road,
Gunnar

[Daniel N.]

Muss er nicht. Sollte er auch nicht: „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Guter Hinweis, danke. Das werde ich entsprechend abändern.

Wobei die Klasse "aktiv" nicht nötig ist; es kann ja '.navigation li' und '.navigation li a' selektiert werden.

Das ist noch eleganter/klarer. Gut.

Wobei sich die Frage stellt, wozu das umschließende 'div'-Element nötig sein soll. Warum nicht

<ul id="haupt-navigation"> class="navigation">

<li><a href="#">Punkt 1</a></li>
  <li class="aktiv">Punkt 2</li>
  <li><a href="#">Punkt 3</a></li>
  <li><a href="#">Punkt 4</a></li>
</ul>

Stimmt, das ist von der HTML-Struktur/Inhalt unnötig. Ich hatte es eingefügt, da ich Probleme mit der Css-Formatierung hatte. Also ein Workaround, der natürlich wieder direkt aufgefallen ist ;-)  
  
Ich versuche dieses Problem nochmal in einem kleinen Beispiel zu beschreiben und werde es dann hier posten.  
  
Viele Grüße  
Daniel

[Daniel N.]

Hallo nochmal, 'nabend.

Ich versuche dieses Problem nochmal in einem kleinen Beispiel zu beschreiben und werde es dann hier posten.

Hier nun die "Begründung", warum ich zur Foramtierung meines HTML-Konstrukts ein zusätzliches <div>-Element benötigt habe:

Ich möchte auf meiner Webseite eine Fußzeile haben, in der "zentrale Links" wie z. B. Impressum usw. auftauchen. Diese Fußzeilen-Navigation ist als <ul> aufgebaut. Die Fußzeile wird mit einem Hintergrundbild formatiert, dass aus einer Hintergrundfarbe mit einem "kringeligem Strich" besteht. (Daher nicht über background-color und border abbildbar.)

Ich möchte nun die Links jeweils in einen "Kasten" mit fester Breite packen, so dass diese z. B. bei einem hover mit "font-weight: bold" nicht "springen". (Oder gibt es da eine andere Möglichkeit?) Weiterhin sollen die Links rechts positioniert sein und einen gewissen (10px) Innenabstand besitzen.

Könnt ihr mir da helfen?
Ich poste hier kein css, da meine Versuche diesbezüglich nicht erfolgreich waren. Hier das entsprechende HTML-Gerüst:

  
<ul id="fuss">  
 <li><a href="impressum.html">Impressum</a></li>  
 <li><a href="#">Kontakt</a></li>  
 <li><a href="#">usw.</a></li>  
 <li><a href="#top">zum Anfang"</li>  
</ul>  

Viele Grüße
Daniel

[Detlef G.]

Hallo Daniel

Könnt ihr mir da helfen?

Meintest du in etwa so?

#fuss {  
 clear:both;  
 list-style:none;  
 overflow:auto;  
 margin:0;  
 background:#fff url(deinBild.gif) top repeat-x;  
}  
* html #fuss {  
 zoom:1;  
}  
#fuss li {  
 float:right;  
}  
#fuss a {  
 display:block;  
 padding:10px;  
 width:10em;  
 height:1.2em;  
 border:1px solid #000;  
 text-align: center;  
}  
#fuss a:hover {  
 font-weight:bold;  
}  

 <ul id="fuss">  
  <li><a href="#top">zum Anfang</a></li>  
  <li><a href="#">usw.</a></li>  
  <li><a href="#">Kontakt</a></li>  
  <li><a href="impressum.html">Impressum</a></li>  
 </ul>  

Auf Wiederlesen
Detlef

[Daniel N.]

Hallo Detlef,

danke für deine Mühe!

Meintest du in etwa so?

Im Prinzip meinte ich genau so etwas. Eine ähnliche Umsetzung hatte ich auch bereits ausprobiert. Dabei fand ich etwas unglücklich, dass diese Lösung darauf aufbaut, dass die Links in der Aufzählung genau in der Umgekehrten Reihenfolge aufgelistet werden müssen. Daher hatte ich nach einer Lösung gesucht, in der die Punkte inline dargestellt werden und "nur" die Ausrichtung mittels "text-align" entsprechend gesetzt wird. Aufgrund der Beschreibung
hatte ich gedacht, dass es klappen müsste. Ich habe es aber nicht hinbekommen.

Zu dem Beispiel-Code habe ich noch zwei Fragen:

[code lang=css]#fuss {
clear:both;
list-style:none;
overflow:auto;

Das overflow ist doch unnötig, wenn ich sicher bin, dass die Texte in die Boxen passen, oder?

* html #fuss {
zoom:1;
}

Die Eigenschaft "zoom" habe ich noch nie gesehen und auch nicht in selfhtml gefunden. Was genau ist das?

Viele Grüße
Daniel

[Detlef G.]

Hallo Daniel

... Daher hatte ich nach einer Lösung gesucht, in der die Punkte inline dargestellt werden und "nur" die Ausrichtung mittels "text-align" entsprechend gesetzt wird.

Auch eine solche Variante wäre problemlos möglich, wenn du die Links nicht in Kästen mit fester Breite haben wolltest.
Wenn Elemente inline sind, dann wird ihre Breite durch den Inhalt bestimmt, eine Breitenangabe wird in jedem halbwegs standardkonformem Browser ignoriert.

Es gäbe bistimmt noch andere Möglichkeiten.

Zu dem Beispiel-Code habe ich noch zwei Fragen:

...
overflow:auto;
Das overflow ist doch unnötig, wenn ich sicher bin, dass die Texte in die Boxen passen, oder?

Die Listenelemente sind gefloatet, damit werden sie aus dem normalen Elementfluss genommen. Das würde bedeuten, dass ul keine Höhe hat und dein Hintergrundbild überhaupt nicht zu sehen wäre.
Um das zu vermeiden gibt es zwei grundsätzliche Möglichkeiten, es durch clear aufzuheben oder einen Block Formatting Context zu erzeugen.

* html #fuss {
zoom:1;
}
Die Eigenschaft "zoom" habe ich noch nie gesehen und auch nicht in selfhtml gefunden. Was genau ist das?

Der IE kennt keinen Block Formatting Contexts bei ihm werden die Listenpunkte durch hasLayout eingeschlossen. Dies lässt sich durch eine Höhenangabe oder durch die IE-eigene Eigenschaft zoom erreichen.

Allerdings ist die Verwendung von zoom nicht wirklich gut, in IE 5 und 5.5 funktioniert es so nicht, außerdem ist das CSS damit nicht valide. Ein Höhenangabe ist da besser, allerdings kann diese zu Problemen mit overflow führen, weshalb dieses für IE wieder aufgehoben werden sollte.
Das sähe dann so aus:

* html #fuss {  
 overflow:visible;  
 height:1%;  
}  

Auf Wiederlesen
Detlef

[Daniel N.]

Hallo Detlef,

danke für die ausführliche Erklärung. Damit kann ich mein Vorhaben nun bestimmt lösen. Ich habe mich allerdings noch nicht entschieden, welche Lösung ich bevorzuge.

Viele Grüße
Daniel

[Auge]

Hallo

<div id="haupt-navigation">

<ul class="navigation">
    <li><a href="#">Punkt 1</a></li>
    <li class="aktiv">Punkt 2</li>
    <li><a href="#">Punkt 3</a></li>
    <li><a href="#">Punkt 4</a></li>
  </ul>
</div>

>   
> Wobei sich die Frage stellt, wozu das umschließende 'div'-Element nötig sein soll.  
  
Ich setze bei vertikaler Navigation (überraschenderweise meist auf der linken Seite :-)) oft weitere Informationen unter die Navigation. In diesen Fällen ist das gruppierende <div> gerechtfertigt, weshalb ich an diesem Punkt garnicht weiter nachgefragt habe.  
  
Die Sache mit den Selbstverständlichkeiten. :-)  
  
Tschö, Auge  

-- 
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.  
(Victor Hugo)  
  
[Veranstaltungsdatenbank Vdb 0.1](http://termindbase.auge8472.de/)

[Daniel N.]

Hallo,

danke für eure Antworten.

.aktiv {}

a.aktiv {}
.navigation .aktiv {}
.navigation a.aktiv {}

Ist nicht "spezifisch" genug, bei Angabe einer anderen Textfarbe für diesen Link ändert sich nichts. Der Text erscheint allerdings, wie notiert, in fett.

Bei diesen Selektionen erscheint auch die darin gesetzte Textfarbe.

ul.navigation a.aktiv {}
ul.navigation li a.aktiv {}

  
Wann genau eine Angabe "zieht" ist mir noch nicht ganz klar.  
  

> Wobei sich die Frage stellt, warum der Menüpunkt der gerade geladenen Seite überhaupt ein Link sein muss.  

Muss es nicht, werde ich ändern.  
  
Ich habe das ganze nochmal anhand eines kleinen Beispiels ausprobiert:  
  
~~~html
  
<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>Test</title>  
<style type="text/css">  
  
ul.navigation a.aktiv {  
 color: red;  
 font-weight: bold;  
}  
  
/* oder: ul.navigation li a.aktiv  */  
  
.navigation a:link {  
 color:green;  
 font-size: 1.3em;  
}  
  
a:link {  
 color: blue;  
 text-decoration: none;  
}  
  
</style>  
  
</head>  
  
  
<body>  
  
<div id="haupt-navigation">  
<ul class="navigation">  
 <li><a href="#">Punkt 1</a></li>  
 <li><a href="#" class="aktiv">Punkt 2</a></li>  
 <li><a href="#">Punkt 3</a></li>  
 <li><a href="#">Punkt 4</a></li>  
</ul>  
</div>  
  
<div id="inhalt">  
<p>Test-Text mit <a href="#">Link</a>.</p>  
</div>  
  
</body>  
</html>  
  

Viele Grüße
Daniel

P.S.: Ich möchte solche Testseiten nicht direkt auf meine Domain verlinken, da ich solche Forums-Einträge schon ergoogelt habe. Ich muß mir für solche Zwecke noch "Test-Webspace" besorgen.

[Detlef G.]

Hallo Daniel

Wann genau eine Angabe "zieht" ist mir noch nicht ganz klar.

Spezifität - Gewichtung der Selektoren

P.S.: Ich möchte solche Testseiten nicht direkt auf meine Domain verlinken, da ich solche Forums-Einträge schon ergoogelt habe. Ich muß mir für solche Zwecke noch "Test-Webspace" besorgen.

Bei mir gibt es dafür einen Ordner /demos/.

Auf Wiederlesen
Detlef

[Gunnar Bittersmann]

Hello out there!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "[link:http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd]">

  
In ebendieser DTD findest du  
  
~~~xml
<!ATTLIST html  
  %i18n;  
  xmlns       %URI;          #FIXED 'http://www.w3.org/1999/xhtml'  
  >

und

<!ENTITY % i18n  
 "lang        %LanguageCode; #IMPLIED  
  xml:lang    %LanguageCode; #IMPLIED  
  dir         (ltr|rtl)      #IMPLIED"  
  >

<html xmlns="http://www.w3.org/1999/xhtml" id="top">

ist also kein valides XHTML.

See ya up the road,
Gunnar

[Daniel N.]

Hallo,

...

ist also kein valides XHTML.

Das hört sich plausibel an. Komisch finde ich allerdings, dass der W3C-Validator das Dokument als valide einstuft?!

Viele Grüße
Daniel

[Detlef G.]

Hallo Gunnar

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"[link:http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd]">

>   
> In ebendieser DTD findest du  
>   
> ~~~xml

<!ATTLIST html  

>   %i18n;  
>   xmlns       %URI;          #FIXED 'http://www.w3.org/1999/xhtml'  
>   >

Seltsam - ich finde darin:

<!ELEMENT html (head, body)>  
<!ATTLIST html  
  %i18n;  
  id          ID             #IMPLIED  
  xmlns       %URI;          #FIXED 'http://www.w3.org/1999/xhtml'  
  >

Auf Wiederlesen
Detlef

[Gunnar Bittersmann]

Hello out there!

Seltsam - ich finde darin:

<!ELEMENT html (head, body)>
<!ATTLIST html
  %i18n;
  id          ID             #IMPLIED
  xmlns       %URI;          #FIXED 'http://www.w3.org/1999/xhtml'
  >

Oh, in der Tat.

In meiner lokalen Kopie der DTD fehlte es aber wirklich. Diese sagt am Anfang

$Revision: 1.1 $
   $Date: 2000/01/26 14:08:56 $

während es in der aktuellen Version heißt

$Revision: 1.1 $
   $Date: 2002/08/01 13:56:03 $

Hätte bei Veränderungen nicht auch eine neue Revision-Nummer vergeben werden müssen?

See ya up the road,
Gunnar

[Detlef G.]

Hallo Gunnar

In meiner lokalen Kopie der DTD fehlte es aber wirklich. Diese sagt am Anfang

Verlasse dich nie auf Sekundärliteratur ;)

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo Daniel

<div id="haupt-navigation">
<ul class="navigation">
<li><a href="#">Punkt 1</a></li>
<li><a href="#" class="aktiv">Punkt 2</a></li>
<li><a href="#">Punkt 3</a></li>
<li><a href="#">Punkt 4</a></li>
</ul>
</div>

  
~~~css
.aktiv {...} /* gilt für alle Elemente, die die Klasse aktiv haben */  
a.aktiv {...} /* gilt für alle a-Elemente, die die Klasse aktiv haben */  
li .aktiv {...} /* gilt für alle Elemente, die sich innerhalb eines li-Elements befinden und die Klasse aktiv haben */  
.navigation .aktiv {...} /* gilt für alle Elemente, die sich innerhalb eines Elements mit der Klasse navigation befinden und die Klasse aktiv haben */  

Auf Wiederlesen
Detlef