Oldalhasábok magassága

3Kaptam pár e-mailt ami ezt a kérdést feszegette, így gondoltam megér egy külön cikket. Most egy dologra koncentrálok, mégpedig arra, hogy egy három hasábos weblapon meddig érnek az oldalhasábok illetve, hogy hogyan érhető el, hogy ezek háttere más színű legyen mint a lap tartalmi részének, de lelógjanak a lap aljáig.

A probléma

Kiindulásként vegyünk egy normál három hasábos html csontvázat, azzal a kiegészítéssel, hogy mindhárom hasábunknak más-más színű hátteret akarunk varázsolni úgy, hogy mindhárom hasáb ugyanaddig érjen.

<div style="width:800px">
  <div style="float:right;width:550px;">
     <div style="float:left;width:350px;background:pink;">
        a középső rész tartalma jön ide
     </div>
     <div style="float:right;width:200px;background:red;">
        a jobb oldal hasáb jön ide
     </div>
  </div>
  <div style="float:left;width:250px;background:blue;">
     a bal oldali hasáb jön ide
  </div>
</div>

Ezzel ezt kapjuk.

Ha némi tartalmat is produkálunk bele egyből látni fogjuk, hogy mi a probléma.

Szomorúan tapasztaljuk, hogy a három div-ünk alja nincs egymáshoz ragasztva, nem lógnak le ugyanaddig, amit most szeretnénk elérni.

A megoldás

Elsőre kísértésbe esünk és elkezdjük állítgatni az egyes divek magasságát, de gyorsan rá fogunk ébredni, hogy ezzel nem jutunk messzire. Akármit is csinálunk nem tudjuk megadni, hogy mindhárom div ugyanolyan magas legyen mint hármuk közül a legmagasabb.

Egy olyan trükkhöz kell folyamodnunk amihez a css világában sokszor. Ez a vizuális összeolvasztás.

Vizuális összeolvasztás – az elv

Ez az eljárás arról szól, hogy az oldal css-beli fizikai felépítését elkülönítjük annak vizuális megjelenítésétől. (Ez nem azonos azzal, hogy a html-t elkülönítjük a designtól.)

Vizuális összeolvasztás – a gyakorlat

A konkrét feladatnál maradva a vizuális összeolvasztás azt fogja jelenteni, hogy azt kell elérnünk, hogy habár a 3 hasáb eltérő magsságú mégis vizuálisan azt a hatást keltse mintha ugyanolyan magasok lennének.

Ehhez készítünk egy képet ami a 3 hasáb összevont hátteréből áll össze.

Ezután már csak annyi teendőnk van, hogy az eredeti html csontvázunkban megadjuk ezt a háttérképet annak a divnek ami magában foglalja a mi 3-unkat, a szóban forgó háromról pedig levegyük a background tulajdonságot.

<div style="width:800px;background-image:url('./19-hatter.jpg');">
  <div style="float:right;width:550px;">
     <div style="float:left;width:350px;">
        a középső rész tartalma jön ide
     </div>
     <div style="float:right;width:200px;">
        a jobb oldal hasáb jön ide
     </div>
  </div>
  <div style="float:left;width:250px;">
     a bal oldali hasáb jön ide
  </div>
  <div style="clear:both;"></div>
</div>

Ezzel ez az eredmény, ami pont az amit szerettünk volna.

A legalsó

bejegyzés azért kell, mert e nélkül a böngészők nem tudják kiszámolni a megjelenítendő lap magasságát, ugyanis a háttérrel rendelkező divünk nem tartalmaz közvetlenül megjelenítendő tartalmat, csak más diveket, így magassága 0 lesz, így a háttér sem fog látszani. Az új div bevezetésével ezt egyszerűen tudjuk orvosolni.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.