Webdesign 101 demoside

CSS layout

2-spaltet layout med flydende bredder

Dette eksempel er identisk med eksempel 5, bortset fra at indholdets samlede bredde er 90 procent af browservinduets bredde, og de to spalter udgør henholdsvis 67 og 30 procent af denne bredde.

div#side {
  width:90%;
  max-width:50em;}
div#indhold {
  width:67%;
  float:left;
  border-right:1px solid #257;
  padding-right:2%;}
div#menucol {
  width:30%;
  float:right;
  padding-top:1.5em;}
.clb {clear:both;}

Denne eksempelside er lavet ud fra eksempel 5. Bemærk dog, at jeg her viser, hvor let det er at ændre layout-typen fra elastisk – baseret på em-bredder – til flydende, baseret på procentvise bredder.

Selv om det ikke er noget, jeg vil anbefale, er det selvfølgelig lige så let at ændre til pixel-bredder.

Flydende layout, fikseret menubredde

Derimod kommer vi i vanskeligheder, hvis vi ønsker elastisk eller flydende bredde på websiden og en fikseret bredde på menuspalten. De vanskeligheder kan overvindes. Hvordan viser jeg i eksemplerne xxx og følgende.

Oversigt
1
2
3
4
5
6
7
8
9
10
11
12

8. august 2007

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem. Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem, laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a, lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.

Quisque posuere lobortis turpis. Aenean eu lacus. Donec sed lacus eget dui rhoncus tempor. Pellentesque tellus tortor, mattis non, posuere ac, mattis sed, diam. Maecenas accumsan libero sit amet libero. Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit. Donec vitae risus quis erat semper congue. Nunc ornare faucibus enim. Aenean pretium elit nec velit. Phasellus commodo, nibh at vulputate dapibus, nisl quam venenatis sem, quis ornare nunc nulla ut libero. Aenean ipsum. Fusce lacinia congue mauris. Maecenas non libero. Nullam eget enim. Integer iaculis arcu dictum ligula. Ut neque ipsum, vestibulum ut, interdum at, aliquam vel, felis.