Page 1 of 1

Unerklärliches Spacing vor erster Tabelle

Posted: Sun May 06, 2018 9:16 am
by HelmutL
Hallo,

ich baue eine Seite mit mehreren Tabellen. Vor der ersten Tabelle ist aus mir nicht ersichtlichen Gründen ein großer Abstand zum darüber liegenden Text/Paragraph. Lösche ich die erste Tabelle samt dem darüberliegenden Paragraphen, geschieht das gleiche eben bei der folgenden Tabelle (d.h. bei der ersten angezeigten).

[ external image ]
https://my.pcloud.com/publink/show?code ... jzpjA8lQIX

Quelltext der Seite (relevanter Beginn):

Code: Select all

<article>
<h2>Begriffserklärungen</h2>
<p>Ein paar Beispiele dazu:</p>
<p> </p>
<h3><a id="datum" name="datum"></a>Datum</h3>
<p>Oft wurden religiöse Feste zur Datumsangabe verwendet, besonders bei Verträgen wo jährliche Zahlungen oder Natural-Leistungen ausbedungen waren.</p>
<table style="text-align: left; width: 100%;" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td style="vertical-align: top;">Sebastiani</td>
<td style="vertical-align: top;">20. Januar</td>
</tr>
<tr>
<td style="vertical-align: top;">Mariä Lichtmess</td>
<td style="vertical-align: top;">2. Februar</td>
</tr>
<tr>
<td style="vertical-align: top;">Michaeli</td>
<td style="vertical-align: top;">29. September</td>
</tr>
<tr>
<td style="vertical-align: top;">Estomihi (Quinquagesima)</td>
<td style="vertical-align: top;">7. Sonntag vor Ostern</td>
</tr>
<tr>
<td style="vertical-align: top;">Fasnachtsmontag</td>
<td style="vertical-align: top;">Montag nach Estomihi, im Jahr 1781 der 26. Februar</td>
</tr>
<tr>
<td style="vertical-align: top;">Georgi</td>
<td style="vertical-align: top;">23. April</td>
</tr>
<tr>
<td style="vertical-align: top;">Martini</td>
<td style="vertical-align: top;">11. November</td>
</tr>
</tbody>
</table>
<br>
<p> </p>
<h3><a name="geld"></a>Währung</h3>
<p>Üblich war der Gulden, aber es gab im deutschen Sprachraum keine einheitliche Währung. Je nach Land hatte der Gulden einen anderen Wert, wie es auch heute mehrere Dollar gibt (US-Dollar, australische Dollar, ...). Auch die Unterteilungen waren teilweise verschieden. Außerhalb der Habsburgischen Länder hatte der "Rheinische Gulden" eine gewisse Funktion als Leitwährung. Siehe z.B. <a href="gericht.php#Strafe_f%C3%BCr_Diebstahl">Strafe für Diebstahl</a>.</p>
<table style="text-align: left; width: 100%;" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td style="vertical-align: top;">Gulden</td>
<td style="vertical-align: top;">üblich war 1 Gulden (fl) = 60 Kreuzer (Xr) = 240 Pfennig (d)</td>
</tr>
<tr>
<td style="vertical-align: top;"> </td>
<td style="vertical-align: top;">aber auch 1 Gulden = 60 Kreuzer, 1 Kreuzer = 3½ Pfennig = 7 Heller</td>
</tr>
<tr>
<td style="vertical-align: top;"> </td>
<td style="vertical-align: top;">oder auch 1 Gulden = 60 Kreuzer = 252 Pfennig/Heller</td>
</tr>
</tbody>
</table>
<br>
...
Gibt es dafür eineErklärung ?

Vielen Dank
Helmut

Re: Unerklärliches Spacing vor erster Tabelle

Posted: Sun May 06, 2018 10:44 am
by cmb
HelmutL wrote:
Sun May 06, 2018 9:16 am
Vor der ersten Tabelle ist aus mir nicht ersichtlichen Gründen ein großer Abstand zum darüber liegenden Text/Paragraph. Lösche ich die erste Tabelle samt dem darüberliegenden Paragraphen, geschieht das gleiche eben bei der folgenden Tabelle (d.h. bei der ersten angezeigten).
Sieht nach einem CSS-Problem aus, und zwar bezüglich float und dessen clear. Im Screenshot kann man gut sehen, dass die Tabelle erst beginnt, wenn die linke Sidebar keinen Inhalt mehr hat. Die einfachste Lösung ist wohl für den gesamten Inhaltsbereich einen so genannten Block-Formatierungskontext zu erzwingen. Siehe viewtopic.php?f=29&t=8030&p=43590#p43590 (die verlinkte Demo ist zumindest derzeit nicht verfügbar).

Re: Unerklärliches Spacing vor erster Tabelle

Posted: Sun May 06, 2018 10:52 am
by lck
Ein Link wäre nicht schlecht wenn bereits online oder wenigstens welches Template verwendet wird.
cmb wrote:
Sun May 06, 2018 10:44 am
Sieht nach einem CSS-Problem aus, und zwar bezüglich float und dessen clear.
Ja. Könnte aber auch eine css-Angabe sein, wie z.B.:

Code: Select all

table:first-of-type {
	margin-top: 200px;
}

Re: Unerklärliches Spacing vor erster Tabelle

Posted: Sun May 06, 2018 11:14 am
by HelmutL
@cmb
Sieht nach einem CSS-Problem aus, und zwar bezüglich float und dessen clear. Im Screenshot kann man gut sehen, dass die Tabelle erst beginnt, wenn die linke Sidebar keinen Inhalt mehr hat.
das glaube ich eher nicht bei einer anderen Seite passiert das nicht.
https://my.pcloud.com/publink/show?code ... PvfkHj2geX

Anm.:
Das ganze ist noch in der Entwicklung bei mir lokal und daher noch nicht online. Vielleicht finde ich aber eine Möglichkeit.

Re: Unerklärliches Spacing vor erster Tabelle

Posted: Sun May 06, 2018 1:04 pm
by HelmutL
@cmb
Sieht nach einem CSS-Problem aus, und zwar bezüglich float und dessen clear. Im Screenshot kann man gut sehen, dass die Tabelle erst beginnt, wenn die linke Sidebar keinen Inhalt mehr hat.
das glaube ich eher nicht bei einer anderen Seite passiert das nicht.
https://my.pcloud.com/publink/show?code ... PvfkHj2geX

Anm.:
Das ganze ist noch in Entwicklung, aber hier habe ich es zur Ansicht installiert:
https://www.familie-leininger.at/cms/

Re: Unerklärliches Spacing vor erster Tabelle

Posted: Sun May 06, 2018 1:37 pm
by cmb
HelmutL wrote:
Sun May 06, 2018 1:04 pm
Das ganze ist noch in Entwicklung, aber hier habe ich es zur Ansicht installiert:
https://www.familie-leininger.at/cms/
Super! Es liegt tatsächlich am fehlenden Blockformatierungskontext. Das folgende CSS schafft schnelle Abhilfe:

Code: Select all

#maincontent article {overflow: hidden}
Müsste aber vermutlich noch etwas nachjustiert werden.

Re: Unerklärliches Spacing vor erster Tabelle

Posted: Sun May 06, 2018 2:34 pm
by HelmutL
That's magic !!!

Iche verstehe es zwar nicht (sollte doch etwas mit Scrollbars zu tun haben), aber es funktioniert.

Vielen Dank.

Re: Unerklärliches Spacing vor erster Tabelle

Posted: Sun May 06, 2018 2:47 pm
by cmb
HelmutL wrote:
Sun May 06, 2018 2:34 pm
Iche verstehe es zwar nicht (sollte doch etwas mit Scrollbars zu tun haben), aber es funktioniert.
Ja, das ist die primäre Aufgabe der overflow Eigenschaft. Allerdings erzwingt overflow:hidden auch einen Blockformatierungskontext, in dem eben clear von außen keinen Einfluss hat. Statt overflow:hidden könnte man auch display:table verwenden, und es gibt wohl noch ein paar weitere Möglichkeiten.

Insgesamt denke ich allerdings, dass mehrspaltige Layouts, die mit floats realisiert werden, sowieso nicht die Zukunft sind; display:grid scheint da überlegen, und so allmählich passt auch der Browsersupport.