Ergebnis 1 bis 15 von 15

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

  1. #1
    Contao-Nutzer
    Registriert seit
    02.12.2010.
    Beiträge
    19

    Frage 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

  2. #2
    Contao-Urgestein
    Registriert seit
    07.04.2010.
    Ort
    Stuttgart
    Beiträge
    2.733
    User beschenken
    Wunschliste

    Standard

    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

  3. #3
    Contao-Nutzer
    Registriert seit
    23.08.2009.
    Beiträge
    17

    Standard

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

  4. #4
    Contao-Nutzer
    Registriert seit
    02.12.2010.
    Beiträge
    19

    Information

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

  5. #5
    Gesperrt
    Registriert seit
    01.12.2010.
    Ort
    Passau
    Beiträge
    321

    Standard

    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.

  6. #6
    Contao-Nutzer
    Registriert seit
    02.12.2010.
    Beiträge
    19

    Information

    @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.
    Geändert von Broichi (06.12.2010 um 23:47 Uhr)

  7. #7
    Contao-Fan
    Registriert seit
    02.08.2009.
    Ort
    Westfalen
    Beiträge
    639

    Standard

    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.
    ‎"The basic drives of humans are few: to get enough food, to find shelter, and to keep debt off the balance sheet."

  8. #8
    Contao-Urgestein
    Registriert seit
    07.04.2010.
    Ort
    Stuttgart
    Beiträge
    2.733
    User beschenken
    Wunschliste

    Standard

    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.

  9. #9
    Contao-Nutzer
    Registriert seit
    02.12.2010.
    Beiträge
    19

    Information

    @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?

  10. #10
    Contao-Urgestein
    Registriert seit
    07.04.2010.
    Ort
    Stuttgart
    Beiträge
    2.733
    User beschenken
    Wunschliste

    Standard

    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

  11. #11
    Contao-Nutzer
    Registriert seit
    25.08.2010.
    Beiträge
    39

    Standard 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...
    Geändert von Zappa (07.12.2010 um 11:28 Uhr)
    Viele Grüße, Anna

  12. #12
    Contao-Nutzer
    Registriert seit
    02.12.2010.
    Beiträge
    19

    Information Nachfrage

    @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 Zitat von psren Beitrag anzeigen
    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
    Geändert von Broichi (09.12.2010 um 21:43 Uhr)

  13. #13
    Gesperrt
    Registriert seit
    01.12.2010.
    Ort
    Passau
    Beiträge
    321

    Standard

    Zitat Zitat von Broichi Beitrag anzeigen
    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!

  14. #14
    Contao-Nutzer
    Registriert seit
    02.12.2010.
    Beiträge
    19

    Information nun etwas weiter....

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

  15. #15
    Contao-Nutzer Avatar von neueplaneten
    Registriert seit
    04.03.2010.
    Ort
    Halberstadt
    Beiträge
    103

    Standard 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
    Wer denkt jemand zu sein, hat aufgehört jemand zu werden.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen

  1. Runde Ecken, wo genau die divs platzieren?
    Von rantaplan im Forum Layout / Templates / Holy Grail
    Antworten: 7
    Letzter Beitrag: 24.11.2010, 12:07
  2. Level 2 Punkte immer unter ALLEN Level 1 punkten
    Von mad im Forum Layout / Templates / Holy Grail
    Antworten: 11
    Letzter Beitrag: 06.02.2010, 22:55
  3. Runde Ecken und Grid-System
    Von lomex im Forum Layout / Templates / Holy Grail
    Antworten: 4
    Letzter Beitrag: 13.01.2010, 09:45
  4. Antworten: 3
    Letzter Beitrag: 17.11.2009, 20:38

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •