• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

background: #farbcode; in den CSS funktioniert nicht für das DIV. Warum nicht?

nilsk

Neues Mitglied
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:
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:
Variante b mit dem Code
Code:
#navi_element_left:hover a
{
  color: #ffffff;
[B]  background: #c20a0a;[/B]
}[FONT=Verdana]
[/FONT]
statt dem
Code:
#navi_element_left a:hover
{
  color: #ffffff;
[B]  background: #c20a0a;[/B]
}
sollte das gewünschte Ergebnis bringen
 
Hallo alogheo,

das Ergebnis ist jetzt: Mouse-over funktioniert beim gesamten DIV-Element. Soweit besser als vorher.

Allerdings färbt sich nur der Hintergrund der Schrift rot. Ich möchte gern, dass sich der ganze Kasten rot färbt.

Hast du einen Tipp zu dem vertical-align?

=> Kannst du mir erklären, was a:hover von :hover a unterscheidet? Ist a:hover falsch?

Grüße
Nils
 
glaub, hatte was falsch verstanden.
lass das a hinter dem hover einfach weg





Code:
div a:hover
beim überfahren eines Links in einem div, werden die Styles für den Link geändert.
Code:
div:hover a
beim überfahren eines divs, werden die Styles der in dem div enthaltenen Links geändert.




warum vertical-align nicht funktioniert, weiß ich nicht.
edit: könnte vlt. am float liegen.
 
Hallo alogheo,

Code:
#navi_element_left:hover
{
  color: #ffffff;
  background: #333333;
}

und

Code:
<a href="http://www.meine_webseite.de/">
<div id="navi_element_left">Startseite</div>
</a>

Vielen Dank. Das funktioniert. Jetzt bringt Variante a), <a> vor <div>, den gewünschten Effekt (das gesamte DIV färbt sich bei Mouse-Over und die Textfarbe ändert sich ebenfalls wie gewünscht).

Bei der anderen Variante, <div> vor <a>, werden die Links im DIV noch mal separat vom CSS zu Standard-Links formatiert. Zeitgleich funktioniert der DIV-Hintergrund wie gewünscht.
- -

Nächstes Problem: Der jeweils selektierte Menü-Punkt soll - solange er ausgewählt ist - eine andere Farbe erhalten. Könnte mir jemand sagen, wie das geht? Weiß nicht, nach welchem Stichwort oder Befehl ich bei SELFHTML suchen soll.

Grüße
Nils

P.S.: Übrigens liegt es offenbar nicht am float. Habe das float testweise rausgenommen; das vertical-align funktionierte trotzdem nicht.
 
Hallo Elroy, ah, vielen Dank. Großes Kino! :) Dann brauche ich es ja gar nicht erst versuchen, ein vertical-align in einem DIV auszurichten. Werde mal überlegen, die Navigation als Tabellenzellen zu machen oder per Padding eine ungefähre Mitte auszurichten. Danke für den Tipp. Grüße, Nils
 
Hallo Elroy, ich habe das Problem jetzt ca. eine Stunde lang gegoogled. Laut Foren gibt es dafür keine gute Lösung. Doppelte DIV-Container und so kompliziertes Zeug. Oder diese blöde Lösung mit "line-height". Das funktioniert nur für einzeilige Zellen. Ich habe aber ein- und zweizeilige Navigationspunkte.

Also dachte ich mir: Das muss einfacher gehen. Habe tatsächlich eine super-simple Lösung gefunden, die für mein aktuelles Problem funktioniert (ich will den Text in Navigationspunkten, die per CSS als DIVs formatiert sind, horizontal zentrieren; egal, ob ein- oder mehrzeilig). Hier die Lösung:

CSS
Code:
#vertikal_zentrierter_text_im_DIV
min-height: 1 px;
padding: 3px 0 3px 0;
Anmerkung zur min-height: Die Höhe ist absichtlich immer zu niedrig für den Text, die DIV-Höhe muss sich also automatisch anpassen. Die Höhe des DIV wird somit durch die Texthöhe beziehungsweise Schriftgröße definiert. Somit ist der Text logischerweise immer vertikal zentriert. Jetzt fehlt nur noch der Rand oben und unten. Einfachste Übung:

Anmerkung zum padding: Oben und unten gleich viel Rand einstellen. Bei Bedarf zudem links und rechts Ränder. Fertig.

HTML
Code:
<div id="vertikal_zentrierter_text_im_DIV">Ich bin vertikal zentrierter Text in einem Div, 
egal, ob ein- oder mehrzeilig.</div>

Diese Lösung habe ich bisher in keinem Forum gefunden.

Grüße,
Nils
 
Eine meiner Fragen ist noch immer offen. Wäre klasse, wenn jemand dazu einen Tipp weiß:

Nächstes Problem: Der jeweils selektierte Menü-Punkt soll - solange er ausgewählt ist - eine andere Farbe erhalten. Könnte mir jemand sagen, wie das geht? Weiß nicht, nach welchem Stichwort oder Befehl ich bei SELFHTML suchen soll.

Grüße
Nils
 
Hallo Elroy,

ah, danke für den Hinweis. Hat es einen Vorteil die Navigation als Liste zu formatieren? Würdest du empfehlen, das ebenso zu machen; wenn ja, warum?

Die o.g. Frage ist noch immer offen; könntest du dazu etwas sagen?

Grüße
Nils
 
Hallo.

Ich zeichne meine Navigation immer als Liste aus.
HTML ist ja dazu da deinen Inhalt seiner Bedeutung entsprechend auszuzeichnen.

Eine Navigation ist nun mal eine Liste von Links.
Ein div ist dazu da mehrere Elemente zu gruppieren, was bei deinen Links ja nicht der Fall ist.

Zu deinem anderen Problem kann ich nur sagen das du das mit HTML und CSS alleine nicht hinbekommst.
Du musst mit PHP den aktiven Menüpunkt auslesen, da PHP aber nicht so mein Ding ist kann ich dir da leider nicht weiter helfen.

Gruss
Elroy
 
Zurück
Oben