1. Webdesign 101 forside
  2.  » Avanceret float-layout

Float-layout med negative marginer

Dette eksempel er en videreudvikling af eksempel 7 til min tidligere artikel Webside layout med float-egenskaben.

Formålet er beskrivelsen af en alternativ metode til at skabe et visuelt udtryk af lige høje spalter i flerspaltede layout.

Slutmålet er at lave et robust Internet Explorer-venligt layout, der kan bruges når vi om lidt går over til CSS tabellayout.

HTML-koden

HTML-kildekoden, der layouter siden, er vist herunder. Den kan forekomme en smule uoverskuelig for, hvad der ser ud som en simpel opgave, nemlig at lave et tospaltet layout.

Ikke desto mindre er kildekoden et eksempel på, hvorledes du kan jonglere med en websides hovedelementer for for eksempel at sammensætte procentvise og fikserede bredder. Forklaring følger.

 <div id="side">
  <div id="banner">
  [ Sidehoved indhold ]
  </div>
  <div id="container">
    <div id="indhold">
      <div id="artikel">
        [ Artikeltekst ]
        <div id="text1">
        [ Fyldtekst, der skal vises og skjules]
        </div><!-- Fyldtekst -->
      </div><!-- /artikel -->
    </div><!-- /indhold -->
    <div id="nav">
      [ Navigationsapparat ]
      <div id="text2" class="last">
      [ Fyldtekst, der skal vises og skjules]
      </div><!-- fyldtekst -->
    </div><!-- /nav -->
  <div class="clear"> </div>
  </div><!-- /container -->
<div id="footer">
<p>Sidefodstekst</p>
</div><!-- /sidefod -->
</div><!-- /side -->

HTML-kildekoden opretter tre (3) hovedelementer på websiden. De tre elementer er et sidehoved (#banner) og en sidefod (#footer) og mellem dem elementet #container, der omslutter artikel og navigationsapparat.

De tre nævnte elementer er alle indeholdt i et #side-elementet. Det er oprettet for at kunne bestemme en sidebredde, der i dette eksempel for nemheds skyld er sat til 760 pixel.

Yderligere er de tre hovedelementer blokelementer, der, uden at jeg behøver at foretage mig noget for det, smukt stables oven på hinanden i browservinduet.

Det springende punkt er her indholdet af #container-elementet. Ved første øjekast kan vi undvære markørsættet #indhold, idet det vil være ganske let at left-float'e #artikel-elementet og højre-float'e navigationsspalten.

Det er også en udmærket idé, hvis ens ambitioner ikke gør videre end til et to-spaltet layout med fikseret bredde. Vil du andet og mere, er det en god idé lige at kaste et blik på argumenterne for de tilsyneladende overflødige markørsæt og deres tilhørende formdeklarationer:

  1. #container-elementet spiller i sig selv en usynlig rolle, da underkanten af dette elementet styrer hvor højt op sidefoden kan komme. Elementet indeholder float'ede elementer og skal defor clear'es. før det afsnluttes – se den fremhævede HTML-kode i eksemplet ovenfor.

  2. #indhold-elementet omslutter #artikel-elementet og intet andet. Men bemærk formdeklarationerne for disse to elementer:

    div#indhold {width: 100%; float: left; margin-right: -200px; }
    div#artikel {margin-right: 220px; }
    

    Ved at give #indhold en negativ margin skabes der plads til en egenlig margin på artikelelementet, og dermed plads til en 200 pixel bred navigationssspalte.

Lige høje spalter

Vi har nu lavet en 2-spaltet konstruktion, hvor spalterne er lige høje i den forstand, at sidefoden skubbes nedad af den spalte (af #indhold eller #nav) der har det meste indhold. Det kan du let konstatere ved at bruge de to links lige under overskriften.

Men det visuelle udtryk er jo ikke særlig overbevisende – menuen står bare og flagrer ude til højre. Vi må gøre noget for at markere menuspalten med en grafisk eller kulørt baggrund. Det er emnet for artiklen Float layout med lige høje spalter.

Oprettet april 2009