Webdesign 101 demoside

CSS layout

Infoboks

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.

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.

3 spaltet layout

Vis/skjul tekst i venstre kolonne.
Skjul/vis tekst i midterste kolonne.
Vis/skjul tekst i højre kolonne.

Hvis ikke du har brug for en baggrundsgrafik i de smalle spalter, kan du “nøjes med” at sætte nogle meget bredde rammekanter (borders) på det element, der omslutter dit indhold:

<div id="side">
  <div id="sidehoved">
  [ Sidehoved ]
  </div>
  <div id="navbar">
  [ Navigationsbjælke ]
  <div id="container">
    <div id="inner">
      <div id="newscol">
      [ Venstre spaltes indhold ]
      </div>
      <div id="menucol">
      [ Højre spaltes indhold ]
      </div>
      <div id="center">
      [ Artikel ]
      </div>		
    <div class="clear"></div>
    </div>
  </div>
  <div id="sidefod">
  [ Sidefod ]
  </div>
  </div>
</div>

Stylesheet

#side {
  width:95%;
  max-width:50em;
  margin:1em auto;}
#container {
  position:relative; 
  display:block; 
  background:#fff; 
  border-left:200px solid #ddd; 
  border-right:200px solid #ddd;}
#inner {
  display:block; 
  margin-left:-200px; 
  margin-right:-200px; 
  padding:5px}
#center {
  margin-left:200px; 
  margin-right:200px; 
  position:relative; 
  display:block;
  padding-top:20px; }
#newscol {
  float:left; 
  position:relative; 
  width:180px; 
  left:0;
  padding:25px 0 0 0;}
#menucol {
  float:right; 
  position:relative; 
  width:180px; 
  right:0px;
  padding:25px 0 0 0;}
#newscol p, #menucol p {
  font-family:arial,sans-serif;
  font-size:90%;}

Også her er det nødvendigt at interessere sig for den hasLayout-egenskab, jeg beskrev i artiklen om eksempel 10. I dette layout er det dog kun #center-elementet, der er problemer med, så min betingede kommentar får udformningen:

<!--[if IE]>
<style type="text/css" media="screen">
#center {zoom:1;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#center {height:1px;}
</style>
<![endif]-->

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.

8. august 2007