Fluid horizontal en vertical layout met css

woensdag 12 augustus 2009 00:20

Acties:

0 Henk 'm!

Topicstarter

Mijn eerste post sinds lange tijd. Ik heb al vanalles geprobeerd, maar het wil maar niet lukken.
Ik wil graag de volgende situatie creëren op mijn website:

fixed row 100px
fluid row 50% met 3 colums: fixed 200px - fluid 50% - fluid 50%
fluid row 50% met 3 colums: fluid 50% - fluid 50% - fixed 200px
fixed row 100px

Als GUI programmer denk ik waarschijnlijk in de verkeerde richting, maar dit moet toch te maken zijn met div's? In IE krijg ik e.e.a. wel aan de praat, maar dan werkt het vervolgens niet in FF. Voor de volledigheid: de 50% moet van de overgebleven ruimte zijn (dus minus de 200 pixels van row 1 en 4)

Any help is much appreciated

woensdag 12 augustus 2009 00:41

Acties:

0 Henk 'm!

Willem

Wat heb je al geprobeerd dan? Heb je een werkend voorbeeld online?
Waar heb je op gezocht en wat heb je daarmee gevonden? Kortom wat meer info

woensdag 12 augustus 2009 11:23

Acties:

0 Henk 'm!

MrEdge_

Topicstarter

Als ik een werkend voorbeeld online had, dan zou ik geen vragen meer hebben

I get your point. Wat ik graag wil, is een site met 6 blokken die meeschalen naar de schermresolutie. Ik heb altijd frames en tabellen gebruikt, maar wil het graag oplossen met divs. Ik loop daarbij tegen diverse problemen aan. IE doet ongeveer wat ik had verwacht en FF doet weer wat anders.

http://www.joe2.nl/newindex.htm en http://www.joe2.nl/newstyles.css voor voorbeelden.

Ik heb me suf gegoogled en ben er wel achter dat het veel gedoe is met margins, maar geen van de voorbeelden geeft me goed inzicht in een generieke aanpak. Vooral een meeschalende hoogte lijkt erg problematisch en is me nog niet gelukt.

woensdag 12 augustus 2009 12:08

Acties:

0 Henk 'm!

R4gnax

Als je fixed width met fluid width wilt mengen, is volgens mij de enige methode die goed werkt het gebruik van position: absolute, i.c.m. het opgeven van attribuut-paren left/right en top/bottom. Andere methodes met o.a. floats krijgen dat niet netjes voor elkaar zonder een boel getruc, als ze het überhaupt al voor elkaar krijgen.

Let wel dat oude IE versies (IE6 *zucht*) een left/right of top/bottom niet begrijpen en zich alleen aan het eerste lid (left of top) zullen houden. Als je IE6 nog wilt bedienen, dan kun je dat altijd nog met javascript oplossen voor die browser.

Dit is wat je dan krijgt:

HTML:

<!DOCTYPE html />
<html>
<head>
  <style type="text/css">    
    div
    {
      text-align: center;
    }
    .header
    {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100px;

      background-color: #BBB;
    }

    .footer
    {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;

      background-color: #BBB;
    }

    .contentTop
    {
      position: absolute;
      top: 100px;
      bottom: 50%;
      left: 0;
      width: 100%; 
    }
 
    .contentBottom
    {
      position: absolute;
      top: 50%;
      bottom: 100px;
      left: 0;
      width: 100%;
    }

    .columns
    {
      position: relative;
      width: 100%;
      height: 100%;      
    }

    .contentTop .columnA
    {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 200px;

      background-color: #BFF;
    }

    .contentTop .columnBC
    {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 200px;
      right: 0;
    }

    .contentBottom .columnAB
    {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 200px;
    }

    .contentTop .columnB,
    .contentBottom .columnA
    {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 50%;

      background-color: #FBF;
    }

    .contentTop .columnC,
    .contentBottom .columnB
    {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      right: 0;

      background-color: #FFB;
    }

    .contentBottom .columnC
    {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 200px;

      background-color: #BFF;
    }
  </style>
</head>
<body>
  <div class="header">Header</div>
  <div class="contentTop">
    <div class="columns">
      <div class="columnA">Kolom A, 1</div>
      <div class="columnBC">
        <div class="columns">
          <div class="columnB">Kolom B, 1</div>
          <div class="columnC">Kolom C, 1</div>
        </div>
      </div>
    </div>
  </div>
  <div class="contentBottom">
    <div class="columns">
      <div class="columnAB">
        <div class="columns">
          <div class="columnA">Kolom A, 2</div>
          <div class="columnB">Kolom B, 2</div>
        </div>
      </div>
      <div class="columnC">Kolom C, 2</div>
    </div>
  </div>
  <div class="footer">Footer</div>
</body>
</html>

woensdag 12 augustus 2009 12:29

Acties:

0 Henk 'm!

MrEdge_

Topicstarter

R4gnax schreef op woensdag 12 augustus 2009 @ 12:08:
Als je fixed width met fluid width wilt mengen, is volgens mij de enige methode die goed werkt het gebruik van position: absolute, i.c.m. het opgeven van attribuut-paren left/right en top/bottom. Andere methodes met o.a. floats krijgen dat niet netjes voor elkaar zonder een boel getruc, als ze het überhaupt al voor elkaar krijgen.

Let wel dat oude IE versies (IE6 *zucht*) een left/right of top/bottom niet begrijpen en zich alleen aan het eerste lid (left of top) zullen houden. Als je IE6 nog wilt bedienen, dan kun je dat altijd nog met javascript oplossen voor die browser.

Thanks! Dat is exact wat ik nodig heb

Ik kreeg het met floats inderdaad niet goed aan de praat. De methode die jij gebruikt (top, bottom combi's etc) lijkt veel op de manier waarop je zoiets zou doen in WPF. Balen dat het niet in IE6 werkt, maar anderzijds is dat ondertussen toch wel een achterhaalde browser.

Nogmaals thanks! Je hebt in een paar minuten voor elkaar gekregen waar ik al een aantal dagen mijn hoofd over breek

woensdag 12 augustus 2009 13:08

Acties:

0 Henk 'm!

Verwijderd

MrEdge_ schreef op woensdag 12 augustus 2009 @ 12:29:Balen dat het niet in IE6 werkt, maar anderzijds is dat ondertussen toch wel een achterhaalde browser.

Eventueel zou je IE6 kunnen fixen met expression() in CSS:
http://www.mennovanslooten.nl/blog/post/71

woensdag 12 augustus 2009 14:07

Acties:

0 Henk 'm!

Cartman!

expressions zou ik sterk afraden, als je weet hoevaak expressions 'fire-en' tijdens het gebruik van je pagina ben je er snel klaar mee. Daar kan iemand zn pc t behoorlijk lastig mee krijgen. En dan meegenomen dat pc's die nu nog IE6 draaien meestal geen dualcore's zijn...

woensdag 12 augustus 2009 21:23

Acties:

0 Henk 'm!

MrEdge_

Topicstarter

Cartman! schreef op woensdag 12 augustus 2009 @ 14:07:
expressions zou ik sterk afraden, als je weet hoevaak expressions 'fire-en' tijdens het gebruik van je pagina ben je er snel klaar mee. Daar kan iemand zn pc t behoorlijk lastig mee krijgen. En dan meegenomen dat pc's die nu nog IE6 draaien meestal geen dualcore's zijn...

Die zouden toch alleen aangeroepen worden bij een resize? Anyway, weer wat nieuws geleerd

Eerst even optimizen voor FF en IE8 en dan wellicht met conditional commenting voor IE6 eens kijken.

donderdag 13 augustus 2009 13:21

Acties:

0 Henk 'm!

R4gnax

MrEdge_ schreef op woensdag 12 augustus 2009 @ 21:23:
[...]

Die zouden toch alleen aangeroepen worden bij een resize?

Zou je willen.

Expressions worden geëvalueerd elke keer wanneer er een CSS aanpassing plaats vindt. Dat gebeurd bijv. al wanneer je een linkje hebt met een :hover pseudo stijl.

Daarnaast worden ze ook geëvalueerd elke keer dat er een javascript executie pad op start. In sommige gevallen (ik heb het 'in het wild' zien gebeuren, maar weet niet waarom / waardoor) zelfs op mouseMove events wanneer er niet eens een event handler aan gekoppeld zit.

Daarnaast is het ook nog mogelijk dat de evaluatie van een CSS expression een pagina reflow veroorzaakt, die op zijn beurt weer opnieuw de CSS expression evalueert, etc. Infinite loop, dus.

Gebruik liever een javascriptje wat een simpele testcase uitvoert om te zien of je browser compatible is met left/right, top/bottom paren. Zo niet, dan moet dat scriptje het onResize event aanhaken en in de event handler er voor zorgen dat de width/height van een blok weer expliciet correct gezet wordt. (Gelukkig vuren IE browsers het onResize event voor elke pixel tijdens het slepen, en niet zoals andere browsers alleen wanneer de resize operatie eindigt.)

Onderwerpen