Runde Ecken oben/unten für Level 1 Seiten im Navibereich

**Broichi** · 05.12.2010, 18:12

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

**psren** · 05.12.2010, 19:20

Wo genau willst du da jetzt die Rundung reinhaben?
Unter Förderverein, Träger...?

Also li.schule p kann nicht funktionieren weil da kein p-element ist.
li.schule oder li.schule a.last sind die beiden selektoren die dich zum ziel führen könnten

Bin mir aber nicht sicher, habe grade keinen firebug hier.

Viel Glück noch
Gruß psren

**ThKrueger** · 05.12.2010, 19:56

Vielleicht hilft Dir der Quellcode unserer Seite:
http://www.stg-brandenburg.de/startseite.html

**Broichi** · 05.12.2010, 20:16

@psren,

vielen Dank für Deine Hilfe.

Du hast mich richtig verstanden. Unterhalb des Fördervereins bzw. nach Satzung (wenn ausgewählt) sollte das Bild aufgetauchen.
Dein Tip mit li.schule a.last hat mir etwas weitergeholfen. Jetzt habe ich das Bild unten. Allerdings nicht beginnend mit der linken Ecke.

li.schule kann ich nicht nehmen, da ich hier schon die Kopfleiste hinterlegt habe.

@ThKrueger
vielen Dank für deine Hilfe. Leider passt es nicht zu meinem Naviproblem. Aber die ganzen Runden ecken kann ich bestimmt für später noch brauchen.

**wotank** · 06.12.2010, 06:50

Moin,

du hast die untere Grafik einem Inline-Element (a) zugeteilt, was keine gute Idee ist.
Bei dem von dir verlinkten Tut wurde die untere Rundung einem Blockelement zugeteilt (p).

Vielleicht versuchst du es mal mit li.last für die untere Rundung.

**Broichi** · 06.12.2010, 20:23

@wotank

leider klappt dies auch nicht. Auch hier wird die das Bild nicht ganz unten links angezeigt.

@all

Da dies scheinbar nicht so leicht ist.
Gibt es die Möglichkeit mehrere Navigationsleisten anzuzeigen? Für jede level 1 Seite eine eigene Navigation? Wenn ja wie muss dies in Contao eingerichtet werden?

Edit: Ich habe es heraufgefunden. über Individuelle Navigation mit Angabe einer Referenzseite ist dies möglich.

**Alexander** · 06.12.2010, 20:41

Hm, ggf. verstehe ich das hier nun falsch, aber gib der Box doch einfach die grüne Hintergrundfarbe und dann per CSS3 runde Ecken. Für den IE musst dann aber per IE-Filter (oder so) die runden Ecken erzeugen, da der ja wie bekannt immer Webdesigner unfreundlich ist.
-moz-border-radius: 5px; schafft runde Ecken für den Mozilla z.B.

**psren** · 06.12.2010, 21:15

nimm mal von li.schule das padding-left raus und gibt den a und span-elementen block(so wie vorher) und das padding-left:4px.
zusätzlich zu meinem letzten post.

**Broichi** · 06.12.2010, 22:44

@Alexander

wg. dem IE möchte ich nach Möglichkeit auf die CSS3-Variante verzichten. Vielen Dank für Deinen Tip

@psren

nochmals vielen Dank für Deine Antwort.

Leider bin ich auf dem Gebiet ein Laie. Dies sind meine CSS Einstellungen für die Navigation:

Code:

/**
 Navigation 
**/
.mod_navigation.main
{
	width:200px;
	left:23px;
	top:-10px;
	position:relative;
}
.mod_navigation.main ul
{
	margin:5px 5px 0;
	padding:0;
	border-bottom:1px solid #c6ad8d;
	list-style-type:none;
}
.mod_navigation.main li
{
	margin:0;
	padding:5px 0;
	border-top:5px solid #fcfcfc;
	list-style-type:none;
}
* html .mod_navigation.main ul,
* html .mod_navigation.main li
{
	height:1px;
}
.mod_navigation.main .level_2
{
	padding:3px 0 0 9px;
	border-bottom:0px;
	list-style-type:square;
}
.mod_navigation.main .level_2 li
{
	padding:0 0 3px;
	border-top:0px;
	list-style-type:square;
}
.mod_navigation.main .level_3
{
	margin-left:0;
	padding:0 0 0 9px;
	list-style-type:disc;
}
.mod_navigation.main .level_3 li
{
	margin-left:9px;
	padding:0 0 3px;
	border-top:0px;
	list-style-type:disc;
}
.mod_navigation.main .level_3 ul
{
	background-color:#a5ff2f;
	border-top:0px;
}
.mod_navigation.main a,
.mod_navigation.main li,
.mod_navigation.main span
{
	padding-left:4px;
	font-weight:bold;
	font-size:13px;
	color:#000000;
}
.mod_navigation.main .level_2 a,
.mod_navigation.main .level_2 li,
.mod_navigation.main .level_2 span
{
	font-weight:normal;
	font-size:11px;
}
.mod_navigation li.schule
{
	background:#86cc2e url("tl_files/KGS/rahmen oben.png") left top no-repeat;
}
.mod_navigation li.schule a.last
{
	margin-left:0;
	padding-top:0;
	padding-right:110px;
	padding-bottom:15px;
	background:url("tl_files/KGS/rahmen unten.png") left bottom no-repeat;
}
.mod_navigation li.ogts
{
	padding-left:4px;
	background-color:#fcf923;
}
.mod_navigation li.intern
{
	padding-left:4px;
	background-color:#e70042;
}
.mod_navigation li.freizeit
{
	padding-left:4px;
	background-color:#00B8EC;
}
.mod_navigation li.kontakt
{
	padding-left:4px;
	background-color:#ed0000;
}

Wo soll ich hier weiter ansetzen?

**psren** · 07.12.2010, 00:49

Also ersetze

HTML-Code:

.mod_navigation.main a,
.mod_navigation.main li,
.mod_navigation.main span
{
	padding-left:4px;
	font-weight:bold;
	font-size:13px;
	color:#000000;
}

durch:

HTML-Code:

.mod_navigation.main a,
.mod_navigation.main li,
.mod_navigation.main span
{
	padding-left:4px;
	font-weight:bold;
        display:block;
	font-size:13px;
	color:#000000;
}

Das display:block bewirkt dass das element über die ganze breite geht.
Zudem hast du allen ul ein margin gegeben. um das so zu lösen wie ich es meinte muss das raus. genauso wie das padding des ul.level_2
und dann passt es schon mit dem bild.

dann nurnoch die abstände wieder einrichten (mit .level_2 li { padding-left: 14px;})
und dann kannste dich nochmal melden

Viel Spaß und gruß
psren

**Zappa** · 07.12.2010, 10:24

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

**Broichi** · 09.12.2010, 19:48

@psren

Vielen Dank für Deine tatkräftige Unterstützung. Also .mod.navigation.main a,li,span habe ich geändert. auch alle margins habe ich entfernt.

Zitat von psren

genauso wie das padding des ul.level_2
und dann passt es schon mit dem bild.

Hier komme ich nicht weiter. Ich habe kein ul.level_2. Was sollte ich jetzt am Besten machen. So sieht meint CSS-Bereich nun aus.

Code:

/**
 Navigation 
**/
* html .mod_navigation.main ul,
* html .mod_navigation.main li
{
	height:1px;
}
.mod_navigation.main
{
	width:200px;
	left:23px;
	top:-10px;
	position:relative;
}
.mod_navigation.main a,
.mod_navigation.main li,
.mod_navigation.main span
{
	display:block;
	padding-left:4px;
	font-weight:bold;
	font-size:13px;
	color:#000000;
}
.mod_navigation.main li
{
	margin:0;
	padding:5px 0;
	border-top:5px solid #fcfcfc;
	list-style-type:none;
}
.mod_navigation.main ul
{
	border-bottom:1px solid #c6ad8d;
	list-style-type:none;
}
.mod_navigation.main .level_2
{
	padding:3px 0 0 9px;
	border-bottom:0px;
	list-style-type:square;
}
.mod_navigation.main .level_2 a,
.mod_navigation.main .level_2 li,
.mod_navigation.main .level_2 span
{
	font-weight:normal;
	font-size:11px;
}
.mod_navigation.main .level_2 li
{
	padding:0 0 3px;
	border-top:0px;
	list-style-type:square;
}
.mod_navigation.main .level_3
{
	padding:0 0 0 9px;
	list-style-type:disc;
}
.mod_navigation.main .level_3 ul
{
	background-color:#a5ff2f;
	border-top:0px;
}
.mod_navigation.main .level_3 li
{
	margin-left:9px;
	padding:0 0 3px;
	border-top:0px;
	list-style-type:disc;
}
.mod_navigation li.schule
{
	background:#86cc2e url("tl_files/KGS/rahmen oben.png") left top no-repeat;
}
.mod_navigation li.schule a.last
{
	padding-top:0;
	padding-right:110px;
	padding-bottom:15px;
	background:url("tl_files/KGS/rahmen unten.png") left bottom no-repeat;
}
.mod_navigation li.ogts
{
	padding-left:4px;
	background-color:#fcf923;
}
.mod_navigation li.intern
{
	padding-left:4px;
	background-color:#e70042;
}
.mod_navigation li.freizeit
{
	padding-left:4px;
	background-color:#00B8EC;
}
.mod_navigation li.kontakt
{
	padding-left:4px;
	background-color:#ed0000;
}

@Anna

Vielen Dank für Deinen Hinweis. Die Möglichkeit von cssplay hatte ich auch gesehen. Da gibt es wirklich viele schöne CSS Möglichkeiten. Leider weiss ich nicht ob wie ich die Div-Verschachtelung in Contao umsetzen könnte. Die DIVs setzt ja Contao für mich.

@All

Nochmals vielen Dank für Eure Hilfe..

Schöne Grüße

Broichi

**wotank** · 10.12.2010, 06:25

Zitat von Broichi

Hier komme ich nicht weiter. Ich habe kein ul.level_2. Was sollte ich jetzt am Besten machen.

aber ich sehe es mit Firebug (deutsches Tut dazu).

Für runde Ecken per Grafik gilt grundsätzlich:
Erst einmal alle paddings und margins die mit dem Container in Zusammenhang stehen auf Null setzen (auch für ul.level_2).
Dann vorsichtig nacheinander wieder einfügen und immer wieder mit Firebug prüfen!

**Broichi** · 14.12.2010, 20:31

@psren

so ich habe es nun mit zig 0 Margin und Padding hinbekommen.
Wie kann ich denn nun wieder die Paddings setzen?
Sobald ich padding-left setze rückt das Bild wieder mit.

Wie bekomme ich es denn hin, dass das Bild auch bei Level 3 (Klick auf Förderverein) korrekt steht?
Auch hier die Margin und Paddings auf 0. (Auch hier müsste dann wieder die Paddings angepasst werden. Ist wohl das gleiche Problem wie bei Level 2.)

@wotank

Vielen Dank für Deinen Hinweis zu Firebug. Diesen hatte ich auch benutzt. Aber rechts nie Level 2 ul gefunden. Hat was gedauert bis ich dann im Verzeichnisbaum den ul.level2 links oben gefunden habe. Dann hat es geklappt.

**neueplaneten** · 14.12.2010, 20:36

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