Pomembna CSS koda:

/* position:absolute za vse brskalnike - premika se celotna stran */
div#headerwrap {
position:absolute;
width:100%;
top:0;
left:0;
height:50px;
}

/* position:fixed - premika se le middlewrap (zaradi dedovanja) */
body>div#headerwrap {
position:fixed;
}

div#header {
height:50px;
width:720px;
margin:0 auto;
}

div#middlewrap {
/* padding za to, da glava in noga ne prekrijeta vsebine */
padding:50px 0 50px 0;
margin:0;
}

div#middle {
width:720px;
margin:0 auto;
}

div#sidebar {
width:180px;
float:left;
}
div#content {
padding:0 10px;
margin-left:180px;
}

/* v primeru, da brskalnik ne pozna position: fixed; */
div#footerwrap {
width:100%;
position:absolute;
bottom:0;
left:0;
height:50px;
}

body>div#footerwrap {
position:fixed;
}

div#footer {
height:50px;
width:720px;
margin:0 auto;
}

Celotna CSS koda

HTML postavitev

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/style.css" />

</head><body>

<div id="headerwrap">
<div id="header">
<h1>Statična glava</h1>
</div>
</div>

<div id="middlewrap">
<div id="middle">
<div id="sidebar">
<h2>Meni</h2>
</div>
<div id="content">
<h2>Razlaga kode</h2>
</div>
</div>
</div>

<div id="footerwrap">
<div id="footer">
<h2>Noga</h2>
</div>
</div>

</body></html>

Vse si lahko prenesete tukaj: Prenosi (CSS).

Razlaga:

HTML dokument je sestavljen iz treh delov: headerwrap, middlewrap and footerwrap. Headerwrap in footerwrap sta statična (position: fixed; ). Middlewrap ima zgornji in spodnji rob (padding-top, padding-bottom) določen tako, da glava in noga ne prekrivata vsebine.

Sredinska poravnava spletne strani obstaja zato, ker ima vsak del margin-left in margin-right nastavljen na auto (margin:0 auto; ).

V brskalnikih, ki ne podpirajo position: fixed; zaradi prej določenega position: absolute; ne bo težav.

Ta postavitev okvirjev naj bo le ogrodje vaše spletne strani.

Svetujem vam, da malo spreminjate kodo in opazujete, kako se bo stran odzvala v različnih brskalnikih.

[ Na vrh ]

Komentiraj:

Sorodni vodiči
Položaj ozadja CSS senca za besedilo CSS Povečava slike Div v divu in problem z višino - overflow: auto CSS sprites meni s hover efektom	Statična glava in noga s CSSjem Posebne pisave oz. fonti na spletni strani 6 CSS namigov CSS kode 1 Zamenjava slike s pomočjo CSS HOVER

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé

Pomembna CSS koda:

HTML postavitev

Razlaga:

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."

Moje-Mesto.com

Oglasi

Naključni CSS vodiči