Webdesign 101 demoside

CSS layout

Grafisk baggrund

Jeg bryder mig ikke selv om det, men dette eksempel viser hvorledes du kan give dine spalter mere iøjnefaldende grafiske baggrunde end den jeg har anvendt i de øvrige eksempler.

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.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

3 lige høje spalter

De principper, der er beskrevet i de foregående eksempler, kan også anvendes til at skabe et trespaltet layout, hvor alle spalter ser ud til at være høje.

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

I eksempel 8 og eksempel 9 så vi, hvorledes vi kunne skabe en illusion af ens spaltehøjde i et tospaltet layout, samtidig med at vi – uanset om menuspalten var venstre- eller højrestillet, kunne anbringe menukoden i bunden af kildekoden.

Illusionen er skabt af det forhold, at begge spalter er indeholdt i et #wrapper-element, hvis underkant skubbes nedad af spalternes tekstindhold (og af billeder, hvis vi have haft sådanne), således at en passende baggrundsgrafik i #wrapper-elementet skaber en tilsyneladende baggrund for den smalle spalte.

Men hvis nu slår endnu en wrapper (Det engelske udsagnsord “to wrap” betyder “at pakke ind” og navneordsformen betyder således “indpakning”) om det hele, og på én eller anden måde sørger for at denne ekstra wrapper også omslutter en tredie spalte, vil såvel denne spalte som vor allerede eksisterende wrapper presse underkanten af vores nye wrapper nedad, igen uanset hvilket af de to elementer, der har det meste indhold.

HTML-kode og CSS-kode

<div id="side">
<div id="sidehoved">
[ sidehoved ]
</div>
<div id="navbar">
[ Navigationsbjælke ]
</div>
<div id="ydreboks">
  <div id="indreboks">
    <div id="container">
      <div id="content">
        <div id="newscol">
          [ Venstre spalte ]
        </div> <!-- slut #newscol -->
        <div id="indhold">
          [ Artikelindhold ]
        </div><!-- Slut #indhold -->
      </div><!-- Slut #content -->
    </div><!-- Slut #container -->
  <div id="menucol">
    [ Menupanel ]
  </div><!-- Slut #menucol -->
  <!-- clear #indreboks -->
  <div class="clb"> </div> 
  </div><!-- Slut #indreboks -->
  </div><!-- Slut #ydreboks -->
<div id="sidefod">
[ Sidefod ]
</div>
</div>

I forhold til eksempel 8 – hvor jeg redegjorde for HTML-strukturen i den tospaltede udførelse, har jeg her – foruden det nye egentlige element #newscol – introduceret to nye elementer, nemlig elementet #ydreboks og #indreboks, hvis formål først og fremmest at indeholde baggrundsgrafikken.

div#side { /* Baggrund midterspalte */
  width:95%;
  max-width:50em;
  margin:1em auto; 
  background-image: url(res/marb18.jpg); }
  
#ydreboks {/* baggrundsgrafik venstre  */
  background-color: transparent;
  background-image: url(res/stonebg.png); 
  background-repeat: repeat-y;
  background-position: left top;}

#indreboks {/* baggrundsgrafik højre  */
  background-color: transparent;
  background-image: url(res/stonebg.png);
  background-repeat: repeat-y;
  background-position: right top;}

#container {
  background-color:transparent;
  width: 100%;
  float: left;
  margin-right: -202px;}

#content {
  background-color:transparent;
  margin-right: 202px;  }
  
div#indhold {
  padding:25px 1em 0 1em;
  margin:0 0 0 202px;}

#newscol {
  width: 182px;
  padding:25px 10px;
  float: left;}

#menucol {
  width: 182px;
  padding:25px 10px;
  float: right;}

Formdeklarationerne for elementerne #container, #content og #indhold svarer – fraset en enkelt værdi – nøje til formdeklarationerne i eksempel 9, det vil sige #container er et left-float'et element med en negativ højre marginen, der skaber plads til en right-float'et menuspalte. #container indeholder imidlertid også #indhold med en venstre margin på 202 pixel i forhold til #container, hvorved #newscol flyder op til venstre for #indhold.

Pyha!, siger jeg bare. Men det bliver værre.

Problemer med IE

Hvis du betragter eksempel 10a med Internet Explorer vil du hurtigt opdage, at der er noget fidlihut med højre spalte. Indholdsspaltens hvide baggrund flyder ind over højre spalte.

Effekten er ikke synlig i andre browsere end IE, og den er heller ikke synlig medmindre #indhold-elementet har en anden baggrundsfarve end sidens øvrige elementer, specielt body-markøren.

Jeg var længe om at opdage det, men jeg var også længe om at få forklaringen og løsningen på denne effekt.

Fejlen skyldes, at IE kun gentegner et element ved window resize dersom elementet har “layout”. Det er en egenskab, som visse html-elementer har, men som man ikke kan sætte i et stylesheet. Betingelsen for at et element anses for at have “layout” i Internet Explorer er, at det er i besiddelse af visse andre CSS-egenskaber, jf. artiklen On having Layout.

Jeg skylder Ingo Chao tak for en udførlig redegørelse for disse fænomener som svar på en posting på CSS Discuss.

I den oprindelige grundkonstruktion har #ydreboks-elementet og #indreboks-elementet ingen af disse CSS-egenskaber.

Der er forskellige løsninger på dette problem. Den jeg har valgt, i forbindelse med en revision af denne artikel i foråret 2007, beror på udnyttelsen af metoder og egenskaber, som Microsoft selv har udviklet, og som er neutrale i forhold til alle andre browsere.

IE-specifikke stylesheets

For det første lægger jeg nogle IE-spefikke stylesheets ind i nogle Microsoft betingede kommentarer:

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

Vil du vide noget mere om, hvad det er for noget, kan du læse min artikel Microsoft betingede kommentarer.

Det, der sker her er, at kun Internet Explorer læser den første kommentar, hvor et stylesheet påtrykker #ydreboks og #indreboks egenskaben zoom. Det er en Microsoft-specifik egenskab, der kan bruges til at øge størrelsen på et element. Da det kun er Internet Explorer 7 og flg. der forstår denne egenskab, har vi normalt ikke noget at bruge den til, men den er altså handy lige i dette tilfælde, fordi det er en af de egenskaber, der udløser hasLayout-egenskaben i Internet Explorer, og dermed løser vore problem i forhold til denne browser.

Internet Explorer 5 og 6 forstår ikke zoom-egenskaben, så derfor sætter jeg i forhold til denne browser – i endnu et stylesheet i en betinget kommentar – højden på de kritiske elementer til 1 pixel. Det er jo dødens pølse, hører jeg dig udbryde, men det er nok fordi du har glemt at netop IE 5 og IE 6 (men ikke IE 7) er totalt ligeglad med en påtrykt højde, men udvider en css-kasse så den kan rumme indholdet.

(Der er mange, der tror at sådan skal det være, fordi de kun har tjekket deres websidekonstruktioner i IE 5 eller IE 6. Men er altså forkert. I en standardoverholdende browser vil indhold i en css-kasse med fikserede mål flyde nedenud af kassen.)

Now you see it, Now you don't

De forholdsregler, jeg har nævnt i foregående afsnit, er årsagen til at denne demoside virker som den skal i alle almindeligt anvendte browsere, IE6, IE7, Firefox og Opera, mens eksempel 10a ikke har de forløsende IE only formdeklarationer.

8. august 2007