Schrift und Hintergrund

Jan · 27.07.2006, 14:15

Hallo,

ich möchte ein Menü erstellen.

HTML-Code:

<a class="menu" href="#">Test1</a>
<a class="menu" href="#">Test2</a>
<a class="menu" href="#">Test3</a>

Jetzt möchte ich eine Hintergrundgrafik haben, die beim hover sich verändert. Wenn möglich mit dem CSS Trick hier im Forum.
Also mit Scroll. Soweit ja alles okay. Jetzt möchte ich des aber als Hintergrund haben, und die Schrift mit HTML machen. Ich brauch also das ganze als background

HTML-Code:

a.menu{
			color:#1900BA;
			background:url();
			font-size:16px;
			font-weight:bold;
			text-decoration:none;
			background-image:url(menu-n.png);
			background-repeat:repeat-x;}
a.menu:hover{
			text-decoration:none;
			background-image:url(menu-h.png);
			background-repeat:repeat-x;}

Leider klappt das so nicht. Wie geht das, oder geht es garnicht?

Ben · 27.07.2006, 14:26

Als Beispiel

Code:

#menu a {
    text-decoration:none;
    padding:2px 6px;
}

#menu a:hover {
    background-image:url('dropdown.gif');
    background-repeat:no-repeat;
    background-position:right;
    padding-right:20px;
    text-decoration:none;    
}

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <link href="demo.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 
  <ul id="menu">
    <li><a href="#" title="blubber1">Link 1</a></li>
    <li><a href="#" title="blubber2">Link 2</a></li>
    <li><a href="#" title="blubber3">Link 3</a></li>
  </ul>
 
 </body>
</html>

Erstellt eine Liste mit drei untereinander angeordneten Links. Beim Hover erscheint rechts neben dem Link eine Grafik.
Das solltest du jetzt ja auf dein Problem übertragen können, oder?

Grüße, Ben.

Jan · 27.07.2006, 16:03

Warum bin ich armer Schüler?
Wenn ich 1 Millionen hätte, würdet ihr 950 000€ bekommen !
Ich weiß garnicht, wie ich euch noch Danken kann.

Wollt hier jetzt auch nochmal sagen:

Ihr seid einfach Spitze hier !

Ben · 27.07.2006, 16:14

Komm mal wieder runter.

Wir sind doch hier, um zu helfen. Passt also schon.

Btw. ich hätte auch einfach das hier machen können.
RTFM! http://www.css4you.de/background.html

*g*

Bookworm · 27.07.2006, 16:19

lol^^
Aber respect Ben, ich hab das Problem erst geschnallt, als ich deine Soruce gesehen habe^^

Jan · 27.07.2006, 16:31

Ich verstehe aber deins besser als den Link weiß nicht warum...

Gut, dann komm ich halt wieder runter, obwohls mir hier oben ganz gut gefiel

Werde mich mit meinem Dank in Zukunft zurück halten

DER_Brain · 30.07.2006, 15:19

Code:

    background-image:url('dropdown.gif');

Ich glaube man soll das OHNE ' schreiben, also nur url(dropdown.gif);

mfg

Lars · 30.07.2006, 15:33

Zitat:

OHNE '

Ist beides erlaubt.

Bookworm · 30.07.2006, 17:40

klappt auch beides... und laut css4you.de ist sowohl ' als auch " erlaubt

DER_Brain · 02.08.2006, 09:59

Achso, okay...

ich meine mich zu erinnern, dass ich es irgendwo gelesen hab.. sorry Ben

pichfl · 11.08.2006, 19:55

is schon soweit richtig.

ohne ' is besser, macht bei älteren Browsern weniger Probleme und bringt die auch nicht zum Absturz (der Mac:IE oder ältere IS verschlucken sich da manchmal so sehr dran, dass sie abschmieren)

27.07.2006, 14:15	Nach oben #1
Jan Erfahrener Benutzer Registriert seit: 08.01.2006 Ort: Mannheim Beiträge: 481	Schrift und Hintergrund Hallo, ich möchte ein Menü erstellen. HTML-Code: <a class="menu" href="#">Test1</a> <a class="menu" href="#">Test2</a> <a class="menu" href="#">Test3</a> Jetzt möchte ich eine Hintergrundgrafik haben, die beim hover sich verändert. Wenn möglich mit dem CSS Trick hier im Forum. Also mit Scroll. Soweit ja alles okay. Jetzt möchte ich des aber als Hintergrund haben, und die Schrift mit HTML machen. Ich brauch also das ganze als background HTML-Code: a.menu{ color:#1900BA; background:url(); font-size:16px; font-weight:bold; text-decoration:none; background-image:url(menu-n.png); background-repeat:repeat-x;} a.menu:hover{ text-decoration:none; background-image:url(menu-h.png); background-repeat:repeat-x;} Leider klappt das so nicht. Wie geht das, oder geht es garnicht? __________________ Jan info.malte-gerth.de ================================= Nutzt bitte lieber Jabber statt ICQ: malte.gerth@jabber.cz

27.07.2006, 14:26	Nach oben #2
Ben Erfahrener Benutzer Registriert seit: 02.12.2004 Ort: Remagen Beiträge: 4.616	Als Beispiel Code: #menu a { text-decoration:none; padding:2px 6px; } #menu a:hover { background-image:url('dropdown.gif'); background-repeat:no-repeat; background-position:right; padding-right:20px; text-decoration:none; } HTML-Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="demo.css" rel="stylesheet" type="text/css" /> </head> <body> <ul id="menu"> <li><a href="#" title="blubber1">Link 1</a></li> <li><a href="#" title="blubber2">Link 2</a></li> <li><a href="#" title="blubber3">Link 3</a></li> </ul> </body> </html> Erstellt eine Liste mit drei untereinander angeordneten Links. Beim Hover erscheint rechts neben dem Link eine Grafik. Das solltest du jetzt ja auf dein Problem übertragen können, oder? Grüße, Ben. __________________ Mehr TuS Koblenz geht nicht ... Aktuell ... - Neue Gegner für die TuS: 1.FC Nürnberg - 5 neue Gegner 2008/09 - Informationsveranstaltung für Mitglieder - Förderkasse füllt sich - B-Jugend Rheinlandpokalfinale terminiert - A-Jugend I gewinnt Rheinlandpokal

27.07.2006, 16:03	Nach oben #3
Jan Erfahrener Benutzer Registriert seit: 08.01.2006 Ort: Mannheim Beiträge: 481	Warum bin ich armer Schüler? Wenn ich 1 Millionen hätte, würdet ihr 950 000€ bekommen ! Ich weiß garnicht, wie ich euch noch Danken kann. Wollt hier jetzt auch nochmal sagen: *Ihr seid einfach Spitze hier !* __________________ Jan info.malte-gerth.de ================================= Nutzt bitte lieber Jabber statt ICQ: malte.gerth@jabber.cz

27.07.2006, 16:14	Nach oben #4
Ben Erfahrener Benutzer Registriert seit: 02.12.2004 Ort: Remagen Beiträge: 4.616	Komm mal wieder runter. Wir sind doch hier, um zu helfen. Passt also schon. Btw. ich hätte auch einfach das hier machen können. RTFM! http://www.css4you.de/background.html g __________________ Mehr TuS Koblenz geht nicht ... Aktuell ... - Neue Gegner für die TuS: 1.FC Nürnberg - 5 neue Gegner 2008/09 - Informationsveranstaltung für Mitglieder - Förderkasse füllt sich - B-Jugend Rheinlandpokalfinale terminiert - A-Jugend I gewinnt Rheinlandpokal

27.07.2006, 16:19	Nach oben #5
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	lol^^ Aber respect Ben, ich hab das Problem erst geschnallt, als ich deine Soruce gesehen habe^^ __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen!

27.07.2006, 16:31	Nach oben #6
Jan Erfahrener Benutzer Registriert seit: 08.01.2006 Ort: Mannheim Beiträge: 481	Ich verstehe aber deins besser als den Link weiß nicht warum... Gut, dann komm ich halt wieder runter, obwohls mir hier oben ganz gut gefiel Werde mich mit meinem Dank in Zukunft zurück halten __________________ Jan info.malte-gerth.de ================================= Nutzt bitte lieber Jabber statt ICQ: malte.gerth@jabber.cz

30.07.2006, 15:19	Nach oben #7
DER_Brain Benutzer Registriert seit: 18.08.2005 Ort: Österreich Beiträge: 32	Code: background-image:url('dropdown.gif'); Ich glaube man soll das OHNE ' schreiben, also nur url(dropdown.gif); mfg __________________ Just because I am super.

30.07.2006, 17:40	Nach oben #9
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	klappt auch beides... und laut css4you.de ist sowohl ' als auch " erlaubt __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen!

02.08.2006, 09:59	Nach oben #10
DER_Brain Benutzer Registriert seit: 18.08.2005 Ort: Österreich Beiträge: 32	Achso, okay... ich meine mich zu erinnern, dass ich es irgendwo gelesen hab.. sorry Ben __________________ Just because I am super.

11.08.2006, 19:55	Nach oben #11
pichfl CSS-Spinner Registriert seit: 27.08.2005 Ort: Kissing Beiträge: 46	is schon soweit richtig. ohne ' is besser, macht bei älteren Browsern weniger Probleme und bringt die auch nicht zum Absturz (der Mac:IE oder ältere IS verschlucken sich da manchmal so sehr dran, dass sie abschmieren)

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

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken

Ä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
[Linux] Krakelige Schrift in OpenOffice	Corvin	Tools, Server, Betriebssysteme	1	21.11.2006 17:54
[CSS] Schatten unter der Schrift (einzeilig)	WarrenFaith	HTML, XML und CSS	1	30.10.2006 19:50
[File_PDF] externe Schrift einbinden	J33d3X	PEAR, PECL und Frameworks	2	19.07.2006 09:08