Tabelle mit Lücke

Byte-Attack · 10. August 2018

Könnt Ihr mir mal bitte helfen? Bin schon seid Stunden dran und finde nicht den Fehler, warum nach der ersten Zeile eine Lücke ist.
https://mgordon.lima-city.de/table/

Alle Grafiken sin 16x20groß. Ich blicke den Fehler nicht!

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tabelle</title>
<style>
html {
background: url(img/backgrnd.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.Top {
height:16px;
background:url(img/top.png);
background-repeat: repeat-x;
}
.Left {
width:20px;
background:url(img/li.png);
background-repeat: repeat-y;
}
.Right {
width:20px;
background:url(img/re.png);
background-repeat: repeat-y;
}
.Bottom {
height:16px;
background:url(img/un.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<center>
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20px"><img src="img/lo.png" width="20" height="16" alt=""/></td>
<td class="Top"></td>
<td width="20px"><img src="img/ro.png" width="20" height="16" alt=""/></td>
</tr>
<tr>
<td class="Left"></td>
<td background="img/tbback.png">Text<br>
Text<br>
Text<br></td>
<td class="Right"></td>
</tr>
<tr>
<td><img src="img/lu.png" width="20" height="16" alt=""/></td>
<td class="Bottom"></td>
<td><img src="img/ru.png" width="20" height="16" alt=""/></td>
</tr>
</table>
</center>
</body>
</html>

Alles anzeigen

Gastl · 10. August 2018

Layouten mit Tabelle bringt solch Probleme hervor. Tabellen sind für Inhalte gedacht, die auch wirklich einer Tabelle bedürfen. Mach es mit CSS und einem ganzen Bild als Hintergrund, keinen zerstückelten Hintergrund.

Byte-Attack · 10. August 2018

Dann müsste ich ja für jede Box, die unterschiedliche Größe haben, ein eigenes Hintergrundbild machen...

Sailor · 10. August 2018

Das grundlegende Problem mit deinem Layout, wenn es denn schon unbedingt eine Tabelle sein muss, sind die Bilder, die du benutzt.
Standardmäßig (default) werden Bilder mit der 'vertical-align: baseline;' eingefügt. Daraus ergibt sich allerdings zum unteren Rand des Elementes ... hier deine td's... ein paar Pixel Abstand. Das ist das, was du siehst.
Du müsstest deinen oberen beiden Eckenbildern ein 'vertical-align: bottom;' und den Hintergrundbildern in der oberen Zeile ein 'background-position: bottom;' geben, damit es (hingefummelt) passt.
Aber ehrlich, das ist alles totaler Quatsch... das geht einfacher und besser!
Du schreibst als Doctype <!DOCTYPE html>.. also willst du HTML5 benutzen. Das tust du aber durchgehend nicht... was ich da sehe gehört alles zu veralteten HTML Versionen.
Diese ganze aufwendige Methode mit den Bildern am Rand kannst du dir sparen, wenn du einfach der Tabelle mit CSS einen Rand gibst...

HTML

table {
width: 900px;
margin: 0px auto;
background-color: rgba(200, 200, 200, 0.8);
border: 5px solid #a00;
border-radius: 10px;
}

Teste das mal und wenn das für dich ok ist, dann poste deinen neuen Code und wir schmeißen den Rest der veralteten Dinge noch raus!

Byte-Attack · 10. August 2018

Vielen Dank - Werde ich mal abändern. Habe es jetzt so gelöst, da ich die Ecken nicht direkt in der Tabelle einfüge, sondern als Hintergrund nehme.
Vielen Dank für Eure Hilfe!

Sailor · 10. August 2018

Deine Webseite... deine Entscheidung! Aber mach dir das Leben etwas leichter und befasse dich mit HTML5 und CSS3 - das ist alles kein Hexenwerk!

Byte-Attack · 10. August 2018

Auf jeden Fall - Bin schon am "Rumbasteln" Danke Dir!

basti1012 · 10. August 2018

Zitat von Sailor

Diese ganze aufwendige Methode mit den Bildern am Rand kannst du dir sparen, wenn du einfach der Tabelle mit CSS einen Rand gibst...

Da gebe ich dir recht. Wenn man dann noch etwas shadow reinmacht sieht es fast so aus wie mit deinen Bildern
https://basti1012.bplaced.net/…ordner=forum-hilfe&id=505

Tags