CSS design - poradna.net

Zdravím,

potřebuji poradit něco jednoduchého, čím bych vyřešil tento problém, je to takový menší úkol do školy, taková prkotina:

mám web udělaný pomoci tabulek
clip2net.com

a chci totéž udělat přes CSS
Udělal jsem DIV, který obaluje celý web a centruje ho (margin: 0 auto;)

další 2 DIVy jsou pro HEADER (logo) a horizontální menu pod headerem (cca 35px)

Potom chci udělat 3 sloupce, krajní budou na menu, prostřední bude rozdělen - nahoře bude takový malý obdelník (šířka menu-celková velikost stránky a výška podle obsahu textu v obdelníku) a zbytek bude klasický obsah webu.

Dole bude patička.

Otázka zní: jak zařídit, aby ty 3 sloupce byly stejně vysoké (tzn. pokud bude levé menu delší než obsah i pravé menu, tak se vertikální velikost určí podle něj, pokud bude obsah nejdelší, tak podle obsahu, apod...) a aby patička na ně přesně "sedla".

JavaScript se dá vypnout, tudíž hledám něco jiného.

Za odpovědi děkuji

Předmět	Autor	Datum
<div style="background-color:white;height:500px;width:80px;"> Text </div> To máš na vytvorenie oddi… nový Eduard Žanony 19.06.2012 21:42	Eduard Žanony	19.06.2012 21:42
Já základy znám, mě jde o to, jak zjistit tu výšku... Ve stylopisu mám něco takového .web {position… nový gotr3 19.06.2012 21:52	gotr3	19.06.2012 21:52
.container {position:relative; width:100%; height:auto; left:0px; top:335px;} heigh:auto To znamen… nový Eduard Žanony 19.06.2012 21:56	Eduard Žanony	19.06.2012 21:56
http://interval.cz/clanky/trisloupcovy-layout-se-s tejnou-delkou-vsech-panelu/ nový host 19.06.2012 21:56	host	19.06.2012 21:56
To je přesně ono! Děkuju :) poslední gotr3 19.06.2012 22:01	gotr3	19.06.2012 22:01

<div style="background-color:white;height:500px;width:80px;"> Text </div>

To máš na vytvorenie oddielu typu CSS zakomponovaného do zdrojáku stránky (html/php/e.t.c.).

pomocou

<li>

<td>

(v html). si vytvoríš kolónky na menu.

Já základy znám, mě jde o to, jak zjistit tu výšku...
Ve stylopisu mám něco takového

.web {position:relative; width:1024px; height:auto; margin-left:auto; margin-right:auto; width:1024px;}
.header {position:absolute; width:100%; height:300px; left:0px; top:0px;}
.comlinks {position:absolute; width:100%; height:35px; left:0px; top:300px; background-color:maroon;}
.container {position:relative; width:100%; height:auto; left:0px; top:335px;}
.leftmenu {position:absolute; width:180px; height:auto; left:0px; top:0px; background-color:aqua;}
.infobar {position:absolute; width:664px; height:35px; left:180px; top:0px; background-color:lightgray;}
.content {position:absolute; width:664px; height:auto; left:180px; top:35px; background-color:gray;}
.rightmenu {position:absolute; width:180px; height:auto; left:844px; top:0px; background-color:aqua;}
.bottom {width:100%; height:auto; left:0px; top:auto; background-color:yellow;}

třída web je na zarovnání stránky do středu
header a comlinks jsou logo a to menu pod tím
container v sobě má leftmenu, infobar, content a rightmenu
leftmenu a rightmenu - netřeba vysvětlovat
infobar - ten obdelník nad samotným obsahem
content - obsah
bottom - patička

Ale nedělá to vůbec co bych chtěl

clip2net.com
těch textů si nevšímejte :D
bottom je za headerem O_o není dole .. :\

.container {position:relative; width:100%; height:auto; left:0px; top:335px;}

heigh:auto

To znamená, že výška je nastavená na auto. To je buď štandard pre server, alebo nastavené v default css.

http://interval.cz/clanky/trisloupcovy-layout-se-s tejnou-delkou-vsech-panelu/

To je přesně ono! Děkuju :)

Zpět do poradny Odpovědět na původní otázku Nahoru