prisiljen koristiti tablicu za layout??

[Sulien]

Problem: 2 kolumne, lijevo slika koja je varijabilne veličine, desno kolumna teksta. Ne želim da se tekst omota oko slike, želim da imam efekt dvije kulumne, ali problem je što ne znam koliko je slika velika.



Problem CSS float modela je što ovisi o apsolutnim širinama kolumni - jedna se ne može prilagođavati drugoj, odnosno jedna se ne može skraćivati kako se slika povećava (što smo lijepo imali kod tablica).

Jesam li lud; postoji li rješenje, ili natrag dobrim starim tablicama?

Note: svjestan sam da mogu skriptirati, makar bi rješenje imalo dvije linije JS koda, stvar je principa

[r3dsc0rpi0n]

Sulien wrote:

Ne želim da se tekst omota oko slike, želim da imam efekt dvije kulumne, ali problem je što ne znam koliko je slika velika.

Zelis text ispod slike ili desno od slike?

Nested divs?

Ako ce slika bit sira od 500px rasirit ce "vanjski" div sa textom ...

[Sulien]

Želim tekst desno kako je prikazano u dijagramu. Container za oboje je fiksne širine.

Nisam siguran na što misliš sa 'nested divs'... Ali ako se slika povećava širina teksta se smanjuje, a ne povećava

[lekke]

well... estetike radi, ogranici dimenzije slike

[Sulien]

Ograničene su! Ali mogu biti manje od maksimuma

[Sulien]

Mislio sam da sam jako pametan pa sam probao sa faux column hackom (sivi div sa fix dimenzijama predstavlja sliku varijabilne veličine):

http://odin.irb.hr/~mislav/test.html

Makar background ide skroz do dolje, text ipak wrapa unutra

[r3dsc0rpi0n]

Sorry gledo sam na LCD-u a na njemu nemam taj spektar boja CRT rulz

Evo sto sam ja dobio

Ali naravno kad povecas sirinu diva slika, text ode ispod slike jer ga container od 500px drzi...kolko sam shvatio ne zelis da se sirina texta smanji sto sam ja dobio ali container stvara probleme...

[carr]

ja sam img stavio unutar nekog div-a kojem sam pritisnuo height: 100% i floatao ga lijevo (od teksta)

jedini je problem sto "height: 100%" vrijedi samo za viewport, tako ako ima jako puno teksta, tocnije vise od viewporta, stvar puca i tekst se pocne "podvlaciti" ispod slike.

[keye]

jel ti sirina fiksna??
stavi img u div ko sto je car reko.
prakticki imas dva diva koji su kolone a div na desno ti je margin-left toliko koliko je sirok ovaj lijevi div sto ima sliku i onda se text nece podvlacit.

[Sulien]

scorpion: fundamentalna mana tvog rješenja je što ono što je floatano desno ima fixnu širinu

Carr: to je i meni palo na pamet, kao što kažeš nije bulletproof ali možda bude koristilo

Keye: fundamentalna mana toga je što moram specificirati taj tvoj margin-left, a to si ne mogu dozvoliti pošto ne znam kolika je slika

Izgleda da CSS jednostavno nije za to. Ako želim da content (u ovom slučaju slika) rasteže kolumne jednostavno ću morati koristiti tablicu za ovaj layout. Jedna tablica za multicolumn layout nije toliko zlo ako je nužna, zlo postaju nestane tablice za layout.

[Gale]

uvijek to možeš riješiti server side 500 - getimagesize($slika)

[carr]

Gale wrote:

uvijek to možeš riješiti server side 500 - getimagesize($slika)

genijalno.
nemogu vjerovat kolko sam tupav da se ovog nisam sjetio.

[Sulien]

Gale: mislio sam client side (javascript) jer mi je server side malo skupo

Ali počeo sam spremati uz slike u bazu i njihove dimenzije pa mogu napraviti i taj select ako budem odlučio podržat i ljude sa isključenim

[pepa.UP]

Sulien wrote:

http://odin.irb.hr/~mislav/test.html

ak ti nije bitan safari, probaj ovaj css na svom primjeru

Code:

body { text-align: center; } #wrap   { text-align: left; width: 500px; margin: 0 auto; border: 1px solid #999; } #sid    { display: table-cell; float: none !important; float: left; background-color: #eee; } #con    { display: table-cell; float: none !important; float: left; padding: 0 10px; }

[Sulien]

Ou jea, to je rješenje!
A kaj se desi u safariju?

The thing is, nisam se ni usudio igrat sa table-cell jer sa time uvijek problema sa IE, ali vidi se da si to raščistio.

Sad idemo to primijenit na pravi svijet, pa vidjet kako se drži - report stiže!

[Gale]

Vidim na onom linku da si sredio ali evo jednog lošeg rješenja:

var slika = document.getElementById('slika').width;
document.getElementById('con').style.width = 500 - slika + 'px';

[retro_one]

Sulien wrote:

Ali počeo sam spremati uz slike u bazu i njihove dimenzije pa mogu napraviti i taj select ako budem odlučio podržat i ljude sa isključenim

Kao BLOB ili samo lokaciju?

[Sulien]

BLOB... hehe