nicht angemeldet
display:table vs block
0 
MudGuard
0 
Matthias Apsel
display:table vs block
Gunnar BittersmannHallo liebe Gemeinde,
ich habe nur ein kurzes Verständnis-Problem und hoffe jemand kann es mir erklären.
Nach einem float-Bereich reagieren Elemente mit display:block anders als mit display:table. Beide haben eine widht=100%. Block-Elemente wandern neben das float-Bereich, aber eine Tabelle wird konsequent erst danach dargestellt. Warum?
Wie bekomme ich die Tabelle neben den float-Bereich? Einfach ein display:block, dann wäre das CSS ja nicht mehr ganz semantisch ;-)
Hier ein Quellcode zum anschauen mit den selbstredenden Klassen:
<!DOCTYPE html>
<html><head><title>Table 100%</title>
<style>
.dspTable {
width: 100%;
display: table;
border: 1px solid blue;
}
.dspBlock{
width:100%;
display:block;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="float:right">
<ol>
<li> Eins
<li> Eins
<li> Eins
<li> Eins
<li> Eins
<li> Eins
</ol>
</div>
<h3>Audioszene</h3>
<div class="dspBlock">Hinweis</div>
<table class="dspTable">
<tr><td>Die Lautstärke von Kanälen kann mittels Befehlen gesetzt werden.</td></tr>
</table>
</body></html>
Danke und Grüße,
justus
-
Hi,
Nach einem float-Bereich reagieren Elemente mit display:block anders als mit display:table. Beide haben eine widht=100%. Block-Elemente wandern neben das float-Bereich, aber eine Tabelle wird konsequent erst danach dargestellt.
Nein. Der Block-Bereich erstreckt sich auf die volle Breite - nur sein Inhalt wird neben
dem Float-Bereich dargestellt.
Gib dem block mal border/background, dann siehst Du, was passiert.Wie bekomme ich die Tabelle neben den float-Bereich? Einfach ein display:block, dann wäre das CSS ja nicht mehr ganz semantisch ;-)
Nein. Verringere die Breite der Tabelle, so daß sie noch daneben paßt.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Der Block-Bereich erstreckt sich auf die volle Breite - nur sein Inhalt wird neben
dem Float-Bereich dargestellt.Mal doof gefragt, das habe ich auch schon so festgestellt, aber wozu ist das gut?
Für eine Aufteilung des Inhalts in verschiedene Bereiche ist das ganz schön nervend, wenn man mit Rahmen und Hintergründen arbeiten will.
Gibt es einen Grund und vielleicht einen sinnvollen Einsatz für dieses Verhalten?-
@@Encoder:
nuqneH
Für eine Aufteilung des Inhalts in verschiedene Bereiche ist das ganz schön nervend, wenn man mit Rahmen und Hintergründen arbeiten will.
float ist nicht dafür gedacht.
Das ist eine Krücke, die man mit Flexbox endlich loswird.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) -
Hi,
Der Block-Bereich erstreckt sich auf die volle Breite - nur sein Inhalt wird neben
dem Float-Bereich dargestellt.
Mal doof gefragt, das habe ich auch schon so festgestellt, aber wozu ist das gut?So gut wie alles zu CSS 2.1 Zeiten war rechteckig – Elemente anderer Form gibt es einfach nicht.
-----------
| | |
| | |
| ----|
| |
-----------In so einem Fall müsste der Browser aus dem Element oben rechts ein Rechteck „ausschneiden“, wenn es *nicht* so wäre … und das wurde wohl als zu kompliziert angesehen.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
Hi,
Nach einem float-Bereich reagieren Elemente mit display:block anders als mit display:table. Beide haben eine widht=100%. Block-Elemente wandern neben das float-Bereich, aber eine Tabelle wird konsequent erst danach dargestellt.
Nein. Der Block-Bereich erstreckt sich auf die volle Breite - nur sein Inhalt wird neben
dem Float-Bereich dargestellt.
Gib dem block mal border/background, dann siehst Du, was passiert.Stimmt, der Rahmen geht durch die Liste. Das verstehe ich nun genauso wenig wie Encoder.
Wie bekomme ich die Tabelle neben den float-Bereich? Einfach ein display:block, dann wäre das CSS ja nicht mehr ganz semantisch ;-)
Nein. Verringere die Breite der Tabelle, so daß sie noch daneben paßt.
Tja, dazu müsste ich die Breite des dynamisch erstellten float-Bereichs wissen, richtig? Das ist im Original ein Mediawiki-Inhaltsverzeichnis, da will ich keine feste Breite angeben. Aber man könnte die Tabelle auf eine Breite von 50% oder 70% reduzieren, das sollte dann in den meisten Fällen funktionieren.
Ich verlinke mal das Live-Beispiel, es geht um die erste blaue Hinweisbox. Man sieht, dass es ist nicht allzu tragisch ist, solange das Inhaltsverzeichnis nicht noch mehr wächst.
http://www.dmxcontrol.de/wiki/Benutzer:Lichtheinicu,
AndreasDanke!
justus
-
-
Om nah hoo pez nyeetz, Justus!
Wie bekomme ich die Tabelle neben den float-Bereich? Einfach ein display:block, dann wäre das CSS ja nicht mehr ganz semantisch ;-)
CSS dient ausschließlich der Darstellung, ist also vollkommen unsemantisch. Semantik steckt allein im HTML.
Matthias
--
1/z ist kein Blatt Papier.
