Hilfe beim Erstellen eines Menüs mit CSS

Druckbare Version

16.12.2010, 14:59
crank.mthrfckr

Hilfe beim Erstellen eines Menüs mit CSS

Tach Jungs,

also kurze beschreibung.

Ich hab zwei Grafiken erstellt, Buttons, der eine Wenn die Mouse nicht drauf ist und die Andere halt wenn sie drauf ist.

So nun hab ich in meine css datei geschrieben

Code:

A.BUTTON { font-size:12pt; font-family:Verdana, Geneva, sans-serif; background-image: url(image/Buttons/b1.jpg); } A.BUTTON:hover { font-size:12pt; font-family:Verdana, Geneva, sans-serif; background-image:url(image/Buttons/b2.jpg); }

in meiner .inc datei steht

Code:

<a class="BUTTON" href="index.php" target="_parent">Startseite</A><br><br> <a class="BUTTON" href="uns.php" target="_parent">Über Uns</a><br><br> <a class="BUTTON" href="produkt.php" target="_parent">Produkte</a><br><br> <a class="BUTTON" href="agb.php"target="_parent">AGB</a><br><br> <a class="BUTTON" href="Impressum.php" target="_parent">Impressum</a><br>

Nun sieht das ganze einfach nur HÄSSLICH aus und nicht wie gewünscht.

Ich wollte halt dass der Button beschriftet wird und hab als Hintergrund die Grafiken genommen.

Muss ich jeden Button einzeln mit der Aufschrift "Startseite", "Über uns" usw erstellen? Oder gehts eleganter?

Danke im Vorraus ;)

Grüße, cranki schmanki
16.12.2010, 15:06
sn0w

Bilder wären noch von Vorteil.
16.12.2010, 15:13
crank.mthrfckr

http://www.imagebanana.com/view/axiqcxgp/ugly.JPG

Bitteschön :)
16.12.2010, 15:15
sn0w

Ich meinte eigentlich eher b1.jpg und b2.jpg
16.12.2010, 15:17
crank.mthrfckr

b1.jpg - Bilder und Fotos kostenlos auf ImageBanana hochladen
b2.jpg - Bilder und Fotos kostenlos auf ImageBanana hochladen

Bitteschön :)
16.12.2010, 15:42
sn0w

Lösung mit JavaScript. Weiß nicht, ob dir das weiterhilft xD

Code:

<body> <div id="button1" class="normal"> <a class="button" onmouseover="document.getElementById('button1').className='hover'" onmouseout="document.getElementById('button1').className='normal'" href="index.php" target="_parent">Startseite</a> </div><br/> <div id="button2" class="normal"> <a class="button" onmouseover="document.getElementById('button2').className='hover'" onmouseout="document.getElementById('button2').className='normal'" href="index.php" target="_parent">AGB</a> </div><br/> </body>

CSS:

Code:

a.button { font-size:12px; font-family:Verdana, Geneva, sans-serif; text-decoration:none; color:#fff; } a.button:hover { font-size:12px; font-family:Verdana, Geneva, sans-serif; } .normal { color:#fff; font-size:12px; font-family:Verdana, Geneva, sans-serif; /*background-image: url(b1.jpg);*/ /*padding:2px;*/ height:15px; width:123px; text-align:center; padding:5px; background-image: url(b1.jpg); } .hover { background-image: url(b2.jpg); color:#fff; font-size:12px; font-family:Verdana, Geneva, sans-serif; /*background-image: url(b1.jpg);*/ /*padding:2px;*/ height:15px; width:123px; text-align:center; padding:5px; }

MfG
16.12.2010, 15:43
crank.mthrfckr

Doch ist schon ziemlich sexy :)

Da ich noch keinen THX Button hab: Danke sn0w ;)

Grüße
16.12.2010, 19:54
DonaldDrug

ist auch nur mit css möglich, das es bei dir so hässlich ist liegt daran das du es auf a packst versuch es mal ein element höher