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

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 - 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

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

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

Kann man mit HTML eine Datenbank erstellen?

Hallo,

kann man mit HTML eine Datenbank erstellen? Wenn ja, hat jemand dafür ein fertigen Code?

...zum Beitrag

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

...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

Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

...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

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...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

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...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

Kann man ein Screenshot einer Webseite machen ohne diese im Browser aufzurufen mit python?

Ich kann nur den html code runterladen aber es nicht möglich ein Screenshot zu erstellen

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen