Autor | Zpráva | ||
---|---|---|---|
KOM Profil * |
#1 · Zasláno: 27. 6. 2007, 19:33:33
Ahoj. Mam vytvořeno zhruba toto - html:
<html> <body> <div id="main"> <div id="hlavicka-null"> <div id="hlavicka"> blabla </div> </div> <hr /> <div id="obsah-null"> <div id="obsah"> blablabla </div> </div> <hr /> <div id="menu-null"> <div id="menu"> nejake menu </div> </div> <hr /> <div id="vpravo-null"> <div id="vpravo"> blablabla </div> </div> <hr /> <div id="paticka-null"> <div id="paticka"> blabla </div> </div> </div> </body> </html> a css: body { text-align: center } hr { display: none } #main { width: 960px; margin: 0 auto; background: #14285F; text-align: left } #hlavicka-null { width: 100%; padding: 0; border: 0 } #hlavicka { border-bottom: 2px solid #CC3300; background: #02021E; height: 149px; font: 28px georgia } #obsah-null { width: 794px; float: right; padding: 0; border: 0 } #obsah { font: 12px arial; color: #99CCFF; line-height: 1.5; /* Mezera mezi rádky */ background: #14285F; padding: 10px 50px 20px 50px; border: 1px solid red; border-top-width: 0px; border-bottom-width: 0px } #menu-null { width: 166px; height: auto; float: left; padding: 0; border: 0 } #menu { background: #14285F; padding-top: 20px } #vpravo-null { width: 100px; float: right; padding: 0; border: 0; } #vpravo { padding: 10px; background: red } #paticka-null { clear: both; width: 100%; padding: 0; border: 0 } #paticka { background: #14285F; padding: 10px; border-top: 1px solid #CC3300 } Muze mi nejaka dobra duse poradit, jak ten cerveny sloupec dostat napravo a udelat z toho klasicky 3sloupcovy layout? Nejak se mi nedari.... |
||
Měsíček Profil |
#2 · Zasláno: 27. 6. 2007, 20:30:54
Proč tak složitě zbytečně to stěžuješ udělej si normálně tak 5 divů a k čemu je ti položka null to moc nechápu až to správíš tak ti to řeknu takhle bych se v tom motal 10 minut .-)
|
||
KOM Profil * |
#3 · Zasláno: 28. 6. 2007, 01:37:41
5 divu tam je, jen jsou jeste obaleny dalsima divama, nasel jsem to v jedne diskusi, doporucovali to takto. Nevim kde delam chybu, ze mi ten pravy sloupec nejde napozicovat doprava.
Umim udelat to, ze zrusim prostrednimu sloupci obtekani (float) a dam mu margin zleva i zprava tak siroky, aby se ony 2 sloupce vesly do vznikle "mezery". Bohuzel mi ovsem zustane prostredni sloupec prilipnuty k hlavicce (to chci), ale pravy i levy sloupec jsou az pod tim prostrednim sloupcem, nejsou vedle nej. Poradi nekdo? |
||
Měsíček Profil |
#4 · Zasláno: 28. 6. 2007, 07:47:41
Zkus se podívat na google a tam si přeskoč na interval je tam několik ukázek třísloupcových layoutů a ty si překopíruj a dosaď tam svoje nastavení a podívej se kde je chyba.A zkus si udělat ještě jeden soubor a přehoď hodnoty v CSS to znamená vše co je v #---- null tak dej do #---- a null vymaž mělo by to pomoci když tam budeš dávat záložní divy tak se zbytečně v tom planceš a uděláš aji nepozorné chyby zkus to podle mě je záložní div hloupost .-)
|
||
Trejpa Profil |
#5 · Zasláno: 28. 6. 2007, 09:33:31
KOM
Zkus něco funkčního a ověřeného - na webu je toho plno - stačí hledat: http://www.positioniseverything.net/threecolbglong.html http://www.positioniseverything.net/thr.col.stretch.html seznam možností: http://css-discuss.incutio.com/?page=ThreeColumnLayouts K tvému řešení: Vykresluje se to přesně tak, jak jsi zadal. U plovoucích prvků záleží také na jejich fyzickém pořadí v html kódu. Plovoucí prvek se totiž musí vykreslovat až ZA všemi neplovoucími, plavání přímo neovlivňuje vertikální pozici. Pokud jsi pomocí #obsah-null { float: right; } přirazil obsah doprava, tak nastavení #vpravo-null { float: right; } už tuto hodnotu nepřebije (nebude více vpravo) a začne se vykreslovat za tímto prvkem, v tomto případě počká na #menu-full a přirazí se pravým okrajem k nejbližšímu prvku - protože ještě vlevo od #obsah-null je místo, přirazí se k němu a paradoxně se pravý sloupec dostane pod levý. Pokud si přeješ mít html kód uspořádán jinak, než je postupné vykreslování na stránce, budeš muset použít position (pokud vše definuješ v pixelech, tak je to tady dobrá volba). Mimochodem: 166 + 794 + 100 není 960, ale 1060 (ale problém to nevyřeší). |
||
Časová prodleva: 17 let
|
0