Paticka vzdy dole

fikotek

Ahojte,

nasel by se zde nekdo kdo by mi pomohl s touhle drobnosti??
Potrbuju aby paticka na webu byla ve spod stranky a to v pripadech kdy tam bude hodne textu a i kdyz tam zadny text nebude "malo textu". V obsahove casti by meli byt "jeden az dva" sloupce.

Kód: Vybrať všetko

.footer {  
    position: fixed;  
    height:40px;  
    bottom: 0px;  
}

takto nejak si myslel? Neviem presne čo si sa chcel opýtať

fikotek

Takhle prave ani ne

Paticka by mela byt umistena na spod stranky absolutne ale s tim ze posledni radek textu "kdyz ho tam bude vic" by mel byt od patcky vzdalen napr. 60px

Kdyz ani v jednom sloupci nebude zadny text tak paticka musi byt porad na spodu stranky

a melo by se to dobre zobrazovat jak v IE tak i v FF

tak ju upravuj cez php (ak tam je text, tak bude iba pod textom ten div, ak tam text nie je, tak sa k nej prida class ktory určí pozíciu)

fikotek

porad si asi nerozumime

vlozim sem CSS a HTML kod

CSS

Kód: Vybrať všetko

* {
   margin: 0;
}
html, body {
   height: 100%;
   padding: 0;
}

body>#main {
   height: auto;
}

body {
  background-image: url(../images/background.jpg);
  background-position: top center;
  background-repeat: repeat-x;
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 15px;
  color: #000000;
}

img {
  border: none
}

em {
  background-color: #d3d5e0;
  padding: 5px;
  color: #000000;
}

h2 {
  font-weight: bold;
  color: #ffffff;
  font-size: 13px;
  padding-left: 20px;
  padding-top: 7px;
  &padding-top: 8px;
}

h3 {
  font-weight: bold;
  color: #273473;
  font-size: 13px;
  padding-left: 20px;
  padding-top: 7px;
  &padding-top: 8px;
}

h4 {
  color: #273473;
  font-size: 13px;
}

#main {
  width: 943px;
  margin: 0 auto;
  min-height: 100%;
  height: 100%;
  position: relative;
}

#top {
  float: left;
  background-image: url(../images/top.jpg);
  width: 943px;
  height: 72px;
}

#black {
  float: left;
  width: 955px;
  height: 142px;
}

#black a img {
  float: left;
}

#menu {
  float: left;
  width: 588px;
  height: 142px;
  margin-left: 11px;
  &margin-left: 56px;
}

li.aktivni a {
  border-top: 4px solid #737ca8;
}

.portfolio, .profil, .sluzby, .kontakt {
  float: left;
  width: 147px;
  height: 74px;
}

.portfolio ul, .profil ul, .sluzby ul, .kontakt ul {
  display: block;
}

.portfolio ul li, .profil ul li, .sluzby ul li, .kontakt ul li {
  display: block;
  margin-top: 49px;
  &padding-bottom: 53px;
}

.portfolio ul li span, .profil ul li span, .sluzby ul li span, .kontakt ul li span {
  display: block;
  font-weight: normal;
  font-size: 10px;
  color: #dadada;
  width: 100px;
  margin-left: 8px;
  margin-top: 5px;
  line-height: 10px;
  letter-spacing: 0px;
}

.portfolio ul li a, .profil ul li a, .sluzby ul li a, .kontakt ul li a {
  font-weight: bold;
  color: #7a84b3;
  text-decoration: none;
  letter-spacing: 0.8px;
  padding-top: 20px;
  padding-right: 61px;
  padding-bottom: 53px;
  padding-left: 8px;
}

.portfolio ul li a:hover, .profil ul li a:hover, .sluzby ul li a:hover, .kontakt ul li a:hover {
  border-top: 4px solid #939597;
}

#bottom {
  float: left;
  background-image: url(../images/bottom.jpg);
  width: 943px;
  height: 36px;
}

#bottom p {
  float: left;
  margin-top: 10px;
  margin-left: 20px;
}

#bottom p strong {
  margin-right: 14px;
}

#bottom p a {
  text-decoration: none;
  color: #000000;
}

#bottom p span {
  margin-left: 7px;
  margin-right: 7px;
}

#bottom p a:hover {
  text-decoration: underline;
}

#bottom a img {
  float: left;
  margin-left: 12px;
  margin-top: 7px;
}

#obsah {
  width: 943px;
  padding-bottom: 85px;
  min-height: 100%;
  height: 100%;
  position: relative;
}

#levy {
  float: left;
  width: 311px;
}

#pravy {
  float: left;
  width: 632px;
}

#paticka {
  width: 943px;
  height: 37px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(../images/paticka.jpg);
}

#paticka p {
  margin-left: 20px;
  margin-top: 12px;
}

HTML

Kód: Vybrať všetko

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cz" lang="cz">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
<meta name="description" content="Kamenny Koberec"/>
<meta name="keywords" content="kola"/>
<meta name="robots" content="all, index, follow"/>
<meta name="author" content="fikotek"/>
<link rel="stylesheet" href="css/fikotek.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen"/>
<![endif]-->
<title>fikotek</title>
</head>
<body>
 <div id="main">
  <div id="top"></div>
   <div id="black">
    <a href="index.php"><img src="images/logo.jpg" alt="fain, logo, index, home" /></a>
    <? include "txt/profil.inc"; ?>
   </div>
    <div id="bottom">
     <p>Najdete Nás také na:</p>
     <a href="index.php"><img src="images/facebook.png" alt="facebook"/></a>
     <a href="index.php"><img src="images/delicious.png" alt="delicious"/></a>
     <a href="index.php"><img src="images/twitter.png" alt="twitter"/></a>
    </div>
  <div id="obsah">
   <div id="levy"></div>
   <div id="pravy"></div>
  </div>
  <div id="paticka">
   <p>nejaky text</p>
  </div>
 </div>
</body>
</html>

eMPiko

No, skus takto nejako:
HTML

Kód: Vybrať všetko

<div id="text">
Lorem ispum ...
<div id="medzera"></div>
</div>
<div id="paticka"></div>

CSS

Kód: Vybrať všetko

#text { min-height: 100%; margin: 0 auto -50px auto; }
#footer, #push { height: 50px; }

Nie som si isty, ale v IE 6 to pracovat nebude tak by som do #textu este pridal aj height: auto !important; a height: 100%;

fikotek

A pocitas v tom kodu i s pravym a levym sloupcem??

eMPiko

Namiesto toho Lorem Ipsum moze ist hocico. Este som to pozrel a zabudol som na jednu dolezitu vec:

Kód: Vybrať všetko

 html, body {
     height: 100%;
 }

Gepid

Pred nedávnom som to potreboval aj ja

http://www.darinka.sk/?q=footer-stick-p ... ku-stranky

fikotek

to uz tam mam kdyz se na ten kod dobre podivas

//autoeditácia príspevku ( 05 Aug 2009, 12:54 )
Abych to zjednodusil .. mam box #main ktery je vlozen relativne a do tohoto boxu je vlozena paticka absolutne. Takhle to funguje bez problemu.

Jenze kdyz do boxu #main vlozim .levysloupec a .pravysloupec ktere maji float: left; uz to nefunguje jak ma.

//autoeditácia príspevku ( 09 Aug 2009, 22:25 )
Takze se to vyresilo nasledovne:

CSS

Kód: Vybrať všetko

#main {
  width: 943px;
  margin: 0 auto;
  min-height: 100%;
  _height: 100%;
  position: relative;
}

.push {
  clear: both;
  overflow: hidden
  height: 1px;
  width: 1px;
}

#paticka {
  width: 943px;
  height: 36px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(../images/paticka.jpg);
}

HTML

Kód: Vybrať všetko

<div id="main">
 <div class="push"></div>
  <div id="paticka">
   <p>&copy; 2009 všechna práva vyhrazena</p>
 </div>
</div>