a:hover auf die ganze Zelle anwenden

[Bene]

Hallo!

Ich habe folgendes Problem:
Ich möchte mit Hilfe von css ein Menü erstellen. Die Hintergrundfarbe soll bei a:hover von schwarz auf blau wechseln. Ich habe eine Tabelle entworfen und in jede Zeile ein Link geschrieben und dann im Link auf die Attribute in der externen css-datei verwiesen. Mein Problem ist, dass sich die Hintergrundfarbe aber nur ändert, wenn man mit der Maus über den Text fährt. Wenn man über einen anderen Teil in der Zelle fährt ändert sich nichts. Ich habe versucht, dass Problem zu lösen indem ich einfach Leerzeichen an den Link angefügt habe. Das funktioniert aber nur teilweise und ist sehr unsauber; z.T. wird dann automatisch ein Absatz gemacht. Meine Frage: Gibt es eine andere Möglichkeit mit css?

Zur Verdeutlichung:
http://www.englisch-lernen-im-internet.de/Beispiel.html

Vielen Dank
Bene

[Dennis]

Hi @all!

Zur Verdeutlichung:
http://www.englisch-lernen-im-internet.de/Beispiel.html

Warum bitte schön, sollen wir es dir erklären, wenn im Quelltext der Seite eh schon steht, wie es gemacht wird???

MfG, Dennis.

[Bene]

Hi @all!

Zur Verdeutlichung:
http://www.englisch-lernen-im-internet.de/Beispiel.html
Warum bitte schön, sollen wir es dir erklären, wenn im Quelltext der Seite eh schon steht, wie es gemacht wird???

MfG, Dennis.

Hi Dennis!

Ich verstehe nicht was du damit sagen willst. Wo ist in meinem Quelltext die Lösung auf mein Problem???

Viele Grüße
Bene

[Dennis]

Hi @all!

Ich verstehe nicht was du damit sagen willst. Wo ist in meinem Quelltext die Lösung auf mein Problem???

In meinte den Quelltext der Seite, auf die du verlinkt hast.

Schau mal genau hin:
Erstens ist da eine CSS Datei eingebunden, siehe Zeile 9, die du hier anschauen kannst: http://www.englisch-lernen-im-internet.de/css/links3.css

Letztlich ist das aber komplett egal, da das hier nicht mit CSS realisiert wurde sonder mittels Javascript, schaue dazu in Zeile 32 und 42 des Quellcodes.
Den eigentlichen Effekt bringen die Angaben bei onmouseover und onmouseout. Die Anderen Angaben sind nur zur zusätzlichen Verschönerung etc.

Noch Fragen?
MfG, Dennis.

[Bene]

Hi Dennis!

Vielen Dank für deine Ausführungen.
Letzlich besteht mein Problem sowohl bei css als auch bei onmouseover. Ich möchte dass der Link sich auf die ganze Zelle bezieht, d.h. dass auch wenn man mit der Maus rechts neben den Text fährt die Farbe wechselt.

Vielleicht habe ich mich vorhin zu undeutlich ausgedrückt.

Vielen Dank und beste Grüße
Bene

[Dennis]

Hi @all!

[...] auch wenn man mit der Maus rechts neben den Text fährt die Farbe wechselt.

Und ich habe dir vorhin gesagt, in welchen Zeilen des Quelltextes das steht.

Pass mal auf, du musst für jede in Frage kommende <td> schreiben:
<td onmouseover="this.backgoundColor:#abcdef" onmouseout="this.backgroundColor:#ghijkl">

Vielleicht habe ich mich vorhin zu undeutlich ausgedrückt.

nö, aber du hast mich nicht verstanden.

MfG, Dennis.

[eisbaer04]

Hi,

mach doch das <a> als Block-Element

... <a style="diplay:block"> ...

Damit erstreckt sich der Lick über die gesamte Breite und Höhe des Elternelementes (also das td).

eb4

[Bene]

Hi,

mach doch das <a> als Block-Element

... <a style="diplay:block"> ...

Damit erstreckt sich der Lick über die gesamte Breite und Höhe des Elternelementes (also das td).

eb4

Hallo!

Danke für die Antwort!

Ich habe es so eingefügt:

<td bgcolor="#333333" width="122"><a href="die_Sprache.html" class="menulinks" style="diplay:block">   die Sprache</a></td></tr>

Der Hover-Effekt funktioniert. Allerdings nur wenn man direkt auf den Link fährt. Wenn man nicht über den Link fährt passiert nichts.

Viele Grüße
Bene

[eisbaer04]

Hi,

Der Hover-Effekt funktioniert. Allerdings nur wenn man direkt auf den Link fährt. Wenn man nicht über den Link fährt passiert nichts.

Das soll ja auch so sein, allerdings sollte auch der Link "breiter" sein. Setz mal eine seperate Hintergrundfarbe nur für den Link, dann siehst du, was alles Link ist und was nicht.

eb4

[willie.de]

hallö ins forum,

Der Hover-Effekt funktioniert. Allerdings nur wenn man direkt auf den Link fährt. Wenn man nicht über den Link fährt passiert nichts.

das kommt darauf an, ob dein browser CSS korrekt interpretiert ;-)
dh, du könntest auch td:hover verwenden und display:block für a:hover sparen

Das soll ja auch so sein, allerdings sollte auch der Link "breiter" sein. Setz mal eine seperate Hintergrundfarbe nur für den Link, dann siehst du, was alles Link ist und was nicht.

unter bezugnahme auf Jeena [pref:t=80783&m=469155] würde ich empfehlen, das ganze einfach in einen div zu setzen und die breite für a mit width zu bestimmen. das sollte auch der M$IE verstehen.

grüße aus Leipzig
willie.de

[Jeena Paradies]

Hallo,

unter bezugnahme auf Jeena [pref:t=80783&m=469155] würde ich empfehlen, das ganze einfach in einen div zu setzen und die breite für a mit width zu bestimmen. das sollte auch der M$IE verstehen.

Wieso ein sinnfreies div anstatt einer sinnvollen ul? :)

Grüße
Jeena Paradies

[willie.de]

hallö,

Wieso ein sinnfreies div anstatt einer sinnvollen ul? :)

weil ich dann noch erklären müsste, wie listen "list-style-type-frei" gemacht werden... (der quelltext der angegebenen seite sieht nicht nach  de:> aus ;)
sonst geb ich dir 100% recht.

grüße aus Leipzig
willie.de

[Jeena Paradies]

Hallo,

(der quelltext der angegebenen seite sieht nicht nach  de:> aus ;)

Ah jetzt erkenne ich erst warum du so denkst :/ Das blöde daran ist dass du warscheinlich auch noch recht hast.

<meta name="generator" content="Adobe GoLive 6">

Grüße
Jeena Paradies

[willie.de]

nochmal hallö,

Das blöde daran ist dass du warscheinlich auch noch recht hast.

ok. ich verspreche ganz doll, nicht _recht_ zu haben :-D

grüße aus Leipzig
willie.de

[MudGuard]

Hi,

<td bgcolor="#333333" width="122"><a href="die_Sprache.html" class="menulinks" style="diplay:block">   die Sprache</a></td></tr>

Du kennst den Unterschied zwischen display und diplay?

cu,
Andreas

[Jeena Paradies]

Hallo,

Ich habe eine Tabelle entworfen und in jede Zeile ein Link geschrieben

Verrätst du mir warum du für eine Link_liste_ eine Tabelle verwenden willst?

Ich hätte es so gemacht:

css
--------------------
ul#menue {
 width: 8em;
 list-style-type: none;
 color: white;
}
#menue a:link, #menue a:visited  {
 background-color: black;
 display: block;
 width: 100%;
}
#menue a:hover {
 background-color: blue;
}

HTML
--------------------
<ul id="menue">
 <li><a href="eins.html">1Home</a></li>
 <li><a href="zwei.html">2Home</a></li>
 <li><a href="drei.html">3Home</a></li>
 <li><a href="vier.html">4Home</a></li>
</ul>

Ich habe schon mal so eine Testseite für jemanden anderen gemacht: http://jeenaparadies.servebeer.com/open/selfbilder/mario.html. Dort kannst du dir das live angucken

Grüße
Jeena Paradies