nicht angemeldet
navigation mit css
hallo, ich möchte nun endlich mal von meinen java navigationen weg und das mit css machen. bin schon etwas vorangekommen (dank der selfhtml-vorlagen:)nun gefällt mir nur eins noch nicht: der neu angewählte button hat das gleiche erscheinungsbild wie der aktuelle. das finde ich verwirrend für den user. gibt es eine möglichkeit, das der neu angewählte button ein anderes erscheinungsbild wir der aktuell angewählte hat? danke für eure hilfe und hier ist mein quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Horizontale Navigationsleiste mit gleichen Breiten</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
* {margin: 0; padding: 0;}
body {
color: #333;
background-color: #FFF;
font-family: Helvetica, Arial, sans-serif;
font-size: 100%;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-align: center;
}
#wrap {
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
}
#header {
height: 150px;
width: 800px;
background-image: url(../images/013_florida_2005.jpg);
}
ul#Navigation {
margin: 0;
padding: 0em;
text-align: center;
background-color: #FFF;
list-style-image: none;
list-style-type: none;
}
ul#Navigation a, ul#Navigation span {
float: left;
margin: 0.4em;
text-decoration: none;
font-weight: bold;
color: #333;
background-color: #FFF;
padding-top: 0.2em;
padding-right: 1em;
padding-bottom: 0.2em;
padding-left: 1em;
width: 6em;
border: 1px solid #333;
}
* html ul#Navigation a, * html ul#Navigation span { /* Korrektur fuer IE 5.x */
width: 8em;
w\idth: 6em;
background-color: #0F0;
}
ul#Navigation a:hover, ul#Navigation span {
color: #FFF;
background-color: #3CF;
border: 1px solid #333;
}
ul#Navigation div {
clear: left;
}
</style>
</head>
<body>
<div id="wrap">
<div id="navigation"><ul id="Navigation">
<li><a href="sandra.html">Sandra</a></li>
<li><a href="jim.html">Jim</a></li>
<li><li><span>Micha</span></li></li>
</ul></div>
</div>
</body>
</html>
-
Hi!
der neu angewählte button hat das gleiche erscheinungsbild wie der aktuelle. gibt es eine möglichkeit, das der neu angewählte button ein anderes erscheinungsbild wir der aktuell angewählte hat? ... und hier ist mein quelltext:
Ich habe mal alle nicht relevanten Teile gelöscht (ohne diese auf Korrektheit hin überprüft zu haben).
> ul#Navigation a:hover, ul#Navigation span { > color: #FFF; > background-color: #3CF; > border: 1px solid #333; > } > > </style> > <div id="navigation"><ul id="Navigation"> > > <li><a href="sandra.html">Sandra</a></li> > <li><a href="jim.html">Jim</a></li> > <li><li><span>Micha</span></li></li>der neu angewählte button hat das gleiche erscheinungsbild wie der aktuelle.
Ja, weil du das ja so festlegst per CSS:
ul#Navigation a:hover, ul#Navigation span {...}gibt es eine möglichkeit, das der neu angewählte button ein anderes erscheinungsbild wir der aktuell angewählte hat?
Ja, weise einem von beiden andere Einstellungen zu.
<div id="navigation"><ul id="Navigation">Das ist zwar (imo) korrekt, da bei Klassen- und ID-Namen zwischen Groß- und Kleinschreibung unterschieden wird, ist aber dennoch nicht zu empfehlen, da das einerseits nicht zur Übersichtlichkeit beiträgt und andererseits schnell zu Fehlern führen kann! Besser immer verschiedene Namen verwenden und nicht nur durch die Schreibweise differenzieren.
<li><li><span>Micha</span></li></li>Doppelt gemoppelt!
Gruß Gunther