HTML Dinge nebeneinander anordnen?

4 Antworten

medmonk
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
24.10.2019, 22:40

Der gesamte Aufbau ist bescheiden gesagt Mist. 😉 Eigne dir mithilfe von fundierten Dokumentationen (z.B. SelfHTML oder MDN) essentielles HTML und CSS, um unnötige Nachfragerei vorzubeugen. Verwende außerdem einen Quelltext-Editor wie VisualStudio Code oder Atom, der dir mit Syntax-Hervorhebung und Auto-Vervollständigung unter die „Arme“ greift.

Was jetzt deinen gezeigten Quellcode angeht, solltest du dich u.a. mit dem CSS Box-Model, Flexbox-Model und CSS Grid auseinandersetzen. Du solltest außerdem die richtigen Elemente zum Auszeichnen deiner Inhalte verwende. Das <div> oder <p> Element ist kein Überschrift. Dafür werden die „Heading“ Elemente <h1> bis <h6> verwendet.

HTML:

<div class="container">
 <img src="pfad/zum/bild.jpg" alt="alternativtext">
 <h2>Überschrift</h2>
 <a href="#">Link</a>
</div>

CSS:

/* minimal reset css */
* {
 box-sizing: border-box;
 margin: 0
}

/* primary styles */
.container {
 display: flex; 
}

LG medmonk
Woher ich das weiß:Berufserfahrung
Slycrow 
Fragesteller
 24.10.2019, 22:47

Danke für den langen Kommentar. Hatte den Paragraph vorher als Heading gehabt, habe dann (fälschlicherweise) gedacht, dass es etwas ändern würde, wenn ich es als Paragraph mache, was dann ja aber nicht eingetreten ist. Danke für den Quelltext, der hilft mir, das gesagte zu verstehen. Eine Frage hätte ich aber noch; Kann ich auf die Überschrift auch einzeln zugreifen um Sachen wie Farbe oder Schriftart zu ändern? LG Alex

0
Christoph34212  24.10.2019, 23:17
@Slycrow

Das kannst du machen indem du dem Attribut eine ID oder eine Klasse zuweist und dieser dann im Stylesheet styles zuweist z.B. :

HTML Überschrift

<h1 class="Ueberschrift">Willkommen</h1>

Im Stylesheet fragst du nun die Klasse "ab":

.Ueberschrift {
color: green; /* FARBE */
font-size: 100px; /* SCHRIFTGRÖSSE */
}

Es geht noch viel mehr z.B. Fett oder Kursiv usw.

.Ueberschrift {
color: green; /* FARBE */
font-size: 100px; /* SCHRIFTGRÖSSE */
font-weight: bold; /* FETTGEDRUCKT*/
}

oder

.Ueberschrift {
color: green; /* FARBE */
font-size: 100px; /* SCHRIFTGRÖSSE */
font-style: italic; /* KURSIV */
}
0
medmonk  24.10.2019, 23:29
@Slycrow
Eine Frage hätte ich aber noch; Kann ich auf die Überschrift auch einzeln zugreifen um Sachen wie Farbe oder Schriftart zu ändern? LG Alex

Du kannst in CSS jedes Block- oder Inline Element direkt oder mithilfe von IDs und Klassen ansprechen und individuell gestalten. Entweder das Aussehen global definierst oder lediglich einzelne Elemente formatierst.

HTML:

<section>
 <p>Absatz ohne Klassen-Attribut</p>
 <p class="is-hightlighted">Absatz mit Klassen-Attribut</p>
</section>

CSS:

/* global styles */
p {
 color: white;
 background-color: black;
 padding: 0.75rem;
}

/* primary styles */
.is-hightlighted {
 color: red;
 background-color: yellow;
}

LG medmonk

1
Christoph34212
24.10.2019, 22:48

Hallo,

es gibt viele Wege einer wäre z.b.

HTML Teil:

<!DOCTYPE html>
<html lang="de">
    <head>
     <title>Willkommen</title>
            <link rel="stylesheet" type="text/css" href="PFAD ZUM STYLESHEET">
            <meta name="keywords" content="#" />
            <meta name="viewport" content="width=device-width, initial-scale=1"/>  
            <meta charset="UTF-8">
    </head>
    <body>
        <div class="flexbox">
        <div id="Bildbox"></div>
        </div>
        <div class="flexbox">
            <h1>Willkommen</h1>
        </div>
        <div class="flexbox">
            <a href="LINK ZUR SEITE">Test</a>
        </div>
    </body>
</html>

CSS Teil:

    body {
        display: flex;
        margin: 0px;
    }
    /* ERSTELLT FLEXBOX MIT 1/3 DER GESAMT WIDTH */
    .flexbox {
        width: 33.3%;
        height: 100vh; /* 100vh = 100% DER GESAMTHEIGHT SOMIT Z.B. 50vh ENTSPR. 50% */
        display: flex;
        justify-content: center; /* ZENTRIERT VERTIKAL */
        align-items: center; /* ZENTRIERT HORIZONTAL */
    }
    #Bildbox {
        background: url("PFADZUMBILD");
        background-size: cover;
        background-position: center;
        width: 100%; /* GRÖSSE RELATIV ZU DEN 33.3% */
        height: 50vh; 
    }

Größe des Bildes musst du halt so einstellen wie du willst genauso background-size und position.

Solltest du fragen haben ich helfe gerne antworte einfach.

Chris
Slycrow 
Fragesteller
 24.10.2019, 22:53

Vielen Dank für die Antwort, Eine Frage hätte ich aber doch noch: Gibt es Vorteile das Bild in CSS anstatt in HTML einzuspeisen, oder macht das keinen Unterschied?

0
Christoph34212  24.10.2019, 23:02
@Slycrow

An sich macht es "keinen" Unterschied... Warum "keinen"? Es kommt immer drauf an wie du das eingesetzte Bild nutzen willst (Z.b. ob du Text drüber setzen willst usw). Ich persönlich binde Bilder immer über CSS ein da ich finde das dies mehr Vorteile in der Designoptimierungen bringt und zu dem auch viel Ärger spart. Das muss man nicht so sehen ist meine Erfahrung. Zudem ist es in meinen Augen veraltet Bilder mit dem img Attribut einzubinden. Es gibt aber durchaus Fälle wo du nicht um dies herrumkommst.

1
Christoph34212  24.10.2019, 23:09
@Christoph34212

Was ich noch anmerken kann ist wenn du dich für dafür interessierst kannst du mal auf z.B. https://www.w3schools.com vorbeischauen da kann man vieles von Grund auf ziemlich gut lernen. Der einzige "Nachteil" ist halt das alles auf Englisch ist aber an sich eine gute Seite und durch Live Ansichten anschaulich.

1
Slycrow 
Fragesteller
 24.10.2019, 23:23
@Christoph34212

Super, die Website schaue ich mir Mal an, wenn ich nochmal HTML/CSS Probleme habe

0
regex9  24.10.2019, 23:39
@Slycrow

Ja, es macht einen gewaltigen Unterschied.

Wenn du ein Bild als direktes Seitenelement einbinden möchtest, macht es Sinn, dieses mit einem img-Tag (oder dem picture-Container) umzusetzen. Ein einfaches Beispiel für so einen Fall wäre ein Logo oder Bilder einer Bildergalerie. Ein Crawler (Suchmaschine / Screen Reader) kann ein solches Element gut lesen und das Bild in einen Kontext einordnen.

Wenn du Bilder nur zu dekorativen Zwecken einsetzen möchtest (Beispiel: Hintergrundbild), es also nicht relevant für den eigentlichen Inhalt der Seite ist, wäre ein in CSS eingesetztes Hintergrundbild die Wahl.

Technisch betrachtet ist es hingegen oft einfacher, Bilder, die als Hintergrundbild für ein Element mit CSS eingefügt wurden, dynamisch zu skalieren.

1
medmonk  24.10.2019, 23:44
@Christoph34212

Über CSS sollten grundsätzlich nur Layout-spezifische Bilder und Grafiken mit dekorativen Charakter eingebunden werden. Inhaltsrelevante Bilder oder Grafiken gehören hingegen direkt ins HTML Markup!

Zudem ist es in meinen Augen veraltet Bilder mit dem img Attribut einzubinden.

Es ist nicht veraltet und mit HTML5 sogar um das <picture> Element erweitert. Wie schon anfangs gesagt, inhaltsrelevante Inhalte gehören direkt ins Markup. Alles andere kann man dann mithilfe von CSS machen.

Es spielt auch in punkto Barrierefreiheit und SEO eine Rolle, ob ein Bild oder eine Grafik direkt oder lediglich mithilfe von CSS eingebunden ist. Ein Screenreader ist da völlig blind, wenn es im CSS eingebunden wird.

LG medmonk

0
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, Webseite
24.10.2019, 22:35

Pack die Elemente in einen Container mit der Eigenschaft display: flex. Dann werden sie nebeneinander ausgespielt. Danach kannst du die Elemente noch mit einer Breite ausstatten und via text-align die Textausrichtung bestimmen.
Slycrow 
Fragesteller
 24.10.2019, 22:37

Die Elemente in den Container packen, mache ich in CSS das display: flex in CSS, richtig? Danke schonmal für die Antwort!

0
Slycrow 
Fragesteller
 24.10.2019, 22:38
@regex9

Dankeschön! Werde mich mal dran versuchen.

0