Warum verschiebt <!Doctype html> meine img's?

Wenn ich meine HTML- Seite erstelle, dann passen die Bilder, doch wenn ich <!Doctype html> in meinen Code mit aufnehme, dann verschieben sich alle img-Tags um 5px nach oben.

regex9

13.02.2023, 14:42

Teile besser ein Fiddle, in dem man das Problem direkt reproduzieren kann.

Momon12

Beitragsersteller

13.02.2023, 15:57

https://inge-haekelt.de.cool/WorldWideWolle.html

Das ist ein Schulprojekt.

Wenn man <!Doctype html> dazunimmt, dann schieben sich die Produktbilder hoch und es entsteht ein Abstand.

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

Recorsi

13.02.2023, 18:09

Das kann aufgrund von Unterschieden im Default-Stylesheet von verschiedenen Doctypes passieren. Ohne Doctype wird das Dokument möglicherweise im Quirks-Modus rendert, was zu inkonsistenten Darstellungen führen kann.

Um das Problem zu beheben, kannst du die "margin" Eigenschaft für die "img" Tags in deinem CSS anpassen.

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, HTML5

13.02.2023, 18:39

Ohne Doctype ist das Dokument invalid. Der Browser wechselt in dem Moment in einen anderen Rendermodus und das verursacht bspw. in deinem Fall eine andere Höhenberechnung für die div-Elemente.

Gewöhne es dir an, immer von Anfang an den Doctype zu setzen.

Deine img-Elemente beinhalten jeweils noch einen weiteren Markupfehler. In jedem Fall fehlt das alt-Attribut. Dieser Guide kann dabei helfen, den richtigen Wert für das Attribut zu finden.

Den Abstand zwischen Beschriftungsbox und Bild kannst du entfernen, indem du das Bild vertikal nach unten positionierst.

.haekelfigur img { vertical-align: bottom }

Standardmäßig handelt es sich um ein Inline-Element, welches auf der Schriftlinie positioniert wird.

elmex7

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Webseite

13.02.2023, 15:46

Es gibt halt kleine aber feine Unterschiede von html4 zu 5.

Schreibe deine Seiten gleich standardkonform in html5, dann hast du solche Probleme gar nicht erst.

Ähnliche Beiträge

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

Gute KI um HTML-, CSS- und JS-Code für eine Webseite zu erstellen?

Hallo kennt jemand eine gute KI, um HTML-, CSS- und JavaScript-Code für eine Webseite zu erstellen?

...zum Beitrag

HTML: Warum hält "sticky" nicht perfekt?

Ich habe drei div-Elemente von diesem Aufbau:

<div position:sticky; top=0px><table>Zwei Zeilen, mehrere Spalten</table></div>

<div position:sticky; top=50px><table>Zwei Zeilen, mehrere Spalten</table></div>

<div><table>mehrere tausend Zeilen, 'eine' Spalte</table></div>

Wenn ich nun im Element "C" zu scrollen beginne, ist zunächst alles wie gewünscht. A und B bewegen sich nicht.

Aber wenn jene Zeile, die nach dem Laden nicht zu sehen war (erste Zeile der zweiten Bildschirmseite), am Element "B" ankommt, beginnt sich dieses ebenfalls nach oben zu verschieben (zunächst hinter "A", z-index).

Kommt nun auch diese Zeile (der zweiten Bildschirmseite) am Element "A" an, verschiebt sich diese ebenfalls und es ist nur noch das Element "C" zu sehen.

Was kann ich tun, damit auch beim Scrollen A, B permanent zu sehen ist, selbst dann, wenn schon viele Bildschirmseiten gescrollt wurden?

...zum Beitrag

Html - dreieck mit div erstellen?

Ich will gerne mit html ein dreieck erstellen! Ich möchte eine website machen und weiß nur wie man ein Quadrat und ein kreis macht! Kann jemand mir dabei helfen und mir code geben und ihn erklären!

...zum Beitrag

Wie lernt man am besten HTML, CSS und JavaScript?

Hey,

ich möchte oben genannte Tools erlernen, um eigene gute Webseiten erstellen zu können. Jedoch tue ich mich schwer beim lernen. Ich weiß nicht, ob ich z.B die Tags in HTML auswendig lernen soll oder wie ich vorgehen soll beim lernen... Das lässt mich verwzweifeln.

Hoffe ihr habt da paar Ratschläge.

...zum Beitrag

Wie in einer HTML Website Text neben ein Bild machen?

Hi, ich programmiere gerade für eine Präsentation in der Schule eine Mini Website. Ich mach mal ein Bild vom Code des Bildes und von der ausgeführten Seite.

Ich will, dass das Bild rechts ist und links der Text, ohne das genau neben dem Bild Platz ist.

...zum Beitrag

Button in html?

Wie erstelle ich Button in html die man nach links verschieben kann und wenn ein anderer verschoben wird, dass der andere wieder zurück in die ursprüngliche Lage geht.

Wenn möglich sollte der Code (html, css und javascript) möglichst kurz sein und für PC sowie mobile Geräte verfügbar sein.

Danke

...zum Beitrag

Wie kann ich bei html einen springenden Button machen?

Ich möchte das wenn man mit dem Mauszeiger über den button geht, das der button sich dann verschiebt sodass man ihn nie drücken kann... also wie so eine art spiel... kann mir jemand den code schreiben ? Danke im vorraus.

...zum Beitrag

Wie kann ich mein HTML zu einer Webseite machen?

Hi,

ich habe mir ein paar HTML-Kenntnisse angeeignet und habe folgende Frage:

Einmal angenommen, ich habe jetzt eine geile Webseite mit HTML, CSS und JavaScript erstellt.

Wie mach ich das jetzt zu einer wirklich echten Seite? Klar ich brauche eine Domain. Aber wie erstelle ich eine oder (die eigentliche Frage): Wie verknüpfe ich jetzt diesen Ordner, in dem die Informationen wie Bilder, Videos und einzelne Dateien sind, mit dieser Webseite (clientbasiert)?

Und wenn ich das gemacht habe: Wie mache ich z.B. ein Update, weil ich z.B. etwas am Code verändert habe?

...zum Beitrag

Wo kann man eine Internetseite selber programmieren (selbst HTMLund CSS Code schreiben)?

...zum Beitrag

Canva in Wordpress importieren ohne schwarze Balken oben & unten?

Wie klappt das? Kann mir jemand ein Kürzel für den Html-Code geben? Evtl. kann ich diese Rahmen auch in der Hintergrundfarbe meiner Website einfärben?

DANKE TAUSENDMAL FÜR JEDE ANTWORT

...zum Beitrag

Ordnerstruktur bei HTML Webseiten für Fonts?

Hallo. Ich frage mich, wo ich meine Schriftarten (Fonts) in meinem HTML-Project unterbringen soll. Meine derzeitige Struktur sieht wie folgt aus:

Ordner

↳index.html

↳css
 ↳style.css

↳js
 ↳script.js

↳img
 ↳Alle meine Bilder

Wo soll ich die .tff- oder .otf-Dateien unterbringen? Wie macht ihr das? In etwa so:

↳fonts
 ↳Schriftart.tff

Oder wie ?

...zum Beitrag

Ein "Create"-Button, der eine neue Seite erstellt über php?

Grob gesagt, habe ich vor einen "Create"-Button zu erstellen, der, wenn man auf ihn klickt, eine neue HTML-Seite erstellt, diese HTML-Seite, soll dann ein vorgefertigtes Design haben und soll eine bestimmte CODE haben, denn man wiederum irgendwo eingeben könnte. Als Beispiel könnte man "Discord" nehmen, mit dem Create und Join Buttons.

...zum Beitrag

Wie HTML Animation die aus verschiedenen Dateien besteht einbinden?

Ich habe eine interaktive HTML Animation bekommen. Dieser Ordner besteht aus vielen verschiedenen dateien. Bilder, Videos, CSS, JS. Ich möchte diese Animation nun auf meiner Website einbinden.

Ich bin ehrlich gesagt etwas überfordert. Ich weiß wie ich HTML Code einbinde etc. Aber nicht ein Content Element welches sich aus vielen verschienden Dateien zusammensetzt.

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen