HTML5 + CSS3 logó
  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    

Abszolút pozíciónálású oszlopok



Két és három oszlopos elrendezés kialakítása.


Az oldal szerkezetének kialakításánál is gyakran használjuk a független (absolute) helyzetmegadást.

1. példa:

Két oszlop automatikus változó magassággal.

Forráskód


<style>
  .tarolo { height:240px;  width: 200px; position:relative;
       margin:10px; padding:0; 
       border:1px solid red;  
       background-color:yellow; color:blue;}   
  #fent {position:static; top: 0;  left: 0; 
       height:40px;  width: 200px; 
       background-color:#88ff88; }     
  #bal {position:absolute; top: 40px;  left: 0;  width: 100px; 
       background-color:#ff8888; color:#440000; } 
  #jobb { position:absolute; top:40px; right:0; width:100px;
       background-color:#8888ff;  } 
</style>     
….
<body>            
  <div class="tarolo"> 
     <div id="fent" >Felső elem tartalma... </div> 
     <div id="bal" >Baloldali elem tartalma... </div> 
     <div id="jobb">Jobboldali elem tartalma...
     Az oszlop magassága tartalomtól függően változik. 
  </div> 
</div>   

Eredmény*

2. példa:

Egyik oszlop magassága állandó.

Forráskód



Változás az előzőhöz képest:

<style>   
  .jobb {height:200px; ....} 
....         
</style>
....
 

Eredmény*

3. példa:

Három oszlopos változat.

Forráskód



<style>
  .tarolo { height:240px;  width: 330px; position:relative;
     margin:10px; padding:0; 
     border:1px solid red;  
     background-color:yellow; color:blue;}    
 #fent {position:static; top: 0;  left: 0; 
       height:40px;  width: 330px; 
       background-color:#88ff88; }     
 #bal {position:absolute; top: 40px;  left: 0;  width: 100px; 
       background-color:#ff8888; color:#440000; } 
 #jobb {position:absolute; top:40px; right:0; 
       width:100px; height:200px;
       background-color:#8888ff;  } 
 #kozep {position:absolute; top:40px; left:100px;  
         height:200px; width:130px;
         background-color:#ff88ff;  }                                    
</style>     
….
<body>            
  <div class="tarolo"> 
       <div id="fent" >Felső elem tartalma... </div> 
       <div id="bal" >Baloldali elem tartalma... height:auto; </div> 
       <div id="jobb">Jobboldali elem tartalma... height:200px;</div> 
       <div id="kozep">Középső elem tartalma... height:200px;</div>               
  </div>   
</body>     
 

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_position_absolute_oszlopok_03.html