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/image/0Nk. 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 × 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/image/0N9). 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 × 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/image/0N9 to vypadala pořád?
Děkuji
ohodnoťte nejlepší odpověď symbolem palce
Zajímavá 0 před 3354 dny |
Sledovat
Nahlásit
|
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 |
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 |
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
před 3354 dny
|
0 Nominace Nahlásit |
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.
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/2005-02.html
[druhý článek shora]
Tak tady je HTML stránky http://www.nikola-zkusebni.tode.cz/webove-doplnky.html. 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.
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*/
}
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.
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ř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.
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.
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.
Bedy | 1528 | |
Michal Kole | 1199 | |
led | 1159 | |
Hlada | 1132 | |
mosoj | 1124 | |
gecco | 904 | |
www | 828 | |
badisko | 817 | |
cochee | 814 | |
Dochy | 727 |
Software |
Hardware |
Internet |
Programování a webdesign |
Sítě |
Bezpečnost |
Ostatní počítače a internet |