| Autor | Zpráva | ||
|---|---|---|---|
| YoSarin Profil |
#1 · Zasláno: 12. 10. 2005, 12:12:31
Zdravím. :)
Stránky, kterých se následující téma týká najdete na http://yosarin.kvalitne.cz Problm jsem na fóru hledal, ale nikde nebyl vyřešen tak, aby mi to nějak pomohlo - mám na stránce dva sloupce vedle sebe (#menu_sloupecek a #mainbox). Jeden má být celý černý a druhý celý bílý - oba sloupce mají přitom dynamickou výšku podle obsahu a jsou spolu s hlsvičkou a vrchním menu uzavřeny v dalším divu (#main_div). Problém je jednoznačný - když je jeden ze loupců delší, jak docílit toho, aby druhý byl stejně dlouhý? Řešení by bylo jednoduché - nastavit barvu pozadí pro #main_div. Ale to nejde, protože já nevím, který z těch dvou sloupců bude zrovna kratší... Ve FF řeší všechno atribut height: 100%; díky kterému se sloupce roztáhnou na celou výšku divu #main_div, který končí souběžně s delším sloupcem... Moc prosím o radu Díky YoSarin |
||
| habendorf Profil |
#2 · Zasláno: 12. 10. 2005, 12:17:48
Dvoubarevný obrázek na backgroundu.
|
||
| YoSarin Profil |
#3 · Zasláno: 12. 10. 2005, 12:26:29
a dá se obrázku na pozadí nějak říci, aby se roztáhl/smrskl na šířku divu? - kvůli zmenšování/zvětšování textu... a také proto, že neznám přesnou šířku sloupců (mají rozměry zadané v em) a tak znám pouze poměr šířky černá/bílá...
YoSarin |
||
| habendorf Profil |
#4 · Zasláno: 12. 10. 2005, 12:41:31
a tak znám pouze poměr šířky černá/bílá...
No a na hodnotu toho poměru nastavíš polohu pozadí zleva. Třeba background: url(pozadi.gif') top 25% repeat-y; Obrázek musí být dost široký. |
||
| YoSarin Profil |
#5 · Zasláno: 12. 10. 2005, 12:46:29 · Upravil/a: YoSarin
Takze takhle:
background: url('pozadi.gif') left 25% repeat-y; ? zkusim, dekuju moc YoSarin |
||
| habendorf Profil |
#6 · Zasláno: 12. 10. 2005, 12:52:32
Ne, tak jak jsem psal.
|
||
| habendorf Profil |
#7 · Zasláno: 12. 10. 2005, 12:54:23
Jde přece o horizontální poměr, svisle se to popakuje odshora až po konec divu.
|
||
| habendorf Profil |
#8 · Zasláno: 12. 10. 2005, 13:04:18
Ještě jedna věc, pro Gecko a Operu bude lepší background: url(pozadi.gif') 25% 0% repeat-y;
(asi nezvládají kombinovat číselný údaj s klíčovým slovem) |
||
| llook Profil |
#9 · Zasláno: 12. 10. 2005, 13:17:21 · Upravil/a: llook
To řešení s pozicovaným pozadím je dobře popsané tady: http://wellstyled.com/css-2col-fluid-layout.html
Bez obrázků lze podobného efektu také dosáhnout: http://llook.wz.cz/weblog/ruzny-soubory/yet-another-layout.html Ale pokud mají mít oba sloupce plovoucí šířku, tak je to s přesností na 1% a to obvykle nestačí. Pro gumový layout bych volil to z toho wellstyled. |
||
| YoSarin Profil |
#10 · Zasláno: 12. 10. 2005, 13:35:39
habendorf -> Dekuju moc... :) zrovna jsem se chystal si postezovat, ze v Opere to nefunguje opravdu dekuju - moc mi to pomohlo
llook -> Tvoje reseni me celkem zaujalo a jelikoz nepotrebuji plovouci sirku, tak se na nej mozna casem vrhnu - jen co si to poradne prectu -> taky diky :) YoSarin |
||
| mila Profil |
#11 · Zasláno: 12. 10. 2005, 16:13:19
Lze toho docílit i pomocí border. Idea je je ta, že se udělá div s hodně širokým borderem. Tak vzniknou dva stejné sloupce dvou barev. Pak se pomocí záporných marginů dostane obsah na ten border.
Je třeba to nějak chytře poskládat, vyřešit různé počítání šířky a asi někam dát cleaner. Není to složité, ale neche se mi to teď konstruovat;) Tipnul bych si něco takového: <div id="container> <div id="left"> ... </div> <div id="right"> ... </div> <hr class="cleaner"> </div> #container{ border:350px red solid; background-color:blue; width:350px; _width:700px; } #left { float:left; margin-left:-350px; margin-right:-350px; } .cleaner { visibility:hidden; clear:both; } |
||
| Petra Profil |
#12 · Zasláno: 12. 10. 2005, 16:23:16
mila: jak dostat text na border si i představit dokážu, ale nechápu, jak tím chceš docílit stejně dlouhých sloupců při jakékoliv délce, když velikost toho borderu nastavuješ jako pevnou?
|
||
| Anonymní Profil * |
#13 · Zasláno: 12. 10. 2005, 16:52:18
tam by teoreticky melo byt
border-left: 350px solid red; cimz padem to splnuje pozadavky pro levy sloupec 350px siroky a container se roztahne na vysku nejvyssiho divu, ktery obsahuje - fungovat by to melo :) YoSarin |
||
| llook Profil |
#14 · Zasláno: 12. 10. 2005, 16:56:27
Petra Podobně jako u toho mého řešení - tam akorát nedostávám text na border ale na margin.
Jde o to, že ten border má nastavený nějaký prvek (obvykle div), který obsahuje oba dva sloupce - takže prvek s borderem má výšku obou sloupců (musí teda pod těma sloupcema být nějaký clear). |
||
| habendorf Profil |
#15 · Zasláno: 12. 10. 2005, 17:04:09
No ale tady byl požadavek na konstantní poměr šířek sloupců. A border 350px široký to nezajistí.
|
||
| mila Profil |
#16 · Zasláno: 13. 10. 2005, 11:13:56
No ale tady byl požadavek na konstantní poměr šířek sloupců. A border 350px široký to nezajistí.
S procentama to půjde asi také, jen to chce spočítat a ozkoušet... |
||
|
Časová prodleva: 21 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0