CSS sloupcovy layout, dlouhy text roztahujici layout stranky

[Jey]

jedna se o stranky http://hanspaulka.wz.cz, pisu je v html 4.01, nicmene casem prepisu do xhtml
konkretne zde si otevrete odkaz s dlouhym clankem http://hanspaulka.wz.cz/index.php?article=1193384051

pouzivam minimalne upraveny klasicky sloupcovy layout, nacrtnu..



pricemz potrebuji aby se divy "left" a "right" roztahovaly do vysky(height) podle delky jejich obsahu. toho jsem docilil pomoci pouziti css vlastnosti min-height:723px; a _height:723px (coz je hack pro internet explorer, ktery nezna parametr min-height). to ale funguje ve firefoxu, v exploreru, ale uz ne v opere. viz obrazek.. jine reseni neznam.



styl vypada nejak takhle:

body {
background-color:#000000;
}
#page {
background-color:#5e82ac;
width:758px;
min-height:838px;
_height:838px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
}
#top {
background-color:#426082;
width:758px;
height:90px;
}
#middle {
background-color:#5e82ac;
min-height:723px;
_height:723px;
width:748px;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
}
#left {
background-color:#385c6c;
width:558px;
min-height:723px;
_height:723px;
float:left;
}
#right {
background-color:#385c6c;
width:185px;
min-height:723px;
_height:723px;
float:right;
}
#bottom {
background-color:#426082;
width:758px;
height:15px;
}

div #middle je vylozene pomocny a pokud by se ho slo zbavit, rad to udelam. nicmene potrebuji dosahnout zelene vysrafovaneho odsazeni. obsahem divu #middle je krome #left a #right i dalsi div, ktery ma pouze style="clear:both" .. napada me jestli je spravne umisteny?

dal se chci zeptat.. chapu to spravne ze css vlastnost .. top = margin-top? to same pro left?
a jeste jedna otazka.. jakou ma objekt defaultne nastavenou vlastnost position? mel jsem za to ze relative ale nejak mi to nesedi.. edit: aha tohle uz jsem nasel, position je defaultne nastaveno static.

[l_iNu$]

dal se chci zeptat.. chapu to spravne ze css vlastnost .. top = margin-top? to same pro left?

Chápeš špatně, margin je vnější okraj elementu(tedy odstup od ostatních elementů), kdežto vlastnosti left, top, right, bottom určují pozici elementu závislou na vlastnosti position (absolute, relative...)

[Jey]

Chápeš špatně, margin je vnější okraj elementu(tedy odstup od ostatních elementů), kdežto vlastnosti left, top, right, bottom určují pozici elementu závislou na vlastnosti position (absolute, relative...)

ano, rozumím. původně jsem chtěl napsat za určitých podmínek. za určitých podmínek lze obojí použít k dosažení stejné věci. právě jsem přemýšlel, zda by mi nepomohlo zrušit celý #middle a namísto toho dát position:relative pro #left a nastavit mu left:5px a pro #right dát také position:relative a nastavit mu right:5px; pak už jen vymyslet onu horizontální mezeru.. například pro #bottom nastavit position:relative a top:5px; a pak dat jeste top:5px pro left i right. zda by toto fungovalo? inu nápady mám, ale nemám ověřenou funkčnost, proto se ptám, než se do něčeho pustím. v momentálním stavu to bohužel není ono.

[visby]

skus dat za tie dva float divy toto:

<hr style="clear: both; display: none;"/>

casto mi to pomohlo, ked som kombinoval float elementy a normalne...

[Jey]

visby: jasne to funguje, ale pouze pokud nepouziju display, ale dam namisto toho visibility:hidden. a musim nastavit i parametry te cary, protoze treba explorer ji da rozmery podle sveho. takze to opet nevypada vsude stejne. toto reseni si ponecham v zaloze. verim, ze by to slo vyresit obratneji.

[Rainbow]

Mozno by sa dal pouzit display: table a display: table-cell. To som na nejakom webe pouzil, ked som chcel bocny panel roztahovat do vysky. Akurat to nefunguje v MSIE, tak na to som tam pridal nejaky hack.

[Smitka]

Na to by se mozna hodil jiny figl - pomoci background-image.
Zkusim popsat, jak bych to resil.
Do #middle bych dal obrazek na pozadi:

#left asi neplavaci, s marginem na prave menu a jeste do nej na konec nejakej prvek s clear:both, aby kdyby byl #right dlouhy, tak aby se natah...
Melo by to vypadat uplne stejne jako kdybys to ruzne natahoval...
Snad je to pochopitelne, kdyztak udelam nejaky priklad.

[Jey]

no to bych se z toho... jeste to nemam vyresene.. kdyz me neco napadne, nebo se rozhodnu neco pouzit, vzdy narazim na to, ze to v nejakem prohlizeci nakonec vypada jinak. pak vymyslim hacky a dalsi hacky a stejne jsem se zatim k vysledku nedobral.

promenliva delka #left a #right je resena pomoci parametru min-height, ktery musi mit nastaven i #middle a #page, aby se pripadne vse roztahovalo. + mam tu ten IE podrtzitkovy hack.

pokud chci pouzit clear:both, ktery nastavim prvku #middle, tak OPERA nepochopitelne vynecha margin-bottom prvku middle a neodsadi spodni listu - bottom, obrazek je v prvnim postu. jinde to funguje jak ma.

pokud pouziju samostatny div ktery dam za right, a dam mu vlastnosti clear:both;width:100%;height:1px;, pak to funguje(ale musi mit nastavene minimalne tyto rozmery) vsude krome IE - ten odsadi #bottom o dva radky, protoze pomocny div ma 2 zalomeni.
edit - to same mi dela i vodorovna cara - hr - coz jsem povazoval puvodne za 100% funkcni reseni

smitka: s tim obrazkem to chapu ale myslim ze by to nevyresilo popisovany problem.
nicmene nemuzu nechat float pouze u prvku #right doprava, a u #left ho zrusit, protoze #right pak neobteka prvek #left, jedine ze bych ho dal v kodu pred nej a to nechci/nemuzu.
pokud jsem zrusil float u prvku #right a nechal ho u #left, pak opet #right neobtekal left, ale byl pod nim.

jedine me snad napada zrusit ten margin pro middle, ktery slouzi jako pomocny a dat nejaky div nad nej treba obrazek sirka 100% vyska 5px, ktery tu mezeru proste vzdy udela a stejne tak dalsi stejny takovyto obrazek umistit i pod middle.

jeste pridavam holy kod webu, jestli neni nejaka bota tu, ale validator to bere

...
<body>
<div id="page">
<div id="top">
<? include ("top.php"); ?>
</div>
<div id="middle">
<div id="left">
<? include("left.php"); ?>
</div>
<div id="right">
<? include("right.php"); ?>
</div>
</div>
<div id="bottom">
<? include("bottom.php"); ?>
</div>
</div>
</body>
</html>

EDIT: objevil jsem velmi velmi zajimavy clanek s funkcnim resenim. je to sice nejspis opet nejaky druh hacku, protoze ty hodnoty marginu tam nedavaji smysl, ale vypada to ve vsech prohlizecich stejne. snad to bude aplikovatelne pro muj pripad.
http://tvorba-webu.zdarek.com/css/obtekani.php

[Smitka]

No, ja jsem stale presvedcen, ze by ti ty backgroundy mohly pomoct...
http://smitka.org/jey/

(je to jen na rychlo, jeste poladit nejaky paddingy a tak...)

[Jey]

aha .. dik smitka .. ze jsi me nasmeroval. udelam to podobne, jako radis. udelat ten horizontalni margin elegantne pomoci borderu a margin vertikalni pomoci obrazku je fakt dobry reseni.

jen co nechapu, je, ze mi najednou funguje ve vsech prohlizecich to tvoje vycentrovani pomoci body a text-align:center, co si vzpominam, tak jsem to dlouhosahle resil, az nasel ono doporuceni obalit cely obsah do framu, jako mam ja treba #page a nastavit mu margin-left:auto a margin-right:auto. coz to vycentrovalo. je videt ze mas prehled. protoze prave boy a jeho text-align:center mi nefungovalo ve vsech prohlizecich. ted funguje.

edit: no principialne to je ok, ale bohuzel je ted prvni v textu ten pravy sloupec namisto leveho coz neni zrovna to nejlepsi.

[Smitka]

Tak ono by melo fungovat margin:auto, ale IE (samozrejme) to nejak nebere, ale bere text-align:center, takze se to musi kombinovat...
Jinak asi bych doporucoval dat samotny texty do DIVu a teprve jim nastavovat paddingy, jinak kdyz paddingy pouzijes primo na #right a #left, tak se to zase v IE rozhodi...

Sice to pak bude, jak nekdo rika, CLASSicky DIVny, ale bude to fungovat bez problemu.

Jo a taky koukam, ze jsem si spletl strany a left je vpravo a obracene

[Smitka]

edit: no principialne to je ok, ale bohuzel je ted prvni v textu ten pravy sloupec namisto leveho coz neni zrovna to nejlepsi.

Jestli myslis ze je ve zdrojaku nejdriv pravej sloupec (a ne to jak jsem si poplet strany), tak neni nic jednodussiho, nez dat levej jako plavaci a pravymu nastvit margin-left aby se tam ten pravej vesel