HTML Code

[Carmen]

Hallo,

ist dieses HTML so in Ordnung? http://codepen.io/anon/pen/KMgbZm

Mir ist es wichtig, dass ich oben ein Text habe der über die volle Breite geht und unten eine linke und eine rechte Spalte. Auf der rechten Spalte ist ein Logo, auf der linken Seite ist der Text. Ich weiß man sollte keine zwei <br> nehmen, aber ich weiß nicht, wie ich es sonst lösen kann? Wenn ich zwei <p> nehmen, haut mir das flex alles durcheinander.

[Matthias Apsel]

Hallo Carmen,

Das sieht aus, als gehörte das zu bild-in-polaroid-form-neben-text.

Für die br-Elemente:

<p>Ohne Bild</p>
<div class="flex-group">
  <p>Mit Bild</p>
  <figure>
</div> 

Möglicherweise ist float die bessere Wahl.

Bis demnächst
Matthias

[MrMurphy1]

Hallo

Meine erste Überlegung war auch ob float für dein Wunschlayout nicht geeigneter ist. Das ist schließlich weder veraltet noch verboten.

Insgesamt ist deine Beschreibung recht dünn.

ist dieses HTML so in Ordnung?

Für das, was du erreichen möchtest, eher nicht. Ich habe den Quelltext für eine Flexbox-Lösung mal etwas geeigneter umstrukturiert und gekürzten Inhalt durch drei Punkte kenntlich gemacht.

<section class="betreuung">
   <h2>Betreuung</h2>
   <p>Bavaria ipsum dolor ...</p>
   <div class="hallo">
      <p>Ratschkathl, Kasberlkopf, Sau, ...</p>
      <p>Bazi, Krippnmandl, gscheada Saubreiß, ...</p>
   </div>
   <figure>
      <img src="http://lorempixel.com/200/200/abstract/3" alt="Logo">
   </figure>
</section>

Gruss

MrMurphy

[Gunnar Bittersmann]

@@Carmen

ist dieses HTML so in Ordnung? http://codepen.io/anon/pen/KMgbZm

Nö:

<section class="betreuung">
    <h2>Betreuung</h2>

Die Überschrift „Betreuung“ deutet darauf hin, dass "betreuung" einmalig ist und nur für diesen Abschnitt steht. Es sollte also eine ID sein, keine Klasse.

sections sollten IDs haben, damit man sie über fragment identifier (der Teil hinter # in URIs) verlinken kann.

Auf der rechten Spalte ist ein Logo

      <figure> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=200&h=200" alt=""> </figure>

Das figure-Element scheint mir hier unangebracht. Dem Bild fehlt der Alternativtext. & muss escapet werden: &

Zum Stylesheet:

.betreuung {
    max-width: 89.75em;

Viel zu viel. Eine Zeilelänge sollte so bemessen sein, dass 45 bis 75 Zeichen reinpassen. Deine Zeilen sind viel zu lang für gute Lesbarkeit. Das sind so etwa 40em maximale Zeilenlänge.

.betreuung p {
    line-height: 1.8em;

Der Zeilenabstand ist auch zu groß.

Mir ist es wichtig, dass ich oben ein Text habe der über die volle Breite geht und unten eine linke und eine rechte Spalte. Auf der rechten Spalte ist ein Logo, auf der linken Seite ist der Text.

Wie soll es denn aussehen, wenn Logo und Text nicht nebeneinander passen?

LLAP 🖖