Autor | Zpráva | ||
---|---|---|---|
habendorf Profil |
#1 · Zasláno: 20. 1. 2006, 13:49:17
Zadání je jednoduché - viz http://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=7&topic=18 250
V levém sloupci je obrázek neznámé šířky. Obrázek má být zprava obtékán textem. Pokud je text vyšší, než je výška obrázku, nemá text pokračovat pod obrázkem, ale má být stále odsazen. Cílem je dokázat toto bez využití tabulek a jakéhokoliv skriptování, pouze pomocí css. Samozřejmě, že řešení musí být funkční alespoň v IE6, FF a Opeře. První úspěšný řešitel získává habendorfovu veřejnou pochvalu na této diskuzi :o) Hint: kdyby jste s tím chtěli praštit, vězte že je to SKUTEČNĚ řešitelné. |
||
peta Profil * |
#2 · Zasláno: 20. 1. 2006, 22:32:14
habendorf To vidim obtizne bez pouziti js v css. tam jde totiz o to, ze nesnas levou ani pravou sirku. V IE ti to samo pojede dobre, ale ve FF pochybuji, FF tusim striktne vyzaduje zadani marginu a kdy neznas sirku bloku nemuzes druhemu nastavit margin....
Pises tam, ze reseni mas, to bych chtel videt, fakt :) Hadam to na dost chyb a v podstate sireji nepouzitelne jen pro 1 rozliseni. |
||
PerToon Profil |
#3 · Zasláno: 20. 1. 2006, 22:36:54
Taky nad tím docela významně hloubám a dost se těším až to řešení prozradíš... fakt zajímavý problém...
|
||
Timy Profil |
#4 · Zasláno: 20. 1. 2006, 23:03:28
habendorf
Mám jednoduché řešení, ale nemůžu to rozchodit v IE :( #obrazek{float:left;} #text{display:table} |
||
PerToon Profil |
#5 · Zasláno: 20. 1. 2006, 23:13:46
Timy - ale takhle mi to funguje všude... promiň že zneužívám tvé řešení....
#content {width: 600px;} img {float: left; padding: 0px 20px 0px 0px;} #text {float: left; display: table;} |
||
Timy Profil |
#6 · Zasláno: 20. 1. 2006, 23:15:06 · Upravil/a: Timy
Habendorf
Tak už to mám, ale jako nevím, no. #obrazek{float:left;height:100%;} #text{float:right;display:table} <div id="obrazek"><img src="obrazek.jpg" width="750"></div> <div id="text"> text text text strašně moc textu </div> pozdě :( a ještě špatně... |
||
habendorf Profil |
#7 · Zasláno: 21. 1. 2006, 12:33:29
Takže abych to nějak shrnul:
peta: Hadam to na dost chyb a v podstate sireji nepouzitelne jen pro 1 rozliseni. Vůbec ne. Řešení je plně validní, na rozlišení nezávislé. Timy: 1. příspěvek - uvažuješ správně, jsi na dobré cestě. Už jen dotáhnout IE. 2. příspěvek - tam se snažíš pomoci si tím height, ale to fungovat stejně nebude. Vlastně sis to ohodnotil v závěru sám :o) PerToon: cesta je správná, ale něco tomu chybí - mě to nefunguje ve FF. Můžeš to kdyžtak vystavit někde na web? Ještě bych taky rád, abys tam neměl žádnou omezující šířku. Ještě tedy nemám pocit, že by tu bylo úplně kompletní správné řešení, ještě to tedy nechávám otevřené. Nicméně jste už blízko. Pokud mohu poprosit, ideální by bylo vaše řešení dávat na web a zde zveřejňovat formou linku. |
||
Timy Profil |
#8 · Zasláno: 21. 1. 2006, 12:41:22
habendorf
http://weblog.oflashi.net/item/habendorf.html To mé druhé řešení fungovalo, jenom to height:100% tam bylo zbytečné, proto jsem psal špatně :-). |
||
habendorf Profil |
#9 · Zasláno: 21. 1. 2006, 12:55:39 · Upravil/a: habendorf
Timy: Nepopírám že jsi blízko. Ale ty tam tu šířku obrázku zadáváš. A ještě jsem zapoměl jednu věc říct (a to byla chyba) - chtěl bych to v xhtml. A až přepíšeš doctype, rozpadne se ti to ve FF (proto jsem také psal, že to máš špatně - dosadil jsem to do svého kódu s xhtml doctypem a FF se rozpadl). Ale už to skoro máš, nevzdej to.
|
||
Timy Profil |
#10 · Zasláno: 21. 1. 2006, 13:09:46 · Upravil/a: Timy
habendorf
http://weblog.oflashi.net/item/habendorf.html Ale ty tam tu šířku obrázku zadáváš. Ale nijak se ji neřídím, pouze jsem ten obrázek zmenšil, bez zadání šířky to funguje úplně stejně. A ještě jsem zapoměl jednu věc říct (a to byla chyba) - chtěl bych to v xhtml. V XHTML to sice nemám, ale standard režim jsem tam vrazil, tak snad by Ti to už teď mohlo stačit :-). Tedy pokud nevadí podtržítkový hack... |
||
Pachollini Profil |
#11 · Zasláno: 21. 1. 2006, 13:20:04
Pochopil jsem to správně?
http://seky.nahory.net/soubory/etc/2-sloupce.html |
||
habendorf Profil |
#12 · Zasláno: 21. 1. 2006, 13:20:48
OK, již jsem spokojen :o)
Ještě bych se chtěl omluvit PerToonovi, jehož řešení je v html správné. Jak jsem říkal, dosadil jsem si ho do svého xhtml a tam nefungovalo, považoval jsem ho tedy omylem za špatné. Nehynoucí sláva tedy patří Timymu i PerToonovi. Tento thread jsem založil zejména proto, abych ukázal možnosti css - zdánlivě neřešitelný problém lze řešit velmi jednoduchým zápisem. Moje původní řešení (bez _hacku) je zde: http://habendorf.plavacek.net/pokusy/odsazeni/index2.html |
||
habendorf Profil |
#13 · Zasláno: 21. 1. 2006, 13:23:54
Pachollini: Ano, tvoje řešení je také správné. Jen poněkud zbytečně "nabobtnalé".
|
||
igamenir Profil |
#14 · Zasláno: 21. 1. 2006, 13:24:47
Něco mi asi uniká, ale ... v zadání je "bez využití tabulek" a řešení je "display: table". Není to na hlavu?
|
||
habendorf Profil |
#15 · Zasláno: 21. 1. 2006, 13:27:06
igamenir: Na hlavu to není. Tabulkou se rozumí html element table.
display: table je css vlastnost. Rozhodně se jedná o beztabulkový layout. |
||
Tomik Profil |
#16 · Zasláno: 21. 1. 2006, 13:27:56
igamenir
Přesně nad tím jsem teď přemýšlel. Jinak pěkný problém... Díky |
||
igamenir Profil |
#17 · Zasláno: 21. 1. 2006, 13:30:02
Když pominu historický vývoj kódu, co je TABLE jiného než HTML tag, který má defaultně vlastnost display nastavenou na table?
|
||
PerToon Profil |
#18 · Zasláno: 21. 1. 2006, 13:32:31
habendorf - Ale stejně sem si pořádně pohrál... Co takhle dávat sem častěji nějaký zajímavý problémy? Protože já opravdu dost znalostí získávám řešením problémů a dost mě to baví a ostatní by to taky ocenili jako procvičení znalostí....
|
||
Dero Profil |
#19 · Zasláno: 21. 1. 2006, 13:34:33
Když pominu historický vývoj kódu, co je TABLE jiného než HTML tag, který má defaultně vlastnost display nastavenou na table?
igamenir: Zapomínáš na sémantický význam. TABLE je tabulka sémanticky, display: table jen určuje styl vykreslování libovolného prvku. Tabulku z něj určitě nedělá. |
||
Timy Profil |
#20 · Zasláno: 21. 1. 2006, 13:34:56
igamenir
není podstatné, co má <table> za výchozí hodnotu, důležité je, že vyznačuje tabulku, což <div> nevyznačuje. Stejně tak by mohlo být považováno za nesmysl přestylovat <a> na blok a přesto to každý druhý dělá. |
||
Petra Profil |
#21 · Zasláno: 21. 1. 2006, 14:06:34
Já to asi nechápu :-) Měla jsem za to, že součástí problému je i situace, kdy text je kratší, tedy i případ, kdy je kratší než šířka řádku - ten sloupec by pak měl být natažený přes celou šířku zbytku, což ani jedno řešení myslím nesplňuje. Takže to chápu blbě nebo dáme druhé kolo? :-)
|
||
Pachollini Profil |
#22 · Zasláno: 21. 1. 2006, 14:15:01
habendorf: to je sice fakt, ale zase funguje i v Opeře 7.5, kde se to Timyho zobrazí pod sebou ;-)
|
||
habendorf Profil |
#23 · Zasláno: 21. 1. 2006, 14:19:08
Petra: Problémem právě bylo, aby dlouhý text nepodtékal pod obrázek. Krátký text nikdo neřešil :o)
Jestli ti dobře rozumím - ty chceš, aby pokud je v textu třeba jen jedno slovo, tak aby pravý div měl šířku až k okraji? Např. kvůli barevnému backgroundu? |
||
habendorf Profil |
#24 · Zasláno: 21. 1. 2006, 14:20:08
Pachollini: bezva!
|
||
Petra Profil |
#25 · Zasláno: 21. 1. 2006, 14:25:48
habendorf Ano, přesně to chci. A naopak na výšku chci, aby to bylo vysoké jen tolik, jako text :-)
|
||
habendorf Profil |
#26 · Zasláno: 21. 1. 2006, 14:41:17
Petra:
A naopak na výšku chci, aby to bylo vysoké jen tolik, jako text Což o to, to je. Ale s tou šířkou je to teda oříšek... |
||
Petra Profil |
#27 · Zasláno: 21. 1. 2006, 14:50:35
habendorf: No ono to právě asi není oříšek samostatně ani jedno, ale zároveň možná ano.
|
||
habendorf Profil |
#28 · Zasláno: 21. 1. 2006, 14:54:57
Petra: Stejně nechápu. Jak bys udělala tu šířku? Klidně zatím bez ohledu na výšku.
|
||
Petra Profil |
#29 · Zasláno: 21. 1. 2006, 15:07:53 · Upravil/a: Petra
|
||
habendorf Profil |
#30 · Zasláno: 21. 1. 2006, 18:43:25
|
||
Téma pokračuje na další straně.
|
Toto téma je uzamčeno. Odpověď nelze zaslat.
0