Stránka 1 z 1

patička na konci stránky

Napsal: úte 23. úno 2010, 15:48
od drtici.pest
Dobrý den, mám takový problém. Potřebuji umístit patičku (a nějaké další divy) na konec stránky, aby vždy byly dole nehledě na velikost textu. Mohli by jste mi říci, kde dělám chybu? Jsem začátečník a moc se v tom ještě nevyznám. Děkuji

Kód: Vybrat vše

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">;
  <title></title>
  <style type="text/css">
<!--
html, body {
    height: 100%;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0
}
html>body {
    font-size: small;
}
*|html[xmlns*=""]  #main {
     display: table;
     height: 100%
}
 
 #main {
 min-height: 100%;
 margin: 0 auto;
 width: 1000px;
 position: relative;
 height: 100%;
 background: green
 }
 body>#main {
     height: auto;
 }
 
 #hlavicka {
 position: absolute;
 background-image: URL('images/web_01.gif');
 width:1000px;
 height:42px;
 top: 0px;
 left: 0px
  }
 
  #lsloupec {
  position: absolute;
  background-image: URL('images/web_02.gif');
  width:39px;
  height:802px;
  top: 42px;
  left: 0px
  }
  #odkaz {
  position: absolute;
  background-image: URL('images/web_03.gif');
  width:899px;
  height:145px;
  top: 42px;
  left: 39px 
  }
  #psloupec {
  position: absolute;
  background-image: URL('images/web_04.gif');
  width:62px;
  height:145px;
  top: 42px;
  left:938px
  }
  #pododkaz {
  position: absolute;
  background-image: URL('images/web_05.gif');
  width:900px;
  height:25px;
  top: 187px;
  left: 39px 
  }
  #bannery {
  position: absolute;
  background-image: URL('images/web_06.gif');
  width:61px;
  height:657px;
  top: 187px;
  left: 939px
  }
  #menu {
  position: absolute;
  background-image: URL('images/web_07.gif');
  width:189px;
  height:477px;
  top:212px;
  left: 39px 
  }
  #prouzek {
  position: absolute;
  background-image: URL('images/web_08.gif');
  width:37px;
  height:477px;
  top: 212px;
  left: 228px 
  }
  #obsah {
  position: absolute;
  background-image: URL('images/web_09.gif');
  width:674px;
  min-height:477px;
  top:212px;
  left: 265px
  }
  #podpaticka {
  position: absolute;
  background-image: URL('images/web_12.gif');
  width:900px;
  height:35px;
  bottom:0px;
  left: 39px;
  overflow: hidden;
  }
  #paticka {
  position: absolute;
  background-image: URL('images/web_11.gif');
  width:900px;
  height:89px;
  overflow: hidden;
  bottom:35px;
  left: 39px 
  }
  #podobsah {
  position: absolute;
  background-image: URL('images/web_10.gif');
  width:900px;
  height:31px;
  top: 689px;
  left: 39px
  }
-->
</style>

  </head>
  <body>
<div id="main">
<div id="hlavicka">Hlavicka</div>
<div id="lsloupec">Levz sloupec</div>
<div id="odkaz">Odkaz</div>
<div id="psloupec">Pravz sloupec</div>
<div id="pododkaz">Pod odkazem</div>
<div id="bannery">Bannery</div>
<div id="menu">Menu</div>
<div id="prouzek">Prouyek</div>
<div id="obsah">Obsah</div>
<div id="podpaticka">Pod paticka</div>
<div id="paticka">Paticka</div>
<div id="podobsah">Pod obsaem prouzek</div>
</div>
  </body>
</html>

Re: patička na konci stránky

Napsal: úte 23. úno 2010, 16:17
od bubanek
1) místo toho šílenýho seznamu html,body,.... můžeš použít * (hvězdička)
2) podívej se sem: http://ryanfait.com/sticky-footer/
3) dělat všechno přes position: absolute je dost nanic

Re: patička na konci stránky

Napsal: úte 23. úno 2010, 16:25
od drtici.pest
Promiň ale amglicky neumím tak dobře :sad: , jinak to má pozicovat relativně ? A to se dělá jak?

Re: patička na konci stránky

Napsal: úte 23. úno 2010, 16:31
od bubanek
To máš asi blbý když neumíš anglicky.
Nahoře máš dva odkazy, View CSS a Learn about using it.
Tak se na ně podívat.
Normálně se pozicování nepoužívá žádné. Jenom do sebe skládáš divy.

Re: patička na konci stránky

Napsal: úte 23. úno 2010, 17:04
od drtici.pest
No počky to teď nějak nechápu např. když budu mít tři divy, jeden bude sloupec o velikost 200px a zbývající dva budou mít výšku 50px a 50px, A chci aby byli na sobě narovnány vedle toho většího vpravo tak to mám udělat jak?

Re: patička na konci stránky

Napsal: úte 23. úno 2010, 17:09
od bubanek
Snadno. Nebudu ti tady dělat základní věci. Nejdřív si o tom něco najdi/přečti.
Patičku už jsem ti vyřešil. A jak můžeš vidět, ani tam se nepoužívá žádné pozicování.

Re: patička na konci stránky

Napsal: úte 23. úno 2010, 17:41
od drtici.pest
to sem nějak nepochopil jak už jsi mi vyřešil patičku?

Re: patička na konci stránky

Napsal: úte 23. úno 2010, 17:50
od bubanek
http://ryanfait.com/sticky-footer/
Odkazy View CSS a Learn about using it tak do nich se podívat.

Re: patička na konci stránky

Napsal: úte 23. úno 2010, 19:04
od arxeiss
bubanek píše:Normálně se pozicování nepoužívá žádné. Jenom do sebe skládáš divy.
Ale přece margin a padding je pozicování. Ne sice v tak velkém významu jako u postion: absolute; ale je to pozicování...

Rada pro drtici.pest: Zkus si najít nějaký lehký web, a mrkni tam do CSSka, popř si index stáhni a zkus si hrát. Takto jsem se naučil CSS já.

Re: patička na konci stránky

Napsal: úte 23. úno 2010, 19:43
od bubanek
margin a padding žádné pozicování není.
Pouze určuješ odsazení.

Pozicování = position: absolute/relative;

Re: patička na konci stránky

Napsal: úte 23. úno 2010, 20:05
od drtici.pest
Tak dík snad se to nějak naučím :-D ikdyž sám tomu moc nevěřím :(

Re: patička na konci stránky

Napsal: úte 23. úno 2010, 20:08
od KapaCZ
drtici.pest píše:Tak dík snad se to nějak naučím :-D ikdyž sám tomu moc nevěřím :(
To jsem taky říkal a nyný už se učim php a C.
(aspon něco co mě na tom životě částečně baví)