PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Hilfe beim Erstellen eines Menüs mit CSS


crank.mthrfckr
16.12.2010, 14:59
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

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




<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
sn0w
16.12.2010, 15:06
Bilder wären noch von Vorteil.
crank.mthrfckr
16.12.2010, 15:13
http://www.imagebanana.com/view/axiqcxgp/ugly.JPG

Bitteschön :)
sn0w
16.12.2010, 15:15
Ich meinte eigentlich eher b1.jpg und b2.jpg
crank.mthrfckr
16.12.2010, 15:17
b1.jpg - Bilder und Fotos kostenlos auf ImageBanana hochladen (http://www.imagebanana.com/view/aqa8ac9t/b1.jpg)
b2.jpg - Bilder und Fotos kostenlos auf ImageBanana hochladen (http://www.imagebanana.com/view/ankvy9mi/b2.jpg)

Bitteschön :)
sn0w
16.12.2010, 15:42
Lösung mit JavaScript. Weiß nicht, ob dir das weiterhilft xD

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

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
crank.mthrfckr
16.12.2010, 15:43
Doch ist schon ziemlich sexy :)

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

Grüße
DonaldDrug
16.12.2010, 19:54
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