Autor Zpráva
Anonymní
Profil *
#1 · Zasláno: 2. 11. 2007, 12:48:31
Odpovědět Citovat
Dobrý den, mám problém s prvkem (dno) umístěným vždy dole:

#obal {
position: relative;
width: 770px;
margin: 20px auto 0 auto;
text-align: left;
height: 100%;
min-height: 100%;
}

body>#obal {
height: auto;
}

#paticka {
width: 770px;
margin: 30px auto 0 auto;
background: url('../img/paticka.gif') no-repeat 0 0;
padding-bottom: 80px;
}

#rozcestnik li {
list-style-type: none;
}

#rozcestnik li a {
list-style-type: none;
color: #FFFFFF;
font-size: 1em;
font-weight: normal;
text-align: center;
}

#policko1 {
float: right;
margin-right: 16px;
background-color: #2E6600;
padding: 3px 15px 5px 15px;
}

#policko2 {
float: right;
margin-right: 16px;
background-color: #2E6600;
padding: 3px 15px 5px 15px;
display: inline;
}




<body>
<div id="obal">
---obsah---
<div id="paticka">
---plovouci texty---
<div class="cistic">&nbsp;</div>
</div>

<div id="dno">
<ul id="rozcestnik">
<li id="policko1"><a href="">...</a></li>
<li id="policko2"><a href="">...</a></li>
</ul>
<div class="cistic">&nbsp;</div>
</div>
</div>

</body>


v IE7 se mi ta políčka nepřilepí úplně na dno a když dám v Opeře zmenšit stránku, tak pak ta políčka nejsou zcela u dna, ale buď "nedoléhají" nebo se musí posuvníkem trochu sjet, abych je viděl celá, prostě nesedí přesně u dna

chci Vás poprosit, nevíte kde je chyba? díky
Manq
Profil
#2 · Zasláno: 2. 11. 2007, 21:14:29
Odpovědět Citovat
Anonymní

Nejlepší by asi bylo ukázat nám web. Celý web.
Anonymní
Profil *
#3 · Zasláno: 2. 11. 2007, 21:21:08
Odpovědět Citovat
Manq

tohle je vlastně celý web, mám zatím rozepsaný tento kód

Petr
Anonymní
Profil *
#4 · Zasláno: 3. 11. 2007, 20:28:57
Odpovědět Citovat
opravu nikdo netuší? prosím
Petroff
Profil
#5 · Zasláno: 3. 11. 2007, 21:42:38 · Upravil/a: Petroff
Odpovědět Citovat
Takhle pata ani nemůže být na dně.
Musíš jí nastavit absolute , height a bottom(=height)

.pata { position:absolute; height:Hx; bottom: Hx; width:xxxx }

<body>
<div id="obal">

---obsah---

<div class="pata">
==bude u spodní hrany okna==
</div>

</div>
</body>

Zkus to nejdřív bez obsahu (pouze #obal + .pata), a až to bude 100% (i v IE6), přidej obsah (delší) a seřiď pomocí margin/padding velikost mezery mezi patou a koncem hl.obsahu.
Petroff
Profil
#6 · Zasláno: 4. 11. 2007, 13:56:02
Odpovědět Citovat
Máš to hotové ( 100% zobrazení testováno v IE6/7 Opera FF )
[já si alespoň doladit script vkládající tlačítkem text do zobrazené stránky, k testování layoutu - nejvíc se hodí na sloupce, ale na patičku taky] 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head><title>OK</title>

<style type="text/css">

* {margin:0;padding:0}

html,body {

height:100%;

width:100%;

text-align: center; /* _____ <- IE6 vycentruje obsah (#obal) */

}

#obal {

position: relative;

width: 770px;

/* !!!!

margin: 20px auto 0 auto; >>> nemůžeš nastavit výšku 100% a ještě přidat horní okraj 20px -> výška obalu přesáhne výšku okna

*/

margin: 0 auto;

text-align: left;

height: 100%; /*____________ <- IE6 nastaví min-height tímto způsobem */

min-height: 100%; /*________ <- protože tomuto nerozumí */

}

body>#obal {height: auto} /* <- jiné než IE6 nesmí mít 100%height */



#paticka {

width: 770px;

margin: 30px auto 0 auto;

background: url('../img/paticka.gif') no-repeat 0 0;

padding-bottom: 80px; /* <- určuje,jak hodně se může přiblížit k prvku #dno (80 moc daleko ?) */

}



#rozcestnik a:link, #rozcestnik a:visited  {

text-align: center;

text-decoration: none;

color: #FFFFFF;

}

#rozcestnik a:hover {text-decoration: underline}



#rozcestnik li {

list-style-type: none;

float: right;

margin-right: 16px;

padding: 0.2em 15px 0.3em 15px;

background: #2E6600;

display: inline;

}



#rozcestnik {

overflow: auto;

padding-right:50px; /*____________ <- odstup od okraje */

}



#dno {

position:absolute;

left:0;

width:100%;

bottom: 0;

font: normal 26px/1 Arial,san-serif; /* !!! VELIKOST PÍSMA !!! MOŽNO MĚNIT - VÝŠKA DNA SE PŘIZPŮSOBÍ */

height: 1.5em; /* hodnota = celková výška #rozcestnik li: 1.5em= výška řádku(1*1em)+paddingy(0.5em+0.3em) */

}

.cistic {clear:both; height:0; overflow: hidden}

</style>



<!-- TESTOVACI STYLY=BARVY POZADI A POMOCNY SKRIPT KE VKLADANI OBSAHU ZA JIZDY -->



<style type="text/css">

#obal { background: black; color:white } /*********** černý obal ***********/

#obal #obsah {background: gray; padding: 2em } /******* šedý vložený obsah */

#paticka { background: red; color:white } /******** červená patička *********/

#paticka #p_texty {background: pink; padding: 2em } /************* růžové vložené plovoucí_texty  */

#dno  { background: yellow } /******** žluté dno */

#rozcestnik  { background: #AAF } /***** modrý seznam */

</style>

<script type="text/javascript">

  var words=new Array("filler","text","silly","very","fill","make","short","long","col umn","test");

  function AddFillerLink(){

  if(!document.getElementById || !document.createElement) return;

  var i,l;window.dd=1;

  for(i=0;i<arguments.length;i++){l=document.createElement("a");l.href=" #";l.appendChild(document.createTextNode("Add Text to this section"));

  l.style.background="#fff"; l.style.padding="2px"; l.style.whiteSpace="nowrap";l.onclick=function(){AddText(this);return( false)};

  document.getElementById(arguments[i]).appendChild(l);}}

  function AddText(el){var s="",n,i; n=RandomNumber(20,80); for(i=0;i<n;i++) s+=words[RandomNumber(0,words.length-1)]+" ";

  var t=document.createElement("p"); t.appendChild(document.createTextNode(s)); el.parentNode.insertBefore(t,el);

  window.resizeBy(dd,dd);dd=-dd;}

  function RandomNumber(n1,n2){return(Math.floor(Math.random()*(n2-n1))+n1);}

</script>

<!-- důležité: zde vyjmenuješ id bloků,u kterých chceš mít tlačítko na vkládání textu -->

<script type="text/javascript"> window.onload=function(){AddFillerLink("obsah","p_texty");} </script>



<!-- NEMA VEDLEJSI UCINKY NA ZOBRAZENI * PO POUZITI ODSTRANIT -->



</head>

<body>

 <div id="obal"> OBAL



 <div id="obsah">------ OBAL &gt; OBSAH ------</div>



 <div id="paticka"> PATICKA



 <div id="p_texty">----- PATICKA &gt; P.TEXTY -----</div>



 <div class="cistic">&nbsp;</div>

 </div>



 <div id="dno">

 <ul id="rozcestnik">

 <li id="policko1"><a href="">xxxxx</a></li>

 <li id="policko2"><a href="">yyyyyyyyy</a></li>

 <li id="policko3"><a href="">zz zzz</a></li>

 <li id="policko4"><a href="">qqqqq</a></li>

 <li id="policko5"><a href="">ggg gggg</a></li>

 </ul>

 <div class="cistic">&nbsp;</div>

 </div>

 </div>



</body>

</html>
Anonymní
Profil *
#7 · Zasláno: 4. 11. 2007, 20:56:57
Odpovědět Citovat
diky moc, ale asi uz jsem blazen, taky koukam, ze v predchozim prispevku nemam to dno nastylovano, ale v dokumentu ano

kazdopadne diky moc jeste jednou, v mem dokumentu se to jeste s necim tluce a to zpusobuje muj problem, mrknu jeste na to
Petroff
Profil
#8 · Zasláno: 5. 11. 2007, 07:57:56
Odpovědět Citovat
Jinak když jsi mluvil o zvětšování/zmenšování stránky, tak každý prohlížeč to dělá trochu jiným způsobem (a výsledkem).
- FF zvětšuje text, ale šířka sloupce #obal se nemění, text rychle dosáhne dna a přeteče dolů (žádný scrollbar!!!).
- Opera zvětšuje všechno,a když text dosáhne dna a přeteče dolů -> scrollbar se objeví.

Ale důležité je , že na uspořádání bloků se (po změně zvětšení) nic nezmění - takže ani chování patičky se nezmění:
buď ti předtím fungovala( a pak musí fungovat i po zvětšení), nebo nefungovala ani před ani po zvětšení

Já osobně když mi stránka blbne, vezmu dokument, který fungoval 100% a pak tam přidávám po malých kouscích kódu/css (a hned zkontroluju v brows.) až do okamžiku, kdy to selže. A máš pachatele.
Ty to máš trochu nevýhodné, protože používáš čistič(e). A jakmile dáš 1.plovoucí prvek, tak musíš najít jeho čistič a vložit (pak vkládáš ostatní bloky ležící mezi tím 1. a čističem).
Kdysi jsem taky vkládal DIVy{clear }, ale teď už ne. Jsou 2 lepší (a čistší - jen pomocí stylů) metody.
A rozhodně se to líp odlaďuje !!!
Anonymní
Profil *
#9 · Zasláno: 5. 11. 2007, 10:25:33
Odpovědět Citovat
tak už mi z toho jde hlava kolem

zjistil jsem, že to dělá čistič...

#paticka {
width: 740px;
margin: 28px auto 0 auto;
background: url('../img/paticka.gif') no-repeat 0 0;
padding-bottom: 80px;
}

#paticka-text-vlevo {
float: left;
text-align: left;
margin: 13px 0 40px 5px;
display: inline;
}

#paticka-text-vpravo {
float: right;
text-align: right;
margin: 13px 15px 40px 0;
display: inline;
}

.cistic {
clear: both;
height: 0;
overflow: hidden;
font-size: 0;
}

#dno {
width: 740px;
height: 40px;
position: absolute;
bottom: 0;
left: 0;
border: 1px solid blue;
}

<div id="paticka">
<div id="paticka-text-vlevo">plave vlevo</div>
<div id="paticka-text-vpravo">plave v pravo</div>
<div class="cistic">&nbsp;</div> -ten to dělá, ale je tam nutný; když ho vymažu, je to O.K., ale nevím jak to pořešit bez něj
</div>

<div id="dno">blablabla</div>

prosím o jakoukoli radu, děkuji

Petr
Plaváček
Profil
#10 · Zasláno: 5. 11. 2007, 10:40:46
Odpovědět Citovat
Anonymní

Nemohl bys, prosím, svou problematickou stránku vystavit někde na internetu? Takhle ti těžko někdo pomůže.
Anonymní
Profil *
#11 · Zasláno: 5. 11. 2007, 11:16:12
Odpovědět Citovat
Plaváček

bohužel momentálně nemohu..
každopádně díky za rady, zkusím pořešit nějak sám
Petroff
Profil
#12 · Zasláno: 5. 11. 2007, 19:16:01 · Upravil/a: Petroff
Odpovědět Citovat
Opravdu nevím, co ti nefunguje.
Dal jsem ti ty poslední úpravy do kódu (!!! je nutné nastavit plaváčku m šířku !!!)
Máš to tady na webu, klikej na sloupec ať vidíš že se na patičku korektně napojí.
http://exstream.atlasweb.cz/plav_paticka.html

Schválně jsem sloupcům nenastavil šířku, pouze jednomu jsem dal max-width:350px (snadno zjistíš který je který)
Můžeš si ověřit, že buď float-div nebo jeho obsah musí mít šířku nastavenou, jinak sloupce budou pod sebou místo vedle sebe.
Petroff
Profil
#13 · Zasláno: 5. 11. 2007, 20:41:28 · Upravil/a: Petroff
Odpovědět Citovat
Najdeš pouze jeden rozdíl (oproti svým stylům) mám jiný rozcestník je jen 27px vysoký (máš 40px)

Vyřešil jsem tvůj problém - nechceš-li mít čistič, dej ho pryč a nastav patičce overflow: auto:
#paticka {
width: 740px;
overflow:auto;
margin: 28px auto 0 auto;
background: url('../img/paticka.gif') no-repeat 0 0;
padding-bottom: 80px;
}
Klepej na tlačítko v OBSAH => patička zajede tak jak má za DIV#dno a její spodní okraj bude zarovnaný se spodním okrajem DNA => podle toho si rozvrhni uspořádání + hodnoty....
Máš tam jinou divnost:
Všimni si, že #paticka je centrovaná ale #dno není ....
Petroff
Profil
#14 · Zasláno: 7. 11. 2007, 15:35:51 · Upravil/a: Petroff
Odpovědět Citovat
Hele zkusil jsem IE7 a zjistil jsem, že pokud stránku načteš zobrazí se správně.
Jakmile jí začneš měnit velikost okna, začne blbnout prvek #dno(=Plav.patička), při zmenšení okna a skrolování obsahu není zobrazen skrytý kus pozadí patičky. Ani při dynamickém zvětšování obsahu (JS tlačítkem) patička nereaguje a ani se nepohne.

Hrůza. (přitom kdykoliv stačí dát reload stránky a v tu chvíli je to v pořádku - až na to, že dynamický obsah je v čudu)
Vážně nevím čím to je - dokonce i IE6 funguje normálně.
Vlastně si psal že používáš IE7 - já jsem to dělal ve FF a testy v IE6.
Ještě zkusím Operu.... ale asi ti s tím nepomohu. Zkus se obrátit na Plaváčka, důležité je to chování přesně popsat (protože statický vzhled je OK)

Měl bys ty elementy přejmenovat, footer=pata zdrobněle patička je koncový prvek, navíc v tomto layoutu specialně pozicovaný v rámci okna. Pokud ho nazveš #dno a na stránku vložíš jiný prvek #paticka je těžké se domluvit (přestávám si rozumět sám se sebou :=))
Mám to - ta verze, kterou jsem ti poslal jako zdrojový kód úplně jako první funguje i v IE7 dobře.
Kdybys mě poslech a dělal postupné změny a hned po každé si to zkontroloval, zjistil bys, že jakmile v prvku #dno absolutně pozicovaném dáš místo width:100% jakýchsi 740px v tu chvíli to v IE7 přestává při pohybování s velikostí okna být hezké. Hodím ti na http://exstream.atlasweb.cz/ppOK.html stránku splňující všechny tvé kritéria jakmile si ji ověřím.[/b]
Petroff
Profil
#15 · Zasláno: 7. 11. 2007, 23:10:50
Odpovědět Citovat
Plaváček
Všiml jsem si, že můj jmenovec názývá footer tvým přídomkem a hle, objevil jsem Tvůj návod, nepochybuji že se jím v dobré víře řídil. Je pouze chybou IE7, že tvou radu nastavit si width patičky na hodnotu jinou než 100% (popř. jiný počet procent) zpochybní tím že patičku umístí na její místo jen v okamžiku nahrátí stránky a další její osud je mu lhostejný.
Já bych mu to nevyčítal (k nevybíravým slovním útokům používám jeho staršího bratra), spíše bych preferoval používat způsoby, které tyto chyby obcházejí. Těm bych klidně dával jména (viz např. Svatý Hák), lépe se pamatují a dají se snadno vygooglit.

petr
Časová prodleva: 16 let

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:

0