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
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;
}
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;
}
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;
}
Danke Macrodesign,
ich habe ihn gerade ausprobiert. Der funktioniert. Ich werde diese Navi jetzt anpassen und in meine Site einbauen.
Ich habe mir auch schon überlegt, eine externe Musternavi zu bauen um das mal total zu begreifen.
Herzlichen Dank an alle erstmal, die mir hier geholfen haben.
Premker
Weise #navi a noch ein
Codedisplay: block;zu.
Leider schaut es dann so aus, dass die Zeilenabstände durcheinander geraten.
Siehe Anhang!
Hallo Forumuser,
ich würde gerne wieder einmal euren freundlichen Rat haben.
Bin immer noch totaler Anfänger und will wie im Anhang zu sehen eine CSS Navi bauen. Ich kriege aber die Mouseover Effekte nicht hin.
Beim a:hover wird die Navi nicht von der vorhergehenden Klasse übernommen und lässt sich auch sonst nicht dazu zu bewegen, beim Mouseover die Farbe so zu wechseln, das der gesamte Button die Farbe wechselt.
Mit "display:block funzt es irgendwie nicht in meinem Code.
Vielleicht kann mir jemand sagen, wo in meinem Code der Wurm ist?!
Hier mal die Site:
Hier mal der CSS-Code:
#navi ul li {
display: block;
text-decoration: none;
color: #FCF;
list-style-type: none;
background-color: #9f5d9d;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
line-height: 2.4em;
text-align: right;
padding-right: 10px;
margin-left: 9px;
border-bottom-style: solid;
border-bottom-color: #C69;
border-bottom-width: 1px;
}
#navi a {
text-decoration: none;
color: #FCF;
}
#navi a:link {
color:#FFC;
}
#navi a:hover {
background-color:#F60;
color:#C00;
}
Ich glaub, das ist ein Eric Meyer Code. Der rigide Stil soll erzwingen, das man sich um jedes Element bewusst kümmert und einen eigenen CSS-Stil deklariert. Ich habe es jetzt erst mal in der von Dir empfohlenen Art gemacht. Muss erst mal mehr durchblicken.
Dir auch ein Danke für die schnelle Antwort 
Jo, das hat funktioniert! Die class habe ich auch gelöscht.
Ich habe das mit den Selektoren noch nicht verstanden.
Da habe ich jetzt fünf Stunden mit rumprobiert! Also muss ich für eine ul eine neue CSS-Anweisung anlegen, ...natürlich 
Danke
Premker
Guten Tag Forumuser,
ich bin neu hier und brauche eure freundliche Hilfe.
Ich arbeite mit Dreamweaver, bin ziemlicher Anfänger, und habe da eine Navi mit CSS vor.
Die Seite habe ich mit divs gemacht, in welche ich die geslicten Bilder aus dem Layout als Hintergrundbilder eingefügt habe.
Auf dem Bereich Navi habe ich direkt mit Text die Menüpunkte geschrieben und eine ungeordnete Liste daraus gemacht. Ich bekomme aber einfach nicht die Listenpunkte weg mit "list-style-type:none; siehe Anhang!
Ich weiß nicht mehr weiter!
Hier mal der Quellcode:
</style>
<link href="css_style.css" rel="stylesheet" type="text/css" />
<body>
<div class="wrap" id="wrapper">
<div class="header" id="header">header</div>
<div class="navi" id="navi">
<ul>
<li>Home </li>
<li>Osteopathie</li>
<li>Anwendungen</li>
<li>über mich<br />
</li>
<li>Kontakt<br />
</li>
<li>Links<br />
</li>
<li>Impressum</li>
</ul>
</div>
<div class="container" id="container">Raum für den Inhalt von class "container" id "container"</div>
<div class="footer" id="footer">Raum für den Inhalt von class "footer" id "footer"</div>
</div>
</body>
</html>
Hier der CSS-Code:
body {
background-color:#D2EFDF;
color:#000000;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:100.01%;
}
body, h1, h2, h3, h4, h5, h6, div, p, table, td, ul, ol, li, dd, dt, dl, blockquote, address, hr, pre {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-weight:normal;
}
}
#wrapper {
background-color:#D2EFDF;
height:593px;
margin:35px auto 20px;
width:817px;
}
#header {
background-image:url("Bilder/header.jpg");
background-repeat:no-repeat;
height:128px;
width:820px;
}
#navi {
background-image:url("Bilder/navi.jpg");
background-repeat:no-repeat;
float:left;
font-size:0.9em;
height:426px;
line-height:1.8em;
list-style-type:none;
width:114px;
}
#container {
background-image:url("Bilder/main.jpg");
background-repeat:no-repeat;
float:right;
height:426px;
width:699px;
}
#footer {
background-image:url("Bilder/footer.jpg");
clear:both;
float:left;
height:45px;
width:817px;
}
body {
background-color: #d2efdf;
}
#wrapper {
height: 593px;
width: 817px;
margin-top: 35px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
background-color: #d2efdf;
}
#header {
height: 128px;
width: 820px;
background-image: url(Bilder/header.jpg);
background-repeat: no-repeat;
}
#navi {
background-image: url(Bilder/navi.jpg);
background-repeat: no-repeat;
float: left;
height: 426px;
width: 114px;
font-size: 0.9em;
line-height: 1.8em;
list-style-type: none;
}
#container {
height: 426px;
width: 699px;
float: right;
background-image: url(Bilder/main.jpg);
background-repeat: no-repeat;
}
#footer {
clear: both;
height: 45px;
width: 817px;
float: left;
background-image: url(Bilder/footer.jpg);
}
