Autor Zpráva
Stalker
Profil
Ahoj,

živá ukázka: mcernak - nový design

plácám si tak nový design a zasekl jsem se u position:relative.

Vpravo na žlutém pozadí je text, který chci mít umístěn přesně tak, jak je. Nyní to mám udělané pomocí z-indexu a position:relative, jde to ale udělat nějak jinak, lépe?

Jde mi o to, že pak mi kvůli relativnímu pozicování vzniká dole díra, a celé schéma se prostě sype. Mohl bych ty spodní novinky opět vytáhnout pomocí relative, ale to je z bláta do louže. Neznáte někdo prosím nějaké lepší řešení?
joe
Profil
Ano jde, pomocí floatování elementů, které tam používáš, ale protože se ti ty dva elementy nevejdou vedle sebe, tak ten jeden posuneš nahoru přes relativní pozicování, to není vůbec chytré.

Máš tam nějaké problémy s neotevřeným tagem
Stalker
Profil
joe:
No jasně. Právě protože se nevejdou to pozicuji. Jak by chytřejší udělat?

Ty chyby opravím potom.

PS: Návrh číslo 2

V návrhu číslo 2 jsem dal position:relative celé aktuální novince, a v ní jsem absolutně napozicoval žlutý text. Tím pádem se mi to počítá od kraje aktuální novinky. V IE to je sice zatím rozhozený, ale funguje to. Nicméně nejsem si jist, jestli to je o něco lepší řešení?
_es
Profil
Stalker:
zasekl jsem se u position:relative.
Skús to spraviť bez toho, viď Relativní pozicování trápí začátečníky.
joe
Profil
V ködu máš stále toto </div><a/>, tak to prosím smaž, nejde se na to podívat v Chrome.

Jinak ne, máš to tam stále nějaké divoké.
Stalker
Profil
[#4] _es
Já bych to moc rád udělal bez toho. Nesnáším relativní, nebo absolutní pozicování, ale nevím jak to udělat bez toho právě.

[#5] joe
Smazal jsem to z toho kódu.
joe
Profil
Stalker:
Dobrá, tak tedy, #obrazek-a-okoli máš floatoaný vlevo. Ty elementy pod ním, tedy p a #cely-clanek zanoř do jednoho elementu, který bude floatován vpravo. Případně to můžeš nechat tak, jak to máš a jen ten odkaz na celý článek přesuneš do toho napravo floatovaného odstavce, odebereš mu clear: both; a zmenšíš šířku, tím se ti vejde napravo.
Trejpa
Profil
Stalker:
Tak jo, mrkneme se na to, jak by to šlo udělat bez relativního pozicování: Osobní stránky - příklad
Stalker
Profil
[#7] joe
Jakmile bych zmenšil šířku a vlezl by se mi napravo vedle toho bílého-průsvitného obdélníku, tak už bych to žluté pozadí neměl trochu zanořené pod ním ne? Teda, alespoň, když nad tím tak přemýšlím no. Nezkoušel jsem to, kouknu na to zítra jak vstanu, každopádně díky za tip.

[#8] Trejpa
Tý jo, celkem koukám, že sis s tím dal práci. Díky. Určitě se zítra kouknu pořádně na zdrojový kód a moc rád se něčemu přiučím.
joe
Profil
Stalker:
Aby to bylo opravdu tak překryté, jak chceš, musel bys k tomu ještě rozšířit rodiče, aby mezi floatovanými elementy bylo místo široké tolik pixelů, o kolik chceš, aby se elementy překrývaly.

Pak už stačí nastavit relativní pozici, například tomu levému a nastavit left na požadovanou vzdálenost.

Řešení Trejpy jsem psát nechtěl, protože spoléhá na to, že vyšší element bude ten, který nemá absolutní pozici. Pokud bys tomu absolutnímu zvětšil výšku, třeba dvojnásobně, bude zasahovat do elementů pod nimi. A já mám rád dynamické věci :-), proto se mi uvedený způsob nelíbí, i když ve tvém případě použitelný je.
Trejpa
Profil
joe:
spoléhá na to, že vyšší element bude ten, který nemá absolutní pozici
To kompenzuji pomocí min-height na obalovém elementu. Není to úplně dokonalé, ale na většinu případů, kdy bude fotografie zhruba stejně vysoká, to stačí.
joe
Profil
Trejpa:
Tady ale nejde o min-height, jako spíš o max-height. Pro tento případ je to zbytečné, ale když si několikrát zduplikuješ text v nadpisu "Jak to všechno začalo?", tak uvidíš co se stane :)

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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