Autor Zpráva
carlos5112
Profil
Zdravím, mohli by ste mi niekto poradiť ako nastavím patičku stránky aby sa mi vždy dávala za koniec stránky, pretože furt ju mam nastavenu na tej istej pozicii a ked je dlhsi text tak mi prekryje vid obrazky:
http://postimage.org/image/b0kwin5t3/
http://postimage.org/image/4mdkuy15h/
http://postimage.org/image/krqoj6eih/

posielam aj moj kod
<
.spodok {
width: 60%;
height: 5%;
color: black;
background: white;
clear: both;
top: 91%;
left: 20%;
position: relative;

}

<
<!-- Spodok -->
       <div class="spodok" align="center">

        <small><p style="text-align:" > Vytvoril Juraj Adamčiak, zdroj uniza.sk!</p></small>                               
        <a href="#" onclick="document.body.style.behavior='url(#default#homepage)';document.body.setHomePage(../index.html);return false;">Nastaviť ako domovskú stránku</a>               
        <a href="sk_index.html"><img src="../pic/sk.gif" alt="Sk">                    
        <a href="../aj/aj_index.html"><img src="../pic/uk.gif" alt="Uk"></a>  

        </div
Chamurappi
Profil
Reaguji na carlose5112:
1) Zapomeň, že existuje posouvání elementů relativním pozicováním. Nehodí se prakticky na nic.
2) Viz Patička vždy dole.
carlos5112
Profil
Stále mi to nejde, pošlielam jednu stranku a štýl:

<HTML>
    <HEAD>
     <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
     <meta name="keywords" lang="cs" content="uniza,zilina,univerzita">
     <meta name="author" content="Juraj Adamčiak">
     <TITLE> UNIZA </TITLE>
     <link rel="stylesheet" type="text/css" href="../styl.css">
     <link rel="shortcut icon" href="../favicon.png">
    </HEAD>
    <body>

  
    <!-- header -->
    <div class="header"></div>
      
    

        <!-- lavé menu -->
        <div class="lavé">
        <h3>Menu</h3>
        <a href="sk_index.html"><img src="../pic/sk_home.png" alt="Home"></a>
        <a href="sk_historia.html"><img src="../pic/sk_historia.png" alt="Historia"></a>
        <a href="sk_vedenie.html"><img src="../pic/sk_vedenie.png" alt="Vedenie"></a>
        <a href="sk_fakulty.html"><img src="../pic/sk_fakulty.png" alt="Fakulty"></a>
        <a href="sk_fotogaleria.html"><img src="../pic/sk_fotogaleria.png" alt="Fotogaleria"></a>
        <a href="sk_videogaleria.html"><img src="../pic/sk_videogaleria.png" alt="Videogaleria"></a>
        <a href="sk_kontakt.html"><img src="../pic/sk_kontakt.png" alt="Konakt"></a>
        
        </div>
       <!-- aktualizačná plocha -->
    
        <div class="ap">
        <p class="hlavne_novinky"><marquee>Dňa 21.12.2012 (piatok) bude od 12.00 rektorské voľno pre všetkých študentov Žilinskej univerzity. Žilinská univerzita Vám želá krásne prežitie Vianočných sviatkov. </marquee></p>
        
        <h3>Študenti ŽU vytvorili slovenský rekord</h3>
        <img src="../pic/rekord.jpg" width="150" height="125">
        Viac informácii získate <a href="sk_rekord.html">tu</a>
         <hr width="800px" size="3" color="white" align="center" noshade>
         <h3>Pozvánka na 16. reprezentačný ples</h3>
         <img src="../pic/ples2.jpg" width="150" height="125">
        Viac informácii získate <a href="sk_ples.html">tu</a>
         <hr width="800px" size="3" color="white" align="center" noshade>
         <h3>Ocenenie Žilinskej univerzity - značka Kvalita Erasmus Mobility 2012 </h3>
         <img src="../pic/erasmus2.jpg" width="150" height="125">
        Viac informácii získate <a href="sk_erasmus.html">tu</a>
                 

         </div>  
            
    
       <!-- pravé menu -->
        <div class="pravé" align="center">
        <h3>Presný čas</h3>
        
        <a href="http://html.over.cz" target="_blank"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer  src=http://www.html.over.cz/clock24.swf width=97 height=95  type=application/x-shockwave-flash quality="high" bgcolor="#FFFFFF" wmode="transparent" menu="false"></a>
        
        <h3>Počasie</h3>
        
        <span><p><span><div class="right_content"><span><div class="panel"><span><div class="category"><span> <div class="content"><span><p><a href="http://adv.meteo.sk/datameteo.php"> <img src="http://data.meteo.sk/zadarmo/free1.php?user=6123" alt="Predpoved pocasia :: www.meteo.sk" border="0" height="175" width="140"> </a>  </p></span></div> <div class="footer"><span></span></div></span></div></span></div> </span></div> <div class="footer"><span></span></div></span>  </p><div class="cleaner">&nbsp;</div> </span>
        </div>
      <!-- Spodok -->
       <div class="spodok" align="center">

        <small><p style="text-align:" > Vytvoril Juraj Adamčiak, zdroj uniza.sk!</p></small>                               
        <a href="#" onclick="document.body.style.behavior='url(#default#homepage)';document.body.setHomePage(../index.html);return false;">Nastaviť ako domovskú stránku</a>               
        <a href="sk_index.html"><img src="../pic/sk.gif" alt="Sk">                    
        <a href="../aj/aj_index.html"><img src="../pic/uk.gif" alt="Uk"></a>  

        </div>
 

   
 </body>
</html>
styl:
body {
    background: repeat;
    background-image: url('pozadie.jpg');
    margin: auto ;
    border: 0px;
    
}

.header {
    background: no-repeat;
    background-image: url('header.jpg');
    width: 60%;
    height: 20%;
    top: 3%;
    left: 20%;
    position: absolute;
    
}

 
.lavé {
     width: 15%;
    height: 69%;
    top: 26%;
    left: 5%;
    position: absolute; 
    
}
.ap {
  width: 60%;
  height: 69%;
  top: 26%;
  left: 20%;
  position: absolute;
 }

 .pravé {
     width: 20%;
    height: 69%;
    top: 26%;
    left: 80%;
    position: absolute;
 }


.spodok {
width: 60%;
height: 5%;
color: black;
background: white;
clear: both;
top: 91%;
left: 20%;
overflow: hidden;
position: absolute;
bottom: 0;
}
peta
Profil
Proc menis position? Preci normalni chovani divu je, ze se zarovna pod vsechno, co je nad nim.
Odsazeni zleva muzes docilit marginem nebo paddingem.
.spodok {
width: 60%;
height: 5%;
color: black;
background: white;
clear: both;
/*top: 91%;*/
/*left: 20%;*/
margin-left:20%;
/*overflow: hidden;*/
/*position: absolute;*/
/*bottom: 0;*/
}

Ja myslim, ze mas cely ten layout chybne promysleny. Podle css mas vsechno pozicovane absolutne. Takze, cokoliv vytece mimo okno se ztrati nebo muze ztratit.
Kdyz to takhle pevne napozicujes a casti s obsahem nenastavis overflow, tak se stane presne to, co se ti stalo, kdyz je prava cast delsi, tak se prekryva s patickou.
Mozna by bylo dobre poslat obrazek, jak si to vlastne predstavujes, kdyz v prave casti budou 2 stranky textu, kde ta paticka vlastne ma byt?
A nestacilo by proste okopirovat ukazku od Chamurappiho? Tam je na strance odkaz ukazka. Tam to resi tim zpusobem, ze te stredni casti daji dole padding vysky paticky.
http://klient.plavacek.net/paticka/paticka-text.html
carlos5112
Profil
peta:
Chcel by som to tak ako to má on, lenže by som chcel aby sa mi tá pätička posunula, keď ten stredný obsah (kde má text NADPIS, NADPIS......) bude väčší, tak aby sa posunula pod ten obsah.
Davex
Profil
Tak to umíš udělat podle Plaváčka (viz odkaz v [#2]) a nepoužívat absolutní pozicování.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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