NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.
Avatar
jakub.matousek23
Člen
Avatar
jakub.matousek23:26.2.2015 20:11

Zdravím ,

Prosím o radu.Chtěl bych umístit patičku na spodní část webu tak aby při oddalování a přibližování byla vždy ve spodní části.Přikládám screen a kód.

background:url('images/footer.jpg')repeat-x;
width:100%;
height:auto;
color:white;
text-align:center;
margin-top:1510px;
font:10px verdana;
 
Odpovědět
26.2.2015 20:11
Avatar
hogs1397
Člen
Avatar
hogs1397:26.2.2015 20:31

Nevím jak vypadá zbytek stránky v html a jak to máš pořešené v css ale zkus to napasovat na http://www.cssreset.com/…ge-with-css/ :)

 
Nahoru Odpovědět
26.2.2015 20:31
Avatar
Aleš Lulák
Člen
Avatar
Odpovídá na jakub.matousek23
Aleš Lulák:26.2.2015 21:08

Ahoj,

myslím, že to řešíš zbytečně, nikdo takhle nebude nikdy oddalovat stránku. A pokud máš vše hezky po sobě, vždy to bude dole.

Nicméně, pokud chceš aby to bylo vždy úplně dole, tohle by mělo fungovat i při oddalování.
Nastav patičce

position: absolute;
bottom: 0;

Jen nezapomeň, že se Ti to jakoby vyhodí z DOMu, takže si poslednímu elementu nastav přinejmenším stejný margin-bottom jako budeš mít výšku patičky, aby Ti to patička nepřekrývala.

Editováno 26.2.2015 21:09
Nahoru Odpovědět
26.2.2015 21:08
"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall
Avatar
Creevek
Člen
Avatar
Creevek:26.2.2015 21:16

Tohle je patička z webu na kterém pracuji tak ji můžeš vyzkoušet ;)

footer{
z-index:1;
position:fixed;
width:100%;
padding:0.1vh 43vw;
background-color:#B3E5FC;
border-top:0.5vh solid #01579B;
left:0%;
bottom:0%;
font-size:2vh;
}

Editováno 26.2.2015 21:17
Nahoru Odpovědět
26.2.2015 21:16
Lenost matka pokroku.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Aleš Lulák
Tomáš123:26.2.2015 21:18

Uvedené riešenie nebude funogovať, ak bude obsahu viac.

jakub.matousek23:
Inak, asi hľadáš niečo ako toto: http://ryanfait.com/sticky-footer/

Možností je ale viac, viď: http://tomas123.mujskript.cz/index.php?…

Editováno 26.2.2015 21:18
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
26.2.2015 21:18
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Aleš Lulák
Člen
Avatar
Odpovídá na Tomáš123
Aleš Lulák:26.2.2015 21:21

Můžu se zeptat, proč by to s absolutem nefungovalo?
Jsem si vědom, že je to ošklivé řešení, ale ne toho, proč by to nefungovalo.

Nahoru Odpovědět
26.2.2015 21:21
"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Aleš Lulák
Tomáš123:26.2.2015 21:40

Ak používame position: absolute, poziciujeme vzhľadom ku elementu <body> (ak nie je uvedené inak). Na to aby sme zmenili prvok, voči ktorému budeme poziciovať, musíme nadradenému prvku elementu, ktorý chceme poziciovať, deklarovať position: absolute alebo relative. Obecne prvok s takouto deklaráciou určuje počiatok súradnicového systému pre ďalšie vnorené prvky s absolútnou pozíciou.

Tvoje riešenie by nefungovalo preto, lebo si neuviedol iný prvok, vzhľadom ku ktorému chceš poziciovať. Áno, ak by bolo telo stránky <body> naťahovacie, fungovalo by to. To tu ale nebolo spomenuté.

Teda, typicky, by nastala situácia, kde pri malom množstve obsahu päta pekne sedí, inak nepekne zavadzia (ukážka: http://kod.djpw.cz/jykb- pre efekt zmenši výšku okna).

Ešte pridám jednu celkom jednoduchú ukážku pre jakuba.matouska23: http://kod.djpw.cz/fvkb-

*pomlčky sú súčasťou url

Editováno 26.2.2015 21:42
Nahoru Odpovědět
26.2.2015 21:40
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Aleš Lulák
Člen
Avatar
Odpovídá na Tomáš123
Aleš Lulák:26.2.2015 21:41

Ale jinak souhlasím, http://ryanfait.com/sticky-footer/ je chytré řešení.

Nahoru Odpovědět
26.2.2015 21:41
"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall
Avatar
Aleš Lulák
Člen
Avatar
Odpovídá na Tomáš123
Aleš Lulák:26.2.2015 21:50

A co se tedy stane, když dáme body vlastnost relative? :)
http://kod.djpw.cz/kykb-

Nahoru Odpovědět
26.2.2015 21:50
"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall
Avatar
Tomáš123
Člen
Avatar
Tomáš123:26.2.2015 22:12

Predpokladám, že chceš vysvetlenie. :)
Možno vyzerá, že táto ukážka odporuje tomu, čo som písal vyššie. Je to pravda. Zabudol som spomenúť dôležitý fakt: Absolútne a fixné poziciovanie vyníma prvok z toku dokumentu, čo znamená, že naňho nepôsobia svojou pozíciou ostatné prvky a on zas nepôsobí na nich.
Relatívne poziciovanie je o niečo iné. Myslím, že by sa dalo povedať, že relatívne poziciovaný prvok pôsobí svojou pôvodnou pozíciou na okolité prvky, ale okolité prvky nijako nepôsobia naňho. Relatvne poziciovaný prvok zanecháva v toku dokumentu stopy po jeho pozícii. Zaberá teda miesto, ale v skutočnosti môže byť inde.

Všeobecne, ukážka ktorú si pridal nie je funkčné riešenie pätičky vždy dole.
Dve spomínané pozície sa stretnú na vyššej vrstve a má to podobný účinok, akoby sme žiadne poziciovanie nepoužili. Prvky sa skladajú pod seba a ak je obsahu príliš málo, päta nie je dole.

Prečítaj si princíp funkčnosti päty vždy dole: http://tomas123.mujskript.cz/index.php?…

V ukážke si zabudol roztiahnuť obsahový prvok (to má zaistiť, že obsah bude vždy aspoň 100% vysoký - min-height: 100%)

Nahoru Odpovědět
26.2.2015 22:12
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Aleš Lulák
Člen
Avatar
Odpovídá na Tomáš123
Aleš Lulák:26.2.2015 23:19

Ah, skvěle, teď již chápu, že vlastně radím blbost. Díky za osvětlení a novou znalost.

Takže jen pro dojetí své myšlenky, korektní řešeni, aby to fungovalo s absolutem, musí být vlastně to stejné co u Ryana Faita, musí se roztahovat wrapper na výšku, ale byl by potřeba stále přídavný margin či prázdný element stejné výšky co footer.

Tedy také doporučuji to co Tomáš123

Nahoru Odpovědět
26.2.2015 23:19
"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall
Avatar
jakub.matousek23
Člen
Avatar
jakub.matousek23:27.2.2015 7:37

Všem děkuji za cenné rady =)Dnes se na to vrhnu a pokusím se to nějak dořešit.Jestli mohu ještě dotaz mimo téma.Tak bych se zeptal jak nastavím fixní položky v navigačním menu aby se mi při oddálení neposouvaly pod menu ?jinak stránku najdete na adrese : rod.ptos.tk

 
Nahoru Odpovědět
27.2.2015 7:37
Avatar
Tomáš123
Člen
Avatar
Tomáš123:27.2.2015 11:46

Áno, pochopil si to. Riešení je ale viac. Ďalšim možným je nechať pätu voľne pohodenú pod natiahnutým obsahom, či (v pripade viacstĺpcového layoutu) clearovať po natiahnutom stĺpci (stránka na ktorú som vyššie odkazoval to takto rieši). Určite som nespomenul všetky riešenia. Podstata je skrytá v pouzití vlastnosti min-height.

Nahoru Odpovědět
27.2.2015 11:46
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na jakub.matousek23
Tomáš123:27.2.2015 12:40

Na uvedenej stránke nepozorujem zmeny pri oddiaľovaní, avšak príčinou je väčšinou prílišná tesnosť. Pri zmenách veľkosti objekty pracujú a nikdy nedržia stálu pozíciu (ak samozrejmen stránka nie je jeden obrázok). Takéto chovanie je väčšinou spôsobené zmenani veľkosti písma.

Pri približovaní sa už objekty naozaj radia pod seba. Ak deklarujeme položke float: left|right, je takéto chovanie prirodzeným. Nastav prvku <header> min-width: 950px; a bude to fungovať (hodnotu možno bude potrebné poupraviť).

Nahoru Odpovědět
27.2.2015 12:40
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 14 zpráv z 14.