| Autor | Zpráva | ||
|---|---|---|---|
| Anonymní Profil * |
#1 · Zasláno: 23. 10. 2005, 15:45:47
Ahoj,
chtěl bych se zeptat jestli někdo nevíte jak udělat dvousloupcový layout - levý sloupec musí mít pevnou šířku, pravý se roztahuje po zbytku šířky stránky. V kódu pak musí být, ale ten pravý před levým, aniž by bylo použito absolutního pozicování. Moc děkuju |
||
| Timy Profil |
#2 · Zasláno: 23. 10. 2005, 15:55:46
<style>
#pravy {width:80%; float:right; background:red} #levy {width:20%; background:green} </style> <div id="pravy"> pravý sloupec </div> <div id="levy"> levý sloupec </div> |
||
| jerry Profil * |
#3 · Zasláno: 23. 10. 2005, 16:02:39
Timy
ta šířka musí být pevná, tedy např. 200px PS. omlouvám se zapoměl jsem se před tím podepsat ;o) |
||
| jerry Profil * |
#4 · Zasláno: 23. 10. 2005, 16:03:33
u toho levého pevná jinak plovoucí ;o))
|
||
| Timy Profil |
#5 · Zasláno: 23. 10. 2005, 16:07:57
jerry
no jo, toho jsem si všiml pozdě. Tak to mě v tom případě nic nenapadá, leda tohle, ale tady je zase absolutní pozicování, ale jenom decentní: <style> #pravy {width:100%; background:red; position:absolute; padding-left:200px;} #levy {width:200px; background:green; position:relative; z-index:10;} </style> <div id="pravy"> pravý sloupec </div> <div id="levy"> levý sloupec </div> |
||
| Dero Profil |
#6 · Zasláno: 23. 10. 2005, 16:09:28
Timy: V tom případě bude dokument široký 100% + 200px
|
||
| jerry Profil * |
#7 · Zasláno: 23. 10. 2005, 16:10:27
Timy
no takhle to umím právě taky, ale potřeboval bych to bez pozicování - teda pokud vůbec něco takového jde :o( |
||
| Timy Profil |
#8 · Zasláno: 23. 10. 2005, 16:17:33
Dero
no jo, toho jsem si nevšiml. Tak stačí tam přidat * {-moz-box-sizing: border-box;}, ale to asi není to pravé ořechové. jerry Tak to v tom případě nevím... |
||
| Dero Profil |
#9 · Zasláno: 23. 10. 2005, 16:24:41
ale potřeboval bych to bez pozicování
IMHO to v tom případě vyřešit nelze. Porozhlédni se tady (http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html), ale AFAIK tam příslušné řešení není. |
||
| Petra Profil |
#10 · Zasláno: 23. 10. 2005, 16:59:58 · Upravil/a: Petra
#oba{width:100%;overflow:hidden}
#levy{float:left;width:200px;background:green} #pravy{float:right;width:100%;margin-right:-200px;background:red} #obsah{margin-right:200px} <div id="oba"> <div id="pravy"> <div id="obsah"> pravý sloupec </div> </div> <div id="levy"> levý sloupec </div> </div> Ten #obsah je tam aby se přeezlých 200px odříznutých pomocí overflow zobrazilo a nebylo odříznuto. Testováno na nejnovějších IE, FF, Opera. Na Operu bacha, tam to neběží bez (možná striktního) Doctype. |
||
| Dero Profil |
#11 · Zasláno: 23. 10. 2005, 17:10:43
Vida, řešení podobné Petřinu mne napadlo, ale nefungovalo mi. :o(
Tak jen doplním, že pro IE 5+ je potřeba upravit CSS následovně: #oba{width:100%;overflow:hidden} #levy{float:left;width:200px;background:green; overflow: hidden;} #pravy{float:right;width:100%;margin-right:-200px;background:red; overflow: hidden;} #obsah{margin-right:200px;} Protože v případě naplnění boxů kurzívou by se layout v IE nechutně rozložil na prvočinitele. |
||
|
Časová prodleva: 5 měsíců
|
|||
| Anonymní Profil * |
#12 · Zasláno: 11. 3. 2006, 01:02:06
K tématu css/2 sloupcový layout:
už někdo vymyslel inteligentní řešení, jak udělat dvousloupcový layout v css aby měl každý sloupec jinou barvu pozadí a přitom nemusel používat tenký obrázek s proužkem na pozadí? To šlo snad jen v tabulkách a rámech. Jediné jiné řešení, co jsem zatím viděl, je (jak taky píše Yuhů) to s tou velkou výškou a modlením se aby náhodou obsah sloupce nebyl vyšší - dost často je totiž vidět že to nevyjde. Nebo na to designéři slušně řečeno rezignují a dají oba sloupce stejnou barvou. |
||
| Timy Profil |
#13 · Zasláno: 11. 3. 2006, 01:06:33
Anonymní
něco takového? http://llook.wz.cz/weblog/spot/layout-se-stejnou-vyskou-sloupcu.php |
||
| Leo Profil |
#14 · Zasláno: 11. 3. 2006, 01:42:52
"už někdo vymyslel inteligentní řešení, jak udělat dvousloupcový layout v css aby měl každý sloupec jinou barvu pozadí a přitom nemusel používat tenký obrázek s proužkem na pozadí?"
Jde to pomoci tlusteho border v dane barve, ale samozrejme ne pro vsechny pozadavky (napr. nemuze byt sirka toho sloupce pruzna - border to neumi). Leo |
||
| Anonymní Profil * |
#15 · Zasláno: 11. 3. 2006, 08:27:38
Timy
jo, to by mohlo být ono, díky :-) |
||
|
Časová prodleva: 18 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0