Úsztatott, változó méretű weboldal

Az első példa HTML és CSS kódja egyaránt azonos az előző feladatnál megismerttel. Bemutatja annak hibáját: Ha a tartalom nem fér el a rendelkezésre álló területen, akkor bizony ki fog lógni.

Levághatnánk a túlnyúló tartalmat, de ez nem tekinthető a probléma megoldásának.

A második példában magassága: auto. Ekkor már nem jelent problémát a hosszú tartalom.

A harmadik példa mutatja ennek a megoldásnak a hibáját. Most már az jelent gondot, ha túl kevés tartalmat jelenítünk meg. A lábléc beúszik a menü mellé, és az alatta lévő terület fehér marad.

A negyedik példában a lábléc előtt megszüntetjük az úsztatást, és a teljes képernyő háttérszínét a tartalomterület háttérszínével azonosra állítjuk. Megadjuk a tartalomterület minimális magasságát: 300px. Így már nem jelenthet gondot egy tartalomszegény oldal megjelenítése sem.

A kódnál csak az állandó méretű változathoz, és az előző példához képest történt módosítások láthatók.

1. példa:

Forráskód


Azonos az úsztatott, állandó méretű 
weboldalnál megismerttel, 
csak a szöveg lett hosszabb.

Eredmény*

2. példa:

Forráskód


<style type="text/css">  
...
  #balmenu { width:100px; float:left; } 
  #tartalom { } ...
</style>

Eredmény*

3. példa:

Forráskód


Azonos az előzővel, 
csak a szöveg lett rövídebb.

Eredmény*

4. példa:

Forráskód


<style type="text/css">  
...
   body { background-color:#ffddcc; ...} 
  #lablec {clear:left; ....}
  #tartalom {min-height:300px; ....} 
...
</style>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_elrendezes_ketoszlopos_uszo_05