[CSS] Sidebar achtergrond, buiten de sidebar

[TheNephilim]

Je kent ze wel, een achtergrond voor een element die eigenlijk niet zo groot is als de achtergrond zou doen vermoeden. Nou hier ben ik al even mee bezig, maar heb nog geen mooie oplossing gevonden.

Situatie

Ik gebruik Bootstrap en daarbij ook het grid dat erbij zit. Binnen de container van 1200 pixels breed zitten twee kolommen, waarvan de één groot en de ander klein; content en sidebar. De sidebar moet een achtergrond krijgen, of beter gezegd; een achtergrond moet verticaal uitlijnen met de sidebar.

Dat wil best lukken, maar je zit met de ruimte buiten de container. De container zelf is 1200 pixels breed, maar afhankelijk van de schermresolutie is de ruimte eromheen (wrapper) groter.

[000[XXXXX]000]

Zoals hierboven te zien, de XXXXX is de ruimte binnen de container en de 000 staat voor ruimte links en rechts erbuiten.

Bedoeling

De achtergrond moet vanuit de laatste 2 X'jes naar buiten. Dus XX]000 Hoe groot 000 is weet ik niet.

Oplossing

Een percentage gebruiken en met media queries het percentage aanpassen zodat het altijd ongeveer wel klopt. Maarja, dat is enorm bewerkelijk natuurlijk...

In deze JSFiddle heb ik het probleem heel basic uitgewerkt, alleen is daar geen ruimte rondom de container. Maar het geeft het probleem in ieder geval weer, waarvoor er hier iemand is met een oplossing, hopelijk!

http://jsfiddle.net/ymmhg6rf/

[Toulouse]

Ik begrijp het misschien niet helemaal goed. Maar je wilt dus de sidebar (col-xs-4) een achtergrond geven, maar deze achtergrond moet doorlopen naar rechts (tot het einde van het scherm)?

Ik denk niet dat dit met css op te lossen is, je zult dan javascript moeten gaan gebruiken om de margin van het container element te krijgen.

code:

var container = document.getElementById("the-container");
var style = window.getComputedStyle(container);
var marginRight = style.marginRight;
document.getElementById("sidebar-bg").style.marginRight = "-" + marginRight;

http://jsfiddle.net/ymmhg6rf/3/

[R4gnax]

Gebruik display: table om kolommen met gelijke hoogte voor elkaar te krijgen.

offtopic:
Waarom Bootstrap met haar idee van aparte row containers dit niet standaard doet ipv een constructie met floats? Joost mag het weten...

Daarna in je sidebar kolom een ::before pseudo-element gebruiken i.c.m. width:100vw om een vlak op te spannen dat zover als je hele viewport (scherm) spant. Het teveel snijdt je weer weg door je container overflow:hidden te geven...

http://jsfiddle.net/ymmhg6rf/5/

Werkt 100% in IE9+, Firefox, Chrome.

Als je aanneemt dat IE8 gebruikers niet met een hogere resolutie dan Full HD je site zullen gaan bekijken, dan gebruik je de oude [mono]:before[/i] pseudo-class notatie i.c.m. width:1920px als fallback. Dit idee zit ook in bovenstaande fiddle revisie verwerkt.

[TheNephilim]

Pfoe, het is ontzettend druk! Dus had nog geen tijd om inhoudelijk te reageren, maar bij deze!

Toulouse schreef op maandag 10 november 2014 @ 16:34:
Ik begrijp het misschien niet helemaal goed. Maar je wilt dus de sidebar (col-xs-4) een achtergrond geven, maar deze achtergrond moet doorlopen naar rechts (tot het einde van het scherm)?

Ik denk niet dat dit met css op te lossen is, je zult dan javascript moeten gaan gebruiken om de margin van het container element te krijgen.

code:

var container = document.getElementById("the-container");
var style = window.getComputedStyle(container);
var marginRight = style.marginRight;
document.getElementById("sidebar-bg").style.marginRight = "-" + marginRight;

http://jsfiddle.net/ymmhg6rf/3/

JavaScript is eigenlijk geen optie. De website is ook responsive en op smartphones wil je zo min mogelijk met JavaScript doen. Nou vervalt misschien de achtergrond van de sidebar voor smartphones, maar toch.

R4gnax schreef op maandag 10 november 2014 @ 23:59:
Gebruik display: table om kolommen met gelijke hoogte voor elkaar te krijgen.

offtopic:
Waarom Bootstrap met haar idee van aparte row containers dit niet standaard doet ipv een constructie met floats? Joost mag het weten...

Daarna in je sidebar kolom een ::before pseudo-element gebruiken i.c.m. width:100vw om een vlak op te spannen dat zover als je hele viewport (scherm) spant. Het teveel snijdt je weer weg door je container overflow:hidden te geven...

http://jsfiddle.net/ymmhg6rf/5/

Werkt 100% in IE9+, Firefox, Chrome.

Als je aanneemt dat IE8 gebruikers niet met een hogere resolutie dan Full HD je site zullen gaan bekijken, dan gebruik je de oude [mono]:before[/i] pseudo-class notatie i.c.m. width:1920px als fallback. Dit idee zit ook in bovenstaande fiddle revisie verwerkt.

Dat is wel een heel erg mooie oplossing! Al wil ik liever niet teveel aan het grid-systeem van Bootstrap wijzigen, dat is niet zo handig vind ik zelf.

Maar ik ga dit wel even proberen, gewoon om even te kijken of het wel/niet wat anders breekt.

Op dit moment heb ik met media queries een steeds aanpassend percentage om hem ongeveer op de goede plek te houden. Mocht iets anders niet werken en ik verder geen oplossing vinden, dan is dat voorlopig in ieder geval een oplossing.

[Zoefff]

Als het om effen kleuren gaat (dus geen achtergrondafbeelding) zou je ook een gradient zonder verloop (dus alleen twee vlakken) op de body kunnen zetten. Het linker deel van de gradient zorgt voor aanvulling van de achtergrond zoals in je content; het rechter deel vult de sidebar aan.

Basic voorbeeld:

HTML:

<html>
    <body>
        <section>Content</section>
        <aside>Sidebar</aside>
    </body>
</html>

Cascading Stylesheet:

html {
    /* "gradient" met rood van 0 tot 50% en blauw van 50% tot 100% */
    background: linear-gradient(90deg, red, red 50%, blue 50%, blue 100%);
}

body {
    width: 200px;
    margin: 0 auto;
    display: flex;
}

section {
    width: 70%;
    background: red;
    border: 1px solid green;
}

aside {
    width: 30%;
    background: blue;
    border: 1px solid green;
}

En een bijbehorende fiddle ter illustratie. Het mag duidelijk zijn dat deze oplossing alleen handig is als:

• De content altijd een achtergrond heeft zodat het niet uitmaakt dat de gradient op 50% zit
• De content en sidebar altijd 100% hoog zijn zodat je wederom de overgang van de gradient niet ziet

Uiteraard kan je spelen met de positie van de overgang in kleur, maar zolang je sidebar nooit breder wordt dan de content, zit je met 50% altijd goed. Hoe dan ook denk ik dat dit een betere oplossing is dan een oplossing waar je extra hulpelementen en / of javascript nodig hebt

[R4gnax]

Zoefff schreef op woensdag 12 november 2014 @ 14:43:
Als het om effen kleuren gaat (dus geen achtergrondafbeelding) zou je ook een gradient zonder verloop (dus alleen twee vlakken) op de body kunnen zetten. Het linker deel van de gradient zorgt voor aanvulling van de achtergrond zoals in je content; het rechter deel vult de sidebar aan.

uhmm... Een pagina-wijde gradient?
Ja; da's lekker voor de performance, zullen we zeggen?

[Zoefff]

R4gnax schreef op woensdag 12 november 2014 @ 20:40:
[...]


uhmm... Een pagina-wijde gradient?
Ja; da's lekker voor de performance, zullen we zeggen?

Ja, zeg maar? Onderbouw je opmerking met een bron / testcase?

Een testcase voor Firefox (i.v.m. gebruikte prefixes) wijst in ieder geval uit dat het géén impact op de performance heeft. Het genereren van 1000 gradients in een header gaat even snel of sneller dan het gebruiken van 1000 achtergrondafbeeldingen.

Daarnaast lijkt me (maar dat kan ik zo snel niet onderbouwen) dat de "gradient" die ik in mijn testcase gebruik zelfs nog veel simpeler te renderen is omdat het maar 2 vlakken zijn in plaats van een echte gradient

[TheNephilim]

Dat is ook zeker een interessante oplossing, maar omdat content en sidebar alsnog 100% hoog moeten zijn, blijf ik hetzelfde probleem een beetje houden. Anders zou een extra element, die absoluut gepositioneerd is in de sidebar zelf ook wel voldoen. Heel breed maken en dan overflow op de wrapper verbergen.

Op dit moment heb ik de bewuste pagina voorzien van de oplossing die R4gnax aandroeg. Even kijken of dat problemen oplevert, met andere elementen en zeker responsive verwacht ik wat issues.

[Zoefff]

Dat de content en sidebar 100% hoog moeten zijn heb ik bewust niet in m'n testcase opgenomen om het zo simpel mogelijk te houden, maar dat kan je natuurlijk ook eenvoudig toevoegen. Zie de aangepaste testcase om het geheel ook verticaal uit te rekken

[R4gnax]

Zoefff schreef op donderdag 13 november 2014 @ 10:57:
[...]

Ja, zeg maar? Onderbouw je opmerking met een bron / testcase?

Een testcase voor Firefox (i.v.m. gebruikte prefixes) wijst in ieder geval uit dat het géén impact op de performance heeft. Het genereren van 1000 gradients in een header gaat even snel of sneller dan het gebruiken van 1000 achtergrondafbeeldingen.

Daarnaast lijkt me (maar dat kan ik zo snel niet onderbouwen) dat de "gradient" die ik in mijn testcase gebruik zelfs nog veel simpeler te renderen is omdat het maar 2 vlakken zijn in plaats van een echte gradient

Vergelijk even een gradient met een solide achtergrond vlak en niet met een achtergrondafbeelding.

Hou er daarna even rekenening mee dat die gradient bij breedte wijziging helemaal opnieuw geschilderd moet worden en alles, maar dan ook alles wat er overheen gezet wordt op z'n minst opnieuw door de compositor heen moet en vervolgens door de rasterizer. Als de content van je site niet opgedeeld is in meerdere compositor lagen (bijv. geforceerd door een CSS3 transform toe te voegen) dan kan het zelfs goed zijn dat bij elke pixel verschuiving alles vanaf nul opnieuw getekend gaat worden.

Vergelijk dat met een achtergrond vlak dat enkel achter de sidebar uit naar rechts uitsteekt waar verder geen content opnieuw overheen gezet hoeft te worden en alles grotendeels veel simpeler af te handelen is door enkel de compositor en rasterizer.

[ Voor 8% gewijzigd door R4gnax op 15-11-2014 16:37 ]

[TheNephilim]

Zoefff schreef op vrijdag 14 november 2014 @ 14:36:
Dat de content en sidebar 100% hoog moeten zijn heb ik bewust niet in m'n testcase opgenomen om het zo simpel mogelijk te houden, maar dat kan je natuurlijk ook eenvoudig toevoegen. Zie de aangepaste testcase om het geheel ook verticaal uit te rekken

display: flex; is een mooie oplossing, maar nog net niet bruikbaar in productie. Met name omdat IE9 dat niet ondersteund en ik bang ben dat dat nog net even te vaak voorkomt.

Overigens gaat de oplossing van R4gnax ook niet door. Het is al een beetje buggy in Chrome, met padding/margins etc. Maar in FireFox werkt het helemaal niet...

Ik haal de achtergrond voorlopig even weg, moet nog maar eens zien of ik dat op kan lossen.

[Zoefff]

Laat je niet misleiden door mijn gebruik van flexboxes. De oplossing die ik aandraag is het gebruik van een gradient om je achtergrond te tekenen op 50/50% zodat je links en rechts van je content de juiste kleur achtergrond hebt.

Of je vervolgens de content met flexboxes of floats of hoe dan ook in kolommen weergeeft doet er verder niet toe. Ik heb in m'n voorbeeld flexboxes gebruikt omdat ik daarmee snel even een tweekoloms layout in elkaar kon zetten, maar floats doen het natuurlijk net zo goed (zij het met wat extra code).

Wat betreft R4gnax' opmerking over de performance ben ik sceptisch of je dit in een real life situatie gaat merken. Ik begrijp je punt (dank voor de duidelijke uitleg) dat het meer rekenwerk vergt, maar ook in een complexere testcase kan ik er geen enkel merkbaar verschil in rendersnelheid vinden.

[TheNephilim]

Zoefff schreef op maandag 01 december 2014 @ 13:14:
Laat je niet misleiden door mijn gebruik van flexboxes. De oplossing die ik aandraag is het gebruik van een gradient om je achtergrond te tekenen op 50/50% zodat je links en rechts van je content de juiste kleur achtergrond hebt.

Of je vervolgens de content met flexboxes of floats of hoe dan ook in kolommen weergeeft doet er verder niet toe. Ik heb in m'n voorbeeld flexboxes gebruikt omdat ik daarmee snel even een tweekoloms layout in elkaar kon zetten, maar floats doen het natuurlijk net zo goed (zij het met wat extra code).

Voor de verdeling links en rechts maakt dat inderdaad niet uit, maar als ik me niet vergis los je met de flexboxes wel het height: 100%; probleem op.