logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

Ú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

Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.