Diskuze: patička vždy dole

HTML a CSS HTML a CSS patička vždy dole American English version English version

Avatar
Adam Ježek
Tým ITnetwork
Avatar
Adam Ježek:

Zdravim,
mám na webu pár stránek, kde text nezabírá celou obrazovku a patička místo toho, aby si udržela těch 40 pixelů dole, tak roztáhne až ke "konci" té stránky a rozhodně nevypadá pěkně, když přes 3/4 stránky je černej pruh a má nahoře něco napsáno. Snažil jsem se to někde najít, ale nějak to nejde, takže jak to udělat, aby byla dole?
Jinak patička vypadá takto:

<footer>
       <p><b>Nejaky text | <a class="bilytext"  href="nejakastranka.cz" target="_blank">odkaz</a></b></p>

   </footer>

V CSSku u ní momentálně mám jen nastavenou výšku na 40px, což je tomu asi úplně jedno :D a barvu textu.

Děkuju.

Odpovědět 17.11.2014 13:32
Programátor dělá co může. Počítač co chce. | Pokud mi dáš mínus, tak prosim, napiš proč!
Avatar
Odpovídá na Adam Ježek
Josef Kuchař (Pepa489):

pokud jsem dobře pochopil co chceš, musíš tomu nastavit fixní pozici, podívej se na zdrojáky tohohle webu: http://virtualcompany.8u.cz/

Editováno 17.11.2014 13:41
Nahoru Odpovědět 17.11.2014 13:41
2x piš, jednou debuguj
Avatar
IT Man
Redaktor
Avatar
Nahoru Odpovědět 17.11.2014 13:52
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Adam Ježek
Tým ITnetwork
Avatar
Odpovídá na Josef Kuchař (Pepa489)
Adam Ježek:

Tak někde bude chyba (tipuju mezi židlí a počítačem :D ). Dokonce sem to zkopíroval ze zdrojáků:

<footer class="footer footer-fixed-bottom">
        <p><b>nejaky text | <a class="bilytext"  href="nejakastranka.cz" target="_blank">odkaz</a></b></p>

  </footer>

v CCSku pak toto:

.footer{
        width:100%;
        height:50px;
        background-color:#1abc9c;
        text-align:center;
        color:white;
        line-height:50px;
}

.footer-fixed-bottom{
        position:fixed;
        bottom:0;
        left:0;
}

s tím, že můj kód k patičce jsem smazal
A patička se stále roztahuje přes většinu stránky
//EDIT: tak mě ještě napadá, nemá se i něco nastavit body, aby se roztáhlo přes celou stránku?

Editováno 17.11.2014 14:00
Nahoru Odpovědět  -1 17.11.2014 13:59
Programátor dělá co může. Počítač co chce. | Pokud mi dáš mínus, tak prosim, napiš proč!
Avatar
Adam Ježek
Tým ITnetwork
Avatar
Odpovídá na IT Man
Adam Ježek:

Tak bůhví co tam mam. To co umim mi řiká, že oboje by mělo fungovat, jedno sem viděl dokonce v praxi, ale nic tam nefunguje. Tak kdyby jste byl někdo tak hodný a podíval se, co tam je za boudu http://parman.moxo.cz/ (ten web je pokusný pískoviště, tak to berte na vědomí :D )

Nahoru Odpovědět  -1 17.11.2014 14:08
Programátor dělá co může. Počítač co chce. | Pokud mi dáš mínus, tak prosim, napiš proč!
Avatar
IT Man
Redaktor
Avatar
Odpovídá na Adam Ježek
IT Man:

Takže body zruš tu zelenou barvu a dej tam tu modrou.
Patičku si nastav takhle:

position: fixed;
width: 100%;
height: 40px;
bottom: 0;
left:0;
background-color: #34EB0D;

A pak tomu body nastav tu modrou, co máš v article a tu tam zruš, ať to splývá. No a pak už si to dej, jak chceš. :)

Nahoru Odpovědět  +2 17.11.2014 14:57
Když nevíš jak dál, podá ti ruku někdo, od koho by jsi to nečekal. A tu šanci musíš přijmout!
Avatar
Fredep
Redaktor
Avatar
Odpovídá na Adam Ježek
Fredep:

Vysvětlím ti to, ta zelená barva je barva pozadí těla, nejedná se o patičku. Patička na tvém webu nemá žádné pozadí, pokud ji nějaké nastavíš, tak to hezky uvidíš, potom ji jen stačí nastavit fixní pozici, výšku, bottom a left.

Jo a nezapomeň následně nastavit padding spodku těla stránky na více než 40 px, neboť dlouhý text by se za tu patičku schovával :)

body{
padding-bottom: 40px;
}
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět 17.11.2014 15:48
Týmová práce je důležitá proto, aby bylo možno obvinit z neúspěchu někoho jiného.
Avatar
Adam Ježek
Tým ITnetwork
Avatar
Odpovídá na Fredep
Adam Ježek:

Díky :) ono se to celé chovalo divně, když jsem u všeho v ccsku odebral pozadí, tak na stránce stále bylo, nějak zůstalo načtené staré css (či co), po restartu XAMPu to začalo chodit normálně

Nahoru Odpovědět  -1 17.11.2014 16:41
Programátor dělá co může. Počítač co chce. | Pokud mi dáš mínus, tak prosim, napiš proč!
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 8 zpráv z 8.