Přetékání textu přes patičku – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Přetékání textu přes patičku – CSS – Fórum – Programujte.comPřetékání textu přes patičku – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
thorma0
Duch
9. 4. 2013   #1
-
0
-

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

HTML

<!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;}
Nahlásit jako SPAM
IP: 193.86.190.–
Reklama
Reklama
JMM
~ Redaktor
0
Grafoman
14. 4. 2013   #2
-
0
-

problém vidím v tom že máš všude position: absolute;

Nahlásit jako SPAM
IP: 89.111.96.–
Jan Malý | web: www.malyphoto.cz, @malyphoto
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 1 host

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý