Diskuze: Zápatí a problémem s div

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Roman Duchoň

Člen

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

Honza Bittner

Tvůrce

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.

Roman Duchoň

Člen

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

Honza Bittner

Tvůrce

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.

Wal De Mar-Lad

Člen

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...

Roman Duchoň

Člen

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

Ján Timoranský

Tvůrce

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.

Roman Duchoň

Člen

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

Ján Timoranský

Tvůrce

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č

Nahoru Odpovědět

18.6.2017 19:48

Find what you love and let it kill you.

Roman Duchoň

Člen

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

Ján Timoranský

Tvůrce

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.

Roman Duchoň

Člen

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

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.