yogitee: Wie funktioniert div style display:table-cell; etc. ?

Beitrag lesen

SELF-Forum

Wie funktioniert div style display:table-cell; etc. ?

yogitee Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich bin heute über die CSS Möglichkeit gestolpert das <DIV> Container sich wie Tabellen verhalten können.

Habe da auch ein wenig rumgespielt damit und es hat sogar funktioniert :-)

Im Firefox....

Hier mein Test

Wie zu erwarten funktioniert es im IE 6.0 nicht!...

Hat jemand eventuell schon mal in den weiten des Internets ein detailliertes Howto gefunden? Vorzugsweise in deutsch :-) Kann aber auch englisch sein.

Oder weis sogar jemand warum der IE das wieder mal nicht macht, ich etwas übersehen oder gar irgendwo gepfuscht habe ;-)? Der Tidy HTML Validitätscheck hat erstmal nicht gemeckert ;-)

Über ein paar gute Einfälle oder Tipps wäre ich sehr dankbar, das wäre ja ENDLICH das Ende der Tabellenknechtschaft.

Gruß Yogitee

Anbei der Code:

  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >  
  
<head>  
  
<meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  
<title>Divtabletest</title>  
  
<style type="text/css" media="screen">  
  
.divTable{  
display:inline-table;  
text-align:left;  
padding:0;  
border:0;  
border-collapse:collapse;  
}  
  
.divTr{  
display:table-row;  
text-align:left;  
padding:0;  
border:0;  
}  
  
.divTd{  
display:table-cell;  
text-align:left;  
padding:0;  
border:0;  
}  
  
.divTd p{  
padding:0;  
border:0;  
text-align:justify;  
color:white;  
font-family:arial;  
font-size:0.9em;  
}  
  
</style>  
  
</head>  
  
<body>  
  
<div align="center">  
<div class="divTable" style="width:400px; height:auto;">  
 <div class="divTr" style="width:16px; height:16px;">  
  <div class="divTd" style="vertical-align:bottom; width:16px; height:16px; background:url('corner-top-left.png');">  
   <img src="onepix.gif" style="width:16px;" alt="no content" />  
  </div>  
  <div class="divTd" style="vertical-align:bottom; width:auto; background:url('top-middle.png');">  
   <img src="onepix.gif" style="width:100%; height:16px;" alt="no content" />  
  </div>  
  <div class="divTd" style="vertical-align:bottom; width:16px; height:16px; background:url('corner-top-right.png');">  
   <img src="onepix.gif" style="width:16px;" alt="no content" />  
  </div>  
 </div>  
  
 <div class="divTr">  
  <div class="divTd" style="vertical-align:top; width:16px; height:16px; background:url('left-middle.png');">  
   <img src="onepix.gif" style="width:16px;" alt="no content" />  
  </div>  
  <div class="divTd" style="vertical-align:top; width:100%; background:url('hg-all.png');">  
   <p>Phasellus consectetur pede nec enim. Nam a turpis. Nam accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent sed erat. Vestibulum luctus lorem et nulla. Duis tempor, massa ac rhoncus mattis, nisl nisi ullamcorper diam; sed rutrum lorem libero at nibh. Proin vitae dui ut est congue placerat. Mauris ullamcorper vehicula metus? Curabitur dignissim pulvinar mi. Donec justo leo; sodales at, fringilla vitae, congue et; odio. Quisque et pede. Suspendisse in libero. Duis non dui nec neque mattis facilisis? Praesent facilisis. Nulla facilisi.</p>  
   <p>Phasellus semper eleifend est. Vivamus elementum tellus nec felis. Quisque suscipit imperdiet sem? Maecenas nulla ipsum, cursus a, tincidunt semper, venenatis a, nunc. Ut vitae urna. Nunc fringilla dignissim ligula. Praesent id diam. Aenean semper metus sit amet risus. Nulla facilisi. Etiam auctor, neque sed congue eleifend, libero neque fringilla sem; eu porta nunc tellus id lacus. Proin quis ante. Phasellus mattis erat lobortis risus. Mauris elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>  
   <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam sed metus? Sed blandit. Cras sapien? Fusce bibendum, pede vel dapibus accumsan; libero nibh lobortis magna; sit amet vestibulum pede risus eu mauris. Sed iaculis ullamcorper pede. Praesent nibh! Duis eleifend enim non erat ornare ullamcorper. Maecenas tincidunt lorem eget ipsum. Sed sodales purus pretium libero. Fusce quis nisi. Nunc dictum ultrices nisl. Aliquam leo. Aenean ac magna? Quisque id nibh. Suspendisse vel enim id mauris gravida auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ligula. Mauris eu risus.</p>  
  
  </div>  
  <div class="divTd" style="vertical-align:top; width:16px; background:url('right-middle.png');">  
   <img src="onepix.gif" style="width:16px;" alt="no content" />  
  </div>  
 </div>  
  
 <div class="divTr">  
  <div class="divTd" style="vertical-align:top; width:16px; height:16px; background:url('corner-bottom-left.png');">  
   <img src="onepix.gif" style="width:16px;" alt="no content" />  
  </div>  
  <div class="divTd" style="vertical-align:top; width:100%; background:url('bottom-middle.png');">  
   <img src="onepix.gif" style="width:100%; height:16px;" alt="no content" />  
  </div>  
  <div class="divTd" style="vertical-align:top; width:16px; background:url('corner-bottom-right.png');">  
   <img src="onepix.gif" style="width:16px;" alt="no content" />  
  </div>  
 </div>  
</div>  
</div>  
  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln