Diskuze: Html a css (patička)

HTML a CSS HTML a CSS Html a css (patička) American English version English version

Avatar
jakub.matousek23:

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:

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:

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
Jsem hloupý člověk, proto se musím vzdělávat
Avatar
Jan Kožnárek (Creevek_CZ):

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. Twitter: @Creevek_CZ
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Aleš Lulák
Tomáš123:

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í
+1 bodů
Ř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:

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
Jsem hloupý člověk, proto se musím vzdělávat
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Aleš Lulák
Tomáš123:

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
Nahoru Odpovědět  +1 26.2.2015 21:41
Jsem hloupý člověk, proto se musím vzdělávat
Avatar
Aleš Lulák
Člen
Avatar
Odpovídá na Tomáš123
Aleš Lulák:

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
Jsem hloupý člověk, proto se musím vzdělávat
Avatar
Tomáš123
Člen
Avatar
Tomáš123:

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:

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
Jsem hloupý člověk, proto se musím vzdělávat
Avatar
jakub.matousek23:

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:

Á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  +1 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:

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.