Hintergrund bei Menü

Bookworm · 28.11.2005, 18:22

Alsoooo... Bei meiner Navi würde ich es gerne so machen, das die Hintergrund- und Schriftfarbe bei Hover wechselt. Ich weiß, dass das mit CSS geht, und habe es auf Seiten wie MuggleNet schon gesehen... Ich weiß jetzt nur nicht, wohin der Code muss... Bei meinem Layout werden mit Div-Containern drei Spalten erzeugt. Mit CSS kann ich ja für eine einzelne Spalte alles verändern, was die normale Schrift angeht. Jetzt weiß ich halt nur nicht, wo der Code für das Hover hinmuß (den habe ich mittlerweile gefunden)... Gruß Bookworm P.S. Ich habe es mit CSS4YOU schon probiert und bin nicht wirklich weiter gekommen (außer das ich jetzt den Quelltext habe)

Ben · 28.11.2005, 18:28

Hi,
schau mal hier rein:

css4you, Workshop CSS: Teil 2 - Stylesheets in HTML einbinden

Du brauchst dann die Pseudoklasse :hover.
Dazu dann natürlich noch die Hintergrundfarbe und die Schriftfarbe.

Grüße Ben.

Bookworm · 28.11.2005, 19:34

Das heißt, folgendes wäre zulässig? O.ô

#lmenu {width: 25%;
float: left;
a:hover{color:#fff000; background-color:#808080;}
}

Kann ich mir ehrlich gesagt nicht vorstellen...

Corvin · 28.11.2005, 19:40

So:

HTML-Code:

#lmenu {
    width: 25%;
    float: left;
} 

#lmenu a:hover {
    color:#fff000; 
    background-color:#808080;
}

Lars · 29.11.2005, 14:33

Besser so:

Code:

#lmenu:hover {
    color:#fff000; 
    background-color:#808080;
}

Dann ist der Kasten sofort "anders" sobald die maus drauf ist, nicht erst wenn sie auf dem Link ist.

Bookworm · 29.11.2005, 17:37

danke leutz, des hab ich gsucht!

robo47 · 29.11.2005, 18:00

Zitat:

Zitat von Lars

Besser so:

Code:

#lmenu:hover {
    color:#fff000; 
    background-color:#808080;
}

Dann ist der Kasten sofort "anders" sobald die maus drauf ist, nicht erst wenn sie auf dem Link ist.

tut das auch im IE ? der kann :hover doch nur bei links oder ?

ansonsten eben die a's als display: block; und dementsprechend feste größe geben wie der box aussenrum

Lars · 29.11.2005, 18:26

css4you zeigt mir beim IE ein "t" für teilweise, aber der Grund fehlt.

Ben · 29.11.2005, 20:23

:hover geht im IE nur mit <a>.

Lars · 29.11.2005, 20:36

Zitat:

Zitat von Ben

:hover geht im IE nur mit <a>.

Keh, das hab ich nicht gewusst.

Man könnte ja auch die DIVs weglassen und die <a>s als Blöcke darstellen. Dann kann man nämlich Höhe und Breite bestimmen.

HTML-Code:

#menu a
{
    display: block;
    width: 100px;
    height: 25px;
}

// Edit:
Post #200

Bookworm · 30.11.2005, 14:20

Was denn nun?

Ben · 30.11.2005, 14:49

Zitat:

Zitat von Bookworm

danke leutz, des hab ich gsucht!

Du hast doch etwas gefunden, was funktioniert. Also lass es doch einfach so.

Viele Wege führen nach Rom

.

Bookworm · 30.11.2005, 14:53

Ja schon, aber wenn der IE das jetzt nicht interpretieren kann, ist das auch Müll (ich hatte es noch nicht getestet, konnte aber am Code erkennen das es wohl das tut was ich will....)

Ben · 30.11.2005, 15:00

Teste Corvins Code. Das sollte eigentlich klappen.

Bookworm · 30.11.2005, 15:08

Ok,
aber Ben, irgendwie macht dei Forensoftware grade garnichts mehr mit. Ich kann keine Anhänge mehr machen, mein Thema wurde dreimal erstellt und die Buttons oben funktionieren auch nicht mehr...

Jann Hendrik · 30.11.2005, 17:14

Zitat:

Zitat von Bookworm

Ok,
aber Ben, irgendwie macht dei Forensoftware grade garnichts mehr mit. Ich kann keine Anhänge mehr machen, mein Thema wurde dreimal erstellt und die Buttons oben funktionieren auch nicht mehr...

das passt gerade nicht hierher...
nutze dafür am besten den passenden thread. Schildere dort dein Problem so genau wie es geht. Ggf. kann dir geholfen werden.
So jedenfalls ist das Problem hier nicht nachvollziehbar!

Bookworm · 01.12.2005, 13:07

Sorry.... Aber es funktioniert jetzt echt alles so, wie ich will (jetzt baue ich dann mal die Switchabfrage ein *g*...) //edit: Die Switchabfrage funktioniert sogar mehr als problemlos... Dafür will meine Navi mit display:block; nicht wirklich: entweder wird der Hover Effekt nicht auf die ganze Zeile angewendet oder es wird aufeinmal ein Umbruch eingefügt, wo keiner hinsoll. Guckts euch mal an: Hier klicken

01.12.2005, 17:30

PHP-Code:

  /**
 *    Pseudos - V1.30.050121 - hover & active
 *    ---------------------------------------------
 *    Peterned - http://www.xs4all.nl/~peterned/
 *    (c) 2005 - Peter Nederlof
 *
 *    Credits  - Arnoud Berendsen 
 *             - Martin Reurings
 *             - Robert Hanson
 *
 *    howto: body { behavior:url("csshover.htc"); }
 *    ---------------------------------------------
 */

Hier ein Auszug aus einem das ich einmal bei einem Projekt eingesetzt habe, weil ein Klappmenü mit CSS ohne JavaScript erforderlich war. Funktioniert echt super.

Das Script macht eigentlich nichts anderes als das Verhalten des IE so zu verändern, dass auch z.B. <li> Tags mit hover verwendet werden können.

-- Fat Tony

Bookworm · 01.12.2005, 18:35

Ich benutze aber keine LI Tags und es funktioniert im FF nicht...

J33d3X · 01.12.2005, 20:30

um umbrüche zu umgehen auch in <p <div oder <h ....
ein display:inline

http://www.css4you.de/example/display.html

28.11.2005, 18:22	Nach oben #1
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	Alsoooo... Bei meiner Navi würde ich es gerne so machen, das die Hintergrund- und Schriftfarbe bei Hover wechselt. Ich weiß, dass das mit CSS geht, und habe es auf Seiten wie MuggleNet schon gesehen... Ich weiß jetzt nur nicht, wohin der Code muss... Bei meinem Layout werden mit Div-Containern drei Spalten erzeugt. Mit CSS kann ich ja für eine einzelne Spalte alles verändern, was die normale Schrift angeht. Jetzt weiß ich halt nur nicht, wo der Code für das Hover hinmuß (den habe ich mittlerweile gefunden)... Gruß Bookworm P.S. Ich habe es mit CSS4YOU schon probiert und bin nicht wirklich weiter gekommen (außer das ich jetzt den Quelltext habe) __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen!

28.11.2005, 18:28	Nach oben #2
Ben Benjamin Klaile Registriert seit: 02.12.2004 Ort: Remagen Beiträge: 4.471	Hi, schau mal hier rein: css4you, Workshop CSS: Teil 2 - Stylesheets in HTML einbinden Du brauchst dann die Pseudoklasse :hover. Dazu dann natürlich noch die Hintergrundfarbe und die Schriftfarbe. Grüße Ben. __________________ Mehr TuS Koblenz geht nicht ... - TuS Koblenz Forum Aktuell ... Kaiserslautern kommt in die Festung Oberwerth U14 erreicht Sieg im Testspiel gegen SF Troisdorf Testspiel gegen SV Wehen-Wiesbaden in Nassau E-Jugend Blitzturnier auf dem Oberwerth SV Ried gegen SK Rapid Wien

28.11.2005, 19:34	Nach oben #3
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	Das heißt, folgendes wäre zulässig? O.ô #lmenu {width: 25%; float: left; a:hover{color:#fff000; background-color:#808080;} } Kann ich mir ehrlich gesagt nicht vorstellen... __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen!

28.11.2005, 19:40	Nach oben #4
Corvin Corvin Gröning Registriert seit: 19.03.2005 Ort: S-H \| Flensburg Beiträge: 449	So: HTML-Code: #lmenu { width: 25%; float: left; } #lmenu a:hover { color:#fff000; background-color:#808080; } __________________

29.11.2005, 14:33	Nach oben #5
Lars me pro ok? Registriert seit: 07.09.2005 Ort: Pulheim bei Köln Beiträge: 964	Besser so: Code: #lmenu:hover { color:#fff000; background-color:#808080; } Dann ist der Kasten sofort "anders" sobald die maus drauf ist, nicht erst wenn sie auf dem Link ist. __________________ Gedanken aus Draht stricken einen Zaun.

29.11.2005, 17:37	Nach oben #6
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	danke leutz, des hab ich gsucht! __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen!

29.11.2005, 18:26	Nach oben #8
Lars me pro ok? Registriert seit: 07.09.2005 Ort: Pulheim bei Köln Beiträge: 964	css4you zeigt mir beim IE ein "t" für teilweise, aber der Grund fehlt. __________________ Gedanken aus Draht stricken einen Zaun.

29.11.2005, 20:23	Nach oben #9
Ben Benjamin Klaile Registriert seit: 02.12.2004 Ort: Remagen Beiträge: 4.471	:hover geht im IE nur mit <a>. __________________ Mehr TuS Koblenz geht nicht ... - TuS Koblenz Forum Aktuell ... Kaiserslautern kommt in die Festung Oberwerth U14 erreicht Sieg im Testspiel gegen SF Troisdorf Testspiel gegen SV Wehen-Wiesbaden in Nassau E-Jugend Blitzturnier auf dem Oberwerth SV Ried gegen SK Rapid Wien

30.11.2005, 14:20	Nach oben #11
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	Was denn nun? __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen!

30.11.2005, 14:53	Nach oben #13
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	Ja schon, aber wenn der IE das jetzt nicht interpretieren kann, ist das auch Müll (ich hatte es noch nicht getestet, konnte aber am Code erkennen das es wohl das tut was ich will....) __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen!

30.11.2005, 15:00	Nach oben #14
Ben Benjamin Klaile Registriert seit: 02.12.2004 Ort: Remagen Beiträge: 4.471	Teste Corvins Code. Das sollte eigentlich klappen. __________________ Mehr TuS Koblenz geht nicht ... - TuS Koblenz Forum Aktuell ... Kaiserslautern kommt in die Festung Oberwerth U14 erreicht Sieg im Testspiel gegen SF Troisdorf Testspiel gegen SV Wehen-Wiesbaden in Nassau E-Jugend Blitzturnier auf dem Oberwerth SV Ried gegen SK Rapid Wien

30.11.2005, 15:08	Nach oben #15
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	Ok, aber Ben, irgendwie macht dei Forensoftware grade garnichts mehr mit. Ich kann keine Anhänge mehr machen, mein Thema wurde dreimal erstellt und die Buttons oben funktionieren auch nicht mehr... __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen!

01.12.2005, 13:07	Nach oben #17
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	Sorry.... Aber es funktioniert jetzt echt alles so, wie ich will (jetzt baue ich dann mal die Switchabfrage ein g...) //edit: Die Switchabfrage funktioniert sogar mehr als problemlos... Dafür will meine Navi mit display:block; nicht wirklich: entweder wird der Hover Effekt nicht auf die ganze Zeile angewendet oder es wird aufeinmal ein Umbruch eingefügt, wo keiner hinsoll. Guckts euch mal an: Hier klicken __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen! Geändert von Bookworm (01.12.2005 um 14:22 Uhr).

01.12.2005, 17:30	Nach oben #18
Jay Gast Beiträge: n/a	PHP-Code: `/** * Pseudos - V1.30.050121 - hover & active * --------------------------------------------- * Peterned - http://www.xs4all.nl/~peterned/ * (c) 2005 - Peter Nederlof * * Credits - Arnoud Berendsen * - Martin Reurings * - Robert Hanson * * howto: body { behavior:url("csshover.htc"); } * --------------------------------------------- */` Hier ein Auszug aus einem das ich einmal bei einem Projekt eingesetzt habe, weil ein Klappmenü mit CSS ohne JavaScript erforderlich war. Funktioniert echt super. Das Script macht eigentlich nichts anderes als das Verhalten des IE so zu verändern, dass auch z.B. <li> Tags mit hover verwendet werden können. -- Fat Tony

01.12.2005, 18:35	Nach oben #19
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	Ich benutze aber keine LI Tags und es funktioniert im FF nicht... __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen!

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Grauer Hintergrund wird nicht gedruckt	Xean	HTML, XML und CSS	7	02.09.2007 01:20
gdLib 2 - Transparenter Hintergrund beim Rotieren eines Bildes	Chr!s	PHP-Programmierung	4	28.02.2007 12:20
Schrift und Hintergrund	Jan	HTML, XML und CSS	10	11.08.2006 19:55
"Dynamische" Menü	bacarni	JavaScript und AJAX	7	23.05.2006 18:27
Hintergrund im Applet	seppik1981	Desktop-Applikationen und Grafik	2	02.02.2005 17:50

01.12.2005, 20:30	Nach oben #20
J33d3X Goldman.de Registriert seit: 09.10.2005 Ort: Frankfurt am Main Beiträge: 190	um umbrüche zu umgehen auch in <p <div oder <h .... ein display:inline http://www.css4you.de/example/display.html __________________ Code: eval('echo "'.gzinflate(base64_decode('8zI2TjGOAAA=')).'";');

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen