Hallo liebe Leute.
Hab' folgendes Problem. Habe eine Tabelle als Bild eingefügt. Alles prima und es passt. Doch sobald ich einen Text darunter einfüge, springt der wirklich weit nach unten und da ist ein riesen Abstand.
Die Tabelle ist wie gesagt ein <img> und der Text ist in <p>/<span>. Habe aber selber keinen Abstand eingefügt.
Hätte jemand eine Idee?
(Die ARF einfach ignorieren, die muss ich noch in die Tabelle positionieren)
hier das Beispiel:
Ein Link zur Seite wäre sehr hilfreich.
Hier ist der Link: http://localhost/neuneu.html
Auf den 'localhost' hast leider nur du alleine Zugriff - dieser Link nutzt uns leider nichts!
Stell die Seite online oder poste hier den Code (HTML und CSS), sonst kann dir keiner Helfen.
Zu Einfügen des Codes nutze bitte die hier im Forum für Code vorgesehene Option... in der Kopfzeile das </> Symbol!
<!doctype html>
<html>
<head>
<style type="text/css">
span.cls_003{font-family:"Calibri",serif;font-size:10.0px;font-weight:normal;font-style:normal;text-decoration: none}
div.cls_003{font-family:"Calibri",serif;font-size:10.0px;font-weight:normal;font-style:normal;text-decoration: none}
span.cls_004{font-family:"Calibri",serif;font-size:8.0px;font-weight:normal;font-style:normal;text-decoration: none}
div.cls_004{font-family:"Calibri",serif;font-size:8.0px;font-weight:normal;font-style:normal;text-decoration: none}
#inhalt {
color: solid black;
}
</style>
</head>
<body>
<blockquote>
<span style="font-size: xx-small;">psum dolor sit ametorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</span></p>
<p><span style="text-decoration: underline; font-size: xx-small;">GBP Daten:</span></p>
<img src="background1.jpg" width="1000" height="1000"alt="background" >
<p><span style="font-size: xx-small;">
<div id="inhalt">
<div style="position:absolute;left:23.04px;top:33.90px" class="cls_003"><span class="cls_003">O Herr</span></div>
<div style="position:absolute;left:71.30px;top:33.42px" class="cls_004"><span class="cls_004">{ARF_GetLabel:316}: {ARF_GetValue:316} / {ARF_GetLabel:318}: {ARF_GetValue:318}// Firma</span></div>
<div style="position:absolute;left:278.28px;top:33.18px" class="cls_004"><span class="cls_004">{ARF_GetLabel:317}: {ARF_GetValue:317}</span></div>
<div style="position:absolute;left:418.73px;top:33.18px" class="cls_004"><span class="cls_004">{ARF_GetLabel:319}: {ARF_GetValue:319}</span></div>
<div style="position:absolute;left:501.10px;top:33.18px" class="cls_004"><span class="cls_004">{ARF_GetLabel:320}: {ARF_GetValue:320}</span></div>
<div style="position:absolute;left:23.04px;top:43.74px" class="cls_003"><span class="cls_003">O Frau</span></div>
<div style="position:absolute;left:23.04px;top:55.74px" class="cls_004"><span class="cls_004">{ARF_GetLabel:321}: {ARF_GetValue:321}</span></div>
<div style="position:absolute;left:278.28px;top:55.74px" class="cls_004"><span class="cls_004">{ARF_GetLabel:322}: {ARF_GetValue:322}</span></div>
<div style="position:absolute;left:349.10px;top:55.74px" class="cls_004"><span class="cls_004">{ARF_GetLabel:323}: {ARF_GetValue:323}</span></div>
<div style="position:absolute;left:418.73px;top:55.74px" class="cls_004"><span class="cls_004">{ARF_GetLabel:324}: {ARF_GetValue:324}</span></div>
<div style="position:absolute;left:23.04px;top:78.06px" class="cls_004"><span class="cls_004">{ARF_GetLabel:325}: {ARF_GetValue:325} (privat - keine @greenfinance.at)</span></div>
<div style="position:absolute;left:242.74px;top:78.06px" class="cls_004"><span class="cls_004">{ARF_GetLabel:326}: {ARF_GetValue:326}</span></div>
<div style="position:absolute;left:384.65px;top:78.06px" class="cls_004"><span class="cls_004">{ARF_GetLabel:327}: {ARF_GetValue:327}</span></div>
<div style="position:absolute;left:23.04px;top:100.62px" class="cls_003"><span class="cls_003">{ARF_GetLabel:329}?</span></div>
<div style="position:absolute;left:138.29px;top:100.62px" class="cls_003"><span class="cls_003">O JA O NEIN</span></div>
<div style="position:absolute;left:200.26px;top:100.62px" class="cls_004"><span class="cls_004">{ARF_GetLabel:339}: {ARF_GetValue:339}</span></div>
<div style="position:absolute;left:321.02px;top:100.62px" class="cls_004"><span class="cls_004">{ARF_GetLabel:334}: {ARF_GetValue:334}</span></div>
<div style="position:absolute;left:384.65px;top:100.62px" class="cls_004"><span class="cls_004">{ARF_GetLabel:335}: {ARF_GetValue:335}</span></div>
<div style="position:absolute;left:455.71px;top:100.62px" class="cls_004"><span class="cls_004">{ARF_GetLabel:336}: {ARF_GetValue:336}</span></div>
<div style="position:absolute;left:23.04px;top:110.46px" class="cls_003"><span class="cls_003">{ARF_GetLabel:343}</span></div>
<div style="position:absolute;left:138.29px;top:110.46px" class="cls_003"><span class="cls_003">O JA O NEIN</span></div>
<div style="position:absolute;left:200.26px;top:111.66px" class="cls_003"><span class="cls_003">O Lichtbildausweis {ARF_GetLabel:344}: {ARF_GetValue:344}</span></div>
<div style="position:absolute;left:348.86px;top:111.66px" class="cls_003"><span class="cls_003">EUR/EH</span></div>
</div>
<p><span style="color: #2f9533;">1. Beispiel</span></p>
<p><span style="font-size: x-small;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p><span style="color: #2f9533;">2. Beispiel</span></p>
<p><span style="font-size: x-small;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</blockquote>
</div>
</body>
</html>Verzeihung, ich hab total nicht darauf geschaut. Das Abstand Problem habe ich auch wenn ich über das Bild einen Text einfüge. Also je größer ich das Bild mache, desto größer wird auch der Abstand.
Leider ist der Code auch wenig hilfreich... außerdem solltest du den Code mal durch den Validator prüfen lassen... da sind einige Fehler drin.
https://validator.w3.org/#validate_by_input
Wie soll das denn aussehen, wenn es fertig ist? Mit diesen vielen absoluten Positionierungen und dem 'seltsamen' Code in den span-Elementen kann ich und mein Browser nichts anfangen.. nutzt du da eine (mir) unbekannte Anwendung oder ein CMS, um das darzustellen?
Und .. vielleicht dein Problem... warum hast du im img-Tag height und width mit 1000px angegeben? Lösche das mal und schaue, ob sich dann an den Abständen etwas ändert?
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.