Autor Zpráva
Thorma
Profil
Dobrý den,
chtěl bych Vás požádat o radu/pomoc.

Dělám si pro sebe stránky dle grafického návrhu od kamaráda.
Vše je OK - i se mi to vcelku dobře ukazuje ve ve všech prohlížečích.

Problém nastane, když box (hlavní_text) začnu plnit informacemi.
Pak text nepěkně "přetéká patičku.

Zkoušel jsem "různě" kombinovat float, overflow, ale bez kladného výsledku.

Poradí někdo, jak zařídit aby patička byla dole a text, když bude větší než vymezený prostor jí nepřetékal a byl tedy vidět nebo šlo
jím posouvat?

Jak je jistě vidět, začínám.

Předem děkuji

Přikládám moje dílo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

 <head>
   <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
   <meta http-equiv="cache-control" content="no cache" />
   <meta http-equiv="pragma" content="no-cache" />
   <meta http-equiv="Content-language" content="cs" />
   <meta name="description" content="" />
     <meta name="copyright" content="" />
   <meta name="keywords" content="" />
   <meta name="author" content="" />
   <title></title>
    <!-- <style type="text/css"> </style> -->
   <link rel="stylesheet" type="text/css" href="css/style.css" />
 </head>
    
 <body>
  
<div class="obal">
           
  <div class="hlavicka">hlavička     
    <div class="horni_lista">horní lišta</div>
    <div class="kontakt_horni">horní kontakt</div>
    <div class="sipka_horni">šipka</div>
    <div class="logo">logo</div>     
    <div class="menu">menu</div>
    <div class="cara">dvojitá čára</div>
  </div>  
      
 <div class="body">  
                             
   <div class="blok_levy"> levý blok
     <div class="tlacitka">tlačítka</div>                     
     <div class="titulek">titulek</div> 
     <div class="sipka_stred">šipka</div> 
     <div class="hlavni_text">hlavní text</div>
   </div>
      
   <div class="blok_pravy">pravý blok
     <div class="foto">foto</div>
     <div class="deset_let">deset let</div>
   </div> 
      
   <div class="paticka">patička 
     <div class="text_dole">text dole</div>
     <div class="barevna_lista">barevná lišta</div>   
     <div class="kontakt_dole">kontakt dole</div>
   </div>
  </div>                  
 </div>     

    
    
 </body>   

</html>

CSS

/* CSS Document */
html,body {
  font-style:verdana; 
  font-size: 14px; 
  margin:0px;
    padding:0px;
    min-height:100%;
  background_:orange;
   }

div.obal {
  min-height:100%;
  min-width:100%;
  position:relative;
      }

div.hlavicka {
  height: 200px; 
  width: 995px;
  position:absolute;   
  left:134px;
  top: 0px;
  background: pink;
  }     

div.horni_lista {
  height: 12px; 
  width: 995px;
  position:absolute;   
  left:0px;
  top: 0px;
  background: #50253c;
  }     

div.kontakt_horni {
  height: 69px; 
  width: 107px;
  position:absolute;   
  left:888px;
  top: 0px;
  background: yellow;
  }

div.sipka_horni {
  height: 31px; 
  width: 19px;
  position:absolute;   
  left:850px;
  top: 25px;
  background: red;
  }

div.logo{
  height: 96px; 
  width: 216px;
  position:relative;   
  left:25px;
  top: 29px;
  background: lightgreen;
  }  
  
div.menu {
  height: 60px; 
  width: 640px;
  position:absolute;   
  left:355px;
  top: 83px;
  background:red;
      }

div.menu a {
  margin-left: 15px;
  margin-right: 10px;
  text-align:top;
   
      }


div.menu td {
height: 60px;
}

div.cara {
  height: 57px; 
  width: 995px;
  position:absolute;   
  left:0px;
  top: 143px;
  border-top: solid 2px #d6d8d5;
  border-bottom: solid 2px #d6d8d5;
  background:green;
  }
  
div.body {
  padding:0px;
    padding-bottom:0px;    /* Height of the footer */
   }  

div.blok_levy {
  height:693px; 
  width:452px;
  position:relative;   
  left:134px;
  top: 200px;
  background:orange;
   }    

div.tlacitka {
  height: 203px; 
  width: 410px;
  position:absolute;
  left:20px;
  top:2px;
  background:maroon;
  }

div.tlacitka img {
  margin-right: 14px; 
  }

div.titulek {
  height: 60px; 
  width: 340px;
  position:absolute;   
  left:20px;
  top:260px;
  background: gold;
    }

div.sipka_stred {
  height: 19px; 
  width: 31px;
  position:absolute;   
  left:390px;
  top:292px;
  background: lightblue;
    }

div.hlavni_text {
  height: 325px; 
  width: 410px;
  position:absolute;   
  left:20px;
  top:329px;
  background:grey;
    }


div.blok_pravy {
  height:693px; 
  width:542px;
  position:absolute;   
  left:586px;
  top: 200px;
  background:yellow;
   }    

div.deset_let {
  height:283px; 
  width:190px;
  position:absolute;   
  left:313px;
  top: 2px;
  background:blue;
   }

div.foto {
  height:668px; 
  width:542px;
  position:absolute;   
  left:0px;
  top: 25px;
  background:pink;
   }

div.paticka {
  position:absolute;
  left:134px;
    top: 893px;
    width:995px;
    height:63px;
  background: #983266;
  }     

div.barevna_lista {
  height: 12px; 
  width: 995px;
  position:absolute;
  left:0px;
  top:0px;
  background: #50253c;
  }

div.kontakt_dole {
  height: 43px; 
  width: 106px;
  position:absolute;
  left:20px;
  top:-31px;
  background: blue;
  }
  
div.text_dole {
  height: 30px; 
  width: 950px;
  position:absolute;
  left:20px;
  top:21px;
  background: pink;
  } 

img {border:none;}

 
a {color:black;font-weight:bold; text-decoration: none;}  
a:visited  {color:black;font-weight:bold; text-decoration: none;}
a:hover  {color:black;} 
Str4wberry
Profil
Řešení je prosté, použít pro stavbu layoutu obtékání místo posicování.
Thorma
Profil
Žádný prvek dle Vás by neměl být pozicovaný?
Mám obavy aby to všechny prohlížeče viděli stejně.
A syntexe left , top lze při obtékání používat?

Nějaké další doporučení?

Děkuji za odpověď
Trejpa
Profil
Thorma:
Žádný prvek dle Vás by neměl být pozicovaný?
Žádný, u kterého by jiné řešení bylo příliš komplikované. Na tvé stránce takový není.

Mám obavy aby to všechny prohlížeče viděli stejně.
Ale obavy z toho, že si někdo zvětší písmo a pozicovaný layout se ti rozjede, nemáš. Není problém, aby se to zobrazilo všem stejně.

A syntexe left , top lze při obtékání používat?
Ne. Tam se nechají prvky volně plynout pod sebou, jak jsou v kódu. Jen těm, co mají být vedle sebe, se nastaví float a pod nimi ukončí pomocí clear. Šířku mají nastavenu jen vnější a plovoucí bloky, ostatní v nich zanořené mají výchozí 100% šířku podle nich. Jejich odražení od hrany rodiče se provádí marginem nebo paddingem. Výška se téměř nikde nenastavuje.

Nějaké další doporučení?
Pochopit příklad: Jednoduché schéma stránky
Str4wberry
Profil
Problém při absolutním posicování je, že jednotlivé elementy na sebe nepůsobí — neovlivňují se. Na to je potřeba myslet. Jinak se web dá samozřejmě postavit i pomocí absolutního posicování. Třeba Yuhů jinak weby snad ani nedělá. I ta Trejpova ukázka by šla skoro 1:1 udělat i bez obtékání, pokud budeme mít jistotu, že obsahový sloupec bude vždy delší než menu.
Thorma
Profil
Takže jestli tomu dobře rozumím nepoužívat absolutní/relativní pozicování, ale raději float pro rozmístění bloků na stránce a uvnitř bloků, kde se nachází např. další bloky margin, padding, případně float?
Ukončení "plavání" se provádí pomocí clear:both.
Trejpa
Profil
Thorma:
Takže jestli tomu dobře rozumím nepoužívat absolutní/relativní pozicování
Absolutním pozicováním to lze také, ale musí se brát v potaz spousta věcí, které v plovoucím layoutu odpadají (jako vzájemná neinterakce objektů, zvětšování písma). Relativní pozice se k návrhu stránek nehodí vůbec, snad jen bez posunu k ukotvení té absolutní.

raději float pro rozmístění bloků na stránce
Ano. Rozhodně je to jednodušší.

Ukončení "plavání" se provádí pomocí clear:both.
Ano, to je správně. Když se ukončuje jen levé plavání, stačí clear: left;.


Str4wberry:
Třeba Yuhů jinak weby snad ani nedělá.
Yuhů to umí a uvědomuje si všechny důsledky použitého řešení. Tento rozhled však většině začátečníků chybí, takže pak pozicují každý malý obrázek a pak se diví, že se jim to rozjíždí, překrývá, nesedí ve větším rozlišení nebo přetékají jim texty.

I ta Trejpova ukázka by šla skoro 1:1 udělat i bez obtékání
Šla. Použil jsi 6 pozic (3 absolutní + 3 relativní bez posunu k ukotvení). Nahradil jsi tím moje tři floaty a přidal podmínku ke správnému zobrazení, která v mé verzi s floatem nebyla - to je jedna z věcí, na které začátečníci nemyslí. A také jsi pozicoval jen co bylo třeba a ten zbytek jsi nechal normálně plynout, což začátečníci nedělají - všechno z těla vytrhají pozicí a diví se, proč se v prázdné těle s nulovou výškou nezobrazuje obrázek na pozadí. Thorma výše použil 20 pozic. Pozicoval prostě zbytečně všechno.
Thorma
Profil
Pánové děkuji.
Hezký den

Vaše odpověď

Mohlo by se hodit

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

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