Webdesign 101 demoside

CSS layout

• CSS float layout
• Generelt
• Design
• Stylesheets
• JavaScript
• Navigation
• DHTML

Duis autem vel eum

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.

• CSS-layout af websider ...
• Skrifter på websider ...
• Brugervalgte stylesheets
• Menuers tilgængelighed ...
• Runde hjørner ...
• Baggrundsgrafik

Kildekoden

Hvis du vil se kildekoden til hele siden, og her ikke mindst det dokumentindlejrede stylesheet, må du bruge din browsers Vis kilde funktion.

Det dokumentindlejrede stylesheet indeholder kun de formdeklarationer, der er særlige for den aktuelle side. Fælles formdeklarationer for alle eksempelsiderne findes i den eksterne stylesheet-fil layoutcommon.css.

Returner til foregående side

Du returnerer til foregående side ved at klikke på overskriften CSS layout i sidehovedet.

3-spaltet layout

HTML-kildekode

Et 3-spaltet layout kan laves ved en kombination af de to float-layouts i eksempel 2 og eksempel 3. Jeg indsætter endnu et element på siden:

<div id="side">
  <div id="sidehoved">
  [ Sidehovedets indhold ]
  </div>
  <div id="navbar">
  [ Navbar kode ]
  </div>
  <div id="newscol">
  [ Tekst i venstre spalte ]
  </div>
  <div id="menucol">
  [ Menupanel kode ]
  </div>
  <div id="indhold" class="clear">
  [ Artikeltekst ]
  </div>
  <div id="sidefod">
  [ Sidefodens indhold ]
  </div>
</div>

De layoutmæssige ændringer fremgår af stylesheet'et for de nu tre indholdslementer:

div#newscol {
  font-size:90%; 
  width:10em;
  float:left;
  margin-top:40px;
  font-family:arial,sans-serif;}
div#menucol {
  font-size:90%;
  width:12em;
  float:right;
  padding-top:40px;}
div#indhold {
  font-size:90%; 
  padding-top:40px ;
  margin: 0 13em 0 11em;
  padding-right:1em;
  padding-left:1em;
  border-right:1px solid #257;
  border-left:1px solid #257;}

1. Med tre spalter må bredden af de enkelte elementer nødvendigvis blive mindre end hvis vi kun bruger én eller to spalter. Jeg har derfor gjort det at jeg har mindsket skriftstørrelsen til 90 procent af den normale størrelse i de tre indholdselementer.
2. Dermed kan jeg gøre bredden af de to smalle spalter lidt mindre.
3. Jeg udnytter også den til rådighed værende bredde af browservinduet lidt bedre ved at sætte bredden af div#side-elementet til 90 procent af browservinduets bredde:
   div#side{
width:90%;
max-width:60em;
margin:1em auto;}

8. august 2007