[jaskowice1]

Mireczki mam pytanie, jak zrobić taki myk - żeby było jak na załączonym obrazku.

Na zielono jest zaznaczony kontener wyśrodkowany, czyli chce uzyskać efekt tła np. tego żółtego z poza kontenera. Ktoś wie jak to zrobić?

#webdev #css #html

[zima65]

@jaskowice1: chcesz żeby żółte było z lewej?

[rbielawski]

@jaskowice1: chcesz, zeby żółte tło wychodziło od lewej strony ekranu i dochodziło do prawej krawędzi czerwonego elementu, który jest w zielonym, wyśrodkowanym?

[jaskowice1]

@rbielawski: @zima65: dokładnie tak :)

[zima65]

@jaskowice1: no to daj left na żółte i ustaw taką szerokość żeby wizualnie ci stykało do wyśrodkowanego czerwnonego

[rbielawski]

@zima65: hehe, a różne szerokości ekranu? :P

[jaskowice1]

@rbielawski: @zima65: RWD :) Na bootstrapie

[zima65]

@rbielawski: to niech da procentową szerokość

[rbielawski]

@zima65: a co jeśli wyśrodkowany zielony kontener ma max-width?

[oMatej]

@jaskowice1: pewnie można to jakoś lepiej rozwiązać, ale czy nie wystarczy zrobić po prostu tła podzielonego w połowie ekranu (na ten żółty i biały) nadpisanego tłem tych kontenerów (wtedy czarny kontener z białym tłem zakryłby część żółtego tła)? Tylko wtedy trzeba byłoby coś wymyślić, żeby czerwony i czarny kontener miały minimalną wysokość o wysokości ekranu :P

[rbielawski]

@jaskowice1: zrób ten czerwony element na position: relative i do niego pseudoelement na position: absolute, right: 0, zajebistą szerokością i tłem, jakie chcesz. Wydaje mi się, że nie znajdziesz lepszego rozwiązania przy RWD.

[jaskowice1]

@rbielawski: gites :D działa :)

[rbielawski]

@jaskowice1: wiem (⌐ ͡■ ͜ʖ ͡■)

[oMatej]

@rbielawski: co sądzisz o takim rozwiązaniu: https://jsfiddle.net/xp8b4b3t/3/ ?

[rbielawski]

@oMatej: jest spoko, ale jeśli @jaskowice1 jednak będzie chciał mieć w tle obrazek kiedyś (albo teraz mówił o jednolitym kolorze tylko dla uproszczenia), to trochę słabiej. Wolę bardziej 'generyczne' rozwiązania, bardziej przyszłościowe myślenie. ( ͡° ͜ʖ ͡°)

[Quanty]

@jaskowice1: te boxy chyba wiesz jak zrobić, a kolor tło z lewej na żółto otrzymasz miksowaniem pozycjonowania wraz z pseudo klasa :before