Kategoriebox mit Eckradius...

Thema wurde von JonW, 11. Januar 2018 erstellt.

  1. JonW

    JonW Mitglied

    Registriert seit:
    2. Januar 2018
    Beiträge:
    15
    Danke erhalten:
    0
    Danke vergeben:
    5
    Hi Leute,
    Ich bin hier erst seit eine Woche und kämpfe momentan mit StyleEdit rum. Ich habe bisher fast alles geschafft, was ich erreichen wollte - nur eine Sache will nicht. Ich glaube, mir fehlt einfach den einen Trick...
    Bei den diversen Menüboxen habe ich einen Eckradius (10px) eingestellt. Kein Thema. Nur bei der Kategoriebox klappt es nicht. Im eigenen CSS habe ich schon einiges (OK, sehr viel!) ausprobiert, bekomme es aber nur soweit hin, dass entweder keine Einträge die Rundung haben, oder viel zu viele... Eigentlich will ich (logischerweise) nur ganz oben und ganz unten die Rundung haben, egal welche Kategorien aufgeklappt sind...
    Ist es möglich?
    Kann mir jemand auf die Sprünge helfen?
    VORdankeAUS
    Jon

    keine.JPG zuviele.JPG
     
  2. Torben Wark

    Torben Wark Gambio GmbH

    Registriert seit:
    15. Juli 2014
    Beiträge:
    2.581
    Danke erhalten:
    1.178
    Danke vergeben:
    399
    Kann man sich deinen Shop irgendwo ansehen? Bei CSS-Fragen ist es oft notwendig das lebende Objekt zu sehen
     
  3. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.910
    Danke erhalten:
    1.559
    Danke vergeben:
    1.135
    Willkommen im Forum

    Ich habe das bei mir mit diesem css-Befehl gemacht:
    .panel {
    border-radius: 5px;
    }
     
  4. Wilken (Gambio)

    Wilken (Gambio) Erfahrener Benutzer

    Registriert seit:
    7. November 2012
    Beiträge:
    18.737
    Danke erhalten:
    7.310
    Danke vergeben:
    2.208
    Ich schätze das ist ein Bug. Wenn alle Boxen rund werden, nur die nicht, dann ist das eine Inhomogenität und damit recht sicher nicht im Sinne des Erfinders.
     
  5. JonW

    JonW Mitglied

    Registriert seit:
    2. Januar 2018
    Beiträge:
    15
    Danke erhalten:
    0
    Danke vergeben:
    5
    Danke, marmoles,
    Habe ich gleich ausprobiert, aber es tut bei mir gar nichts. Ich vermute, ich habe es woanders "kaputtgemacht"...
    Gruß
    Jon
     
  6. JonW

    JonW Mitglied

    Registriert seit:
    2. Januar 2018
    Beiträge:
    15
    Danke erhalten:
    0
    Danke vergeben:
    5
    Hi Torben,
    Meine Daten sind bei Gambio hinterlegt. Der Shop ist noch offline, aber mit dem hinterlegten Admin-Login müsste es funktionieren...
    Gruß
    Jon
     
  7. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.544
    Danke erhalten:
    11.305
    Danke vergeben:
    1.612
    Versuche es mal damit:
    Code:
    .box-categories {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    Im Gambio-Testshop 2 hat es damit funktioniert.
    Allerdings bleibt unten ein Strich, wo ich nicht weiß, wo der herkommt.
     
  8. JonW

    JonW Mitglied

    Registriert seit:
    2. Januar 2018
    Beiträge:
    15
    Danke erhalten:
    0
    Danke vergeben:
    5
    Hi Barbara,
    Danke für die Infos und Deine Mühe... Allerdings habe ich das Problem (zumindest in Firefox und in IE11), dass es perfekt aussieht, bis man die Maus über den obersten oder untersten Eintrag bewegt oder den untersten Eintrag aufklappt. Die Hover-Farbe hat dann eben die Rundung nicht und sieht doof aus... Das will ich, wenn's geht, vermeiden...
    Viele Grüße,
    Jon
     
  9. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.544
    Danke erhalten:
    11.305
    Danke vergeben:
    1.612
    Das geht dann nur mit einem Blick auf die Seite :)
     
  10. JonW

    JonW Mitglied

    Registriert seit:
    2. Januar 2018
    Beiträge:
    15
    Danke erhalten:
    0
    Danke vergeben:
    5
    Hi Barbara,
    Ich habe den Shop jetzt für eine kurze Zeit online geschaltet...
    http://webshop.whiskybrunnen.de
    Viele Grüße,
    Jon
     
  11. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    35.544
    Danke erhalten:
    11.305
    Danke vergeben:
    1.612
    Versuche mal bitte den Code von oben plus:
    Code:
    @media (min-width: 768px){
    .panel > .navbar-categories-left > ul > li:first-of-type a {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
    }
    .panel > .navbar-categories-left > ul > li:last-of-type a {
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }}
    
    bei dem "last of type" bin ich mit nicht ganz sicher....
     
  12. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    25. Oktober 2017
    Beiträge:
    406
    Danke erhalten:
    137
    Danke vergeben:
    81
    #12 Anonymous, 12. Januar 2018
    Zuletzt bearbeitet: 12. Januar 2018
    Auch eine Variante: die Grundbox nach oben und unten erweitern
    Code:
    .panel > .navbar-categories-left {
       padding-top: 10px;
       padding-bottom: 10px;
    }
    Nachtrag: halt ganz knapp und irgendwie hellblaue Farbe dazu. Sorry, wollte nicht verwirren: Barbara hat ja schon die perfekte Lösung...
     

    Anhänge:

  13. JonW

    JonW Mitglied

    Registriert seit:
    2. Januar 2018
    Beiträge:
    15
    Danke erhalten:
    0
    Danke vergeben:
    5
    Hi Barbara,
    Das ist richtig hartnäckig! Mit first-of-type hatte ich schon ein paar mal rumgespielt. Irgendwie mit dem Code von Dir (wie auch bei meinen Versuchen) werden alle Elemente unter dem ersten Eintrag geändert:

    FoT+LoT.PNG

    Last-of-type scheint gar nicht zu klappen...

    AUf jeden Fall danke für Deine bisherige Hilfe...

    Gruß
    Jon
     
  14. JonW

    JonW Mitglied

    Registriert seit:
    2. Januar 2018
    Beiträge:
    15
    Danke erhalten:
    0
    Danke vergeben:
    5
    Hi Andreas,
    Gemeinsam sind wir stark!!
    Ich habe Dein Code mit ein Teil von Barbara kombiniert und auch noch die background auf hellblau gesetzt, dann die Rundung eingestellt und jetzt sieht es (endlich) perfekt aus. Dir auch einen riesen Dankeschön für die Hilfe!
    Fixed.PNG
    Gruß
    Jon