Rozvržení stránky
Napsal: 10 led 2011 15:57
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}
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}