NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Roman Duchoň
Člen
Avatar
Roman Duchoň:16.6.2017 16:03

Ahoj,
hledám různé návody na umístění footer.

Metoda, kdy se footer vloží do div, které obaluje celý obsah funguje... Ale v mém případě potřebuji vložit ještě div do div, tedy udělat něco jako:

<div id="hlavni">
        <div id="obsah">
        </div>
        <footer><footer>
</div>

A záhadně mi to celé zkolabuje a footer skočí někam pod header.
Nevíte, čím by to mohlo být?

V CSS mám

#zapati {
    width: 100%;
    height: 30px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(199, 184, 157, 0.5);
}

V těch daných div zkouším různé height a min-height, pořád nic.
Zoufale hledám a googlím a nic. Budu pokračovat, ale nějaká rada by mi mohla ušetřit pár hodin života, tak případně díky.

Odpovědět
16.6.2017 16:03
RD
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Roman Duchoň
Honza Bittner:16.6.2017 22:28

Nepochopil jsem co ti to dělá a co se má stát. Můžeš dát ukázku na jsfiddle nebo codepen?

Nahoru Odpovědět
16.6.2017 22:28
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Roman Duchoň
Člen
Avatar
Roman Duchoň:17.6.2017 2:47

Prostě... v konečné fázi mělo být "zápatí" až dole, ve 100% šířce, HTML obsahovalo v body postranní obsah (menu) a hlavní obsah (články) o různých šířkách s float right a left.
Někde jsem četl, že pomůže značku footer vložit do společného div a pak doplnit podobně, jak jsem psal v kódu CSS.

Psát kód nevím, zdá má teď smysl - po pátrání jsem zalovil ještě po deklaraci

clear: both;

, která zachránila situaci - zastavuje čekání na "obtékání textu". Na vysvětlenou pro případné další hledající.

Tudíž v tom je hlavně moje nedočkavost tvořit. clear jsem do teď neuměl.

Nahoru Odpovědět
17.6.2017 2:47
RD
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Roman Duchoň
Honza Bittner:17.6.2017 8:49

Dobrou moderní možností je využít flexbox, např.:

https://css-tricks.com/…icky-footer/#…

nebo mé ukázky https://jsfiddle.net/f4cfskg7/ či https://jsfiddle.net/f4cfskg7/1/

Nahoru Odpovědět
17.6.2017 8:49
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Wal De Mar-Lad
Člen
Avatar
Wal De Mar-Lad:17.6.2017 18:53

Málo si popísal svoj problém na to, aby sa dal celkom pochopiť a ten HTML a CSS kód nemá medzi sebou žiadnu súvislosť, konkrétne v css máš štýl pre id, ktoré v html nie je priradené žiadnej značke. Ale osobne si myslím, že Tvoj problém spočíva konkrétne v tom, že pätička Ti nejde na spodok stránky, lebo body značka sama o sebe nemá výšku 100%. Musíš špeciálne naštýlovať značky html a body, tie musia mať 100% výšku, ale nie cez min-height, to nefunguje vo všetkých prehliadačoch. Musíš použiť height. A následne musíš mať v body nejaký kontainer, tiež na výšku 100% a tam už sú potom triky s min-height, alebo s overflow.

Nahoru Odpovědět
17.6.2017 18:53
Libraries over frameworks...
Avatar
Roman Duchoň
Člen
Avatar
Roman Duchoň:18.6.2017 19:36

Normálně mi to už skoro všude funguje... ale proč mi to nefunguje v tomto případě, totálně nechápu...

https://jsfiddle.net/8cga60uw/

HB: Díky za tip na jsfiddle.
WDM: Jaké triky? :)

Nahoru Odpovědět
18.6.2017 19:36
RD
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na Roman Duchoň
Ján Timoranský:18.6.2017 19:43

Podľa mňa stačí dať .zapati

position: fixed

namiesto absolute, nie?

Nahoru Odpovědět
18.6.2017 19:43
Find what you love and let it kill you.
Avatar
Roman Duchoň
Člen
Avatar
Odpovídá na Ján Timoranský
Roman Duchoň:18.6.2017 19:45

To zůstává patička neustále na obrazovce... To se třeba mně osobně nelíbí...

Podezírám ty divy a jejich nastavení.
Protože všude jinde mi to funguje.

Nahoru Odpovědět
18.6.2017 19:45
RD
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na Roman Duchoň
Ján Timoranský:18.6.2017 19:48

V tom prípade stačí .main pridať clearfix, aby nabral svoju reálnu výšku z floatovaných elementov

.main:after {
  content: "";
  display: table;
  clear: both;
}
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
18.6.2017 19:48
Find what you love and let it kill you.
Avatar
Roman Duchoň
Člen
Avatar
Roman Duchoň:18.6.2017 20:00

No konečně... :)

Ač mi teda význam úplně uniká, budu muset pátrat ještě. Začínám a přeskakuji.
Moc jsme se prozatím zasekl u zápatí.

Nahoru Odpovědět
18.6.2017 20:00
RD
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na Roman Duchoň
Ján Timoranský:18.6.2017 20:20

Na tomto odkaze to je dobre vysvetlené. Akonáhle floatuješ element, tak jeho parent stráca pojem o jeho výške, preto, keď zafloatuješ všetky jeho deti, tak má výšku 0px a to treba napraviť takzvaným clearfixom. V dnešnej dobe sa už ale neodporúča float a je lepšie použiť flexbox, pokiaľ ti samozrejme stačí podpora od IE9+.

Nahoru Odpovědět
18.6.2017 20:20
Find what you love and let it kill you.
Avatar
Roman Duchoň
Člen
Avatar
Roman Duchoň:18.6.2017 20:43

Díky, dík...

A flexbox určitě omrknu...

Nahoru Odpovědět
18.6.2017 20:43
RD
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 12 zpráv z 12.