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
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
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
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
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

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: