Inteligentně flexibilní šířka layoutu

Zdar mástři, potřeboval bych poradit v jedné věci. Vše se nejlépe vyslětluje na příkladech, takže například máme:

<div style="width: 80%;">
<div style="float: left; min-width: 200px; max-width: 300px; height: 200px;">
nejaky text
</div>

<div style="float: left; min-width: 200px; max-width: 300px; height: 200px;">
nejaky text
</div>
.
.
.
</div>

No takže jak jste si už asi všimli máme tu jeden div s procentuelně danou šířkou a v něm libovolný počet divů s minimální a maximální možnou šířkou, pevně danou výškou a taky jsem z nich udělal plovoucí objekty(to aby se pěkně skádali za sebou do řádek) Tou minimální a maximální šířkou jsem chtěl docílit toho, aby se ty divy sami podle potřeby pěkně zužovali a rozšiřovali, aby na konci řádky nevznikala ošklivá mezera. Například když těch 80% je přesně 700px, tak by měly být vedle sebe jakoby na řádce 3 obdelníčky a každý by měl mít šířku 233px. Jenže ono to tak nefunguje, ono se to neroztáhne. Vždy mi to bere jen minimální možnou šířku a potom to tam hyzdí třeba 100px mezera.

já nevim co používáš za prohlížeč... nicméně ti tohlo nedoporučuju, protože min-width a max-width IE nepodporuje.... a vzhledem k tomu, že IE je většinovej, tak je blbost dělat něco, co ti nefunguje v IE.

V IE stejného efekto docílim pomocí expressions.

_width: expression(document.body.clientWidth<200? "200px" : (document.body.clientWidth>300? "300px" : "auto" ) );

Jde o to, že minimální a maximální šířka slouží tak trochu k jinému účelu. Minimální šířka je jakoby pevně stanovená. Pokud je vnitřek příliš široký, div se natáhne, nejvýše ale na max-width. Co je kolem, to ho moc nezajímá. Pokud chceš nějaké rovnoměrné rozložení divů, zkus všem těm divům dát šířku * nebo 100% (či tak něco) a dát je plovoucí vlevo hezky vedle sebe. Za výsledek neručím, možná je to kravina, ale zkusit to můžeš.

Jo kdyby to byla tabulka, bylo by to jednodušší :)))

No je pravda, že max a min-width je blbost, ale s tou * nebo 100% to taky nejde, proto6e ja to chci mit urcenou velikost a ne libovolnou. V tabulkach by to asi podle mich znalosti taky neslo, protoze je pevne dany pocet sloupcu. Takhle kdyz jsou plovouci layoutu, tak pri rozliseni 800x600 bude vedle sebe na radce treba 3 obdelnicky a pri rozliseni 1600x1200 by se tam melo treba nacpat 6. Takhle jsem to myslel, POTREBUJU(chci) to mit FLEXIBILNI.

No tak lidi! Ukažte co ve vás je, trochu nad tím popřemýšlejte. Vždyï by to nemělo být až tak složitý. Zde se podivte na příklad, jak to vlastnì vypadá:
http://pawel.chytrak.cz/layout.html

Vùbec nijak mě nenapadá, jak to přinutit pomocí CSS, aby se ty "prvky" patřičně roztáhli. Dokonce mi ani nijak nejde ty prvky vycentrovat doprostřed obrazovky :-((
Taky mě napadlo, že kdyby to roztáhnutí teda nijak nešlo pøes CSS, dalo by se to udělat "prasácky" pomocí JavaScriptů, muselo by se to prostě spočítat (na základě šířky okna, popř. X-rozlišení) a tuto hodnotu přiřadit jako styl dané CSS třídě. Jenže já opět nevím jak. Např. dejme tomu, že chci změnit třídu 'div.prvek'?
No a nakonec se také prosím podivte jakto že se výše uvedený příklad v MSIE vykresluje špatně - vnitøní div se zeleným okrajem je uříznutý zdola?!

Nedam pokoj, dokud mi tady nekdo neporadi jak to udelat!

Tak mi alespon reknete jak zmenit Javascriptem CSS styl. Mam napriklad CSS definici:

div.element{
color: white;
background-color: black;
}

No a chci zmenit pomoci Javascriptu napriklad pozadi u vsech divu, kde mam prirazen CSS styl element:

<div class="element">lfgkjdflkgjdf</div>

Jak?

Jinak jeste jak jsem psal ten odkaz na ten priklad:

http://pawel.chytrak.cz/layout.html

Musite si zkusit okno prohlizece zmensovat a zvetsovat, abyste pochopili o co mi jde.

Uz me fakt zacinate stvat. Jak mam zmenit JavaScriptem nebo cimkoli jinym definici CSS CLASS - kaskadove tridy (viz. priklad vyse).
PROOSSIMM POMMOOZTE!

možná by sis to mohl odšéfovat Péhápkem... jako že bys dal styly dle zjištěného rozlišení... byla by to práce, ale učíný.

OK, a jakou funkci v PHPku zjistim aktualni rozliseni monitoru nebo jeste lepe stranky?

podle mě jenom monitoru (stránky to myslim nejde) ale musíš samozřejmě počítat šířku všech divů + (doporučuji) 40px na skrolovací lištu a jiný blbosti prohlížeče -- to se musí rovnat rozlišení. ale pak tam ještě musíš dát else ("to nejmenší") pro případ nějakého nevšedního rozlišení. A esli má někdo zapnutou historii, tak je za a) blbej b) nevim o nikom, kdo by ji tam měl jentak pro nic za nic...

ale možná by se dalo zjistit rozlišení přímo stránky (i když o tom pochybuju), bylo by to supr...

Marcus Flintus >> napis jeste pls nazev te funkce, o ktere pises.

Jinak ja si vzdy myslel, ze PHP skripty se vykonávají striktne na serveru a ke klientovi dojde uz jen vygenerovany HTML kod (zajistena kompatibilita). Takze teoreticky by vubec nemelo jit zjistit pomoci PHP aktualni rozliseni monitoru ci sirku stranky - ale pokud to pujde, budu jedine rad :-))

nevim, zpaměti určitě neřeknu, ale zjistíš si rozlišení

(to je právě to, co nevim jak, je na to nějaká jednoduchá věc, něco na způsob, jako že IP vypíšeš takto:
echo ("$REMOTE_ADDR"); )

tak podobným způsobem si zjistíš rozlišení a pak to jenom napíšeš IFama, nebo SWITCHem

rozliseni u uzivatele nezjistis pres php, na to je potreba pouzit javascript

tak přes JavaScript... akorát nevim, jak se to napíchne na PHP..

Hodnoty ziskane JavaScriptem se do PHP, co ja vim, daji dostat pouze pomoci GET, POST nebo COOKIES. A tohle vyzaduje prechod na nejakou dalsi stranku, coz by v praxi znamenalo ze:
A) bud by musela byt najaka nudna a dnes casto kritizovana vstupni stranka, ktera by vytvorila hodnotu, kterou by dal poslala a tady ta hodnota by se v celym webu muselela valit ze stranky na stranku
B) z prvni strany by bylo automaticke presmerovani na stranku, ktera by uz i obdrzela x-Rozliseni a hodnota by se opet ale musela neustale predavat mezi strankami

Nebo by se to dalo taky udelat alespon o trochu elegantneji tak, ze by se externi CSS styl nepripojoval staticky v HEADU, ale dynamicky treba hned po BODY by se např. napsalo:

<script>
document.createStyleSheet('css.php?width=' + document.body.clientWidth, 1);
</script>

No a v css.php by to uz PHPecko zaridilo aby se hodnota z $_GET['width'] dostala na spravne misto :-))

Co vy na to?