nicht angemeldet
css-Tabelle : Zellendarstellung abhängig voneinander.
Liebe Foristen,
es wird gesagt, eine Tabelle aus divs, die mit display: table, table-row und table-cell formatiert ist, verhalte sich genau wie eine aus den entsprechenden html-Elementen.
Ich habe ein Beispiel, wo das offensichtlich nicht der Fall ist:
<html>
<head>
<style>
.tabl , table {display: table; width: 500px; border: blue 1px solid;}
.ro {display: table-row;}
.ce , td{display: table-cell; border: red 1px solid;}
.z1 {line-height: 50px;}
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div class="tabl">
<div class="ro">
<div class="ce">
<p>Hier steht ein Text, der eigentlich oben sein müsste. Jetzt mach ich das Ding noch viel länger, mal sehen, wie das mit dem Umbruch hinkriegt.</p>
<p>Dann kommen hier nocht ein paar weltbewegende Zeilen.
<br>ein kleines Line-Break tun wir auch noch rein.</p>
</div>
<div class="ce">
<p class="z1">So hier kommt eine mächtige erste Zeile...</p>
<!-- <img src="Graph/Dagmar Cee/dagmar 135 180.jpg" alt="" border="0" width="140" height="192">b -->
</div>
</div>
</div>
</body>
</html>
Der Text in der linke Zelle liegt so, dass seine erste Zeile mit dem Bild in der rechten Zelle dieselbe Grundlinie teilt. Der gleiche Effekt tritt auf, wenn ich in einer der beiden Zellen größere Buchstaben oder Zeilenhöhen reinschreibe.
<grantel class="kannüberlesenwerden">Wieder ein typisches Beispiel dafür, wie der CSS - Standard vorwegnimmt, was einige Anwender vielleicht erwarten könnten, alle anderen aber daran hindert, das zu tun was sie wollen.</grantel>
Hat jemand eine Idee, wie man das ausschalten kann?
alles beste...
-
sorry, bin mit der Vorschaufunktion nicht klargekommen - man muss sie jedes mal einschalten wenn man eine Korrektur betrachten will...
Der Code im Posting ist mit einer höheren Zeile in der rechten Zelle versehen, während der Link nur das Bild rechts enthält - durch das natürlich die 1. Zeile so hoch wird wie das Bild.
-
Hi,
<grantel class="kannüberlesenwerden">Wieder ein typisches Beispiel dafür, wie der CSS - Standard vorwegnimmt, was einige Anwender vielleicht erwarten könnten, alle anderen aber daran hindert, das zu tun was sie wollen.</grantel>
Dafür, dass du vergessen hast, den Defaultwert für vertical-align (und ggf. das margin-top für die Absätze) mit dir genehmeren Werten zu überschreiben, kann der Standard nichts. Wieder also mal ein typisches Beispiel dafür, wie bei manchen Leuten die eigene Ahnungslosigkeit zu unberechtigtem Gemecker führt.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Danke erstmal für die Antwort.
Ein paar Worte zum Tonfall: Ich habe dich nicht angegriffen (es sei denn du hättest den Standard mitentwickelt), du aber mich. Ich habe mein (zugegebenermaßen vorschnelles) Geschimpfe immerhin ironisiert, du hast bierernst zurückgehauen. Vielleicht können wir den Tonfall etwas fehlertoleranter halten ?
Jedenfalls stimmt, dass hier
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
steht: "wirkt wie td", was falsch ist, da css-Tabellenzellen einen anderen vertical-align Defaultwert haben, nämlich "baseline" anstatt "middle".
Auch hier:
http://www.w3schools.com/cssref/pr_class_display.asp
kein Hinweis auf den Unterschied.
Du musst immerhin zugeben, dass die Komplexität, es einem schon schwer machen kann.
-