| Autor | Zpráva | ||
|---|---|---|---|
| domeon Profil |
#1 · Zasláno: 23. 6. 2011, 16:24:40 · Upravil/a: domeon
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 |
#2 · Zasláno: 23. 6. 2011, 17:02:09
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 |
#3 · Zasláno: 23. 6. 2011, 19:40:32
Díky
|
||
|
Časová prodleva: 7 dní
|
|||
| Spectator Profil |
#4 · Zasláno: 30. 6. 2011, 17:12:50 · Upravil/a: Spectator
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 |
#5 · Zasláno: 30. 6. 2011, 17:15:22
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 |
#6 · Zasláno: 30. 6. 2011, 17:29:50 · Upravil/a: Spectator
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? |
||
|
Časová prodleva: 4 dny
|
|||
| patlal Profil |
#7 · Zasláno: 4. 7. 2011, 16:43:57
Spectator:
Patičku máš mimo natažený div. Je to stejné, jako když naleješ vodu mimo skleničku. Také neskončí na jejím dně. |
||
|
Časová prodleva: 5 let
|
|||
| Uga Profil |
#8 · Zasláno: 10. 1. 2016, 01:24:06
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. |
||
|
Časová prodleva: 8 let
|
|||
0