HTML/CSS Problemchen

**DosAmp**

Zitat von Alpha

Ich hab den Sinn von <figure> nicht verstanden. Was genau wird dann besser, wenn ich da die Bilder reinwerfe?

Dabei handelt es sich um ein rein semantisches Tag, das alles erfasst, was man auf Papier als „Abbildung X“ abdrucken würde – plus eben die Möglichkeit einer Beschriftung mit <figcaption>. Vom Aussehen beeinflusst es erst mal gar nichts, das muss man alles per CSS regeln.

Wenn man ein Dokument erstellt, das nicht den äußerlichen Form-Anforderungen z. B. eines Zeitungsartikels oder wissenschaftlichen Papers entspricht, ist es wie so viele andere neue HTML5-Tags streng genommen fehl am Platz.

**Alpha**

Zitat von DosAmp

Wenn man ein Dokument erstellt, das nicht den äußerlichen Form-Anforderungen z. B. eines Zeitungsartikels oder wissenschaftlichen Papers entspricht, ist es wie so viele andere neue HTML5-Tags streng genommen fehl am Platz.

Ah, danke. Das trifft es so ziemlich, was mich auch daran stört.

mrshadowtux

Es hat genausowenig Einfluss aufs Rendering, wie auch <section> und dient der semantischen Strukturierung. Und ist halt nen super Container für Bilder und so.

Willst du das Bild als Artikelbild haben? Dann setze die figure an den Anfang des jeweiligen Artikels statt ans Ende. Geb dem figure dann noch ein wenig margin-left und margin-bottom im CSS, damit das nicht so hart an den Text aneckt. Ich würde da so 2em nehmen.

Retro92

Ok, habe <figure> direkt in den Beginn von <article> gesetzt. So sieht es aus:

Code

<section id="news">
        <h2>News</h2>
        <article>
          <figure><img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Urall375_gelaende.jpg" alt="Dingens" width="240" height="200" /></figure>
          <header>
            <h3>Entstehung</h3>
              <p>Veröffentlicht am <time datetime="2015-08-09">09.08.2015</time></p>
          </header>
            <p>Nach gefühlt einjährigem Stillstand geht es hier endlich weiter, neue Inhalte entstehen. Ein passendes Design evtl. auch!</p>
            <p>P.S.: Es wurde auch Zeit</p>
        </article>

Alles anzeigen

Meintest du das so? Ich habe allerdings noch die Bildbegrenzung drin...

Css für dieses Bildstück ist jetzt

Code

img {
  float: left;
  margin-left: 2em;
  margin-bottom: 2em;
}

So sieht es nun aus:

mrshadowtux

Das Float musst du dem Figure zuweisen statt dem Bild. Außerdem musst du bei einem float: left das margin-left zu einem margin-right machen, da du jetzt ja an der andern Seite Abstand haben möchtest. Und wie gesagt, lass bitte width= und height= weg. Cool wird es, wenn man die Bilder immer abwechselnd links und rechts macht. Halb so wild wie es klingt.

Mein Vorschlag:

Code

article:nth-of-type(odd) figure
{
  float: left;
  margin-right: 2em;
  margin-bottom: 2em;
}


article:nth-of-type(even) figure
{
  float: right;
  margin-left: 2em;
  margin-bottom: 2em;
}


article figure img
{
  display: block;
  width: 240px;
  height: 200px;
}

Alles anzeigen

CHRiSNEW

figure img könnte man noch zu figure > img optimieren.

mrshadowtux

Und vor das article könnte man noch die Section-ID setzen, damit es sich nicht auf andere articles auswirkt, jo.

Retro92

Wäre das dann

Code

#news > article > figure > img

?
Das nth-of-type odd & even verstehe ich noch nicht. Du hattest ja gepostet, dass ich damit Verschachteltes erreichen kann, aber ich verstehe gerade nicht, wieso du einmal odd UND even machst, wo in beidem doch dasselbe steht. Zum Anderen: Wenn ich später noch einen Artikel mit <figure> mache, wo ist da die Festlegung auf genau diese eine <figure> enthalten?

mrshadowtux

Steht nicht das selbe drin. Einmal left, einmal right. Odd und Even heißt einfach nur Gerade Werte und Ungerade Werte. Sprich man hat so immer im Wechsel das figure links und rechts bei den articles. Dazu muss natürlicxh jeder article nen figure haben, damit man das gut sieht.

Retro92

Ok. Ich denke, dass ich das verstanden habe. Und um die Artikel dann individuell noch anzupassen, bspw. Farbe etc., dann kann ich ja IDs vergeben, oder?

mrshadowtux

Jo genau.

Retro92

Gibt es Möglichkeit, noch auf die Position der Elemente einzuwirken? Ich meine jetzt die Position der Überschriften und der Bilder, bspw. die des zweiten Bildes.
Ansonsten bin ich schon wirklich zufrieden Einziges Manko, je weniger Text, desto "willkürlicher" scheinen sich die Bilder auszurichten. Mit wenig Text liegt das untere Bild bspw. unter der <hr> Trennlinie.

mrshadowtux

Prinzipiell schon. Dir steht da ja mit CSS die volle Flexibilität zur Verfügung. Gerade margins sind hier ne nette Sache.

Retro92

Ist <br> für das Rücken der Überschriften gebräuchlich? Oder existiert da etwas Besseres?

CHRiSNEW

Zitat von Retro92

Ist <br> für das Rücken der Überschriften gebräuchlich? Oder existiert da etwas Besseres?

Entweder auch margins passend setzen oder den Bildern kein margin-top geben.

mrshadowtux

<br> bitte niemals zum Layouten missbrauchen, das ist für harte Umbrüche, etwa in Gedichten.

Gib den Überschriften passende margin-top und es passt.

Retro92

CHRiSNEW: Jop, habe jetzt margins, passt! Der Witz ist, dass ich hier vor der Tastatur sitze und mir nix einfällt, dabei kenne ich das aus einem CSS-Kurs (eigentlich) mehr oder weniger.
mrshadowtux: Ok, passiert nie wieder (mein HTML-Kurs ist wohl eindeutig zu primitiv gewesen)

mrshadowtux

Das Problem ist, dass viele HTML oft als Sprache zum gestalten sehen. Dann fangen so Sachen wie <br> zum layouten an.

HTML ist halt nur, um die Inhalte strukturiert abzulegen, das ganze designen macht CSS.

Dirk

Es gab ne css Eigenschaft die float für das Element aufhebt/ignoriert. Komm aber nicht auf den Namen. Die Überschrift wäre wieder blockelement oder so

mrshadowtux

Meinst du clear?

HTML/CSS Problemchen

Jetzt mitmachen!

Benutzer online in diesem Thema