HTML/CSS Problemchen

[DosAmp]

(10.08.2015 07:46)Alpha schrieb:  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]

(10.08.2015 08:07)DosAmp schrieb:  

(10.08.2015 07:46)Alpha schrieb:  Ich hab den Sinn von <figure> nicht verstanden. Was genau wird dann besser, wenn ich da die Bilder reinwerfe?

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>

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

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