Navigationsleiste: hover hintergrund

Webdesign & Technik HTML & CSS
1

Hey leute :slight_smile: ,
ich hab heute schon den ganzen Tag an meiner Seite gebastelt und wollte bei meiner Navigationsleiste einen Hintergrund wenn mann mit der maus drüber fährt.

So wie hier.

Hab auch passendes mittels google gefunden:

In der CSS:

.klasse:hover, .klasse:active, .klasse:focus { background-image: url(images/shadow.png); width:10px; }

In der HTML:

So weit so gut! Nun wollte ich fragen ob ich es so gestalten kann das sich der “Shadow” automatisch der Textlänge anpasst?

Die Forumssuche hat leider keine passenden Einträge ausgespuckt. Jedenfals nicht mit den Tags, mit denen ich gesucht habe…

2

Vielleicht hilft dir das weiter, ich bin aber auch kein Profi und hab noch nie damit experimentiert…

de.selfhtml.org/css/eigenschafte … d_position

3

Willst du das der Link abgerundete Ecken hat oder reichen auch Spitze ecken?

4

matthiasschuetz.com/css-abgerund … darstellen

Ich glaube das könnte dir weiter helfen.
Zumindest bei den Ecken.

Und dann einfach:

.klasse:hover{
    background: grey;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    border-radius:10px;
}

.klasse{
    behavior:url(border-radius.htc);
}

Hier noch wie du nur oben Runde Ecken haben kannst: css4you.de/trickkiste/tr00012.html

LG Konsch

5

Danke erstmal für die Antworten. Auch noch zu später Stunde ;D

[quote=“Mgier”]Vielleicht hilft dir das weiter, ich bin aber auch kein Profi und hab noch nie damit experimentiert…

de.selfhtml.org/css/eigenschafte … d_position[/quote]

Ich glaub selfhtml hab ich als erstes durchforstet^^

[quote=“konsch”]http://matthiasschuetz.com/css-abgerundete-ecken-in-allen-browsern-darstellen

Ich glaube das könnte dir weiter helfen.
Zumindest bei den Ecken.

Und dann einfach:

[…]

Hier noch wie du nur oben Runde Ecken haben kannst: css4you.de/trickkiste/tr00012.html

LG Konsch[/quote]

fast genauso wollt ichs :slight_smile: jetzt ist das Ganze zwar kein Bild mehr und trotzdem abgerundet aber es liegt genau am text an. Kann ich da noch etwas platz machen?

6

Ja klar geht das.

.klasse {
    padding: 5px;
}
7

Danke! funktioniert jetzt so wie ich’s haben will :slight_smile:

Lg. Dreistein :p

8

Sag mal bitte wie deine Seite heißt.