Autor Zpráva
mav
Profil *
Ahoj, rozhodl jsem se přejít z tabulkového layouto do CSS. Četl jsem spoustu návodu a všude se objevuje něco jiného. Takže pozicovat absolutně, relativně, plouvoucími prvky (float)...? Vůbec se v tom nevyznám. Děkuji
habendorf
Profil
Pozicovat jen je-li to nutné, a to je málokdy.
Casero
Profil
mav
Nejčastěji se využívá float. ;)
mav
Profil *
Ok, tak to je fajn. Takže to znamená, pozicovat jen když je to nutné, tzn. radši vůbec, tzn. zůstaň u tabulek... Ne teď vážně co všechno a hlavně jak se tedy pozicovat ma? Kdyz mam grafiku, tak ji musim preci napozicovat do div oddilu , neni-liž pravda...
Casero
Profil
mav
Nejlepším učením a pochopením je si prohlížet zdrojáky kvalitních stránek.
tajny spion
Profil
Casero
Treba mych :D
mav
Profil *
Nepochybně, jenže zdroje kvalitních stránek jsou občas velmi složité pro začátečníka na pochopení...
mav
Profil *
Proč ne, jestli jsou kvalitni...:)
habendorf
Profil
Takže to znamená, pozicovat jen když je to nutné, tzn. radši vůbec,

Asi tak.

tzn. zůstaň u tabulek...

Proč? Ta tvoje logika je nějaká pochroumaná :o)
Dero
Profil
Treba mych :D

tajny spion: Pokud máš problémy zdržet se OT příspěvků (tohle zdaleka není první případ), čekej patřičnou reakci. Tohle je první varování.

Cítíš-li potřebu si povídat, doporučuji www.xchat.cz, chceš-li se pobavit, navštiv www.splachovac.cz. Lidé zde očekávají seriózní a erudované rady, nikoliv dohady a už vůbec ne rádoby vtipné řeči z cesty.
mav
Profil *
Takže zásadní otázka. Kdy je nutné pozicovat, a co do pozicování vůbec nepatří?
habendorf
Profil
Pozicovat je nutné u image replacementu, vysouvacích menu, bloků které nějak trčí mimo layout apod. Obecně to říci nelze.
mav
Profil *
A co tedy s ostatnímy prvky (nepřesahujícími bloky...)? Rád bych si ujasnil co ja vlastně ono "pozicovaní", aby jsme každý nemluvil o něčem jiném.
habendorf
Profil
No ostatní prvky uspořádáš dle grafického zadání. Využiješ asi zejména float a clear. Pod pozicováním rozumím použití position :o)
Dero
Profil
Kdy je nutné pozicovat, a co do pozicování vůbec nepatří?

Pozicovat je nutné v případech, které nelze řešit v přirozeném toku stránky či pomocí plovoucích boxů.

Vyjádřeno na ose: Přirozený tok => Float => Relativní pozicování => Absolutní /fixní/ pozicování

Dobrý kodér se snaží držet v rámci bezpečného kódu co nejvíce vlevo. Omluvou pro preferenci techniky z pravé části spektra před levou je pouze lepší podpora v prohlížečích nebo nějaká specifická situace. Například image replacement se dá vytvořit i pomocí plovoucích prvků, ale protože znám rozměry boxu i obrázku a protože je to napříč prohlížeči bezpečnější technika, použiji absolutní pozicování.
mav
Profil *
Už tomu začínám rozumnět.

ale protože znám rozměry boxu i obrázku a protože je to napříč prohlížeči bezpečnější technika, použiji absolutní pozicování.

Ale s absolutním pozicováním nastává problém při změně rozlišení. Nebo se pletu?

Pokud to dobře chápu z Vaší odpovědi float "vítězí" ale pokračujete Například image replacement se dá vytvořit i pomocí plovoucích prvků, což mě zase z mého přesvědčení odrazuje.

Omlouvám se že kladu, takto stupidní dotazy, ale rád bych tomu přišel na kloub.
Dero
Profil
Omlouvám se že kladu, takto stupidní dotazy, ale rád bych tomu přišel na kloub.

Tohle nejsou stupidní dotazy. Naopak - po delší době se někdo snaží dopátrat skutečně funkční metody výstavby CSS layoutu. Zeptat se je nejrychlejší cesta.

Ale s absolutním pozicováním nastává problém při změně rozlišení. Nebo se pletu?

To jen v případě, že absolutně pozicuješ (tykejme si zde na diskusi, prosím) v rámci prvku s proměnlivými rozměry. Například v rámci <body>, které dle rozlišení může být různě široké a dle obsahu různě vysoké. V takovém případě můžeš absolutně pozicovat jen on levého horního rohu, který je jediný pevný.

Absolutní pozicování je nevýhodné především proto, že absolutně pozicovaný blok je vyňat z přirozeného toku stránky, tedy neovlivňuje další prvky. Může je však překrývat. A to se právě hodí u image replacementu. Co víc, u něj znáš i rozměry obalového prvku, protože znáš i rozměry obrázku a potřebuješ, aby obrázek přesně a těsně překryl obsah boxu.

Pokud obalovému prvku nastavíš position: relative (nebo i absolute), vytvoří se v něm tzv. lokální souřadnicový systém. To znamená, že pokud jakémukoliv prvku v tomto obalovém nastavíš absolutní pozicování, tak se bude pozicovat v rámci obalového prvku (top: 0; left: 0; bude odpovídat levému hornímu rohu obalového prvku).

Tohle implementují všechny prohlížeče stejně, proto se vyplatí pro image replacement používat absolutního pozicování.

Pokud to dobře chápu z Vaší odpovědi float "vítězí" ale pokračujete Například image replacement se dá vytvořit i pomocí plovoucích prvků, což mě zase z mého přesvědčení odrazuje.

Image replacement je jen malou částečkou stránky a nedá se dost dobře počítat jako část layoutu. Je na layoutu nezávislý a dá se aplikovat kdekoliv. V tomto případě je třeba dobře zvážit pro a proti. Obecně se dá říct, že pokud znám rozměr(y) takového prvku, nemusím se bát absolutního pozicování. Pokud je neznám, floatuji.

V případě layoutu, tedy rozložení a kostry stránky, se jednoznačně preferuje použití plovoucích prvků, protože zůstávají v interakci s přirozeným tokem stránky.
habendorf
Profil
Osobně bych začal od základů a špeky jako IR si nechal na později.

Zeptat se je nejrychlejší cesta.
Možná. Zkusit to sám zase ta nejlepší.
mav
Profil *
OK, dík moc. Jdu zpracovat nové poznatky, myslím že už jsem udělal první krůček do tajů css jako prostředku k tvorbě layoutu. Zkusím něco vytvořit a už se těším na takovou super odezvu, jako jsem dostal k tomuto dotazu. Takže ještě jednou dík. Doufám, že zase někdy budu shopnej poradit já.
Dero
Profil
Možná. Zkusit to sám zase ta nejlepší.

Jednoznačně.

OK, dík moc. Jdu zpracovat nové poznatky, myslím že už jsem udělal první krůček do tajů css jako prostředku k tvorbě layoutu. Zkusím něco vytvořit a už se těším na takovou super odezvu, jako jsem dostal k tomuto dotazu.

Držím palce, ať se daří. Jen nebuď zklamaný případnou odezvou - je tu převaha rýpalů a frajírků nad konstruktivními rádci. Dneska jsi měl štěstí, že se Tě ujali habendorf a Casero.
Nox
Profil *
Znáte nějakou dobrou stránku kde se třeba podívat na layout?
j
Profil *
Dobrá učebnice, kde je přiloženo CD s příklady: Petr Staníček a kolektiv - CSS hotová řešení.
Railbot
Profil
Nox
http://css.interval.cz/layouty/
Nox
Profil
Měl sem sice na mysli jako normální stránky na inspiraci, ale v pohodě, děkuju

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:

0