Autor Zpráva
Volda
Profil
#1 · Zasláno: 21. 7. 2006, 00:02:01 · Upravil/a: Volda
Odpovědět Citovat
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
#2 · Zasláno: 21. 7. 2006, 00:35:03 · Upravil/a: Plaváček
Odpovědět Citovat
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 *
#3 · Zasláno: 21. 7. 2006, 17:08:23
Odpovědět Citovat
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
#4 · Zasláno: 21. 7. 2006, 17:46:41
Odpovědět Citovat
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
#5 · Zasláno: 21. 7. 2006, 20:25:44
Odpovědět Citovat
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
#6 · Zasláno: 21. 7. 2006, 22:20:58
Odpovědět Citovat
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
#7 · Zasláno: 23. 7. 2006, 22:19:32
Odpovědět Citovat
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
#8 · Zasláno: 23. 7. 2006, 22:24:14
Odpovědět Citovat
Přečti si něco o vlastnosti clear.

BTW: Proč floatuješ footer?
Volda
Profil
#9 · Zasláno: 24. 7. 2006, 12:27:04
Odpovědět Citovat
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
#10 · Zasláno: 24. 7. 2006, 12:34:50
Odpovědět Citovat
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
#11 · Zasláno: 24. 7. 2006, 12:39:46
Odpovědět Citovat
takze pod t vsechno mam dat clear:both .
bo?
tiso
Profil
#12 · Zasláno: 24. 7. 2006, 13:09:30
Odpovědět Citovat
Miesto tejto otázky si to mal vyskúšať...
habendorf
Profil
#13 · Zasláno: 24. 7. 2006, 13:10:19
Odpovědět Citovat
Miesto tejto otázky si to mal vyskúšať...
To je přesně ten důvod, proč neodpovídám :o)
tiso
Profil
#14 · Zasláno: 24. 7. 2006, 13:13:17
Odpovědět Citovat
habendorf
Ja len pre istotu, ak by mu to náhodou nedošlo... Nie každý vie čo a ako...
Volda
Profil
#15 · Zasláno: 24. 7. 2006, 13:23:25
Odpovědět Citovat
jj me to pak take doslo ja vam moc dekuju
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0