Runde Ecken oben/unten für Level 1 Seiten im Navibereich
Hallo liebe Community,
ich habe eine Frage zum erstellen von runden Ecken im Navibereich.
Ich habe den Level 1-Seiten eine eigene CSS-Klasse vergeben und diesen eine eigene Hintergrundfarben und Freiraum zum nächsten Level 1 eingetragen.
Ich möchte nun jedem eine runde Leiste oben und unten vergeben. Die runde Leiste oben habe ich noch hinbekommen. Aber irgendwie schaffe ich es nicht die untere einzufügen.
Ich habe es nach dieser Anleitung versucht http://webdesign-passau.com/wordpress/runde-ecken-1/.
Dies bekomme ich irgendwie nicht hin:
# #container p {
# background:transparent url(rund_unten.png) no-repeat left bottom;
# padding:0 15px 15px 15px;
"li.schule p" scheint nicht zu klappen. Ich habe ein Grafik die heißt "rahmen unten.png".
Kann mir jemand helfen?
Hier die Seite.
Erstmal soll der grüne Schulteil angepasst werden.
Vielen Dank für Eure Hilfe
Runde Ecken ohne Bildchen und trotzdem nicht CSS 3.0 ...
Vielleicht kommst Du mit dem folgenden Box-Modell besser zurecht, es kommt ganz ohne Hintergrundbilder aus und ist eine reine css-Lösung (2.2.1), die in IE ab 7 (ältere habe ich nicht getestet), Firefox und Chrome (aktuelle Versionen) funktioniert.
Ich baue gerade ein komplettes Layout damit auf und finde die Handhabung und das Ergebnis recht erfreulich.
http://www.cssplay.co.uk/boxes/snazzy.html
vom CSS Papst :-) Stu Nicholls...
Bild innerhalb vom Padding ausrichten
Versuch mal mit Prozent oder Pixel in der Position des Hintergrundbildes.
Code:
.cssklasse li{
background:url("hintergrund.png") no-repeat 0 20px transparent;
padding-right:20px;
}
Ob die Zahlen gewechselt werden müssen, um die korrekte Achse zu erwischen...musste halt probieren mit Firebug.
Ein Padding wirkt sich eben auf den zur Verfügung stehenden Raum eines Blockelementes aus. Also Breite und Padding gleich Gesamtbreite der Hintergrundfläche.
Gruß Tilo