CSS - pozicování šířka pomocí procent

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

Detailnější informace o pozicování jsou shrnuty v kaskádových stylech.

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 id="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>
<ul>
<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://jakdelatweby.cz/">http://jakdelatweby.cz/</a>.</li>
</ul>
<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 id="patka">Copyright (c) 2007 Vaše jméno - Design & kód: <a href="http://jakdelatweby.cz/">Tvorba Webu</a></p>
</div>

<div id="menu">
<h3>Obsah webu</h3>
<ul>
<li><a href="#">Úvodní stránka</a></li>
<li><a href="#">Ceník služeb</a></li>
<li><a href="#">Naše reference</a></li>
<li><a href="#">Odkazy na weby</a></li>
<li><a href="#">Novinky na webu</a></li>
<li><a href="#">Dobré stránky</a></li>
<li><a href="#">Programování v PHP</a></li>
<li><a href="#">Ostatní zajímavosti</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>Odkazy:</strong><br><br><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://jakdelatweby.cz/sablony/">Šablony www stránek</a>.</p>
</div>

</body>
</html>

Zobrazit výsledek

Zdrojový kód css stylu

body {
background-color : white;
color : #585858;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
div#obsah {
position : absolute;
top : 30px;
left : 30px;
width : 65%;
}
div#menu {
position : absolute;
top : 30px;
left : 70%;
width : 25%;
font-size : 80%;
border-left : 1px solid #c8d1d9;
}
p#patka {
font-size : 80%;
text-align : center;
color : #7e7e7e;
border-top : 1px dashed #c8d1d9;
}
p#patka a {
color : #7e7e7e !important;
}
p {
margin : 15px;
line-height : 130%;
}
p.box {
background-color : #f6f7fc;
color : #6f90ba;
margin : 10px;
padding : 10px;
border : 1px solid #dbe2ee;
}
ol, ul {
margin : 15px 25px 15px 50px;
padding : 0;
}
li {
margin : 15px 10px 15px 10px;
padding : 0;
line-height : 130%;
}
h1 {
margin : 0 15px 15px 15px;
font-size : 150%;
font-weight : normal;
color : #6f90ba;
}
h2 {
border-bottom : 1px solid #c8d1d9;
margin : 15px;
padding : 0 0 5px 10px;
font-size : 130%;
font-weight : normal;
color : #6f90ba;
}
h3 {
border-bottom : 1px solid #c8d1d9;
margin : 15px;
padding : 0 0 3px 5px;
font-size : 130%;
font-weight : normal;
color : #6f90ba;
}
strong, em {
color : #6f90ba;
}
a:link {
color : #6f90ba;
}
a:visited {
color : #6f90ba;
}
a:hover {
color : red;
}
div#menu ul {
margin : 10px 10px 10px 20px;
padding : 0;
}
div#menu ul li {
margin : 5px 0 5px 0;
padding : 0;
list-style-type : none;
font-weight : bold;
}

Zobrazit CSS styl

CSS - pozicování šířka pomocí procent

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