Boxen bzw. Schrift nicht richtig zentriert/angezeigt?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

NewbieYikes

Neues Mitglied
30 August 2020
7
0
1
21
Hallo liebe Freunde ich habe ein Problem.. Bin gerade dabei HTML zu lernen und mache deswegen einige Tutorials nach.. Bei diesem Tutorial stellt sich mir allerdings folgendes Problem..

Meine Schrift wird nicht richtig angezeigt wie sie sein sollte und auch meine Boxen werden nicht richtig angeordnet..

Hier wie es aussehen sollte:




Und hier könnt ihr sehen wie die traurige Realität aussieht..
Habe die CSS Datei mehrfach gecheckt ob ich evtl. ein Fehler eingebaut habe der das komische spacing verursacht aber Fehlanzeige.

Wäre sehr nett wenn mir jemand das Problem aufzeigen könnte bzw die Fehlerquelle..
 
Zuletzt bearbeitet:

Sailor

Aktives Mitglied
14 Juli 2017
508
67
28
Das liegt an dem fehlerhaften Aufbau deines HTML-Codes! Lass deinen Code mal 'validieren'...
https://validator.w3.org/nu/?doc=https://www.designifyr.com/
und dann prüfe, ob deine Flex-Struktur richtig ist... du brauchst nur 1 Flex-Container, der alle deine Flex-Elemente enthält.
Code:
<div class="flex-container">
    <div class="flex-element">...</div>
    <div class="flex-element">...</div>
    <div class="flex-element">...</div>
    ...
</div>
Bei deinem Code ist das ein ziemliches Durcheinander... mehrere Flex-Container ineinander verschachtelt.
Siehe auch https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 

NewbieYikes

Neues Mitglied
30 August 2020
7
0
1
21
Danke dir erstmal für deine Antwort :)
Konnte mit deinen Informationen zumindest die Boxen richtig anordnen, allerdings verstehe ich nicht warum die Textanordnung nicht funktioniert wie auf dem Bild abgebildet.

Kann mir das jemand erklären? Wie kann ich die Absätze einfügen bzw. machen das es diese automatisch einfügt?

So soll es aussehen:


So sieht es aber aus:

 
Zuletzt bearbeitet:

Sailor

Aktives Mitglied
14 Juli 2017
508
67
28
Aus deiner Beschreibung und den Bildern kann ich mir leider keinen Reim machen?
Was bedeutet ...
Wie kann ich die Absätze einfügen bzw. machen das es diese automatisch einfügt?
Welche Absätze?? ... der 'lore ipsum' Text? ... das Bild?
Mir fällt hier als erstes auf, dass die beiden div's (Text / Bild) unterschiedlich breit sind. Vielleicht solltest du mal testen, ob mit
Code:
.w50 {
  width: 50%;
  padding: 20px;
}
im CSS sich etwas in die gewünschte Richtung verändert.
 

NewbieYikes

Neues Mitglied
30 August 2020
7
0
1
21
Genau das meine ich, sie sind unterschiedlich breit. Dabei würde ich den Text lieber in etwa in der größe von dem Bild haben (von den absätzen her)

Hier mal ein Bild zur veranschaulichung wie der text angeordnet sein soll:


Nur weiß ich nicht wie ich das hinbekomme das der Text nicht so langgezogen sondern mit mehreren Absätzen, eben wie auf dem Bild weiter oben..

Hoffe ich habe es etwas verständlich erklären können. Das mit dem w50 hat leider nicht den gewünschten Erfolg gebracht.

Vielen dank im Vorraus
 

Sailor

Aktives Mitglied
14 Juli 2017
508
67
28
Hast du die Änderung bei der 'width' ausprobiert und online? Ich sehe da nur den alten Zustand.
 

NewbieYikes

Neues Mitglied
30 August 2020
7
0
1
21
Oh sorry mein Fehler, habe es wohl offline umgeschrieben und dann bei der online Seite getestet wo es noch nicht geändert war ^^ Deine Lösung hat geklappt, vielen Dank :)
 

Sailor

Aktives Mitglied
14 Juli 2017
508
67
28
OK... als vielleicht noch elegantere Lösung könnte ich noch das anbieten - diesen Code statt des andere Code ins CSS..
da lässt sich jetzt die Breite der divs und auch der Abstand besser einstellen.
Code:
.w50 {
  width: 40%;
  margin: 0px 2%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
Einfach mal ausprobieren.
 
  • Like
Reaktionen: NewbieYikes

Sailor

Aktives Mitglied
14 Juli 2017
508
67
28
upps... hätte ich fast vergessen. du solltest für die Klasse 'content' folgendes ins CSS schreiben.
Code:
.content {
    display: flex;
    justify-content: center;
}
also 'center' statt 'space-between'.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.998
377
83
67
Dabei würde ich den Text lieber in etwa in der größe von dem Bild haben (von den absätzen her)
Ich empfehle, hier konsequent mit Flex zu arbeiten:
CSS:
.content {
    display: flex;
    /* justify-content: space-between; */
}

.w50 {
    /* width: 50%; */
    padding: 20px;
    flex: 1;
}

.w50 img {
    width: 100%;
}
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
1.998
377
83
67
Weil es erfahrungsgemäß auf diese Weise am einfachsten und zuverlässigsten ist, ein responsives Layout zu erzeugen.
BTW: Die Zuweisung der Klasse bei dem rechten .w50 ist fehlerhaft:
<div class"w50"="">
und das Bild darin ist rechts abgeschnitten.
 
Werbung: