Autor Zpráva
Volda
Profil
Zdravim vsechy,
mam takovej problemecek a uz si s tim nevim rady projizdim tohle forum a nejako se mi to jeste nepovedlo udelat.
Potrebuju layout se 3 sloupci a chci aby vysky vsech sloupcu byly vzdy stejne i za predpokladu ze jeden nebude mit dostatecnej obsah (muze se stat, ze levej panel ma tolik odkazu a nekdy obsah nemusi obsahovat tolik....)doufam ze jste me tak nejak vstrebaly.
Zkousel jsem to obalit do jednoho divu

.left, .right{width:200px;height:100%;background:green;}
.left{float:left;}
.obsah{width:300px;height:100%;background:red;float:left}
.okolo{width:703px;background:green;}

<body>
<div class="okolo">
<div class="left">
left<br>left
</div>
<div class="obsah">
obsah
</div>
<div class="right">
right
</div>
</div>
</body>


predem dekuji za kazdou odpoved...
s pozdravem Volda
Plaváček
Profil
Vstřebali jsme to a to na diskusi se řešilo už mockrát. Kýženého efektu dosáhneš obrázkem na pozadí nejvýše umístěného bloku, který bude simulovat stejnou výšku sloupců. To v případě, že celý web má pevnou šířku. Pokud plánuješ na šířku plovoucí layout, máš trochu problém. Nejlépe to asi shrnul Vít Dlouhý zde http://www.vitdlouhy.cz/weblog/2004/06/3-stejne-vysoke-sloupce-tabulky -jsou-vhodnejsi.php

Ještě dodám, že podrobně se problematikou layoutů zabývá kniha, na které jsem se skromným dílem podílel, a kterou vřele doporučuji ke koupi http://knihy.cpress.cz/Pocitac/Book.asp?ID=1394 .
house
Profil *
Ještě dodám, že podrobně se problematikou layoutů zabývá kniha, na které jsem se skromným dílem podílel, a kterou vřele doporučuji ke koupi http://knihy.cpress.cz/Pocitac/Book.asp?ID=1394 .


hele to vypadá dobře :) já měla 1 knihu z knihovny, ale pak jsem stejně šla na jakpsat web, protože tam byl jen základ, ale důležité a hlavně praktické věci každodenní potřeby tam chyběly.....
Volda
Profil
Mno ale dat to do tabulek to je sice jednoduche reseni, ale tabulky se nacitaj dele....A jinak pres CSS to nejde bo ja se toho nemuzu dohledat....
DIK ;)
Volda
Profil
Ja uz fakt nevim jak to mam udelat....
body, html {
font-size: 12px;
font-weight: normal;
font-family: Tahoma;
margin: 0;
padding: 0;
text-align: center;
background-color: #FFF;
}
#kontejner {
width: 900px;
text-align: left;
margin: auto;
}
.toppanel {
height: 20px;
background: url('images/top_menu.gif') repeat-x;
}
#left_box {
width: 200px;
min-height: 50em;
_height:50em;
background: #276CBA;
float: left;
margin: -3px 0 0 0;
color: #fff;
}
#content_box{
position: relative;
width: 500px;
min-height: 50em;
_height:50em;
background: url('images/content.gif') repeat-y;
float: left;
margin: -3px 0 0 0;
}
#right_box {
width: 200px;
min-height: 50em;
_height:50em;
background: #276CBA;
margin: -3px 0 0 0;
float: left;
color: #fff;
}
#obalovaci_box{
background: url('images/background.gif') repeat-y;
}
#footer {
float:right;
width: 900px;
height: 20px;
background: url('images/footer.gif') repeat-x;
}
<body>
<div id="kontejner">
<div id="header"></div>
<div class="toppanel"></div>
<div id="obalovaci">
<div id="left_box"></div>
<div id="content_box"></div>
<div id="right_box"></div>
</div>
<div id="footer"></div>
</div>
</body>

mno a kdyz se roztahne nejakej div (jedno jakej) tak to nefunguje a ja uz si opravdu nevim rady :((
Volda
Profil
Mno huraaaa tak jsem na to konecne prisel tak to je super vypada to asi takhle ......(na pozadi ten obrazek atd....(uz jsem to nejak pobral s tim obrazkem))
<html>
<style type="text/css">
#content{
width:900px;
background: #fff;
min-height:400px;
_height:400px;
}
#style{
margin:10px 210px 10px 210px;
}
#left{
width:200px;
min-height:400px;
_height:400px;
float:left;
background: #50FFFF;
}
#right{
width:200px;
min-height:400px;
_height:400px;
float:right;
background: #50FFFF;
}
</style>
</head>
<body>
<div id="content">
<div id="left"></div>
<div id="right"></div>
<div id="style">
Obsah text
</div>
</div>
</body>
</html>
tak dekuju vsem zucastnenym a preji mnoho zdaru pri tvorbe webu... mrk
Volda
Profil
Asi moc otravuju ale kdyz jsem se na to koukal ve FF tak to nefunguje....Neroztahuje se to....
body, html {
font-size: 12px;
font-weight: normal;
font-family: Tahoma;
margin: 0;
padding: 0;
text-align: center;
background-color: #FFF;
}
#kontejner {
width: 900px;
text-align: left;
margin: auto;
background:#00FF00;
}
#header {
width: 900px;
height: 156px;
background: url('images/header.gif');
}
#content_box{
width: 900px;
background: url('images/bg.gif') top left repeat-y;
}
#content{
margin: 0 210px 0 210px;
}
#left_box{
width:200px;
float:left;
background: #276CBA;
color: #fff;
}
#right_box{
width:200px;
float:right;
background: #276CBA;
color: #fff;
}
#footer {
float:right;
width: 900px;
height: 20px;
background: url('images/footer.gif') repeat-x;
}

zapsane v html asi takhle:
<div id="kontejner">
<div id="header"></div>
<div id="content_box">
<div id="left_box">leve menu</div>
<div id="right_box">prave menu</div>
<div id="content">obsah</div>
</div>
</div>


siiiim poradte mi nekdo ja jsem to nikde nenasel a uz jsem celkem bezradnej potrebuju aby se mi to roztahovalo kdyz se zmeni obsah v jednom sloupci a to v jakymkoliv.
habendorf
Profil
Přečti si něco o vlastnosti clear.

BTW: Proč floatuješ footer?
Volda
Profil
Mno aby se nestalo ze neco vedle nej bude...
Nenapada me jak pouzit clear, serazeny to mam, ale nejako se mi to proste neroztahuje ve FF.
habendorf
Profil
Nenapada me jak pouzit clear, serazeny to mam, ale nejako se mi to proste neroztahuje ve FF.
No protože ti vnitřní elementy vytékají z obalu a dokud to nevyclearuješ, tak to nepůjde.

Mno aby se nestalo ze neco vedle nej bude...
Proto je právě potřeba ukončit obtékání a ne floatovat.
Volda
Profil
takze pod t vsechno mam dat clear:both .
bo?
tiso
Profil
Miesto tejto otázky si to mal vyskúšať...
habendorf
Profil
Miesto tejto otázky si to mal vyskúšať...
To je přesně ten důvod, proč neodpovídám :o)
tiso
Profil
habendorf
Ja len pre istotu, ak by mu to náhodou nedošlo... Nie každý vie čo a ako...
Volda
Profil
jj me to pak take doslo ja vam moc dekuju
Toto téma je uzamčeno. Odpověď nelze zaslat.