[k.....m]

@kharim: Mircy, mam problem. Muszę zakodzić w HTML+CSS coś takiego jak w przykładzie. Chodzi mi o ten nagłówek dochodzący do lewej krawędzi ekranu, pomimo zawierania w sobie "wrappera" centrującego. Nakieruje ktoś w którą stronę iść? Albo przynajmniej co googlować?

#html #css #webdev

[epi]

@kharim: position: absolute może Ci się przydać ;)

[k.....m]

@epi: Ale jak wtedy zrobić, by treść nagłówka rozpoczynał się od lewej krawędzi "wrappera" (ciemniejsza część). Hm?

[laki1]

@kharim: margin-left

[k.....m]

@laki1: Nie zadziała, bo na każdym monitorze będzie inaczej ( ͡° ʖ̯ ͡°)

[Jurigag]

@kharim: a nie mozesz samego diva z napisaem wpakować w content ? ( ͡° ͜ʖ ͡°)

[epi]

@kharim: ja bym zrobił 2 divy :)
jeden byłby tłem nagłówka i znajdowałby się poza contentem
drugi byłby textem nagłówka i znajdowałby się wewnatrz contentu (i zaczynał tam gdzie trzeba z automatu)
oczywiscie do tego odpowiednie style, by się wszystko ładnie nakładało :)

[k.....m]

Nie mogę, bo wtedy będzie dochodził tylko do lewej krawędzi contentu, nie do krawędzi całego ekranu

[g.....g]

@kharim: jest wiele rozwiązań, zależy czy musi zachowana być przeźroczystość

[k.....m]

@gehog: Nie musi. Słucham Twoich pomysłów.
@epi: Też o tym myślałem, jednak jak wypozycjonować owe "tło"?

[epi]

@kharim: to jest najmniejszy problem :)
poczytaj o position: absolute i relative oraz top, bottom, left, right, z-index i jak się tego wszystkiego razem używa
to są absolutne podstawy :D

[k.....m]

@epi: Akurat znam to doskonale, jednak nie sądzę, by było to dobrym rozwiązaniem przy tak skomplikowanym projekcie.

[epi]

@kharim: jak uważasz ;)

[kondziow]

@kharim: zrob header relatywny, zamknij za nim centrowanie, wrzuc naglowek z position absolute no i za nim otworz centrowanie dla contentu

[Domons]

@kharim: ja bym tą "wystającą" część zrobił jako :before z
content:''; display:block; position:absolute; width:100%; left:-100%;
dla np h2 (nagłówka) i w h2 position:relative;

[k.....m]

@Domons: Właśnie szedłem w tą stronę. Chyba jednak najlepsze rozwiązanie.

[michael94]

@kharim: A jak bys zrobil 3 wiersze ? Jeden z header jeden na cala szerokość z naglowkiem i jeden podniesiony o wysokosc naglowka do gory ? :-)

[k.....m]

@michael94: tak, to tez by w sumie zadzialalo. Jednak juz skorzystalem z rozwiazania Domonsa. Dzieki bardzo wszystkim za inspiracje

[michael94]

@kharim: a skoro już zobrazowałem to prosze: https://jsfiddle.net/m77qt4mw/

[k.....m]

@michael94: trzebaby dopracowac, bo zobacz co sie dzieje po rozciagnieciu okna ;]

[wizu]

@kharim:
Ewentualnie możesz użyć czegoś takiego:

.naglowek {
padding-left: 3000px;
margin-left: -3000px;
}

do tego przydał by się jeszcze jakiś kontener na całą stronę z overflow: hidden; i ewentualnie min-width.
Wpływa to trochę negatywnie na wydajność, gdyż przeglądarka musi renderować szerszą stronę niż potrzeba.