CSS Pozicov�n� 3 sloupce

Zde si můžete zobrazit výsledek nebo stáhnout šablonku.

Detailnější informace o pozicování jsou shrnuty v CSS.

Zdrojový kód html stránky

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="cs">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<meta name="description" content="Stru�n� popis www str�nky.">
<meta name="keywords" content="kl��ov� slova">
<link rel="stylesheet" type="text/css" href="styl.css">
<title>Titulek WWW str�nky</title>
</head>
<body>

<div class="menu">
<h3>Obsah</h3>
<ul>
<li><a href="#">�vodn� strana</a></li>
<li><a href="#">Odkazy a zdroje</a></li>
<li><a href="#">O autorovy</a></li>
<li><a href="#">Dal�� blobosti</a></li>
<li><a href="#">Novinky</a></li>
<li><a href="#">Kontakty</a></li>
</ul>
<h3>Novinky</h3>
<p><strong>7. dubna 2007</strong> - Kone�n� jsem se k tomu dostal a upravuju k�d (html, css) t�to �ablonky zm�na se projevila i na vzhledu.</p>
<p><strong>Star�� zm�ny</strong> - Star�� zm�ny nesledov�ny no u� je to tak :-(</p>
</div>

<div class="obsah">
<h1>Nadpis prvn� �rovn�</h1>
<p class="box">Toto je str�nka, kter� ukazuje vyu�it� CSS pozicov�n� a je zdarma ke sta�en�.</p>
<p><strong>Chcete m�t vlastn� web snadno a rychle?</strong> St�hn�te si tuto �ablonku poz�cov�n� v CSS p�epi�te texty a m�te vlastn� web hotov� je to tak snadn� sta�� jen z�klady html.</p>
<h2>Nadpis druh� �rovn�</h2>
<ol>
<li>Budu r�d kdy� v pati�ce nech�te odkaz na moji str�nku nen� to ale podm�nkou.</li>
<li>Pokud se v�m tato �ablonky nel�b� nevad� zkuste jinou na v�b�r jich je tu dost.</li>
<li>Dal�� informace nap�. jak str�nku publikovat a jak na n� dostat n�v�t�vn�ky hledejte zde: <a href="http://www.jakdelatweby.cz/">http://www.jakdelatweby.cz/</a>.</li>
</ol>
<p><em>Chcete m�t vlastn� web snadno a rychle?</em> St�hn�te si tuto �ablonku poz�cov�n� v CSS p�epi�te texty a m�te vlastn� web hotov� je to tak snadn� sta�� jen z�klady html.</p>
<p class="patka">Copyright (c)2004 Va�e jm�no Design & k�d <a href="http://www.jakdelatweby.cz/">Tvorba webu</a></p>
</div>

<div class="sloupec">
<h3>Zaj�mavosti</h3>
<p><strong>7. dubna 2007</strong> - Kone�n� jsem se k tomu dostal a upravuju k�d (html, css) t�to �ablonky zm�na se projevila i na vzhledu.</p>
<h3>Odkazy</h3>
<p>
<a href="http://soft.jakdelatweby.cz/">Rneosoft Software</a><br>
<a href="http://el.jakdelatweby.cz/">Elektrotechnika</a><br>
<a href="http://katalog.kratce.info/">Katalog www str�nek</a><br>
<a href="http://www.jakdelatweby.cz/sablony/">�ablony www str�nek</a><br>
</p>
</div>

</body>
</html>

Zobrazit v�sledek

Zdrojov� k�d css stylu

body {
background-color : white;
color : #50681e;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
div.menu {
position : absolute;
top : 20px;
left : 10px;
width : 180px;
font-size : 90%;
}
div.sloupec {
position : absolute;
top : 20px;
left : 780px;
width : 180px;
}
div.obsah {
position : absolute;
top : 20px;
left : 210px;
width : 550px;
}
p.patka {
font-size : 80%;
text-align : center;
border-top : 1px dashed #abd656;
padding : 5px;
}
p.patka a {
color : #50681e !important;
}
em, strong {
color : #abd656;
}
ol, ul {
margin : 15px 25px 15px 50px;
padding : 0;
}
li {
margin : 15px 10px 15px 10px;
padding : 0;
line-height : 130%;
}
p {
padding : 0;
margin : 10px;
line-height : 140%;
}
p.box {
padding : 10px;
border : 1px solid #eff0dd;
background-color : #f8f9f1;
}
a:link {
color : #92c034;
}
a:visited {
color : #92c034;
}
a:hover {
color : #cb630e;
}
h1 {
font-size : 160%;
color : #abd656;
font-weight : normal;
margin : 10px;
}
h2 {
font-size : 130%;
color : #abd656;
font-weight : normal;
margin : 10px;
padding : 0 0 3px 10px;
border-bottom : 1px dashed #abd656;
}
h3 {
font-size : 120%;
color : #abd656;
font-weight : normal;
margin : 10px;
padding : 0 0 3px 10px;
border-bottom : 1px dashed #abd656;
}
.menu p {
padding : 10px;
border : 1px dashed #abd656;
}
.sloupec p {
padding : 10px;
border : 1px dashed #abd656;
}
.menu ul {
margin : 15px;
padding : 0;
}
.menu ul li {
margin : 5px 0 5px 0;
padding : 0;
list-style-type : none;
}
.menu ul li a {
font-weight : bold;
}

Zobrazit CSS styl

CSS Pozicov�n� 3 sloupce

Zdrojový kód html stránky

Zdrojov� k�d css stylu

Pokračujte dál na

Reklama

Nejoblíbenější stránky

Šablony www stránek

Design pomocí rámu