| 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 |
#2 · Zasláno: 13. 9. 2013, 15:27:27
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 |
#3 · Zasláno: 13. 9. 2013, 15:32:30
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 |
#4 · Zasláno: 13. 9. 2013, 15:39:30
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 |
#5 · Zasláno: 13. 9. 2013, 16:08:36
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 |
#6 · Zasláno: 13. 9. 2013, 16:27:12
|
||
| joe Profil |
#7 · Zasláno: 13. 9. 2013, 16:41:17
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 |
#8 · Zasláno: 13. 9. 2013, 16:56:47
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 |
#9 · Zasláno: 13. 9. 2013, 22:56:35
[#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 |
#10 · Zasláno: 14. 9. 2013, 02:09:12
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 |
#11 · Zasláno: 14. 9. 2013, 09:48:03
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 |
#12 · Zasláno: 14. 9. 2013, 16:38:56
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 :)
|
||
|
Časová prodleva: 11 let
|
|||
0