| Autor | Zpráva | ||
|---|---|---|---|
| klasounek Profil |
#1 · Zasláno: 26. 2. 2006, 23:13:54
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 |
#2 · Zasláno: 26. 2. 2006, 23:22:20
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 |
#3 · Zasláno: 26. 2. 2006, 23:37:21
#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 |
#4 · Zasláno: 26. 2. 2006, 23:38:43
ty moje 3 vnitřní DIVi se mi vlastně zarovnávaj k okraji toho druhého obalovacího DIVu.
|
||
| habendorf Profil |
#5 · Zasláno: 26. 2. 2006, 23:47:02
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 |
#6 · Zasláno: 26. 2. 2006, 23:54:55
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 |
#7 · Zasláno: 27. 2. 2006, 00:02:21
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"> </div> </div></div> A u toho druhého divu taky zruš tu relativní pozici, je tam na nic. |
||
| klasounek Profil |
#8 · Zasláno: 27. 2. 2006, 00:26:04
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 |
#9 · Zasláno: 27. 2. 2006, 00:34:57
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 |
#10 · Zasláno: 27. 2. 2006, 00:47:23
Můžu se ještě zeptat, jakou funkci tam vlastně plní ten cleaner? Díky
|
||
| habendorf Profil |
#11 · Zasláno: 27. 2. 2006, 00:50:35
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 |
#12 · Zasláno: 27. 2. 2006, 01:00:59
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... :) |
||
|
Časová prodleva: 18 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0