✔ Css-Box Farbwechsel

[CantNo]

Hi,

habe ein Problem bei folgender Datei:

http://www.fussballgott.net/gebhardt-haustechnik/test.htm

Rechts oben ist ein Link "Aktuelles" der soll bei Mouseover dunkler werden (funktioniert auch), allerdings nur, wenn man über die leere Fläche fährt, fährt man direkt über den Text, ändern der sich auch, soll er aber nicht!

Was mach ich falsch?

Außerdem soll der Text weiter unten in der Box stehen, wie schaffe ich das?

CSS:

body
{margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px; background-color: #e6e6e6;
background-image:url(bg.jpg);
}


p{
font-family:arial, helvetica, sans-serif;
color: #000000;
font-size: 14px; line-height: 16px;
text-decoration:none;

}


a{
font-family:arial, helvetica, sans-serif;
color: #000000;
font-size: 14px; line-height: 16px;
text-decoration:none;

}


a:hover{
	font-family:arial, helvetica, sans-serif;
	color: #c2baba;
	font-size: 14px;
	line-height: 16px;
	text-decoration: underline;
	font-weight:normal;
}

TD#menu {
DISPLAY: block; WIDTH: 200px; HEIGHT: 30px; BACKGROUND-COLOR: #;
font-family:arial, helvetica, sans-serif;
border-bottom:solid 1px #ffffff;
color: #FFFFFF;
	font-size: 16px;
	text-decoration: none;
	font-weight:bold;


}
TD#menu:hover {
	BACKGROUND-COLOR: #7889f0; text-decoration: none;border-bottom:solid 1px #ffffff;
}

DANKE

 

[Maik]

Hi,

dass sich der Zellhintergrund auch beim Überfahren des Links ändert, liegt in der Natur der Sache, da sich dieses Element in der Zelle befindet, und somit der :hover-Selektor ebenfalls greift.

Der Zellinhalt lässt sich mit vertical-align:bottom am unteren Zellrand ausrichten.

Übrigens wäre es nett, wenn du zukünftig deine Quellcode-Angaben in die Highlight-Tags packst ([ code ] ... [ /code], [ html ] ... [ /html] - ohne Leerzeichen) - das erleichtert das Lesen deiner Beiträge ungemein. Vielen Dank!

mfg Maik

 

[CantNo]

Also, das mit dem vertical funktioniert nicht?

Und mein Problem ist nicht, das sich die Farbe der Box ändert, sondern das sich beim überfahren des Textes, der Text ändern.
Er soll dies zwar an andern Stellen machen, aber nicht in dieser Box.

 

[Maik]

Das liegt dann an der height-Deklaration für die Zelle.

Rechts oben ist ein Link "Aktuelles" der soll bei Mouseover dunkler werden (funktioniert auch), allerdings nur, wenn man über die leere Fläche fährt, fährt man direkt über den Text, ändern der sich auch, soll er aber nicht!

Und mein Problem ist nicht, das sich die Farbe der Box ändert, sondern das sich beim überfahren des Textes, der Text ändern.

So, und was nun?

mfg Maik

 

[CantNo]

;-)
Sorry, hab mich vielleich bißchen Falsch ausgedrückt!

Also, wie bekomme ich nun den Text in die Mitte?


Und ich will das sich die Farbe der Box bei Mouseover ändert, der Text soll sich allerdings nicht ändern....

 

[Maik]

Mit line-height:30px anstelle von height:30px.

Und was genau soll sich beim Text nicht ändern?

mfg Maik

 

[CantNo]

Ok, der Text ist nun in der Mitte, super!

http://www.fussballgott.net/gebhardt-haustechnik/test.htm

So, nun zum nächsten Problem:

Wenn einen normalen Link überfährt, siehe "Heizungsanlagen für Öl- und Gasfeuerung" dann wird der grau und unterstrichen. Das ist gut so.

Und wenn ich nun z.b. in die Box von "Aktuelles" fahre, dann wird die Dunkelblau, auch gut. Fährst man allerdings über den Text "Aktuellles" ändern sich wie oben beschrieben der Text grau und unterstrichen, soll er aber nicht, es soll nur das passiern, was passiert wenn man in die Box fährt (= dunkelblau werden)

 

[Maik]

Also sowas:

td.menu:hover a {
text-decoration:underline;
color:#c2baba;
}

Ich hab hier bewußt den ID-Bezeichner #menu in den Klassenbezeichner .menu umgewandelt, da im HTML-Code mehrere Elemente mit dieser ID existieren, was aber nicht den Regeln entspricht, da ein ID-Bezeichner eindeutig sein muß, und eben nicht mehrmals vergeben werden darf.

Der Aufruf der Klasse erfolgt dann in den td-Elementen mit dem class-Attribut:

<td class="menu">...</td>

Naja, dass Tabellen semantisch hierfür überhaupt nicht angedacht sind, hab ich dir ja gestern schon geschrieben, Stichwort "HTML-Code vereinfachen".

mfg Maik

 

[CantNo]

Hi,

habs in class umgewandelt.

So, das was du geschrieben hast, passiert, auch ohne dass der TD.menu steht, genau das soll aber NICHT passieren.

ja, das mit den html-code weiß ich, ich hab nur keine ahnung, wie ich das anders machen soll, kenn mich mit den css boxen nicht aus...

 

[Maik]

So, das was du geschrieben hast, passiert, auch ohne dass der TD.menu steht, genau das soll aber NICHT passieren

Sorry, aber deinen widersprüchlichen und mißverständlichen Umschreibungen kann ich nicht mehr folgen.

Bei mir passiert das nur, wenn ich mit der Maus in die Zelle fahre, und das soll es laut deines letzten Beitrags.

mfg Maik