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

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

**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
b2.jpg - Bilder und Fotos kostenlos auf ImageBanana hochladen

Bitteschön

**sn0w** · 16.12.2010, 15:42

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

**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

Thema: Hilfe beim Erstellen eines Menüs mit CSS

Themen-Optionen

Anzeige

Hilfe beim Erstellen eines Menüs mit CSS

Folgende Benutzer haben sich für diesen Beitrag bedankt:

Ähnliche Themen

Error beim erstellen eines Projekts

Hilfe beim Erstellen eines MultiClickers

Hilfe beim erstellen eines Browsergames

Stichworte

Berechtigungen