Autor Zpráva
Dvory59
Profil
Zdravím, mám dotaz.

Když mám obalovací div
#page
{
width : 1024px;
margin-left : auto;
margin-right : auto;
position : relative;

}

a v něm další divy, napři
#hlavicka
{width : 950px;
height : 150px;

margin-left : auto;
margin-right : auto;
margin-top: 2%;}

a napadlo mě, jestli když budu mít takto utvořený objekt "hlavicka" a v něm další, který budu pozicovat pomocí marginu s pixely, se mi pozice všech objektů ukážou na každém rozlišení obrazovky "stejně". Případně jestli ty bych neměl třeba ty vnořené divy pozicovat absolutně?

Děkuji za každou radu
jzikes
Profil *
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
Keeehi
Profil
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.
Tomáš123
Profil
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.
jzikes
Profil *
Keeehi:
To máš pravdu, na to jsem zapomněl. Ale zase mobilní verze stránky se většinou odděluje?
-j
Keeehi
Profil
jzikes:
Těch způsobů jak se přiblížit ideálnímu stavu je více.
Dvory59
Profil
Tomáš123:
Pecka, díky moc :)
Doufal jsem, že se někdo takhle rozepíše. Koukal jsem všude možně, ale byl jsem ze všeho zmatenej.

Já si v samotné té hlavičce poradím i s floatem, ale pak bude obsah a podobně, kde to bude potřeba trochu přesněji nasměrovat. Budu se teda držet toho marginu, snad se to na jiným rozlišení nebude nějak šíleně rozhazovat.
Dvory59
Profil
Chtěl bych se ještě zeptat na jednu věc.
Formátuji bloky tímto způsobem a mám trochu problém s tím jak to opět napozicovat.

Zkoušel jsem span, abych to mohl mít v jednom řádku, nicméně tam mi nefungovalo formátování(nevím proč), nyní to mám v divu.
Levý a pravý blok mám pomocí floatu a prostřední pomocí margin-left. Jakž takž to funguje, ale pak je trochu "problém" s tím textem.
Tam jsem to u prostředního "musel" text pozicovat absolutně, aby jsem to nastřelil tak jak má.

Nevíte prosím někdo, jestli to jde udělat snadněji?
Tomáš123
Profil
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: