Hi Simon,
habe mir Deine doch sehr übersichtliche CSS
angesehen. Da kann natürlich bei dem Überfahren mit der Mouse nicht viel passieren.
Ich bin ja mittlerweile bekennender YAML Fan und die dort verwendete Navigation kann man anpassen wie man möchte. Die Quelle der CSS ist YAML und ein wenig von mir.
Ich geb Dir mal ein paar Schnipsel rüber, wie so eine Navigation aussehen könnte:
Zitat:
Navigation HTML:
<!-- begin: main navigation #nav -->
<div id="nav" role="navigation">
<div class="hlist">
<ul>
<li><a href="home.html" id="home">Home</a></li>
<li><a href="uebermich.html" id="ich">Über mich</a></li>
...
<li><a href="bilder.html" id="bilder">Bilder</a></li>
</ul>
</div>
</div>
<!-- end: main navigation -->
Hier ist wichtig, dass jeder Navigationspunkt eine eigene id bekommt, die dann auch zugewiesen ist. Hier wird dann über CSS der Text weggeschoben und durch ein Hintergrundbild ersetzt.
Das ist ein sogenanntes barrierefreies Design, die es auch behinderten mit Lesegeräten oder Leuten ohne HTML-Browser ermöglicht die Inhalte zu erkennen. Suchmaschinen finden das auch lesbarer.
|
Zitat:
Navigation CSS:
.hlist { <----- Hier wird zunächst der "Balken" definiert
/* (en) containing floats in IE */
/* (de) Einfassen der Floats im IE */
width:100%; <----- breite 100%vom umgebenden DIV
overflow:hidden;
/* (en) containing floats in all other browsers */
/* (de) Einfassen der Floats in allen anderen Browsern */
float:left;
display:inline;
/* (en|de) Bugfix:IE - collapsing horizontal margins */
position:relative;
/* (en) Repeat the main color from the image */
/* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
background-color: #e5e9ea;
background-image: url(../../css/images/hg_navi.png);
background-repeat:repeat-x;
/* border-bottom:1px #7c4b59 solid;*/
line-height:0;
height:25px;
}
.hlist ul {<----- Hier wird die Liste für die Navigation erstellt
margin:0;
padding:0;
/* (en|de) Bugfix:IE - Doubled Float Margin Bug */
display:inline;
float:right; /* LTR */
/* (en) Left margin of the first button */
/* (de) Abstand des ersten Buttons vom linken Rand */
/* border-left:1px #aaa solid;<----- wer will kann rechts und links Striche einfügen
border-right:1px #fff solid; */
}
.hlist ul li {
/* border-left:1px #fff solid;
border-right:1px #aaa solid; */
/* (en|de) Bugfix:IE - Doubled Float Margin Bug */
display:inline;
float:left; /* LTR */
font-size:1.0em;
line-height:1em;
list-style-type:none;
text-indent: -9999px; <----- Hier wird der Text weggeschubst (für jeden Navigationspunkt)
margin:0;
padding:0;
}
An dieser Stelle definierst Du für jeden der Navigations IDs die verschiedenen Zustände. Die Reihenfolge ist wichtig. Wenn Du den Text durch Bilder ersetzt, dann muss eins für normal, eins für drüber mit der Mouse und eins für Aktiv bauen und entsprechend sinnvoll benennen.
die Definition als Strong in dieser Verschachtelung ist sowas wie Standard, dass man den Aktiven Link statt als Link nur strong definiert und er genauso aussieht, wie active
#nav .hlist #home { width: 45px; background-image:url(../../css/images/home.png);}
#nav .hlist #home:hover { width: 45px; background-image:url(../../css/images/home_hover.png);}
#nav .hlist #home:active { width: 45px; background-image:url(../../css/images/home_active.png);}
#nav .hlist #home strong { width: 45px; background-image:url(../../css/images/home_active.png);}
#nav .hlist #ich { width: 45px; background-image:url(../../css/images/ich.png);}
#nav .hlist #ich:hover { width: 45px; background-image:url(../../css/images/ich_hover.png);}
#nav .hlist #ich:active { width: 45px; background-image:url(../../css/images/ich_active.png);}
#nav .hlist #ich strong { width: 45px; background-image:url(../../css/images/ich_active.png);}
....
.hlist ul li a,
.hlist ul li strong {
background:transparent;
color:#000;
display:block;
font-size:1em;
font-weight:bold;
margin:0;
padding:0.5em 0.8em 0.5em 0.8em;
text-decoration:none;
width:auto;
background-image:url(../../css/images/hg_navi.png); <----- Hintergrund der Navigationselemente
background-repeat: no-repeat;
height: 20px;
}
bei den allgemeinen CSS definitionen könntest Du jetzt noch Farben definieren. Ob das nötig ist, musst Du entscheiden. Diese kommen für alle Elemente der Navigation zum Einsatz, die keine eigene ID haben.
.hlist ul li a:focus,
.hlist ul li a:hover,
.hlist ul li a:active {
background-color: #c1c9cb;
color:#7c4b59; text-decoration:none; outline: 0 none; }
.hlist ul li.active {
/* (en) Repeat the main color from the image */
/* (de) Wiederholung der Hauptfarbe aus der Bilddatei */
background-color: #c1c9cb;
background-position: top;
background-repeat: repeat-x;
}
.hlist ul li.active strong,
.hlist ul li.active a:focus,
.hlist ul li.active a:hover,
.hlist ul li.active a:active { background:transparent; color:#7c4b59; text-decoration:none; }
|
Vielleicht hilft Dir das ja weiter. Alles nur CSS kein Java und trotzdem hübsch. Und mach die Diashow weg, ich finde, wenn Du die Bilder auf die einzelnen Seiten verteilst das Design ruhiger und angenehmer...
Hoffe das hilft Dir etwas
Gruß
Heike