Autor Zpráva
domeon
Profil
Pěkný den,
nevíte někdo jak v CSS udělat, aby vždy byla dole patička, i když bude obsah menší než celá stránka.
A obsah bude náhodně velký, takže jednou bude obsahovat například 90 řádku a jindy třeba jenom 2.
Díky za pomoc.
Petr Wudi
Profil
Svělý návod je zde: http://weblog.plavacek.net/2005-02.html#1108716997 (asi je to to, co hledáš)
Jde o to, že patička je absolutně vložena do relativně pozicovaného divu, který má minimální výšku 100% (a pro explorer přes nějaký hack výšku 100%).
domeon
Profil
Díky
Spectator
Profil
Dobré odpoledne,
zkouším také podle plaváčka a i podle CSS beauty udělat web s patičkou nalepenou na spodním okraji stránky a šířkou přes celou obrazovku.
Postupoval jsem podle instrukci, patička je dole.
Jakmile ovšem přidám větší množství textu, tak text podteče tuto patičku a ta už dole není, ale vysí kdesi v prostoru.

* {
    margin: 0;
    padding: 0;
}

html, body{
    background-color: #FFFFFF;
    color: #FFFFFF;
    height: 100%;
}

#header{
    background-image: url(../img/header_bg_patt.gif);
    width: 100%;
    height: 80px;
}

#header_grad{
    background-image: url(../img/header_bg_grad.gif);
    width: 100%;
    height: 20px;
}

#logo{
    float: left;
    padding-top: 8px;
    padding-left: 8px;
}


#menu{
    margin-left: auto;
    margin-right: auto;
    padding-left: 5px;
    padding-top: 56px;
    width: 960px;
    font-family: Verdana;
    font-size: 24px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
}

#menu ul{
    list-style-type: none;
}

#menu li{
    float: left;
    padding-right: 25px;
}

#menu ul a{
    color: #FFFFFF;
    text-decoration: none;
}

#menu li a:hover{
    color: #232323;
    text-decoration: none;
    /*background-image: url(../img/menu_bg_patt.gif);*/
}

#content{
    color: #232323;
    font-family: Verdana;
    font-size: 13px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    min-height: 100%; /**/
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    position: relative;/**/
    padding-bottom: 40px;
}

h1, h2, h3{
    color: #333333;
    padding-bottom: 10px;
}

#main{
    clear: both;
    float: left;
    width: 500px;
    padding-left: 5px;
    padding-right: 5px;
}

#right{
    float: right;
    padding-left: 5px;
    padding-right: 5px;
    border-left: 1px #333333 solid;
}
#footer_wrapper{
    border-top: 1px #DDDDDD solid;
    clear: both;
    /*margin-top: 25px; */
    bottom: 0px;
    width: 100%;
    height: 40px;
    position: absolute;
}

#footer_grad{
    background-image: url(../img/footer_bg_grad.gif);
    height: 20px;
}

#footer{
    background-image: url(../img/footer_bg_patt.gif);
    height: 20px;
    text-align: center;
}

/*************************************************/

<!DOCTYPE HTML>
<html>

<head>
  <title>{$title}</title>
  <meta http-equiv="content-type" content="text/html; charset=utf8" />
  <link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
</head>
<body>
        <div id="header">
            <img src="img/logo.png" id="logo">
            <div id="menu">
                <ul>
                    <li><a href="#">Domů</a></li>
                    <li><a href="#">Galerie</a></li>
                    <li><a href="#">Různé</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </div>
        </div>
        <div id="header_grad"></div>
        <div id="content">
            <div id="main">
                <h1>TEXT</h1>
                <p>
          TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
             TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
             TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
                </p>
                <h1>TEXT</h1>
                <p>
             TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
             TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
             TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
                </p>
            </div>
            <div id="right">
                <p>
                    <img src="img/myFace.jpg" class="profilePhoto">
                </p>
                <p>
                    Jmenuji se {$jmeno}  {$vek}.
                <p>
                    Programuji aktivně v PHP a Pythonu
                </p>
            </div>

        </div>
                    <div id="footer_wrapper">
                <div id="footer_grad"></div>
                <div id="footer">
                    {$autor}
                </div>
            </div>
</body>
</html>




Plaváček
Profil
Spectator:

Dodej živou ukázku (tipnu si ale, že v obsahu máš nějaké plovoucí boxy - možná by stačilo bloku #content nastavit vlastnost overflow:hidden].
Spectator
Profil
Plaváček:
http://spectator.spectator.cz/

EDIT: Je teda už možnost, že jsem v tom udělal někde nějakou chybu kvůli tomu všemožnýmu překopávání.

EDIT: tipnu si ale, že v obsahu máš nějaké plovoucí boxy - V tom content mám tam dva plovoucí boxy levý a pravý. To je zásaní problém?
patlal
Profil
Spectator:
Patičku máš mimo natažený div. Je to stejné, jako když naleješ vodu mimo skleničku. Také neskončí na jejím dně.
Uga
Profil
po dlouhém bádání a hledání mi pomohlo do css pridat toto:

    position: relative;
    margin-top: -150px; /* negative value of footer height */
    clear:both;

Mám náhodně velký obsah na několika stránkách a s tímhle kódem je patička vždy na konci stránky.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: