Autor Zpráva
Robin2
Profil
Zdravím všechny,

potřebuji udělat 3 sloupcový CSS/XHTML layout, všechny 3 sloupce budou mít pevnou šířku. To by nebyl problém, potřebuji ale obsah středního sloupce umístit v XHTML kódu na začátek stránky.

Nastylované chci, aby to vypadalo takto:

[=================HLAVICKA==================]
[=LEVYSLOUPEC=][=STREDNISLOUPEC=][=PRAVYSLOUPEC=]
[=================PATICKA===================]

Ale v XHTML kódu takto:

[=STREDNISLOUPEC=][=PRAVYSLOUPEC=][=LEVYSLOUPEC=]
[=================HLAVICKA==================]
[=================PATICKA===================]

Stačí mi nástin, kterým směrem se ubírat.

Díky předem. R.
Anonymní
Profil *
napozicuj to absolutne, paticku pod to a hlavnimu divu dej position:relative a vycentruj... s pevnou sirkou no problem...
Robin2
Profil
Diky za odpoved,

moc tomu nerozumim. Ktery div napozicovat absolutne a kterymu divu dat position:relative a co vycentrovat? Zitra to budu resit, tak kdybys to jeste trochu osvetlil, tak bych to zitra vyresil. Diky.

Jinak jsem jeste nenapsal, ze cely ten layout ma byt zarovnany na stred.

R.
habendorf
Profil
napozicuj to absolutne
nesmysl

Je to velmi jednoduché:

right-and-middle
middle
right
cleaner
/right-and-middle
left
cleaner


.right-and-middle {float:right;width:yyy+zzz;}
.left, .middle, .right {float:left;width:xxx;}
.middle {width:yyy;}
.right {width:zzz;}
Robin2
Profil
Díky všem za odpovědi. Tak jsem to udělal takto, zatím pracovni/testovací verze. Zatím jsem netestoval, jestli je to validní.

body {margin: 0; padding: 0; }
.box {width: 950px; margin: 0 auto; }
.right-and-middle {float: right; width: 700px; }
.left, .middle, .right {float: left; }
.middle {width: 450px; background-color: red; }
.right {width: 250px; color: #fff; background-color: green; }
.left {width: 250px; background-color: yellow; }
.content {margin-top: 110px; }
.header {height: 100px; width: 950px; background-color: brown; position: absolute; top: 10px; }
.footer {background-color: silver; }
.cleaner {font-size: 0px; line-height: 0px; height: 0px; clear: both; }

<div class="box">
<div class="content">
<div class="right-and-middle">
<div class="middle">
MIDDLE
</div>
<div class="right">
RIGHT
</div>
</div>
<div class="left">
LEFT
</div>
<div class="cleaner">&nbsp;</div>
</div>
<div class="headr">
HEADER
</div>
<div class="footer">
FOOTER
</div>
</div>
habendorf
Profil
Chybí ti tam jeden cleaner, viz můj pseudokód.
Robin2
Profil
A jo, vidím, ale funguje to i bez něj :)
habendorf
Profil
A jo, vidím, ale funguje to i bez něj :)

Funguje. Ale až budeš chtít dát na .right-and-middle pozadí, rámeček atd., budeš nemile překvapen :o) Takže si ho tam dej, je to dobrá zásada.
jozob
Profil
habendorf
"budeš nemile překvapen"
Čo toľko tajností? :o)

Robin2
Len ho tam pekne daj, je to rozkaz! :o)
BTW: ak ho tam nedáš, rodičovský element už neudrží potomkov v náručí = floatovaní potomci opustia svojich rodičov a vydajú sa na cestu do džungle elementov. Ak tam dáš cleaner, pomôže rodičom zvládnuť situáciu s potomkami a tí už rodičov neopustia.
Robin2
Profil
Pánové vřelé díky, šlape to dobře :)

Napadla mě ještě jedna zapeklitá věc, potřebuji, aby na některých stránkcáh nebyl pravý sloupec a střední sloupec se natáhl do uvolněného prostoru. Jde to udělat nějak jednoduše abych nemusel dělat samostatné CSS konstrukce pro stránky kde ten pravý sloupec nebude?
Robin2
Profil
Našel jsem zatím řešení pro IE, kde pomocí expression, pokud neexistuje pravý sloupec, nastavím šířku middle na 100% jinak 450px; Pokud je vyplý JS nebo non IE browser tak má šířku 450px. Toto ale není ideální.

.middle {
background-color: red;
width: 450px;
width: expression(document.getElementById('right') == null ? "100%" : "450px");
}

Druhá možnost je přes JS na onload(); události nastavit šířku divu middle čemuž bych se ale chtěl vyhnout.

Ideální by bylo udělat to čistě v CSS ale to netuším, jak v non IE browserech zjistit, jestli pravý sloupec existuje nebo neexistuje.

Má někdo nějaký nápad?
habendorf
Profil
Robin2: JS ani expression není dobrá volba. Prostě si uděláš druhou šablonu, která bude obsahovat jen

right-and-middle
/right-and-middle
left
/left
cleaner

a do css vůbec nemusíš šahat. Jinými slovy, middle a right vypustíš a obsah druhého (pravého) sloupce dáš do right-and-middle.
Robin2
Profil
a do css vůbec nemusíš šahat. Jinými slovy, middle a right vypustíš a obsah druhéhé (pravého) sloupce dáš do right-and-middle.

Jo, to mi přijde jako dobrý řešení. Zkusím to.
PointFrost
Profil
zkoušel někdo řešit nebo ví někdo řešeni pro toto umistěni

[=================HLAVICKA==================]
[=LEVYSLOUPEC=][=STREDNISLOUPEC=][=PRAVYSLOUPEC=]
[=================PATICKA===================]

ale v xhtml takto:

[=================HLAVICKA==================]
[=PRAVYSLOUPEC=][=STREDNISLOUPEC=][=LEVYSLOUPEC=]
[=================PATICKA===================]

ovšem střední sloupec musí být roztahovaci (bez pevne šiřky, tim padem i celá stránka(i hlavička a patička))
ale bez hacků či absolutního pozicování ?

standartní css pro postaveni v xhtml:

[=================HLAVICKA==================]
[=PRAVYSLOUPEC=][=LEVYSLOUPEC=][=STREDNISLOUPEC=]
[=================PATICKA===================]

Nefunguje!

pravý sloupec se vždy drží dole pod středem a levym. Děkuji za odpovědi a různé nápady a řešení

popřipadě i danný layout jaky řeší autor, ale roztahovací (ne pevnou šiřkou) layout. diky
Toto téma je uzamčeno. Odpověď nelze zaslat.