WCM Forum - html - css

WCM Forum (http://www.wcm.at/forum/index.php)

- Programmierung (http://www.wcm.at/forum/forumdisplay.php?f=17)

- - html - css - ebenen (http://www.wcm.at/forum/showthread.php?t=207734)

html - css - ebenen

Ich habe 3 Ebenen in einer Zelle, die sich teilweise ueberlappen sollen:

PHP-Code:


		
			
<style>

 #Ebene0 {position:relative; top:0px; left:6px; z-index:1;}

 #Ebene1 {position:relative; top:6px; left:6px; z-index:3;}

 #Ebene2 {position:relative; top:-20px; left:52px; z-index:2;}

</style>



<table cellpadding='0' cellspacing='0' border='0' style='table-layout:fixed; width:150px; height:150px;'>

 <tr>

  <td>

   <div id='Ebene1'>Inhalt_1</div>

   <div id='Ebene2'>Inhalt_2</div>

   <div id='Ebene3'>Inhalt_3</div>

  </td>

 </tr>

</table>

Das funktioniert auch wunderbar, nur, warum wird trotz "table-layout:fixed;" die Zelle so weit auseinandergedrueckt, als ob die Inhalte untereinander stuenden? Wo ist da der Wirm drinn und wie laesst sich das vermeiden?

Danke und lg
ff

Ein Wurm nennt sich #Ebene0, ein anderer id=Ebene3.

Ja klar, danke, aber dieser Wurm hat sich nur bei dem Demo-Beispiel fuer hier eingeschlichen. Beim echten Beispiel passt das.

Ich koennte die Frage auch so stellen:

Wie erstelle ich einen Container, der die linke obere Zellenecke mit den Koordinaten 0/0 festlegt? Dann wuerde das mit "position:absolute;" funktionieren.

Tja, fuer alle Suchenden, SO gehts:

PHP-Code:


		
			
<style>

 #Ebene1 {position:absolute; top:3px; left:6px; z-index:4;}

 #Ebene2 {position:absolute; top:20px; left:6px; z-index:3;}

 #Ebene3 {position:absolute; top:3px; left:112px; z-index:2;}

</style>



<td style='width:100%; height:100%;'> 

 <div style='position:relative; height:50px;'>

  <div id='Ebene1'>Inhalt_1</div> 

  <div id='Ebene2'>Inhalt_2</div> 

  <div id='Ebene3'>Inhalt_3</div> 

 </div>

</td>

lg
ff