WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Ú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