nicht angemeldet
Klasse im Link
Für eine Intranetseite habe ich versucht eine Navigation mit CSS Kästen zu erstellen.
In CSS wird eine durchsichtige Box definiert, welche den Text für den Link enthält.
Bei :hover soll die ganze Box braun werden und als anklickbarer Link dienen.
Das gewünscht Verhalten habe ich auch mit der ersten unten stehenden Box erreicht (Bücher). Schade nur, dass die Validierung hierfür fehlschlägt.
Akzeptiert wird die zweite Schreibweise, nur dass dann lediglich der Text als Link anklickbar ist und nicht mehr die ganze Box.
Deshalb vermute ich, dass ich mit meinem Ansatz total auf dem Holzweg bin.
Ich bin Architekt und kein Web-Publisher. Also habt etwas Nachsicht und versucht bei den Erklärungen nicht unnötig fachchinesisch zu schreiben.
Eigentlich könnte mir die Validierung schnuppe sein, da es sich ja nur um eine Intranetseite mit überblickbaren Betriebssystemen und Browsern handelt. Aber wenn es sicher machen lässt, wäre das schon sehr schön.
Also zuerst die relevanten Stellen beim .css
Dann die zwei Boxen im xhtml 1.0 strict
.navigation_1_1 {
background-color: transparent;
margin: 0;
text-align: left;
width: 145px;
height: 16px;
padding: 0;
top: 0;
left: 0;
position: static;
border: 0;
}
.navigation_1_1:hover {
background-color: #E6E4DB;
}
a:link {
color: #000000;
text-decoration: none;
}
a:hover {
color: #8D7C64;
background-color: #E6E4DB;
text-decoration: none;
border: none;
}
<a href="Buecher/index.html"><div class="navigation_1_1">Bücher</div></a>
<div class="navigation_1_1"><a href="Musik/index.html">Musik</a></div>
Vielen Dank für eure Hilfe
-
Yerf!
<a href="Buecher/index.html"><div class="navigation_1_1">Bücher</div></a>
<div class="navigation_1_1"><a href="Musik/index.html">Musik</a></div>Wie wäre es mit weniger statt mehr?
<a class="navigation_1_1" href="Musik/index.html">Musik</a>
Dann wird aber noch ein display:block im CSS für .navigation_1_1 benötigt.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Yerf!
<a href="Buecher/index.html"><div class="navigation_1_1">Bücher</div></a>
<div class="navigation_1_1"><a href="Musik/index.html">Musik</a></div>Wie wäre es mit weniger statt mehr?
<a class="navigation_1_1" href="Musik/index.html">Musik</a>
Dann wird aber noch ein display:block im CSS für .navigation_1_1 benötigt.
Gruß,
Harlequin
So einfach und es funktioniert! Sogar im IE.
Das mit dem display:block kannte ich bisher nicht.
Schau mal nach, was es so alles bewirkt.Vielen Dank für die kurze und sachbezogene Antwort.
Gruss Ansgar
-
-
Eigentlich könnte mir die Validierung schnuppe sein, da es sich ja nur um eine Intranetseite mit überblickbaren Betriebssystemen und Browsern handelt. Aber wenn es sicher machen lässt, wäre das schon sehr schön.
valider Code kann dir niemals wurst sein - spätestens wenn jeder verfügbare Browser Webseiten nur noch durch den XML-Parser jagt, wird ein einziger winziger Syntaxfehler dazu führen, dass die Seite überhaupt nicht [!] dargestellt wird, der XML-Parser bricht mit einem Fehler ab und aus die Maus - dann können sich Browserhersteller endlich mal darauf konzentrieren, Features einzubauen anstatt Fehlerkorrekturalgorithmen zu entwickeln ;)