CSS pozicování hlavních divů

Ahoj,
v grafice a celkové korektnosti webů nemám moc velké zkušenosti, ale do absolutního pozicování bych se úplně nepouštěl. Pokud vím, tak by se to mělo všude zobrazit stejně, jenom když by si šel pod těch 1024px, tak by si musel scrollovat (to už ale dnes je asi málo monitorů s tímto rozlišením).
-j

Dvory59:
Když použiješ pixely tak je jedno, jestli to posuneš pomocí marginu nebo absolutního pozicování.

Mít to všude stejně byl trend před mnoha lety. Mnohem důležitější však je mít to všude správně o což se dnes většinou snažíme.

jzikes:
„(to už ale dnes je asi málo monitorů s tímto rozlišením)“
Naopak, je jich mnohem víc a víc. Mám na mysli tablety telefony a jiná chytrá zařízení. Ty v nejvyšší třídě mají full-hd, ovšem spousta těch levných za pár tisíc to tak nemá. Další věcí je, že mobil mám na výšku takže tam musíš brát tu kratší stranu jako šířku stránky.

Dvory59:
„pozicovat pomocí marginu“
Pomocou marginov môžeš poziciovať aj bez užitia šiesteho riadku prvého kódu (position: relative). Relatívne poziciovanie spôsobí začiatočníkom iba problémy. Pozor s ním!

„Případně jestli ty bych neměl třeba ty vnořené divy pozicovat absolutně?“
To nie je „jestli třeba“. Každý prípad má svoje riešenie (a nanešťastie kombinácia metód nič neuľahčuje – ba naopak).

Začni tým, že vymažeš šiesty riadok. Potom porozmýšľaj, čo za obsah to v tej hlavičke máš, a či vôbec je poziciovanie či akékoľvek presúvanie prvkov po stránke potrebné. Ak áno, máš dve možnosti:
1. poposunutie marginom – vhodné pre eliminovanie menších rozdielov* (môže byť výhodné pri budovaní layoutu prispôsobivého zariadeniu, keďže pozície nie sú udané na pixel presne)
2. kombinácia relatívneho a absolútneho poziciovania – vhodné pre manuálne a presné naskladanie prvkov na mieru (výhodné pri zložitých častiach s veľkým množstvom prvkov, ktoré majú byť vo výsledku prezvláštne usporiadané a margin to nezvládne).

* Podobne, ako marginom, aj relatívnym poziciovaním sa dá prvok na stránke presúvať, ale rozdiel je očividný. Nehľaďme teraz na to, že zelený prvok zaliezol pod obrázok**. Zatiaľ čo pri použití marginu sa posunú oba prvky (lebo takto posunutý element zanechá svoje miesto voľné), lakomý relatívne poziciovaný prvok po odsunutí zaberá aj svoju pôvodnú pozíciu, čo zabraňuje nasledujúcemu prvku posun nahor.

**Relatívna rovnako ako aj absolútna a fixná pozícia spôsobuje, že sa prvok vyjme z toku dokumentu a navzájom s ostatnými prvkami na seba pozíciami nijako nevplývajú. Prvok sa ale zobrazí vo vyššej vrstve, preto prekrýva obrázok.

Keďže relatívne i absolútne poziciovaný prvok určuje hranice, odborne, počiatok súradnicového systému pre vnorené absolútne poziciované prvky musíme obaľovaciemu prvku (v tvojom prípade by som volil priamo hlavičku) jednu z týchto pozícií deklarovať. Absolútna je nevhodná, lebo prvok už viac nebude zaberať miesto (vyskúšaj si v ukážke porovnania marginu a relatívneho poziciovania nastaviť ju niektorému z prvkov nezobrazených na spodku), takže výsledok je jasný. Kombináciou relatívneho a absolútneho poziciovania sa teda myslí toto.

Keeehi:
To máš pravdu, na to jsem zapomněl. Ale zase mobilní verze stránky se většinou odděluje?
-j

jzikes:
Těch způsobů jak se přiblížit ideálnímu stavu je více.

Dvory59:
„Zkoušel jsem span, abych to mohl mít v jednom řádku, nicméně tam mi nefungovalo formátování(nevím proč)“
Lebo <span> je riadkový prvok. Keď mu ale nastavíš float automaticky sa zmení na blokový... Takže teoreticky aspoň dva z troch prvkov ti mali fungovať.

„Nevíte prosím někdo, jestli to jde udělat snadněji?“
Poziciovanie a obtekanie súčasne určite nie je potrebné. Prilož prosím živú ukážku tvojho popisu.