Autor Zpráva
kulenka
Profil
Hezký den, obracím se na vás s dotazem, jak upravit stávající stránky, tak aby obsah stránek končil u patičky stránky a pozadí stránky u obsahu se automaticky rozšířilo podle délky textu.

html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>Paříž - informace a památky</title>
<link href="styly.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hlavicka">
<h1 align="center">Paříž - město mnoha tváří</font></h1></div>
<div id="menu">
<li><a class="tlacitko" href="index.html">Základní informace</a></li>
<li><a class="tlacitko" href="pamatky.html">Památky v Paříži</a></li>
<li><a class="tlacitko" href="umeni.html">Umění a kultura</a></li>
<li><a class="tlacitko" href="ubytovani.html">Ubytování</a></li>
<li><a class="tlacitko" href="doprava.html">Doprava</a></li>
<li><a class="tlacitko" href="pocasi.html">Počasí</a></li>
<li><a class="tlacitko" href="odkazy.html">Zajímavé odkazy</a></li>
</div>
</div>
<div id="obsah">
<h2 align="left">Základní informace</h2>
<br>
<img src="images/mesto.jpg" alt="Paříž" />
<br>
<table width="400" border="1">
<tr>
<td>Rozloha:</td>
<td>86,9 km<sup>2</sup></td>
</tr>
<tr>
<td>Počet obyvatel:</td>
<td>2 153 600</td>
</tr>
<tr>
<td>Měna:</td>
<td>euro (EUR)</td>
</tr>
<tr>
<td>Úřední jazyk:</td>
<td>francouzština</td>
</tr>
</table>
</p>
<p align="left">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<p align="left">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
<div align="left">p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</p>


</div>
</div>
<div id="patka">
<div>
<div align="center"><a href="mailto:sem@mail.cz">| webmaster |</a></div>
</div>
</div>
</body>
</html>


CSS:
/* CSS Document */

*{
margin:0px;
padding:0px
}
html{
width:100%;
height:100%;
}
body{
width:800px;
height:100%;
position:relative;
margin:0 auto;
}



#hlavicka { background-image:url(images/hlavicka.jpg);
width:800px; height:260px;
background-repeat:no-repeat;
position: absolute; left:51px; top:29px;
}
#hlavicka h1{ color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; margin-left:20px; margin-top:auto}

#menu {
background-color: #98DA67;
width:200px; height:390px;
position:absolute; left:50px; top:293px;
padding-top:50px;
list-style: none;
margin: 0;
padding: 0;
}

a.tlacitko{
border-bottom: 1px solid #D1D1D1;
background-color: #0099FF;
font-size: 12pt;
font-family: Arial, Helvetica, sans-serif;
width: 190px;
padding: 10px 5px 0px 5px;
color: #000000;
margin: 0px 0px 0px 0px;
display: block;
}
a.tlacitko:link{
text-decoration: none;
color: #000000;
}
a.tlacitko:visited{
text-decoration: none;
color: #000000;
}
a.tlacitko:hover{
background-color: #98DA67;
text-decoration: none;
border-bottom : 1px solid white;
color: #666666;
}

#obsah {background-color: #BDD4DF;
width:559px; height:370px;
position:absolute; left:253px; top:293px;
padding:20px; padding-top:0px
}

#patka {background-color: #3399FF;
width:800px; height:40px;
position:absolute; left:50px; top:687px
}

#patka div{margin-right:20px;margin-top:10px;text-align: right;}
#patka a:hover{text-decoration:none;}
#patka a{color: #CCCCCC}
Trejpa
Profil
kulenka:
aby obsah stránek končil u patičky stránky a pozadí stránky u obsahu se automaticky rozšířilo podle délky textu.
Jednoduše: nepozicuj. Nauč se plovoucí rozvržení.


Eventuálně můžeš místo prodlužování bloku podle textu zkrátit text podle bloku:
#obsah { overflow-y: auto; }




Toto je problém, u kterého je vhodné vložit živý odkaz, potom nám stačí jedno kliknutí a vidíme. Ne každému se chce otevírat editor, cpát tam tvoje kódy, domýšlet chybějící obrázek (mimochodem bez obrázku fajn bílé písmo na bílém pozadí), uložit, zobrazit,…

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: