CSS-Navi soll zeigen: Hier bin ich

[Premker]

Liebe Leut,

ich bin leider noch Anfänger im Webdesign und hätte gerne euren werten Rat.

Ich habe eine reine CSS-Navi und möchte dem Besucher durch den gehighlighteten Button zeigen, auf welcher Seite er ist. Was muss ich in das CSS-Stylesheet noch einfügen oder wo ist der Fehler, dass es bei mir nicht funktioniert. Irgendwo habe ich da noch einen Wurm drin ...
Für einen Tipp, den auch ein Anfänger versteht, wäre ich sehr dankbar.

Hier der CSS-Code:

#navi ul {
list-style-type: none;
margin: 0px;
padding-left: 8px;
}
#navi ul li {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 1px;
margin-left: 0px;
}
#navi ul li a:link, #navi li a:visited {
color: #FC9;
background-color: #9f5d9d;
text-decoration: none;
text-align: right;
display: block;
border-left-color: #C09;
width: 92px;
border-left-width: 10px;
border-left-style: solid;
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
line-height: 2.4em;
padding-right: 7px;
text-transform: uppercase;
}
#navi ul li a:hover, #navi ul li a:active, #navi ul li a:focus a:visited {
color: #FF9;
background-color: #F69;
border-left-width: 12px;
border-left-style: solid;
border-left-color: #F66;
}

 

[hedoo]

AW: CSS-Navi soll zeigen: Hier bin ich

Hallo,

dazu musst du eine css-Klasse anlegen.
Z.Bsp. a.aktiv . DieEigenschaften definierst du über css; im HTML musst du dann auf der aktiven Seite für den entsprechenden Link schreiben:
<a class="aktiv">

 

[Hanno_Hauser]

AW: CSS-Navi soll zeigen: Hier bin ich

Hi,
ich habs mit class="navselecte" bzw. class="navnormal" in einer Tabelle realesiert.
hier mal ein Beispiel:
<table border="0" cellpadding="0" cellspacing="0" width="803" height="794">
<tr>
<td> <a class="navselected" style="color: #ffffff;" href="linkseite.html"><img src="Bidlquelle.jpeg" width="14" height="10" alt="" border="0">hier Dein Text</a> </td>
</tr>
<tr>
<td> <a class="navnormal" style="color: #ffffff;" href="linkseite.html"><img src="Bildquelle.jpeg" width="14" height="10" alt="" border="0">hier Dein Text</a></td>
</tr>
</table>

Hoffe es hilft Dir etwas weiter.
LG

 

[Premker]

AW: CSS-Navi soll zeigen: Hier bin ich

Hallo,

dazu musst du eine css-Klasse anlegen.
Z.Bsp. a.aktiv . Die Eigenschaften definierst du über css; im HTML musst du dann auf der aktiven Seite für den entsprechenden Link schreiben:
<a class="aktiv">

Wo genau muss ich in HTML deinen Code hinschreiben? Ich nehme also jede einzelne Seite und füge den <a class="aktiv"> in HTML ein, oder? Aber wo genau. Stehe gerade auf der Leitung ...

Und in CSS lege ich an als einzelne CSS-Anweisung:

.active {
background-color: #6C9;
}

<div id="navi">
<ul>
<li><a href="index.html">Home </a></li>
<li><a href="osteopathie.html">Osteopathie</a></li>
<li><a href="indikationen.html">Indikationen</a></li>
<li><a href="ueber_mich.html">über mich</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</div>

 

[hedoo]

AW: CSS-Navi soll zeigen: Hier bin ich

Du fügst die Klasse in den Link deiner aktiven Seite ein.
Wenn du also auf der index-seite bist schreibst du in die Index-Seite:

<li><a class="aktiv" href="index.html">Home </a></li>

Auf den anderen entsprechend verfahren.

hedoo

 

[FreddyX2]

AW: CSS-Navi soll zeigen: Hier bin ich

Das hier wird Dir sicher helfen.

9.4 »Sie sind hier«: aktuelle Seite hervorheben - Little Boxes - Webseiten gestalten mit HTML und CSS

 

[Crackp0t]

AW: CSS-Navi soll zeigen: Hier bin ich

Du definierst in deinem CSS:

div#navi > a:active {

background-color: #6C9;

}

Funktion ist folgende: Du selektierst den DIV mit der ID "navi". Dann folgt ein weiterer Selektor, der das untergeordnete Element <a> auswählt. Nun wird für den Status :active das Aussehen definiert.

 

[Premker]

AW: CSS-Navi soll zeigen: Hier bin ich

Passiert leider nix. Ist immer noch ein Fehler drin. Habe euren Code kopiert und reingesetzt. Whats happens?


<div id="navi">
<ul>
<li><a class="aktiv" href="index.html">Home </a></li>
<li><a href="osteopathie.html">Osteopathie</a></li>
<li><a href="indikationen.html">Indikationen</a></li>
<li><a href="ueber_mich.html">über mich</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</div>




div#navi > a:active {
background-color: #6C9;
}

 

[hedoo]

AW: CSS-Navi soll zeigen: Hier bin ich

Wenn du einem html-tag eine Klasse zuweist (a class="aktiv"), musst du in der css die entsprechende Klasse mit einem Punkt beginnen.
Also a.aktiv nicht a:active. a:active definert das Aussehen des Links beim Klicken auf den Link.
Statt a.aktiv könntest du genauso a.highlight schreiben, dann musst du halt im HTML <a class="highlight"> schreiben.
Also:
css:
a.aktiv{Definitionen}
html:
<a class="aktiv">

LG hedoo

 

[sokie]

AW: CSS-Navi soll zeigen: Hier bin ich

Du definierst in deinem CSS:

div#navi > a:active {

background-color: #6C9;

}

Funktion ist folgende: Du selektierst den DIV mit der ID "navi". Dann folgt ein weiterer Selektor, der das untergeordnete Element <a> auswählt. Nun wird für den Status :active das Aussehen definiert.

Bitte dran denken, dass die Pseudoklasse :active nur in dem moment gültig ist, in dem man mit der Maus draufklickt.
deshalb bringt

div#navi > a:active {
background-color: #6C9;
}

die Sache nicht voran.

 

[Crackp0t]

AW: CSS-Navi soll zeigen: Hier bin ich

Oh... Okay tut mir Leid für die Fehlinformation. In dem Fall ist ohne weitere Scripts die Methode von little-boxes die beste.