nicht angemeldet
display:block nur bei linker Zelle
Hi,
ich habe ein paar Problem, was mich total verrückt macht...
Eine ganz simple Tabelle:
<table class="navi_tabelle" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="navi4"><a href="about.html">About</a></td>
<td class="navi5"><a href="impressum.html">Impressum</a></td>
</tr>
</table>
mit folgendem CSS:
.navi_tabelle {
color:#FFFFFF;
text-align:center;
}
.navi4 A:link, .navi4 A:visited, td.navi5 A:link, td.navi5 A:visited {
text-decoration:none;
display:block;
}
.navi4 A:hover, td.navi5 A:hover {
text-decoration:none;
background-color:#fea500;
display:block;
line-height:18px;
}
.navi4 {
height:18px;
background-color:#ff511f;
width:76px;
border-left:3px solid #ffffff;
border-right:6px solid #ffffff;
}
.navi5 {
height:18px;
background-color:#ff511f;
width:77px;
}
Warum wechselt bei "About" die Hintergrundfarbe sobald ich über die Zelle fahre (wie gewollt), bei "Impressum" aber erst wenn die Maus über der Schrift ist??? Bitte um Hilfe, ich bin hier schon am verrückt werden... Und das verrückte ist ja, wenn die die beiden Zellen komplett vertausche:
<table class="navi_tabelle" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="navi5"><a href="impressum.html">Impressum</a></td>
<td class="navi4"><a href="about.html">About</a></td>
</tr>
</table>
Dann läuft es bei Impressum wie gewollt. Also immer die linke Zelle funktioniert....
Danke für die Hilfe,
schönen Tag noch.
Gruß Simone
-
Hallo Simone,
Du hast für 'navi5' kein hover-Verhalten definiert.
Einfacher ist es wenn Du beiden Zellen die gleiche Klasse gibst, dann muss auch nur eine Klasse gepflegt werden. Detailliertere Unterscheidungen kannst Du zusätzlich noch vornehmen indem Du zusätzlich jeweils unterschiedliche IDs vergibst.Gru
David-
Hallo Simone,
Du hast für 'navi5' kein hover-Verhalten definiert.
Hi, danke für die Antwort, aber habe ich schon:
.navi4 A:hover, .navi5 A:hover {
text-decoration:none;
background-color:#fea500;
display:block;
line-height:18px;
}Sonst würde sich die Hintergrundfarbe ja gar nicht ändern.
Mit den IDs werde ich mal versuchen, aber damit habe ich noch nie gearbeitet. Stehen die Infos dazu in SelfHTML/CSS?Gruß Simone
-
-
Hallo,
ich glaube nicht, daß es sich lohnt, wenn Du Dich weiter mit dieser sperrigen Tabellenkonstruktion herumplagst. Es geht schlanker und ganz einfach, wenn Du für Deine Navigation statt einer Tabelle einfach eine UL-Liste benutzt.
Schau mal unter http://css.maxdesign.com.au/listutorial/ nach, genauer unter http://css.maxdesign.com.au/listutorial/horizontal_introduction.htm.So long,
Mr. Horse--
"No, Sir, I don't like it."-
Hallo,
das geht leider nicht so einfach, weil meine 8 Buttons dem restlichen Design angepasst werden müssen. Das heißt in meinem Fall, einige Buttons müssen 2 Pixel breiter, andere 1 Pixel schmaler sein. Auch die Abstände dazwischen variieren leicht.
Kann ich die einzlelnen UL-Elemente auch einzeln definieren?Gruß Simone
-
Hallo,
Kann ich die einzlelnen UL-Elemente auch einzeln definieren?
wenn es unbedingt nötig ist - na klar. Genau wie Du in Deiner Tabelle einzelne Zellen über die ID ansprechen konntest, kannst Du das auch mit Listenelementen tun.
Also:
<li id="gruenerButton">Foo</li>
kannst Du so formatieren:
li#grunerButton { background-color:lime; border:2px solid green; margin-left:30px; }Inwieweit das nun sinnvoll ist, kann ich nicht beurteilen, ohne das Projekt zu kennen.
Übrigens: unter http://css.maxdesign.com.au/listamatic/index.htm gibt es vielleicht noch ein paar schöne Anregungen.
So long,
Mr. Horse--
"No, Sir, I don't like it."
-
-
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.navi_tabelle {
color:#FFFFFF;
text-align:center;
}
.navi4 a,
.navi4 a:link,
.navi4 a:visited,
.navi5 a,
.navi5 a:link,
.navi5 a:visited {
width:100%;
background-color:#ff511f;
text-decoration:none;
display:block;
}
.navi4 {
height:18px;
width:76px;
border-left:3px solid #ffffff;
border-right:6px solid #ffffff;
}
.navi5 {
height:18px;
width:76px;
border-left:3px solid #ffffff;
border-right:6px solid #ffffff;
}
.navi4 a:hover, .navi5 a:hover {
text-decoration:none;
background-color:#fea500;
display:block;
line-height:18px;
}
</style>
</head><body>
<table class="navi_tabelle" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="navi4"><a href="about.html">About</a></td>
<td class="navi5"><a href="impressum.html">Impressum</a></td>
</tr>
</table></body>
</html>So klappt es zumindest im IE
Gruß
David