nicht angemeldet
Wie funktioniert div style display:table-cell; etc. ?
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....
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>
-
Hi,
ich bin heute über die CSS Möglichkeit gestolpert das <DIV> Container sich wie Tabellen verhalten können.
Was von CSS-Kennern aber auch kritisch gesehen wird - weil man damit allzu leicht wieder in Tabellenlayouts zurueckfaellt, nur eben mit anderen Elementen als Tabellen.
Hat jemand eventuell schon mal in den weiten des Internets ein detailliertes Howto gefunden?
Ein Howto bzgl. was?
Wie sich Tabellen und ihre Unterelemente in HTML verhalten, sollte doch bekannt sein.Oder weis sogar jemand warum der IE das wieder mal nicht macht, ich etwas übersehen oder gar irgendwo gepfuscht habe
Ja, zum Beispiel die Hinweise dazu in SELFHTML hast du wohl uebersehen.
MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
Was von CSS-Kennern aber auch kritisch gesehen wird - weil man damit allzu leicht wieder in Tabellenlayouts zurueckfaellt, nur eben mit anderen Elementen als Tabellen.
was sich bei dem markup des op unschwer erkennen lässt - eine beliebige runde-ecken-technik verzichtet auf geschätzt 75% des markup und erzielt ohne tabellen-eigenschaften den selben effekt
-
@ Harlequin
Danke für die äußert Produktiven Vorschläge und Hilfe
Der IE wird das erst ab Version 8 unterstützen...
Im SelfHTML Nachschlagewerk steht das der IE das ab Version 4.0 kann dort habe ich das auch gefunden beim stöbern
<http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=Siehe hier>
Wobei die von dir angerührte DIV-Suppe auch nicht besser ist.
Schön das Du Oberchecker und als wahrer CSS Guru mich eines besseren belehrt hast und noch nicht mal ein Beispiel anführen musstest, sondern lediglich ein paar Sprüche dazu brauchtest.
@ ChrisB
Anmerkung: CSS lässt sich nicht nur auf DIVs anwenden und das Vorhandensein der anderen HTML-Elemente hat durchaus seine Berechtigung.
Was von CSS-Kennern aber auch kritisch gesehen wird - weil man damit allzu leicht wieder in Tabellenlayouts zurueckfaellt, nur eben mit anderen Elementen als Tabellen.
Entschuldige...eine Grundsatzdiskussion wollte ich nicht anfangen, sondern habe hier lediglich Hilfe gesucht, gezielt zu meiner Frage wie genau das formatieren des div´s mit dieser Funktion funktioniert, denn Stefan Münz das nur als kurze Erläuterung behandelt.
Ein Howto bzgl. was?
Siehe Topictitel....danke für das aufmerksame lesen. Und Entschuldigung das ich es in 50 Zeichen nicht näher Erläutert habe was ich möchte.
Ja, zum Beispiel die Hinweise dazu in SELFHTML hast du wohl uebersehen.
Super hilfreich danke....
Wird mir sicher nicht nochmal passieren hier zu fragen, denn mit dieser geballten Kraft Freundlichkeit und Hilfsbereitschaft, nicht zu vergessen die fachliche Power komme ich einfach nicht zurecht.
Schönen Tag noch...
-
Hi,
Der IE wird das erst ab Version 8 unterstützen...
Im SelfHTML Nachschlagewerk steht das der IE das ab Version 4.0 kann dort habe ich das auch gefunden beim stöbern
<http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=Siehe hier>
Da steht sehr deutlich, dass er es zumindest bis einschliesslich Version 7 nicht tut.
Entschuldige...eine Grundsatzdiskussion wollte ich nicht anfangen,
Ich habe auch keine angefangen, sondern lediglich einen warnenden Hinweis angebracht.
Siehe Topictitel....danke für das aufmerksame lesen.
Dafuer, dass du selber offenbar zu bloed zum aufmerksamen Lesen bist, hast du eine ziemlich grosse Klappe.
Ja, zum Beispiel die Hinweise dazu in SELFHTML hast du wohl uebersehen.
Super hilfreich danke....
Lern Lesen, du Depp.
Da steht:
Beachten Sie:
[...] Die Angaben zu den Tabelleneigenschaften werden von Netscape 6.0 interpretiert, vom Internet Explorer jedoch auch in der Version 7 noch nicht.MfG ChrisB
--
„This is the author's opinion, not necessarily that of Starbucks.“-
du selber offenbar zu bloed [...] bist
[...] du Depp.auch wenn deine ausführungen im grunde genommen zutreffen und deine hinweise in deinem vorposting in der tat korrekt waren, ist den letztes posting hier nicht grade sehr nett gewesen
ggf. gehst heute schon um 20.00 uhr schlafen, dann bist du nicht so grantig
-
-
-
-
Yerf!
Oder weis sogar jemand warum der IE das wieder mal nicht macht, ich etwas übersehen oder gar irgendwo gepfuscht habe ;-)?
Der IE wird das erst ab Version 8 unterstützen...
Über ein paar gute Einfälle oder Tipps wäre ich sehr dankbar, das wäre ja ENDLICH das Ende der Tabellenknechtschaft.
Wobei die von dir angerührte DIV-Suppe auch nicht besser ist.
Anmerkung: CSS lässt sich nicht nur auf DIVs anwenden und das Vorhandensein der anderen HTML-Elemente hat durchaus seine Berechtigung.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->