Autor Zpráva
klasounek
Profil
Potřeboval bych helpnout...stránku si chci rozvrhnout pomocí Divů. Mám první dva Divy - aby se stránka centrovala na střed. Do druhého Divu už si vkládám - vytvářím vlastní stránku (např si tam vnořuju další divy - definované v externím *.css, viz. kód.) Chci aby stráka vypadala: logo a pod logem vlevo sloupec s tlačítky a vpravo hlavní okno pro obsah. Můj problém je s pozadím. Vzhledem k tomu, že obsah a ty tlačítka (Divy), budou mít různou výšku, tak to nevypadá celkově moc dobře pokud nechci mít bílé, resp. stejně barevné pozadí pro celou stránku. Tak chci nějaké pozadí. Udělal jsem si proužek široký 780px a vysoký 2px a chci aby se mi opakoval v tom 2. divu

kód:

<div style="text-align: left; position: relative; width: 780px; margin: 0 auto; background: url('prouzek.png') repeat-y;">


Myslel jsem, že se tento div bude na výšku přizpůsobovat jeho obsahu (tlačítka a obsah) a tím pádem se bude zobrazovat proužek na pozadí a ono nic. Zobrazí se jen pokud nastavím pevnou výšku toho 2. divu. Jak na to?
S prácí s divy jsem začal nedávno, do teď jsem rzvrhoval stránky pomocí tabulek.
Jinak celkový kód mé "šablony" je zde:

kód:

<div style="text-align: center;"><div style="text-align: left; position: relative; width: 780px; margin: 0 auto; background: url('prouzek.png') repeat-y;">
<div id="logo"></div>
<div id="menu">leve menu</div>
<div id="obsah">obsah</div>
</div></div>


Díky za každou radu...
habendorf
Profil
No tu podstatnou část kódu jsi sem nedal, takže se můžu jen dohadovat, že menu a obsah máš floatnuté a nevyclearované. A nebo ještě hůř absolutně pozicované. Takže chtělo by to link...
klasounek
Profil
#logo { position: absolute; width: 780px; top: 0px; left: 0px; height: 130; background: url('logo.png');}
#menu { position: absolute; width: 170px; top: 130px; left: 0px; text-align: center; }
#obsah { position: absolute; width: 610px; top: 130px; left: 170px; padding: 0px; font:100% Arial;}
div {padding: 0px;}
klasounek
Profil
ty moje 3 vnitřní DIVi se mi vlastně zarovnávaj k okraji toho druhého obalovacího DIVu.
habendorf
Profil
Koukám tušení bylo správné - abs. pozice. Takže ten obalující div má nulovou výšku, proto ti nezobrazí pozadí.
Řešit tohle abs. pozicemi je zkrátka a jednoduše kravina.
klasounek
Profil
OK, tak jak docílím toho, aby se obalovací div přizpůsobil jeho obsahu? Mám nastavit pozici na relativní? Pokud to tak udělám, tak se mi divy zarovnávají podle toho předešlého a pak už stránka nevypadá tak jak chci...takže div obsah se mi zarovná podle divu menu a to není to pravé ořechové...
habendorf
Profil
Pozicování tam nedávej žádné, k čemu to?

#logo { height: 130; background: url('logo.png');}
#menu { width: 170px; float:left;}
#obsah {width: 610px; float:left;}
#cleaner {line-height:0; font-size:0; height:0; clear:both;}

Konec html bude vypadat

<div id="obsah">obsah</div>
<div id="cleaner">&nbsp;</div>
</div></div>

A u toho druhého divu taky zruš tu relativní pozici, je tam na nic.
klasounek
Profil
Diky moc šéfe, funguje to!!! Rozvržení stránek pomocí Div jsem začal používat nedávno, takže s tím nemám skušenosti, nejdříve jsem to dělal pres frame, časem jsem zjistil že frames jsou opravdu bad, pak přes tabulku a teď jsem přešel na toto. To pozicování bylo v pohodě do té doby, než jsem chtěl dát do pozadí ten proužek.

Můžu se teda zeptat, jakej je ve funkčnosti rozdíl (pokud tam nechci mít pozadí) v té tvojí verzi a v té mé původní? Jsem z toho teď takovej trošku zmatenej, kdy teda co použít...v čem je takovej rozdíl a proč teda pozicovat a proč ne?

Diky moc
habendorf
Profil
Odpověď je jednoduchá - pozicování nepoužívat nikdy, pokud to není nutné - a to je jen opravdu zcela výjimečně. Ono se to hůř vysvětluje, ale časem to poznáš sám, uvidíš.
klasounek
Profil
Můžu se ještě zeptat, jakou funkci tam vlastně plní ten cleaner? Díky
habendorf
Profil
Ten cleaner tam je zásadní, ukončuje obtékání menu a obsahu. Pokud bys ho neukončil, měl by obalující div jen výšku loga.
Přečti si http://www.jakpsatweb.cz/css/clear.html
klasounek
Profil
Jakpsatweb používam, už mě toho hodně naučil, ale jak říkám, Divama se zabývám jen zkrátka...
Tak díky moc a někdy zase... :)
Toto téma je uzamčeno. Odpověď nelze zaslat.