[HTML][CSS] Kind elementen, ronde hoek en overflow:hidden

[Arie-]

Ik heb een vraag en me rotgezocht. Mogelijk gebruik ik de verkeerde zoektermen daar ik niet super goed thuis ben in html en css.
Mijn probleem, ik heb een navigatie container op mijn site, met daarin twee kind elementen: het menu en de broodkruimels. Mijn probleem is dat de achtergrond van de broodkruimels de ronde rand van de navigatie container overlapt. overflow:hidden lost dit normaliter op, echter is het menu in de andere kindcontainer van er één van het soort uitvouwen, hetgeen overflow:hidden wat kansloos maakt.
Bij de menu container speelt dit probleem niet omdat deze:

• Achtergrond van #fff naar een grijswaarde verloopt
• Deze een marge van een x aantal pixels aan de bovenkant heeft
• De achtergrond van de navigatie parent container zelf #fff is

Een jsfiddle poging en een voorbeeld screenshot.


Hoe moet ik / zouden jullie dit aanpakken? Zie ik iets over het hoofd? Een schop in de goede richting?

[FotW]

Of de gradient op #navigatie zetten en deze een padding-botom geven, ik ga er naar aanleiding van de OP van uit dat je dat niet wilt.

Of je splitst je navigatie op in 2 delen; #navigatie en #breadcrumb. #navigatie geef je dan een top-left en top-right radius en #breadcrumb een bottom-left en bottom-right.

[RM-rf]

bij mij lost:

code:

#broodkruimel {
   background: #eee;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
   overflow: hidden;
}

het probleem al op

[ Voor 3% gewijzigd door RM-rf op 03-10-2013 15:05 ]

[incaz]

Als ik het test wordt een absolute gepositioneerde div niet afgekapt door een overflow:hidden op de parent. Is het wel echt een probleem?

[Arie-]

FotW schreef op donderdag 03 oktober 2013 @ 15:02:
Of de gradient op #navigatie zetten en deze een padding-botom geven, ik ga er naar aanleiding van de OP van uit dat je dat niet wilt.

Even uit mijn hoofd: padding-bottom gaat niet werken omdat de broodkruimels niet altijd op een regel passen en ik dus niet weet hoe hoog dat element gaat worden.

Of je splitst je navigatie op in 2 delen; #navigatie en #breadcrumb. #navigatie geef je dan een top-left en top-right radius en #breadcrumb een bottom-left en bottom-right.

Dit lijkt me DE oplossing, idiote ik wist niet dat je ook elke hoek afzonderlijk een ronding kon geven. Wel zo logisch, maar als je deze activiteiten niet zo vaak doet zie je zoiets simpels over het hoofd.

RM-rf schreef op donderdag 03 oktober 2013 @ 15:05:
bij mij lost:

code:

#broodkruimel {
   background: #eee;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
   overflow: hidden;
}

het probleem al op

Dit gaat niet werken omdat het middenpunt van de cikels niet 100% op dezelfde plek ligt en er dus een opening tussen de twee hoeken kan komen te liggen.

[MoietyMe]

Je kan het afzonderlijk afronden van hoeken ook met de shorthand doen:

Cascading Stylesheet:

.class {
  border-radius: 0 0 4px 4px;
}

border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

Overigens is het gebruik van de prefixes voor border-radius redelijk overbodig.

Volgende browsers ondersteunen het unprefixed:
IE 9+
FF 4+
Chrome 5+
Safari 5+
Opera 10.5+
iOS 3.2+
Android 2.2+

Dus ik zou zeggen bespaar jezelf 4 regels code per border-radius

Meer informatie: Border Radius over at W3C, Border Radius at Can I Use.

[incaz]

Arie- schreef op donderdag 03 oktober 2013 @ 15:24:
Dit gaat niet werken omdat het middenpunt van de cikels niet 100% op dezelfde plek ligt en er dus een opening tussen de twee hoeken kan komen te liggen.

Dit snap ik niet helemaal geloof ik. Border-radius is altijd in positie tot de border zonder radius, dus als je dat aan laat sluiten is er niets aan de hand. Block-element is standaard 100% breedt, dus geen padding dus op het buitenste element (of indien het onvermijdelijk is gecombineerd met een negative margin op de binnenste) moet goed komen.

[Rub3s]

Oplossing van RM-rf lijkt me idd ook wel de juist. Zou moeten werken lijkt mij!

[incaz]

Oh, ik snap dat van het middelpunt inmiddels. Je moet dan voor de binnenste radius = buitenste radius - border-width doen.
Dus 16px. (Als je sass of less hebt is dat extra makkelijk )

[Rub3s]

Ik vraag me af of dat nodig is. Volgens mij is de binnenste radius van die buitenste border gewoon 20px (de borderdikte werkt naar buiten). Aangezien dat binnenste vlak geen border heeft zou je gewoon ook daarvoor 20px kunnen opgeven, mits ik geen denkfout maak

[Arie-]

Ah kijk, dat klinkt logisch, diameter = straal+rand, zoals rand dikte overal in boxmodel meegerekend wordt, in dat geval zou het theoretisch wel moeten werken (als ook ik niets over het hoofd zie ). Ik heb echter de parent container uit mijn ontwerp gesloopt als oplossing.
Mbt. prefixes: ik ben uitgegaan van een template wat ik een paar jaar geleden ooit gemaakt heb, zelfs pie.htc zit daar nog in. Ook gradient wordt misschien wel 6 keer voor verschillende browsers geinitialiseerd. Ik weet wat betreft werken met css en html vaak wel wat (een soort van) gangbaar en geaccepteerd is, echter doe ik dit werk niet genoeg om precies ins en outs van elke techniek te kennen.