Du er her: Forsiden - html - testsider - Side med fikserede elementer
Brugere lige nu: 1
Home Mail Printer
FreeFind

Side med fikserede elementer

Hop længere ned på siden, til:

Modifikation for IE

Siden er opdateret 22.2.2007

Eksempel på fikserede elementer - denne kode forstår MS IE tidligere end version 7 desværre ikke, selv om den har været standard css i årevis:

Her er topbar, menu og footer fastholdt på deres positioner i browservinduet, selv om siden scrolles. For at det kan gøres, skal de tre elementer først i css defineres på deres ønskede positioner:

body {
margin: 0;
padding: 0;
}

#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
}

#menu {
position: fixed;
top: 0;
left: 0;
padding-top: 80px
width: 150px;
}

#indhold {
padding-left: 160px;
padding-right: 15px;
padding-top: 85px;
padding-bottom: 25px;
}

#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
}

^ Tilbage til sidens top


Modifikation for IE

Af årsager, man skal hedde William Gates for at forstå, kan MS IE versioner før 7 ikke håndtere koden i ovenstående eksempel, selv om det har været standard css2 siden før IE 6 kom på gaden. Derfor skal der laves en lille tilføjelse på siden, for at få IE før version 7 med:

<!--[if lt IE 7]>
<script type="text/javascript" src="ie7-standard-p.js"></script>
<![endif]-->

Javascriptet er omkranset af en betingelse - conditional comments, som får alle andre browsere end netop IE før version 7 til at ignorere scriptet.

Du kan finde javascriptet ved at kigge i denne sides header og der finde scriptets adresse. Men det er min erfaring, at nogle editorer kan finde på at smadre scriptet, når det efter hentning i browser kopieres over i en editor for at blive gemt på harddisken.

Derfor giver jeg dig mulighed for at downloade scriptet direkte i en pakket fil (zip).

^ Tilbage til sidens top