Ich möchte folgendes machen:
Die Mouse-Over-Effekte sollen so laufen, wie auf meiner bisherigen Webseite, www.meine_webseit_e.de
Das ist eine Joomla-Seite; ich will Joomla loswerden und die Seite in purem HTML neu aufbauen.
Bisher habe ich folgendes geschrieben. Habe fett markiert, was nicht funktioniert:
CSS:
Navigation.html (die binde ich per "include" ein)
Oben habe ich zwei Varianten probiert:
Variante a) Den Link <a> um das <div> gelegt; Ergebnis: Mouse-Over funktioniert zwar wie gewünscht über den gesamten Navigationspunkt, nicht nur über die Schrift; die Schrift färbt sich wie gewünscht weiß, doch der "background" bleibt in der Original-Farbe.
Variante b) Das <div> um den Link <a> gelegt; Ergebnis: Die Schrift färbt sich wie gewünscht weiß; der "background" hinter der Schrift färbt sich wie gewünscht rot, aber es funktioniert nur, wenn man die Schrift anfährt; nicht beim gesamten Navigationspunkt.
- - - - - -
Nächstes Problem:
... (siehe oben in den CSS) schlägt nicht an. Kann mir jemand sagen, weshalb nicht?
Grüße
Nils
Die Mouse-Over-Effekte sollen so laufen, wie auf meiner bisherigen Webseite, www.meine_webseit_e.de
Das ist eine Joomla-Seite; ich will Joomla loswerden und die Seite in purem HTML neu aufbauen.
Bisher habe ich folgendes geschrieben. Habe fett markiert, was nicht funktioniert:
CSS:
Code:
#navi_elements_left_wrapper {
float: left;
margin: 0 25px 0 0;
}
#navi_elements_left_wrapper a:link
{
text-decoration: none;
}
#navi_element_left {
width: 194px;
min-height: 22px;
padding: 2px 0 2px 6px;
border-bottom: solid 2px #cccccc;
border-left: solid 6px #cccccc;
background: #e6e6e6;
margin: 0 0 6px 0;
}
#navi_element_left a:link
{
color: #000000;
text-decoration: none;
[B] vertical-align: middle;[/B]
}
#navi_element_left a:hover
{
color: #ffffff;
[B] background: #c20a0a;[/B]
}
Navigation.html (die binde ich per "include" ein)
Code:
<div id="navi_elements_left_wrapper">
<!-- Variante a -->
[B]<a href="http://www.meine_webseite.de/">[/B]
<div id="navi_element_left">Startseite<br />
</div>
[B]</a>[/B]
<!-- Variante b -->
[B]<div id="navi_element_left">[/B]
<a href="http://www.meine_webseite.de/unterseite1.html">Unterseite 1</a><br />
[B]</div>[/B]
etc.
</div>
Oben habe ich zwei Varianten probiert:
Variante a) Den Link <a> um das <div> gelegt; Ergebnis: Mouse-Over funktioniert zwar wie gewünscht über den gesamten Navigationspunkt, nicht nur über die Schrift; die Schrift färbt sich wie gewünscht weiß, doch der "background" bleibt in der Original-Farbe.
Variante b) Das <div> um den Link <a> gelegt; Ergebnis: Die Schrift färbt sich wie gewünscht weiß; der "background" hinter der Schrift färbt sich wie gewünscht rot, aber es funktioniert nur, wenn man die Schrift anfährt; nicht beim gesamten Navigationspunkt.
- - - - - -
Nächstes Problem:
Code:
vertical-align: middle;
... (siehe oben in den CSS) schlägt nicht an. Kann mir jemand sagen, weshalb nicht?
Grüße
Nils
Zuletzt bearbeitet: