Den 27-12-2010 10:51, Jørgen Farum Jensen skrev:
> Resten, til og med </title>, bør du fjerne.
jeg blev sådan lidt nysgerrig - hvorfor skulle jeg dog det når det nu er
som jeg vil have det til ?
den side skal kun en ting den skal oplyse om det der står på den også
skal indholdet sådan ca. være midt i
og de to ting er på plads det virker i de mest brugte Browsere også vil
jeg da hønse i om de virker i en eller anden
Linux browser jeg mener hvis man har valgt at leve et liv med Linux så
må man være forberedt på at det skal give bøvl en gang i mellem
det kan aldrig blive mit problem ...
>
> Mere om centrering på denne side:
>
http://www.webdesign101.dk/csslayout/autocentrering.php
jamen den er ikke go siden har som helhed svært ved at bevare fokus og
som jeg har skrevet tidligere
man kam med fordel holde sig til en ting af gangen holde det så enkelt
som muligt og vise brugeren hvad der sker
og frem for alt hvor det skal være
jeg går ud fra det her sort snak skal danne mening
html, body {
margin:0; padding:0;
font-family:georgia,arial,sans-serif;
background-color:rgb(245,245,255);
color:#000;
}
#page {
position:absolute;
top:1em;
left:50%;
margin-left:-23.5em;
width:45em;}
men hvis det skal tjene noget formål så skal brugeren vide HVOR PÅ SIDEN det skal være hvorfra og hvortil det skal sættes ind
fordi en kode kan jo være flere KM lang ... også er det helt umuligt at profitere af et hvis man ikke ved hvor det skal stå hænde
du kan jo din egen side kode den er jo alen lang og når der ikke er nogen henvisning til hvor tingene skal være jamen
hwa fan skal man så gøre
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<title>Webdesign 101 : Design : : Autocentrering</title>
<meta name="description"
content="Metoder til centrering af en websides indhold i browservinduet." />
<meta name="robots" content="all" />
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css"
href="autocentrering.php_files/print.css" media="print" />
<style type="text/css" media="screen">
@import url(/www/res/common2006.css);
@import url(/www/res/navbar2005.css);
@import url(/www/res/formbox.css);
dl.kviklinks dt#link4 {color:white;background:#257;padding:2px 0 2px 4px;}
dl.kviklinks dt#link4 a {color:white;background:#257;text-decoration:none;}
pre.bg {border:1px solid #257;padding:1em;background:white;}
pre.scroll {height:12em;overflow:auto;}
.cb {clear:both;}
.red {color:#c00;}
#indhold code {font-size:100%;}
.indent {margin-left:1.5em;text-indent:-1.5em;}
.indryk {margin-left:1.5em;}
.eksempelboks {width:45%;float:left;}
.floatr {float:right;width:45%;}
div.box {
float:left;
width:210px;
height:50px;
margin:10px 0;
padding:5px 10px;
background:#c8d8e8;
border:1px solid #000;
}
div#ex1 {overflow:hidden;}
div#ex2 {clear:left;overflow:auto;}
</style>
</head>
<body browserdefender_phish="-1" browserdefender_turkman="-1"
browserdefender_rating="0" class="sektion3">
<div id="page">
<div id="banner"> <a name="toppen" />
<h1>Webdesign 101 <br />
<em>– en webdesign notesbog</em></h1>
</div>
<div id="content">
<div id="container">
<div id="indhold">
<ul class="sti">
<li><a href="
http://www.webdesign101.dk/">Forsiden
<li><span>»</span> <a href="
http://www.webdesign101.dk/design/">Design
<li><span>»</span> <a
href="
http://www.webdesign101.dk/csslayout/index.php">CSS layout</a></li>
</ul>
<h2>Autocentrering</h2>
<div class="manchet">
<p>Centrering af en webside i browservinduet beror i (næsten) alle
tilfælde på, at alt websidens indhold indkapsles i en eller flere
CSS-kasser, som er det eller de elementer, vi dernæst centrerer. </p>
</div>
<p>Der er forskellige metoder til centering, midtstilling,
autocentrering eller hvad du nu fortrækker at kalde det. Jeg gennemgår
disse i en håndfuld eksempler. På denne side gengiver jeg kun de
vigtigste dele af de stylesheets, der knytter sig til de enkelte
eksempler. Ønsker du at se stylesheet for hele eksempelsiden, må du
bruge browserens Vis kilde funktion.</p>
<p class="indent">
<a href="
http://www.webdesign101.dk/csslayout/ex/autocentrering_1.html">Autocentrering
med lige brede marginer</a>: Denne metode består meget enkelt i at give
<code>body</code>-elementet en højre og venstre margin, der er lige
store. Dette vil så at sige skubbe websidens indhold ind mod midten.
Websidens bredde bliver elastisk, det vil sige den ændrer sig med
browservinduets bredde. Marginernes bredde kan fastsættes med de mål,
der passer dig og dit formål. Det mest populære er nok brugen af
procenter, som i eksemplet:</p>
<pre class="bg">body {<br /> margin:1em 5%;padding:0;<br
/> font-family:georgia,arial,sans-serif;<br />
background-color:rgb(245,245,255);<br /> color:#000; }<br
/></pre>
<p class="indent">
<a href="
http://www.webdesign101.dk/csslayout/ex/autocentrering_2.html">Autocentrering
med auto-marginer</a>: Hvis din side har et overordnet element, der
omfatter alt indhold på siden, og hvis dette element har en bredde, kan
du fordele den overskydende plads ligeligt mellem venstre og højre side
ved at sætte de repektive marginbredder til <code>auto</code>: </p>
<pre class="bg">html, body {<br /> margin:0;
padding:0;<br /> font-family:georgia,arial,sans-serif;<br
/> background-color:rgb(245,245,255);<br /> color:#000;
}<br />#page {<br /> width:45em;<br /> margin:1em
auto;}<br /></pre>
<p class="indryk">Du behøver strengt taget ikke et overordnet element,
der omfatter alt på siden. Har du for eksempel et banner, en
indholdsdel og en sidefod, kan du lave det samme trick på hver af disse.</p>
<p class="indent">
<a href="
http://www.webdesign101.dk/csslayout/ex/autocentrering_3.html">Autocentrering
med negativ margin</a>: Her er tale om en lidt fiffig metode, hvor vi
først flytter <code>#side</code>-elementet 50 procent ind på siden og
dernæst sætter en <em>negativ</em> margin på det halve af elementets
bredde. Derved centreres det midt på siden (midtstilling, er der nogle,
der kalder det).
</p>
<pre class="bg">html, body {<br /> margin:0;
padding:0;<br /> font-family:georgia,arial,sans-serif;<br
/> background-color:rgb(245,245,255);<br /> color:#000; <br
/> }<br />#page {<br /> position:absolute;<br />
top:1em;<br /> left:50%;<br /> margin-left:-23.5em;<br
/> width:45em;}<br /></pre>
<p class="indryk">
Hvis du vil sikre dig centrering også i Internet Explorer 5, er du nødt
til at tilføje nogle ekstra formregler af hensyn til denne browser:
</p>
<pre class="bg">html, body {<br /> margin:0;
padding:0;<br /> font-family:georgia,arial,sans-serif;<br
/> background-color:rgb(245,245,255);<br /> color:#000; <br
/> <span
class="red">text-align:center;</span> }<br />#page
{<br /> position:absolute;<br /> top:1em;<br />
left:50%;<br /> margin-left:-23.5em;<br />
width:45em;<br /> <span
class="red">text-align:left;</span>}<br /></pre>
<h3>Autocentrering både vandret og lodret</h3>
<p>Lodret centrering har jo kun mening, hvis alt websidens indhold kan
være inden for en højde på browservinduet på 440 pixel. (Det er
indholdsrudens højde i et browservindue, der er maksimeret til at fylde
hele arealet af en 800*600 pixel monitor. Ved 1024 * 768 er det
tilsvarende mål 605 pixel.)</p>
<pre class="bg">#page {<br /> position:absolute;<br
/> left:50%;<br /> top:50%;<br />
margin-left:-22.5em;<br /> width:45em;<br />
height:400px;<br /> margin-top:-200px;<br />
background:#dedede;<br /> border-width:1px 0 1px 1px;<br />
border-style:solid;<br /> <span
class="red">overflow:auto;</span>}<br /></pre>
<p>Det tilsiger os, at vi er nødt til at operere med absolutte mål på
det indhold, der skal centreres. Eksemplet <a
href="
http://www.webdesign101.dk/csslayout/ex/autocentrering_4.html">Autocentrering
både vandret og lodret</a> viser en sådan webside, der er lavet med det
stylesheet, du ser herover</p>
<p>Du kan sikkert genkende teknikken fra websiden om <a
href="
http://www.webdesign101.dk/csslayout/ex/autocentrering_3.html">Autocentrering
med negativ margin</a>. Indholdskassen <code>div#page</code>
positioneres absolut med kassens overkant 50% af browservinduets højde
fra browservinduets overkant og tilsvarende for kassens venstre kant.
Dernæst gives indholdskassen en negativ <code>margin-top</code> på det
halve af kassens højde og en negativ venstre margin på det halve af
kassens bredde. <span xml:lang="de" lang="de">“
Keine Hexerei, nur Behändigkeit”</span>, som tryllekunstnerne siger.</p>
<p>Du bemærker sikkert i eksemplet (medmindre du har en <em>meget</em>
stor monitor), at der er en lodret rulleskakt i indholdskassen, idet
det indhold jeg har, fylder mere i højden end der er plads til inden
for de 400 pixel. Denne rulleskakt fremkaldes af <code>overflow</code>-attributten,
der er markeret med rødt i stylesheet-kildekoden.</p>
<h3>Overflow-attributten</h3>
<div class="eksempelboks">
<div id="ex1" class="box">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div id="ex2" class="box">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
<pre class="bg floatr">div.box {<br /> float:left;<br
/> width:210px;<br /> height:50px;<br /> margin:10px
0;<br /> padding:5px 10px;<br /> background:#c8d8e8;<br
/> border:1px solid #000;} <br />div#ex1 {<br />
overflow:hidden;}<br />div#ex2 {<br /> clear:left;<br
/> overflow:auto;} <br /></pre>
<p class="cb">Herover til venstre ser du et par kasser med blå
baggrund. Kasserne, der har det samme tekstmæssige indhold, er lavet
med det stylesheet, du ser til højre for kasserne. Forskellen på de to
kasser skyldes de værdier, jeg har givet <code>overflow</code>-attributten.</p>
<p>Denne attribut tager følgende værdier: <code>visible, hidden,
scroll, auto</code> og <code>inherit</code>. I den øverste kasse er
værdien <code>hidden</code>, i den nederste <code>auto</code>. Det
vil føre for vidt her at gå i detaljer med de forskellige virkninger,
der fremkommer ved brug af de forskellige værdier - især da
browserunderstøttelsen og måden, hvorpå attributten fortolkes i de
forskellige browsere, er en noget indviklet affære. Der er nok at vide,
at værdien <code>auto</code> sætter en lodret rulleskakt, hvis
indholdet er for meget til kassen (undtagen i Opera-browseren, der også
sætter en vandret rulleskakt), samt at værdien <code>hidden</code>
skal bruges, hvis du <em>ikke</em> ønsker det overskydende indhold
vist.</p>
<p>Til mit formål, nemlig at lave en webside, hvor alt indholdet er
centreret, også lodret, kan jeg nøjes med at bruge <code>overflow:auto</code>.
Det er værd at bemærke, at jeg skal have en absolut højde på kassen <code>div#page</code>,
for at overflow-attributten kan gøre sit kunststykke. </p>
<h3>Relativ bredde</h3>
<p>Den absolutte højde på indholdskassen er ikke til at komme uden om,
hvis du vil have lodret centrering. Men kan vi ikke lave det sådan, at
indholdskassens bredde øges, hvis browservinduets bredde øges - altså
ala det, jeg demonstrerede på websiden <a
href="
http://www.webdesign101.dk/csslayout/ex/autocentrering_2a.html">
Autocentrering med relative marginer</a>. </p>
<pre class="bg">#page {<br /> position:absolute;<br /> left:50%;<br /> top:50%;<br /> <span
class="red">margin-left:-40%;</span>
<span class="red">width:80%;</span>
height:400px;
margin-top:-200px;
overflow:auto;
background:#dedede;
border-width:1px 0 1px 1px;
border-style:solid;}
</pre>
<p>Jo, med lidt omtanke kan vi jo erstatte nogen af værdierne i
stylesheet'et ovenfor, så vi får det stylesheet, der ses herover. </p>
<p>Eksemplet præsenteres på websiden <a
href="
http://www.webdesign101.dk/csslayout/ex/autocentrering_4a.html">
Vandret og lodret centrering - relativ bredde</a>.</p>
<p><em>Joe Gillespie</em> på <a
href="
http://www.wpdfd.com/editorial/wpd0103.htm">
http://www.wpdfd.com rapporterer, at Opera browseren har problemer
med denne løsning. Jeg har ikke kunnet duplikere dette problem. Støder
du på det, foreslår Gillespie en <em xml:lang="en" lang="en">workaround</em>
på ovennævnte webadresse. </p>
<h3>Konklusion</h3>
<p>I denne har jeg givet forskellige CSS-løsninger på opgaven at
centrere et element i browservinduets indholdsrude. Til vandret
centrering foreslå jeg <a
href="
http://www.webdesign101.dk/csslayout/ex/autocentrering_2.html">Centrering
med automarginer</a>, til både vandret og lodret centrering foreslår
jeg brugen af en absolut højde på elementet og relativ bredde af
elementet: <a
href="
http://www.webdesign101.dk/csslayout/ex/autocentrering_4a.html">
Autocentrering både vandret og lodret – relativ bredde</a></p>
<p class="update">
Denne side er senest opdateret: February 24, 2006 </p>
</div>
</div>
<div id="rightcol">
<h3 class="top">Artikler om CSS-layout</h3>
<dl class="kviklinks">
<dt id="link1"><a href="
http://www.webdesign101.dk/csslayout/"
title="Argumenter for CSS-baseret layout. Oversigt over artiklerne">
Noter om websidelayout</a> </dt>
<dd>Nogle argumenter for CSS-baseret layout fremfor layout baseret på
tabeller. Links til mange eksempler, hvor jeg demonstrerer et antal
modeller til layout ved brug af position-egenskaben.</dd>
<dt id="link2"><a
href="
http://www.webdesign101.dk/csslayout/oversigt.php"
title="Kortfattet oversigt over artikler og eksempler">
Kvikguide til eksemplerne</a></dt>
<dd>Vil du hellere ha’ en hurtigt læst oversigt over (alle) mine
eksempler, skal du gå til denne side.</dd>
<dt id="link3"><a
href="
http://www.webdesign101.dk/csslayout/eksempler/layout1.html"
title="4 “cases” hvor jeg demonstrerer, hvorledes nogle typiske layoutmodeller let konverteres fra tabeller">
Fra tabellayout til CSS-layout</a></dt>
<dd>Demonstration af, hvorledes nogle typiske tabelbaserede
layout-modeller omsættes til CSS.</dd>
<dt><a href="
http://www.webdesign101.dk/csslayout/index.php#grafik">Grafik
i sidehovedet</a></dt>
<dd>Links til et par eksempler på et sidehoved med grafik</dd>
<dt id="link4"><a
href="
http://www.webdesign101.dk/csslayout/autocentrering.php"
title="4 metoder til at centrere en websides indhold i browservinduet">Autocentrering</a></dt>
<dd>Forskellige metoder til at centrere en websides indhold i
browservinduet.</dd>
<dt id="link5"><a
href="
http://www.webdesign101.dk/csslayout/float_layout.php"
title="Fordele og ulemper ved hhv. elastiske, flydende layouts og fikserede layouts. Eksempler.">
Websidelayout med float</a></dt>
<dd>En diskussion af fordele og ulemper ved de to layout-principper. <br />
float-metoden er uundværlig, når du skal skabe indtryk af lige høje
kolonner eller spalter.
</dd>
<dt id="link6"><a
href="
http://www.webdesign101.dk/csslayout/equal_height_spalter.php"
title="Float-konstruktion, der får 3 kolonner til at synes lige høje. Eksempler.">3
lige høje spalter med CSS</a></dt>
<dd>Denne artikel beskriver hvordan du kan lave et 3-spaltet layout,
hvis højde indretter sig efter den spalte, der har det meste indhold.</dd>
<dt id="link7"><a
href="
http://www.webdesign101.dk/csslayout/jello.php"
title="Løsning på problemerne med max-width og min-width">Gelé-layout</a>
</dt>
<dd>En brillant idé, der gør det muligt at arbejde med minimums- og
maksimumsbredder på websiden, og tillige opnå en variabel øgning af
bredden.</dd>
<dt id="link18"><a
href="
http://www.webdesign101.dk/design/gyldnesnit.php"
title="Jeg undersøger, om reglen om det gyldne snit kan bruges til noget i webdesign.">Layout
med “Det gyldne snit”</a></dt>
<dd>Duer det gyldne snit som forlæg til websidelayout?</dd>
</dl>
<h3>Webdesign – illustreret håndbog</h3>
<p>– er i løbet af kort tid slået igennem som <em>grundbogen</em> for
dem, der ønsker at lære sig websidekonstruktion, og tillige ønsker at
gøre det på en håndværksmæssig solid måde. Køb den hos forlaget <a
href="
http://www.globe.dk/">Globe.
<h3>Online support</h3>
<p>Hvis du bliver abonnent på mit nyhedsbrev får du øjeblikkelig e-mail
opdatering i tilfælde af rettelser eller uddybende forklaringer til
eksempler og beskrivelser mine bøger. </p>
<p>Samtidig får du også gennem disse nyhedsbreve besked om nye og
opdaterede artikler på dette websted.</p>
<p>Du kan læse mere om denne sag på websiden <a
href="
http://www.webdesign101.dk/w/gen/newsletter.php">Nyhedsbrev.
</p>
</div>
<div class="clear"> </div>
</div>
</div>
<div id="footer">
<script src="autocentrering.php_files/address.js" type="text/javascript" />
<address><a tabindex="-1" title="Tilbage til forsiden"
href="
http://www.webdesign101.dk/index.php">Webdesign 101</a>– Jørgen
Farum Jensen – E-mail adresse: <a
href="mailto:webmaster@webdesign101.dk">Webmaster@webdesign101.dk</a><a
tabindex="-1"
href="
http://www.webdesign101.dk/csslayout/autocentrering.php#toppen">
id="uparrow" src="autocentrering.php_files/uparrow.png"
alt="Gå til toppen af siden" align="right" border="0" height="16"
width="16" /></a><br />
Copyright © 2005 <em>Jørgen Farum Jensen</em></address>
</div>
<div id="menubox">
<ul id="navbar">
<li id="sektion1"><a tabindex="1" title="Retur til forsiden"
href="http://www.webdesign101.dk/index.php">Home
<ul>
<li><a href="
http://www.webdesign101.dk/gen/intro.php">Introduktion
<li><a href="
http://www.webdesign101.dk/gen/info.php">Brugsanvisning
<li><a href="
http://www.webdesign101.dk/gen/help.php">Servicemeddelelser
</ul>
</li>
<li id="sektion2"><a tabindex="2"
title="Introduktion, diverse artikler, kursusweb, websted services"
href="
http://www.webdesign101.dk/gen/index.php">Generelt
<ul>
<li><a
title="Webdesign illustreret håndbog er min grundbog om websidekonstruktion"
href="
http://www.webdesign101.dk/webdesign/index.php">Webdesign
håndbøger ...</a></li>
<li><a href="#" class="nohref">Servicesider</a>
<ul>
<li><a
title="Læs om RSS newsfeeds, abonner på min RSS nyhedskanal"
href="
http://www.webdesign101.dk/xml/index.php">Hvad er RSS?</a></li>
<li><a
title="Læs om mit nyhedsbrev, tegn abonnement, se i arkivet"
href="
http://www.webdesign101.dk/w/gen/newsletter.php">Nyhedsbrev/arkiv
<li><a title="Søg blandt alle mine websider"
href="
http://www.webdesign101.dk/search/index.php">Søgemaskine
<li><a title="Oversigt over artiklerne"
href="
http://www.webdesign101.dk/gen/sitemap.php">Site Map</a></li>
<li><a title="Min links-samling!"
href="
http://www.webdesign101.dk/links/index.php">Links
</ul>
</li>
<li><a href="
http://www.webdesign101.dk/showcase/">Sandkassen
<li><a title="Ældre artikler, opgavesamling, tutorials"
href="
http://www.webdesign101.dk/kursusweb/index.php">Kursusweb ...</a></li>
<li><a class="sub" title="Oversigt over nyere artikler"
href="
http://www.webdesign101.dk/artikler/index.php">Diverse artikler
....</a>
<ul>
<li><a href="
http://www.webdesign101.dk/artikler/">Ældre
artikler</a></li>
<li><a href="
http://www.webdesign101.dk/artikler/">Ældre
PDF-artikler</a></li>
</ul>
</li>
</ul>
</li>
<li id="sektion3"><a title="Almene design overvejelser" tabindex="3"
href="
http://www.webdesign101.dk/design/index.php">Design
<ul>
<li><a class="sub"
href="
http://www.webdesign101.dk/csslayout/index.php">
src="autocentrering.php_files/ny.png" alt="" height="14" width="38" />CSS-layout
af websider</a>
<ul>
<li><a
href="http://www.webdesign101.dk/csslayout/oversigt.php">Oversigt
<li><a
href="
http://www.webdesign101.dk/csslayout/autocentrering.php">Autocentrering
<li><a href="
http://www.webdesign101.dk/csslayout/index.php">Layout
med position</a></li>
<li><a
href="
http://www.webdesign101.dk/csslayout/float_layout.php">Layout
med float</a></li>
<li><a
href="
http://www.webdesign101.dk/csslayout/float_layout.php#equal">Lige
høje kolonner</a></li>
<li><a
href="
http://www.webdesign101.dk/csslayout/favorit2005-3.php">3 lige
høje kolonner</a></li>
<li><a href="
http://www.webdesign101.dk/csslayout/jello.php">Gelé-layout
</ul>
</li>
<li><a href="
http://www.webdesign101.dk/fonts/index.php">Skrifter
på websider ...</a></li>
<li><a href="
http://www.webdesign101.dk/design/font_size.php">Valg
af skriftstørrelse ...</a></li>
<li><a href="
http://www.webdesign101.dk/design/styleswitcher.php">Brugervalgte
stylesheets</a></li>
<li><a href="
http://www.webdesign101.dk/artikler/omdirigering.php">Omdirigering
<li><a href="
http://www.webdesign101.dk/design/accesskey.php">Accesskey-attributten
<li><a href="
http://www.webdesign101.dk/css/cursorkontrol.php">Cursorkontrol
<li><a
href="
http://www.webdesign101.dk/css/roundcorners/index.php">
src="autocentrering.php_files/ny.png" alt="" height="14" width="38" />Runde
hjørner ...</a></li>
<li><a href="http://www.webdesign101.dk/www/background/index.php">
src="autocentrering.php_files/ny.png" alt="" height="14" width="38" />Baggrundsgrafik</a></li>
</ul>
</li>
<li id="sektion4"><a
title="Mange tips til praktisk anvendelse af CSS-teknologien"
tabindex="4" href="http://www.webdesign101.dk/xhtml/css/">Stylesheets
<ul>
<li><a href="http://www.webdesign101.dk/xhtml/css/hacks/index.php">Internet
Explorers boksmodel ...</a></li>
<li><a href="http://www.webdesign101.dk/ie7/eksempler/index.php">
src="autocentrering.php_files/ny.png" alt="" height="14" width="38" />IE
7</a></li>
<li><a
href="http://www.webdesign101.dk/css/csstekstformatering/index.php">CSS
tekstformatering</a></li>
<li><a href="http://www.webdesign101.dk/css/lister/lister1.php">CSS-formatering
af HTML-lister ...</a></li>
<li><a href="http://www.webdesign101.dk/www/cssmenu/">CSS-rollovers
....</a></li>
<li><a
href="http://www.webdesign101.dk/xhtml/css/csstext/printstyles.php">Stylesheets
til udskrift</a></li>
<li><a href="http://www.webdesign101.dk/css/formbuttons.php">Flotte
formularknapper</a></li>
<li><a href="http://www.webdesign101.dk/css/eksempler/index.php">CSS-eksempler
....</a></li>
</ul>
</li>
<li id="sektion5"><a
title="Nogle få almindelige JavaScript tips, stor sektion om grafisk rollovers, stor sektion om billedvisning (slideshows)"
tabindex="5" href="http://www.webdesign101.dk/javascript/">JavaScript
<ul>
<li><a href="http://www.webdesign101.dk/javascript/index.php">Javascript
tips ...</a></li>
<li><a href="http://www.webdesign101.dk/rollover/index.php">JavaScript
Rollovers ...</a></li>
<li><a
href="http://www.webdesign101.dk/javascript/loginscript/index.html">Kodeordsbeskyttelse
<li><a
href="
http://www.webdesign101.dk/artikler/browsersniffing.php">Browser-"sniffing"
<li><a href="
http://www.webdesign101.dk/javascript/slideshow/">JavaScript
slidehows ...</a></li>
<li><a
href="
http://www.webdesign101.dk/javascript/slideshow/sequencer/">Tidslinie-script
....</a></li>
<li><a href="
http://www.webdesign101.dk/javascript/eksempler/">JavaScript
eksempler ...</a></li>
</ul>
</li>
<li id="sektion6"><a
title="Navigation, menuer, fra det simple til det avancerede"
tabindex="6" href="
http://www.webdesign101.dk/navigation/index.php">Navigation
<ul>
<li><a
href="
http://www.webdesign101.dk/navigation/navigation-1.php">Grundlæggende
navigation ...</a></li>
<li><a href="
http://www.webdesign101.dk/www/cssmenu/">
src="autocentrering.php_files/ny.png" alt="" height="14" width="38" />CSS-formaterede
menuer</a>
<ul>
<li><a
href="http://www.webdesign101.dk/www/cssmenu/ekspander/index.html">Ekspanderende
HTML menuer</a></li>
<li><a
href="http://www.webdesign101.dk/www/cssmenu/fanebladsmenuer/page1.html">Fanebladsmenuer
</ul>
</li>
<li><a
href="
http://www.webdesign101.dk/www/cssmenu/dynamiske_menuer.php">Dynamiske
menuer</a></li>
<li><a
href="
http://www.webdesign101.dk/navigation/index.php#apier">Menu
modulbiblioteker ...</a></li>
</ul>
</li>
<li id="sektion7"><a
title="Introduktion til DHTML samt en række praktiske eksempler"
tabindex="7" href="
http://www.webdesign101.dk/xhtml/dhtml/index.php">Dynamisk
HTML</a>
<ul>
<li><a href="
http://www.webdesign101.dk/web102/dhtml/intro.php">Introduktion
<li><a
href="
http://www.webdesign101.dk/web102/dhtml/dhtmlapi/index.php">DHTML
modulbibliotek ...</a></li>
<li><a
href="
http://www.webdesign101.dk/web102/dhtml/transitions/index.php">Internet
Explorer filtre ...</a></li>
<li><a
href="
http://www.webdesign101.dk/web102/dhtml/splash/index.php">Splash
Pages ...</a></li>
<li><a
href="
http://www.webdesign101.dk/web102/dhtml/clipping/index.php">Clip-attributten
....</a></li>
<li><a
href="
http://www.webdesign101.dk/web102/dhtml/eksempler/index.php">DHTML
eksempler ...</a></li>
</ul>
</li>
<li><a tabindex="8" title="Hjælp og information om webstedet"
id="help" href="
http://www.webdesign101.dk/gen/help.php">
src="autocentrering.php_files/qmark.png"
alt="Hjælp og information om webstedet" height="13" width="10" /></a> </li>
</ul>
</div>
<!-- Denne skabelonside er afprøvet i følgende browsere:
Internet Explorer 6, Firefox 1.0.4, Mozilla 1.0, Opera 7.54, Netscape 7
W3C: XHTML OK; CSS OK undt. behavior-reglen i navbar-stylesheetet.
-->
</body>
</html>
der er mindst 1500 linjer ..........!!!