Avatar uživatele
nikolqa.o

Jak nastavit výšku webových stránek podle rozlišení obrazovky?

Dobrý den,

dělám si vlastní web, ale teď jsem narazila na problém. Chci aby mé stránky nějak vypadali a tohle kazí jejich vzhled.

Stránky vypadají tak to: http://www.imgup.cz/…. A ten problém se nachází hned dole u patičky. Pod ní se mi totiž při nedostatku textu objevuje nevzhledný bílý obdélník. A já nevím, jak se ho zbavit.

Zkoušela jsem v css nastavit jednomu z divů tento parametr: min-height: 555px; a ano, patička se mi na notebooku s rozlišením 1366 x 765 objevila dole a nevzhledný obdélník zmizel, když jsem přidala více textu, patička se mi posouvala a vše je OK (viz.: http://www.imgup.cz/…. Ale jde mi o to, že každý může mít nastavené jiné rozlišení obrazovky a to co teď funguje mě nebude fungovat u monitoru s rozlišením FullHD (1920 x 1080).

Proto se ptám, jde nějak v css nastavit, aby se výška stránek automacky přispůsobila rozlišení monitoru a neobjevoval se při nedostatku textu ten bílý obdélník a takhle http://www.imgup.cz/… to vypadala pořád?

Děkuji

Uzamčená otázka

ohodnoťte nejlepší odpověď symbolem palce

Zajímavá 0 před 2069 dny Sledovat Nahlásit



Nejlepší odpověď
Avatar uživatele
jpau

Odpoveď byla označena jako užitečná

Nastav height toho kontejneru, ve kterém je stránka na 100%, tím docílíš toho, že ti bude přetékat jen div s tím zápatím (jak je tam copyright).

Tomu divu (zápatí) nastav position: fixed a bottom: 0. Tím docílíš toho, že ten div s tím zápatím bude vždy dole jen bude překrývat kontejner s tělem té stránky (ten jak má 100% - viz 1. odstavec). Takže změníš jeho height na 100% - div zápatí height. Tzn. pokud má zápatí 30px tak height kontejneru stránky (tzn. toho kde je vše) bude height: 100% - 30px.

Takhle se to dá udělat. Samozřejmě nevidím tu statiku k tomu (HTML) takže nedovedu říct jestli to půjde konkrétně takhle ale ten princip je z toho myslím jasný.

----

Vyrešeno:

Ty dva spodni divy "paticka" a "duezite" si prehod do jeste jednoho divu, budu mu rikat "novy"

novy
{
position: fixed;
width: 100%;
height: 70px;
bottom: 0px;
}

To, co mas nyni v body prehod do divu asi takto:
<body>
<div class="obal"></div>
<div class="obsahBody">Sem prijde co je v body</div>
<div class="novy"></div>
</body>

obsahBody
{
top: 85px; /*priblizne sirka divu obal*/
height: calc(100% - 70px); /*Celkova sirka - vyska spodniho panelu novy*/
}

Upravil/a: jpau

1 NominaceKdo udělil odpovědi nominaci?nikolqa.o Nahlásit

Další odpovědi
Avatar uživatele
Lamalam

CSS slouží ke stylování a nemá žádnou fci nebo metodu, která by dovedla zjistit rozlišení konkrétní obrazovky. Tvůj problém by se asi dal vyřešit pomocí "position".

Upravil/a: Lamalam

0 Nominace Nahlásit

Avatar uživatele
SickBreed

Ne že bych uměl CSS, ale nelze min-height: Auto, nebo min-height: 100% ? Každopádně pokud umíš CSS tak si vygoogli heslo css auto height div nebo auto height container a ukáže ti to příkladů jak o udělat dost.

0 Nominace Nahlásit

Diskuze k otázce
Avatar uživatele
ivzez

Mám ještě připomínku:

Jestli chceš psát o tvorbě stránek, nebo tvorbu stránek dokonce nabizet, neměl by tvůj web působit jako šablona a měl by být bez chyby. Neměla bys opomíjet sémantiku, přístupnost a kontrast (máš dost světlé písmo) apod.

před 2069 dny Odpovědět Nahlásit
Avatar uživatele
ivzez

Podle rozlišení monitoru se nesnaž nic nastavit,
protože každý návštěvník může mít rolišení jiné.

S tím "min-height" jsi na správné cestě. Pročti si, jak "patičku webu stále dole"
vyřešil před 10 lety Plaváček (Miloslav Lešetický): http://weblog.plavacek.net/…
[druhý článek shora]

před 2069 dny Odpovědět Nahlásit
Avatar uživatele
nikolqa.o

Tak tady je HTML stránky http://www.nikola-zkusebni.tod e.cz/…. Omlouvám se, že mi to trvalo tak dlouho, ale do teď jsem používala Free hosting od ic.cz, ale ten teď zrušili a na Endoře mi chvíli trvalo se zorientovat.

před 2069 dny Odpovědět Nahlásit
Avatar uživatele
jpau

Ty dva spodni divy "paticka" a "duezite" si prehod do jeste jednoho divu, budu mu rikat "novy"

novy
{
position: fixed;
width: 100%;
height: 70px;
bottom: 0px;
}

To, co mas nyni v body prehod do divu asi takto:
<body>
<div class="obal"></div>
<div class="obsahBody">Sem prijde co je v body</div>
<div class="novy"></div>
</body>

obsahBody
{
top: 85px; /*priblizne sirka divu obal*/
height: calc(100% - 70px); /*Celkova sirka - sirka spodniho panelu novy*/
}

před 2069 dny Odpovědět Nahlásit
Avatar uživatele
nikolqa.o

Teď mi ještě uživatel Poklička poslal do zpráv toto:

#paticka {
width: 100%;
height: 20px;
margin: 0 auto;
padding: 9px 0;
text-align: center;
background-color: #000;
color: #fff;
position: fixed;
bottom: 0;
}

A to také funguje.

před 2069 dny Odpovědět Nahlásit
Avatar uživatele
nikolqa.o

Funguje to. Děkuji moc.

Jinak nevíte prosím o nějakém dobrém Free hostingu? Na Endoru se teď nemohu přes FTP (v PSPadu) přihlásit. Webzdarma zase nepodporuje nahrávání souborů přes jejich server a nahrávat obrázky přes FTP mi nejdou.

Zlaté ic.cz, které teď bohužel zrušilo Free hosting. :(

před 2069 dny Odpovědět Nahlásit
Avatar uživatele
jpau

Přestaň mi vykat.

Free web hostingy znám jen ic a wz. Pak existovalo ještě něco jako sweb ale to bylo k ničemu, nevím jak je to teď. Weby dělám jen "s pistolí u hlavy" a když už na to tedy dojde tak většinou píšu věci co běhají na privátních sítích takže nemám moc zkušenosti s hostingem. Zkusil bych se podívat na to, co nabízí zahraniční společnosti.

před 2069 dny Odpovědět Nahlásit
Avatar uživatele
Lamalam

Bez kódu tvé stránky se to nedá vyřešit. Obrázek stránky je k ničemu. Někam tu stránku nahraj o hoď sem odkaz.

před 2069 dny Odpovědět Nahlásit
Avatar uživatele
nikolqa.o

SickBreed: Ani jedno z uvedených nefunguje, to už jsem zkoušela včera. Jinak už googlím 3 dny a ne a ne něco najít.

před 2069 dny Odpovědět Nahlásit
Avatar uživatele
Lamalam

Možná by stačilo patičce nastavit clear: both;

před 2069 dny Odpovědět Nahlásit
Avatar uživatele
nikolqa.o

To tam mám.

před 2069 dny Odpovědět Nahlásit
Nový příspěvek
Zajímavé otázky v kategorii Počítače a internet