CSS - pozicování 2 sloupce

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 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>Odkazy: <a href="http://soft.jakdelatweby.cz/">Rneosoft Software</a>, <a href="http://el.jakdelatweby.cz/">Elektrotechnika</a>, <a href="http://katalog.kratce.info/">Katalog www stránek</a>, <a href="http://tvorba-webu.zdarek.com/sablony/">Šablony www stránek</a>.</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><!--konec obsahu-->

<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><!--konec menu-->

</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.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;
}
.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

Pokračujte dál na

Reklama

Webhosting C4



Copyright (c) 2004-2015 Tvorba Webu - Kontakt - mapa webu - RSS