CSS-Navi soll zeigen: Hier bin ich

Premker

Liebes Forum,

ich bin leider noch der totale 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;
}

synaptic

naja mach doch ne css-klasse "active" und da packste den style rein, der nötig ist und dann musste nur noch in der navi dort die klasse zuweisen wo du dich befindest

sejuma

Link der geöffneten Seite hervorheben

synaptic

ja geht halt auch mit ner wechselnden id...
aber ich mir sträuben sich die nackenhaare wenn eine ID nicht nur einem objekt zugewiesen wird.
eine ID soll ja nur 1 mal pro dokument vergeben werden- klar ist das hier auch der fall, jedoch wird die id ja zu einem anderen objekt "weitergereicht".
ich bin da für strenge reglements und vergebe bei sowas lieber ne klass, statt ne wechselnde id, is ja grundlegend die gleiche technik

driver

des hängt ja vom design ab. wenn du ein eindimensionales menü hast dann kann
schlecht ne seite mehr als 1x aufgerufen sein. anders ises bei menüs mit untermenüs,
vorallem wenn sie dann des gleiche hilightning haben....

synaptic

da haste auch wieder recht
sozusagen bin ich dann ja immer auf der sicheren seite *freu*

Premker

Ich habe es jetzt mal mit ner klasse gemacht. Passiert aber leider noch nicht, das der Button anzeigt, wo ich bin, wenn die Maus wieder weg ist. Muss noch ein Fehler drin sein!

<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;
}

driver

und wo is die definition von "aktiv" ?

du musst die class "aktiv" schon einzeln definieren.
unabhängig von den ganzen a:active, hover usw...

Premker

Meine Nerven sind nicht mehr die Besten. Ich sehe den Fehler nicht. Ich mache genau, was ihr mir ratet. Übersehe ich noch was?
Hier der aktuelle Code:

HTML_______________

<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>

CSS______________

#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;
}

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

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

synaptic

jup aktiv is nich active
solltest die klasse auch richtig im css bezeichnen oder eben umgekehrt

jojo87

Dein HTML:

Code

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

Dein CSS:

Code

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


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

Das siehst du alleine

//Edit: Das müssen Sekunden gewesen sein.

Premker

Zitat von sejuma

Link der geöffneten Seite hervorheben

Dieser Link hats dann gebracht. Alles andere war Frickelei und ohne Ergebnisse. Warum es mit Klasse nicht funktioniert hat sondern mit #id, weiß ich leider nicht.

So sieht es jetzt im HTML aus:
<li id="active"><a href="impressum.html">Impressum</a></li>

und im CSS dann so:
#navi #active a { background-color:#F69;

Jetzt funktioniert es so jedenfalls!

Danke an alle, die mir so freundliche Hilfe gegeben haben.
Das ist meine erste Homepage. Gar nicht einfach zu lernen.

Premker

synaptic

es klappt mit class genauso...
man muss es halt nur konsequent richtig machen

driver

wenn du die class "aktiv" nennst, aber in der css "active" schreibst
kanns nunmal nicht funktionieren. und wennst des net siehst biste
wohl blind

koslowski

Zitat von synaptic

es klappt mit class genauso...
man muss es halt nur konsequent richtig machen

synaptic hat vollkommen recht, wobei ich auch eher eine Klasse nehmen würde

Optimal finde ich die verlinkte Anleitung schon deshalb nicht, weil man dort immer den Deppenlink hat (Link der auf sich selber zeigt), wenn ich das richtig gesehen habe.
Das ließe sich leicht vermeiden, wenn man bei der aktuellen Seite a gegen strong austauscht und dem strong die Klasse gibt.

Noch besser wäre es, wenn man die navi ohne Deppenlink includen könnte. Das spart erheblich Schreibarbeit.

CSS-Navi soll zeigen: Hier bin ich

Tags

Benutzer online in diesem Thema