Wo liegt der Fehler?
0 0 0 
Tobias Kloth
0
0 0
Wo liegt der Fehler?
Ich habe folgenden Quelltext:
<html>
<head>
<title>test</title>
<style type="text/css">
body {
font-family: Verdana,Arial;
font-size: 12px;
color: #000000;
background-color: #E0E3E8;
}
.menue {
vertical-align: top;
padding: 0px;
font-size: 11px;
color: rgb(255, 255, 255);
background-color: #FFFFFF;
}
.menuekopf {
border-bottom: 1px solid #FFFFFF;
padding: 2px;
font-size: 11px; font-weight: bold;
color: #FFFFFF;
background-color: #EE3A1F; /* rot */
}
.menuelinks a {
padding: 3px;
display: block;
font-size: 11px;
color: #000000;
text-decoration: none;
background-color: #ECEAC1; /* gelbgrau */
margin-bottom: 1px;
}
.menuelinks a:hover {
padding: 3px;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
background-color: #A99B54; /* golden */
}
</style>
</head>
<body>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="800">
<tr><td>abc</td></tr>
<tr>
<td class="menue" height="300" width="175">
<div class="menuekopf">Hauptkategorie</div>
<div class="menuelinks">
<a href="index.html">Menue 1</a>
<a href="index.html">Menue 2</a>
<a href="index.html">Menue 3</a>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Lasse ich die erste Tabellenzeile weg (<tr><td>abc</td></tr>) funktioniert alles wie gewünscht, ansonsten funktioniert der Hover-Effekt über den Links nur dann, wenn ich über dem Text bin, nicht aber, wenn ich mich im gesamten Block befinde. Bin ratlos...
-
Hallo Johannes
Lasse ich die erste Tabellenzeile weg (<tr><td>abc</td></tr>) funktioniert alles wie gewünscht, ansonsten funktioniert der Hover-Effekt über den Links nur dann, wenn ich über dem Text bin, nicht aber, wenn ich mich im gesamten Block befinde. Bin ratlos...
Dass ohne diese Zeile alles wie gewünscht funktioniert,
übberascht mich schon.Hover reagiert auf einen LInk, der in deinem Fall Text
ist, somit ist klar warum das nur über dem Text funktoniert.2 Möglichkeiten das zu ändern.
1. display Angabe machen display:block;
2. den Link verändern indem er ein Blockelement umschliesst.
zb. <a href="index.html"><p>Menue 1</p></a>Auch deine CSS Angaben wundern mich.
".menuelinks a:hover" ???Gruss
Wolke-
Dass ohne diese Zeile alles wie gewünscht funktioniert,
übberascht mich schon.funktioniert aber
Hover reagiert auf einen LInk, der in deinem Fall Text
ist, somit ist klar warum das nur über dem Text funktoniert.display block steht schon da, also müßte der link nicht nur text, sondern der gesamte block sein.
2 Möglichkeiten das zu ändern.
- display Angabe machen display:block;
füge ich display block in a:hover hinzu, ändert sich dadurch aber auch nichts
- den Link verändern indem er ein Blockelement umschliesst.
zb. <a href="index.html"><p>Menue 1</p></a>
ebensowenig ändert ein <p> Block etwas daran
Auch deine CSS Angaben wundern mich.
".menuelinks a:hover" ???Gruss
Wolke-
Und was wenn du es so machst ?
a:link,a:visited,a:active {
padding: 3px;
display: block;
font-size: 11px;
color: #000000;
text-decoration: none;
background-color: #ECEAC1; /* gelbgrau */
margin-bottom: 1px;
}a:hover {
padding: 3px;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
background-color: #A99B54; /* golden */
}-
Dadurch ändert sich nichts. Probier es doch mal aus im IE! Außerdem soll es ja nur für die Klasse gelten. Langsam glaube ich, daß es nicht mein Fehler, sondern ein Bug des IE ist.
Und was wenn du es so machst ?
a:link,a:visited,a:active {
padding: 3px;
display: block;
font-size: 11px;
color: #000000;
text-decoration: none;
background-color: #ECEAC1; /* gelbgrau */
margin-bottom: 1px;
}a:hover {
padding: 3px;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
background-color: #A99B54; /* golden */
}-
Du hast recht, weiss aber nicht warum.
Es geht aber, wenn du noch eine breitenangabe hinzufügst.a:link,a:visited,a:active {
padding: 3px;
display: block;
width:100%;
font-size: 11px;
color: #000000;
text-decoration: none;
background-color: #ECEAC1; /* gelbgrau */
margin-bottom: 1px;
}
-
-
-
Das gilt zumindest für den Internet Explorer, dort habe ich es getestet. Im Firefox funktionierts
-
Hallo Wolke,
- den Link verändern indem er ein Blockelement umschliesst.
zb. <a href="index.html"><p>Menue 1</p></a>
Damit erzeugst du aber ungültiges HTML (ein <a> als inline-Element darf kein block-level-Element wie <p> enthalten).
Grüße aus Nürnberg
Tobias - den Link verändern indem er ein Blockelement umschliesst.
-
- den Link verändern indem er ein Blockelement umschliesst.
zb. <a href="index.html"><p>Menue 1</p></a>
Ein Block-Element ist aber nicht innerhalb eines Inline-Elements erlaubt. Ich hab mir das nicht ausgedacht. Ist aber so.
- den Link verändern indem er ein Blockelement umschliesst.
-
-
Den Link display:block; zuweisen und ihm dann die gewünscht Größe geben (width, height, oder auch margin und padding). Dann highlightet sich die ganze so definierte "Box".
-
Es scheint tatsächlich so zu sein, daß der IE entweder eine explizite Längenangabe für den Linkbereich ins Css benötigt oder einen Balken mit einem Füllpixel über die entsprechende Länge. Dabei zeigt der Hintergrund den Linkbereich entsprechend der gesamten Blockgröße richtig an.
Ohne diese Angabe kann es aber der Firefox.