Diskuze: Relativní pozicování divů

HTML a CSS HTML a CSS Relativní pozicování divů American English version English version

Avatar
*smoky*
Člen
Avatar
*smoky*:

Na monitoru mám dva obrázky vedle sebe, pod nimi čáru, ovšem když bude obrazovka malá a obrázky se budou prolínat, chtěl bych, aby se daly pod sebe a čára pod ně. Poradíte mi prosím, jak tohoto docílit?

Zatím kód mám takovýto:

<div style="position: absolute; width:100%;he­ight:15%">

<div style="position: relative; width:50%; float:left; height:50%; top:10%; margin: auto"><img src="obr1.png" height="130%" max-width= "70%"></div>
<div style="position: relative; float:right;wid­th:50%; height:50%; top:5%;"><img src="obr2.png" height="130%" max-width= "70%" style="float:right; margin-right:10%"></div>

</div>

<div style="position: absolute; width:99%;heig­ht:1%;top:15%;bac­kground-color:red;">

Odpovědět 24.1.2015 8:20
Pít, žít, umřít.
Avatar
Ori
Člen
Avatar
Odpovídá na *smoky*
Ori:

použi media query, alebo namiesto float, daj display:inline pre obe, a malo by to fungovať.

 
Nahoru Odpovědět  +1 24.1.2015 9:14
Avatar
*smoky*
Člen
Avatar
*smoky*:

media quary nemůžu použít, nevím velikosti obrázků, divů ani obrazovky, takže by to byl složitý vzorec a nejspíš by se mi to často rozesypalo.
Za radu display:inline velmi děkuji, pouze se mi poté ztrácí modrá čára, i přes nastavení relativní pozice a display:inlinu.
Zkoušel jsem jí nastavit i jiné vlastnosti, případně dát předchozí divy do nadřazeného divu a těm nastavovat vlastnosti, nicméně stále to nejde. Pomůžeš mi prosím ještě s tímto?

Nahoru Odpovědět 25.1.2015 11:09
Pít, žít, umřít.
Avatar
Odpovídá na *smoky*
Josef Kuchař (Pepa489):

aby se ti ta čára zobrazovala, musíš vytvořit tag

<div class="clear"></div>

a potom do css dát

.clear { clear:both; }
;)
Nahoru Odpovědět 25.1.2015 11:22
2x piš, jednou debuguj
Avatar
*smoky*
Člen
Avatar
*smoky*:

Pepa489 vyčištění nepomáhá. K divu s čárou jsem musel dát pozici relativní, nemohu ji nechat napevno.

Nahoru Odpovědět 25.1.2015 12:03
Pít, žít, umřít.
Avatar
TomasGlawaty
Člen
Avatar
TomasGlawaty:

a co použít flexbox?
divu, který obaluje oba obrázky nastavit

display: -webkit-inline-box;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;

-webkit-flex-flow: row wrap;
flex-flow: row wrap;

já jsem to předtím použil např. tady: http://hummers.8u.cz/index.php?…

Editováno 25.1.2015 14:13
Nahoru Odpovědět 25.1.2015 14:12
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
*smoky*
Člen
Avatar
Odpovídá na TomasGlawaty
*smoky*:

Panejo, takto nějak si to představuji, mockrát děkuju :-)

Nahoru Odpovědět 25.1.2015 14:44
Pít, žít, umřít.
Avatar
TomasGlawaty
Člen
Avatar
Nahoru Odpovědět 25.1.2015 15:13
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na TomasGlawaty
Tonda Kozák:

Víš o tom, že to nepodporuje ani IE 10?

 
Nahoru Odpovědět 25.1.2015 21:23
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na Tonda Kozák
TomasGlawaty:

Ano vím :)
přesněji, IE10 podporuje flexbox zapsaný starou syntaxí, ale nepodporuje vlastnost flex-flow, flex-wrap...

Nahoru Odpovědět 25.1.2015 22:16
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
mkub
Redaktor
Avatar
Odpovídá na Tonda Kozák
mkub:

IE nikdy nepodporoval novinky, cize to nie je nic noveho, ze MS zaostava to vo vsetkom, len blbne s blbym ovladanim svojho SW

 
Nahoru Odpovědět  +1 26.1.2015 3:50
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na mkub
Tonda Kozák:

Nejde ani tak o to, jestli zaostává, nebo ne (mimochodem dělá jen opak toho, co mu bylo dříve vyčítáno - čeká na konečnou specifikaci), ale o to, že tím odstřihne velkou část uživatelů. Mám dojem, že IE 10 je posledním IE, který můžou mít uživatelé Windows 7.

*smoky*
Nevím, jestli jsem dobře pochopil, o co se snažíš, ale takhle to jde udělat funkční pro všechny:
http://kod.djpw.cz/wwjb

 
Nahoru Odpovědět 26.1.2015 7:26
Avatar
Odpovídá na mkub
Michal Žůrek (misaz):

Vnesme do tvého názoru trochu objektivity.

IE nikdy nepodporoval novinky - IE novinky podporuje, ale pomalu a pozdě.

MS zaostava to vo vsetkom - ne nezaostává. Jen Linuxáci to tak vidí.

len blbne s blbym ovladanim svojho SW - obávám se, že se jádro znatelně mění, jen to nikdo nevidí a vlastně v podstatě většinu koncových zákazníků ani nezajímá, proto o tom tolik nemluví.

Každopádně když už chceš remcat jak jsou produkty MS na ho*no, tak by ses měl podívat proč takové jsou. Ten standart se vyvíjel, tehdy se nazýval Grid layout a ten i microsft implementoval do IE (nejspíš proto aby při uvádějí WinJS byla stejná možnost tvorby layoutů jako v C#). Pak někoho hodně chytrého napadlo, že by ten standart mohl být úplně stejný, ale mohli by ho přejmenovat (dodnes nechápu ten důvod, proč to přejmenovali, možná jenom mají rádi zmatek) na flexbox. Tím samozřejmě přejmenovali i všechny CSS vlastnosti, nicméně jen těžko můžeš přejmenovat něco v produktu, který je nasazen hlavně ve firmách, kde na něm běží přímo optimalizované weby (většinou různé intranety). Za žádnou cenu však nelze říct, že IE nepodporuje flexbox, podporuje, ale jmenuje se to jinak.

Nahoru Odpovědět  ±0 26.1.2015 15:55
Nesnáším {}, proto se jim vyhýbám.
Avatar
mkub
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
mkub:

v MS mas pravdu, novinky v specifikacii HTML pridava uplne ako posledny, kedto uz vsetci ostatni uz davno podporuju,
co sa tyka dalsich noviniek, to, co je pre uzivatelov MS softu nove, na poli Unixu je to uz zauzivane uz cele roky a mohol by som aj uviest zopar prikladov z historie, napr. o multiuseringu a multitaskingu si MS mohol este zdat, ked Unix tieto vlastnosti uz standardne ponukal, vlastne bol odzakladu stavany akoviacuzivatelsky a viaculohovy OS
a co sa tyka SWAPu? takisto to je technologia zhruba zo 60-tych, ci 70-tych rokov a bol pouzity v minipocitacoch a v tom obdobi kde bol MS? MS vtedy bolamalinka firma 1, ci 2 muzov a nemali este ziadny OS, jedine mali Basic pre Altair

 
Nahoru Odpovědět 26.1.2015 23:07
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 14 zpráv z 14.