HTML -> Warum ist da eine kleine Lücke?

nschlichtmann · 15. September 2022

Hallo liebe Leute,

ich verzweifle grad bei dem Versuch, eine einfache HTML-Seite zu erstellen. Vielleicht kann mir hier jemand helfen und meinen Fehler erkennen.

Frage: Warum ist dort eine Lücke zwischen der ersten und zweiten Tabelle? Die Bilder oben links und rechts sind 250px hoch, im Browser werden mir aber im Entwicklermodus 254px angezeigt. Das heißt, dass die Tabelle im Grunde 254px hoch zu sein scheint, wie man in der Mitte auch gut erkennen kann. Aber warum? Habe die Höhe doch klar auf 250px definiert, oder was mache ich falsch? Besten Dank für eure Hilfe! :-)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
</head>

<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" marginheight="0" marginwidth="0">

<table width="100%" height="250px" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="330px"><img src="media/logo_left.png" width="330" alt=""/></td>
<td background="media/top_back.png"> </td>
<td width="330px"><img src="media/logo_right.png" width="330" alt=""/></td>
</tr>
</tbody>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="130px" background="media/left_back.png"> </td>
<td> </td>
<td width="130px" background="media/right_back.png"> </td>
</tr>
</tbody>
</table>
</body>
</html>

Enotsa · 15. September 2022

Die 90er und 2000er haben angerufen und wollen ihr Tabellendesign zurück. Deine Grafiken zerlegen die Tabelle. Setz das mit CSS um z. B. mal nach CSS Grid Layout oder Responsive googeln.

AndrewPoison · 15. September 2022

Wenn du schon im Entwicklermodus unterwegs bist... sieh dir doch mal an, wie hoch die Bilder sind. Und was genau da von dem Platz in der Zelle das Bild einnimmt. Könnte mir auch gut vorstellen, dass deine Bilder unten einen weißen Rand haben

Aber grundsätzlich wirst du mit Tabellen-Design nicht weit kommen. Klar, geht schnell. Aber spätestens wenn du es dir auf dem Handy anguckst verstehst du, warum man das heutzutage anders macht

Genauer debuggen können wir es ohne die Bilder leider nicht (da in deinem Code auch die Höhe der Bilder nicht festgelegt ist, bzw. automatisch aus dem Bildmaterial bestimmt wird).

lumpi2k · 15. September 2022

Ich weiß, das ist jetzt die typische Foren-Antwort, aber selbst wenn du dieses Problem löst, wird dir dein Tabellenlayout langfristig noch viel mehr Probleme bereiten. Besser investiert wäre deine Zeit jetzt darin, Flexbox oder CSS Grids zu lernen: https://learncssgrid.com/ Damit lernst du, wie du deutlich flexiblere Layouts hinbekommst und es gibt deutlich mehr aktuelle Tutorials und FAQs dazu.

viele Grüße

User007 · 15. September 2022

Hi...

Warum nutzt Du denn die (veraltete) Tabellen-"Technik" für das Layout anstatt mit DIVs zu arbeiten?

Und dann auch noch mit absoluten Größenangaben für die Zellen anstelle die automatisch durch die als Zelleninhalt definierte Grafik bestimmen zu lassen - hierfür böte sich dann bspw. auch alles rund um den Befehl figure sowie ein CSS-basiertes Layout an.
Evtl. nochmal hier bei selfHTML (und bspw. w3schools.com) dazu recherchieren.

nschlichtmann · 15. September 2022

Enotsa schrieb:
Die 90er und 2000er haben angerufen und wollen ihr Tabellendesign zurück. Deine Grafiken zerlegen die Tabelle. Setz das mit CSS um z. B. mal nach CSS Grid Layout oder Responsive googeln.

Sehr gut! :-D

Ich gebe zu, mein Wissen stammt tatsächlich aus dieser Zeit! Ich habe keine Ahnung von CSS oder ähnlichem.

Allerdings: Ich nutze diese Page nur lokal auf meinem PC. Dort kommt der Index meiner externen Festplatten rein. Finde ich schöner, als einfach eine schnöde Textdatei mit dem Inhalt zu haben.

Daher:

Gibt es wirklich keine Möglichkeit, das in einfachem HTML umzusetzen? Außer dem Inhalt in der Mitte wird da auch nichts mehr hinzukommen. Das drum herum ist einfach nur etwas für die Optik.

Ergänzung (15. September 2022)

User007 schrieb:
Evtl. nochmal hier bei selfHTML (und bspw. w3schools.com) dazu recherchieren.

Habe mir eure Links mal angeschaut und durchgelesen. Vielen Dank dafür! Ich glaube, dafür bin ich aber langsam wohl zu alt, das ist mir viel zu komplex, auch wenn es das wahrscheinlich nicht unbedingt ist.

Glaube, ich überlege mir dann ein einfacheres Design ohne viele Tabellen zu nutzen! ;-)

Amaoto · 15. September 2022

Im Prinzip liegt es daran, wie das Bild in der Tabellenzelle dargestellt wird.
Kurz: style="display:block" in den beiden <img>-Elementen würde helfen, aber schlimm bleibt es trotzdem.

nschlichtmann · 15. September 2022

Vielen, vielen lieben Dank, das hat geklappt! Nun sieht es so aus wie es soll!

Wenn es eine vollwertige Internetseite werden würde, dann würde ich mich wahrscheinlich da auch tiefer reinfuchsen und die Sache mit CSS angehen, aber es ist ja einfach nur ein (wie ich finde) schöner Rahmen für den aufgelisteten Textinhalt meiner Festplatten! Dafür tut es das voll und ganz.

Aber was tut dieses "display:block" denn nun genau? Ich habe früher (Anfang der 2000er) Jahre einige Seiten nach diesem Designschema (Menü links und rechts) programmiert, und bin nie auf solche Probleme gestoßen.

Amaoto · 15. September 2022

nschlichtmann schrieb:
Aber was tut dieses "display:block" denn nun genau? Ich habe früher (Anfang der 2000er) Jahre einige Seiten nach diesem Designschema (Menü links und rechts) programmiert, und bin nie auf solche Probleme gestoßen.

Das Bild wird standardmäßig "inline" positioniert. Das lässt unten Platz, damit Buchstaben mit Unterlänge wie "g" oder "p" noch passen. Mit "block" wird es nicht mehr an der (nicht vorhandenen) Textzeile ausgerichtet.

Mozilla hatte da auch einen Artikel zu:
https://web.archive.org/web/2021062...top_level/Images,_Tables,_and_Mysterious_Gaps

Mir fällt übrigens auch auf, mit align="center" dürfte das genauso klappen.

netzgestaltung · 15. September 2022

nschlichtmann schrieb:
Aber was tut dieses "display:block" denn nun genau?

Es gibt auch eine allgemeine CSS Referenz auf Deutsch, die du zu jeder einzelnen notation aufrufen kannst:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften (kennts noch wer?)

Dazu:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/display schrieb:
block = Erzwingt einen Block – das Element erzeugt eine neue Zeile (wie bei Überschriften)

jedenfalls erzeugen die meisten browser(IE6 Quirksmode anyone? <- vermutlich hattest du das problem deswegen früher nicht) um inline(-block) aka "flow-elements"(https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element) Elemente (wie zb img) eine art "Zeilenhöhe" sowie ein Leerzeichen(<- der vermutete schuldige) danach.

Block-Level Elemente

Inline-Level Elemente

die display Eigenschaft kann jedoch im CSS "übersteuert" werden mit display:<wert>;

Hier Browser Vergleiche, Pix und Playground mit "nur" CSS2 Werten: https://www.quirksmode.org/css/css2/display.html
Mehr Browser kompatibilität: https://caniuse.com/?search=display

Suche

HTML -> Warum ist da eine kleine Lücke?

nschlichtmann

Ensign

Enotsa

Lt. Commander

AndrewPoison

Admiral

lumpi2k

Cadet 4th Year

User007

Vice Admiral

nschlichtmann

Ensign

Amaoto

Captain

nschlichtmann

Ensign

Amaoto

Captain

netzgestaltung

Captain

Ähnliche Themen