| Autor | Zpráva | ||
|---|---|---|---|
| LukeZzZ Profil |
Zdravím,
požádal bych Vás o radu, jelikož nějak nemohu najít nic co by my pomohlo... Potřeboval bych docílit podobného layoutu, jako je například zde: http://victoriawe.com/ po kliknutí v menu na ABOUT... Konkrétně jde o toto: 1. mám blok TOP, který vím, že má výšku 200px a má vlastnost POSITION: ABSOLUTE; TOP: 0px; 2. mám blok BOTTOM, který vím, že má výšku 200px a má vlastnost POSITION: ABSOLUTE; BOTTOM: 0px; 3. POTŘEBUJI mít prostřední blok MAIN, který bude mít výšku 100% - těch 400px, jde tohoto nějak jednoduše docílit? V prostředním bloku mám poté vložený BACKGROUND a blok INTROTEXT, který má FLOAT: RIGHT a OVERFLOW na auto, aby se ukazoval scrollbar, pokud je text v bloku větší, než prostor na obrázku. Ideálně bych tedy potřeboval nastavit adekvátně hodnotu HEIGHT pro blok MAIN a hodnotu MIN-HEIGHT, aby se to na malých monitorech dalo zobrazit. Jak byste toto řešili? Za každou radu předem díky. Lukáš |
||
| Str4wberry Profil |
#2 · Zasláno: 7. 3. 2013, 00:04:07
Pokud by TOP a BOTTOM nemusely mít pevnou výšku, lze to celkem jednoduše vyřešit pomocí procent. Musí ji mít?
|
||
| LukeZzZ Profil |
#3 · Zasláno: 7. 3. 2013, 12:51:37
Ano musí ji mít, ale už jsem dostal radu na toto: http://dreamweaverresources.com/tutorials/sticky-footer/, tak to snad pomůže s řešením...
|
||
| Str4wberry Profil |
#4 · Zasláno: 7. 3. 2013, 13:53:04
Ta ukázka dělá něco trochu jiného. Při dlouhém obsahu stránky vám zmizí patička (odsune se mimo viditelnou oblast), což si myslím, že nechcete.
Řešit to lze i s pevnou 200px výškou. Ale doporučil bych si na to přepnout box-model na okrajový ( box-sizing: border-box). A vymezit si obsah pomocí něčeho jako height: 100%; padding: 200px 0, do toho dát overflow: auto s obsahem a nakonec jednoduše naposicovat hlavičku a patičku nahoru, respektive dolu.
|
||
| LukeZzZ Profil |
#5 · Zasláno: 8. 3. 2013, 07:32:43
Díky moc... takhle jsem to dal dohromady... Ten BOX-SIZING to vyřešil, jelikož se mi to pořád navyšovalo o ten padding, což jsem nevěděl jak vypnout... Díky
|
||
|
Časová prodleva: 11 let
|
|||
0