« 1 2 »
Autor Zpráva
habendorf
Profil
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 *
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
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
habendorf
Mám jednoduché řešení, ale nemůžu to rozchodit v IE :(

#obrazek{float:left;}
#text{display:table}
PerToon
Profil
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
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
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
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
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
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
Pochopil jsem to správně?
http://seky.nahory.net/soubory/etc/2-sloupce.html
habendorf
Profil
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
Pachollini: Ano, tvoje řešení je také správné. Jen poněkud zbytečně "nabobtnalé".
igamenir
Profil
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
igamenir: Na hlavu to není. Tabulkou se rozumí html element table.
display: table je css vlastnost. Rozhodně se jedná o beztabulkový layout.
Tomik
Profil
igamenir
Přesně nad tím jsem teď přemýšlel.

Jinak pěkný problém...
Díky
igamenir
Profil
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
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
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
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
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
habendorf: to je sice fakt, ale zase funguje i v Opeře 7.5, kde se to Timyho zobrazí pod sebou ;-)
habendorf
Profil
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
Pachollini: bezva!
Petra
Profil
habendorf Ano, přesně to chci. A naopak na výšku chci, aby to bylo vysoké jen tolik, jako text :-)
habendorf
Profil
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
habendorf: No ono to právě asi není oříšek samostatně ani jedno, ale zároveň možná ano.
habendorf
Profil
Petra: Stejně nechápu. Jak bys udělala tu šířku? Klidně zatím bez ohledu na výšku.
Petra
Profil
Zhruba asi takhle: http://www.webtvorba.cz/float-obrazku.html

(nějaké ty pixely sem tam neřeším :-)
habendorf
Profil
Petra: http://habendorf.plavacek.net/pokusy/odsazeni/index3.html
« 1 2 »
Toto téma je uzamčeno. Odpověď nelze zaslat.