Webdesign 101 demoside

CSS layout

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.

3-spaltet layout

float-egenskaben bruges til at oprette tre spalter.

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