Elemente auf einer Höhe positionieren?

[Liv3pl4y]

Guten Abend zusammen,

ich hoffe ihr könnt mir diese Frage beantworten. Ich denke es ist simple, doch ich komme auf keinen Lösungsansatz. Ich habe 3 Artikel-Elemente, welche wiederum zwei Span-Elemente und den Paragraph enthalten:

<section id="work-wrapper">
<article>
<span>Überschrift>/span>
<p>Artikelinhalt</p>
<span class="button">Button</span>
</article>
<article>
<span>Überschrift>/span>
<p>Artikelinhalt</p>
<span class="button">Button</span>
</article>
<article>
<span>Überschrift>/span>
<p>Artikelinhalt</p>
<span class="button">Button</span>
</article>

</section>

#work-wrapper {display: flex;}

#work-wrapper article {box-sizing: border-box; padding: 0 2.083333333333333%;}

    article > span {font-size: 1.2rem; font-weight: 700; text-transform: uppercase;}
    article > p {text-align: justify; font-size: 1.0rem; line-height: 1.5em;}
    .button {justify-content: flex-end; text-align: center; font-size: 1.2rem; font-weight: 700; text-transform: uppercase;}

Die Artikel Elemente habe ich nebeneinander mit der Display Eigenschaft Flex angeordnet. Das Problem sind dann aber die unteren Span Elemente eines jeden Artikel Elements:

Mein Problem ist wie ich das untere Span Element jeweils auf einer Höhe positioniere, obwohl die Artikel-Elemente unterschiedlich hoch sind. Man könnte natürlich eine Höhe für das p-Element definieren, doch ist das sicher nicht die gängigste Art und bei flexiblen Inhalten auch nicht ratsam, oder?

 

[Enigmon]

Kannst du etwas CSS Code dazu gesellen, damit ich etwas experimentieren kann?
Dadurch kann man immer lernen und evtl. sogar helfen.

LG
Thomas

 

[Liv3pl4y]

Habe ich oben ergänzt

 

[Enigmon]

So habe ein wenig rumexperimentiert..
also wenn du in die Klasse button noch das einfügst, müsste es klappen:

position: absolute;bottom: 0px;

Ach ja auch bitte die anderen kleinen Veränderungen beachten;

<section id="work-wrapper">
<article>
<span>Überschrift</span>
<p>Artikelinhalt</p>
<span class="button">Button</span>
</article>
<article>
<span>Überschrift</span>
<p>Artikelinhalt</p>
<span class="button">Button</span>
</article>
<article>
<span>Überschrift</span>
<p>ArtikelinhaltArtikelinhalArtikelinhaltArtikelinhaltArtikelinhaltArtikelinhalt<br>ArtikelinhaltArtikelinhaltArtikelinhaltArtikelinhaltArtikelinhaltArtikelinhalt</p>
<span class="button">Button</span>
</article>
</section>

und CSS (zur verdeutlichung mit Rahmen):

#work-wrapper {display: flex; width: 80%;}
#work-wrapper article {box-sizing: border-box; padding: 0 2.083333333333333%; width: 30%;}
    article > span {font-size: 1.2rem; font-weight: 700; text-transform: uppercase; border: 1px solid blue;
}
    article > p {text-align: justify; font-size: 1.0rem; line-height: 1.5em;border: 1px solid red;word-wrap: break-word;}
    .button {justify-content: flex-end; text-align: center; font-size: 1.2rem; font-weight: 700; text-transform: uppercase;border: 1px solid green; position: absolute;bottom: 0px;}

getestet über jsfiddle.net

LG
Thomas

 

[Liv3pl4y]

Hmm nicht ganz. Unter der Voraussetzung das, dass Elternelement eine relative Positionierung hat, hängt der Text auf den letzten beiden Zeilen, eines jeden Artikels. Ein negativer Bottom Wert würde das Problem beheben, sollte denke ich aber nicht sein?

 

[patrick_l]

Die Artikel Elemente habe ich nebeneinander mit der Display Eigenschaft Flex angeordnet. Das Problem sind dann aber die unteren Span Elemente eines jeden Artikel Elements:

Ich rate dir derzeit noch von Flex zur Positionierung ab, da das ganze erst am dem IE10 funktioniert. Bei den anderen Browsers auch nicht viel besser aussieht. Hinzukommt das "alle" die es können, mit unterschiedlicher Syntax arbeiten. Wenn du also partout Flex verwenden möchtest, die Browser-Prefixes mit notieren solltest.

.example {
  display: -webkit-flex;  /* Safari */
  display: -ms-flexbox;   /* IE10 */
  display: flex;          /* other */
}

Eine Fallback-Lösung für ältere Browser solltest du auch mit einbeziehen.

- DesignKarma: Cross-Browser Flexbox Solution with Float Fallback for Older IE

Überschriften werden auch nicht mit einem span deklariert. Dafür ist das "H-Element" (heading, h1 aufwärtst) vorgesehen. Ähnlich sieht es bei deinen Buttons aus. In HTML5 gibt es das Button-Elements mit der Art (type) button, submit oder reset.

<button type="button"></button>

Dein Markup sollte/könnte dann wie folgt aussehen:

<section id="work" class="wrapper">
  <article>
    <h2>title</h2>
    <p>content</p>
    <button type="button">
      <!-- label as text/image, or use CSS -->
    </button>
  </article>
</section>

Gib deinem Inhaltsbereich eine ID (in deinem CSS: work-wrapper). Sinnigerweise sollten Container (wrapper) mit einer Klasse versehen bzw. also solche angelegt werden. So spart man sich im CSS einiges an Schreibarbeit. Der Klasse einmalig gewünschte Eigenschaften und Werte geben und fertig. Wenn doch mal etwas anders formatiert werden muss, lediglich den Bereich mit dem Wrapper selektieren und nur für diesen überschreiben.

Was jetzt dein eigentliches Problem angeht - Verstehe ich dich richtig, das es dir lediglich um den Button geht? Wenn ja, erst einmal nachhake ob zufällig um einen "weiterlesen" Button geht. Wenn ja, würde ich die Buttons nicht mit mit CSS auf eine Linie frickeln, sondern lediglich die Zeichen des Vorschautextes festlegen.

Wenn die Buttons doch auf eine Linie bringen musst/möchtest, mit Position arbeiten. Gib dem Article-Element ein position:relative. Dem Button hingegen ein position:absolute und button:0px;. Jetzt sitzen alle Buttons unten innerhalb des Artikels. Zu guter letzt noch dem Paragraph ein margin-bottom.

Nochmal kurz zurück zum Flex-Model. Floate deine Elemente lieber oder arbeite mit CSS "display:table". Hier abschließend nochmal dein Markup mit allen Änderungen.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>CSS3 Example: display:table</title>
</head>
<body>
  <section id="work" class="container">
    <div class="row">
      <article class="col">
        <h2>one</h2>
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
        </p>
        <button type="button">Label</button>
      </article>
     <article class="col">
       <h2>two</h2>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
    <button type="button">Label</button>
      </article>
      <article class="col">
        <h2>three</h2>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
        </p>
    <button type="button">Label</button>
      </article>
    </div>
  </section>
</body>
</html>

* {padding:0; margin:0; border:none; outline:none;}
html, body {width:100%; height:100%; background-color:#f9f9f9;}
.container {margin:0 auto;} /* or wrapper */
#work {max-width:700px;}
#work .row {display:table-row;}
#work article.col {display:table-cell; padding:10px; position:relative;}
#work p {margin-bottom:40px;}
#work button {position:absolute; bottom:0px; padding:5px 10px;}

Liebe Grüße, Patrick

 

[Liv3pl4y]

Vielen Dank für deine sehr ausführliche Hilfe. So funktioniert es in der Tat. Bezüglich der Flex Eigenschaft. Ist es denn überhaupt noch sinnvoll Anpassungen für den Internet Explorer, oder gar noch frühere Versionen als 10 zu machen? Ich weis es ist irgendwo ein Leitfaden. Aber da der Internet Explorer mit Windows 10 sowieso eingestampft wird empfinde ich eine Art Überflüssigkeit für den IE 9 -

 

[patrick_l]

Ist es denn überhaupt noch sinnvoll Anpassungen für den Internet Explorer, oder gar noch frühere Versionen als 10 zu machen?

Es kommt darauf an, um welche Teile einer Website es geht. Du solltest schon darauf achten, das die Seite in älteren Browsern nicht "zerschossen" wird. CSS3 Flex ist zwar nett, steckt aber meiner Meinung nach noch in den Kinderschuhen. Allein wegen dem Prefix-Hickhack damit warten würde, bis es Browser übergreifend besser aussieht.

Ich weis es ist irgendwo ein Leitfaden. Aber da der Internet Explorer mit Windows 10 sowieso eingestampft wird empfinde ich eine Art Überflüssigkeit für den IE 9 -

Auch wenn der mit Windows 10 in den Ruhestand geschickt und durch Edge (der Neue) erst wird, solltest du bedenken, das nicht jeder das Upgrade machen kann, will oder wird. Weltweit gibt es zudem genügend User, die immer noch mit veralteten Browsers unterwegs sind. Daher sollte man auf einen Fallback nicht gänzlich verzichten.

Liebe Grüße, Patrick

 

[Myhar]

Ich rate dir derzeit noch von Flex zur Positionierung ab, da das ganze erst am dem IE10 funktioniert. Bei den anderen Browsers auch nicht viel besser aussieht. Hinzukommt das "alle" die es können, mit unterschiedlicher Syntax arbeiten

Auch wenn du sonst viel richtiges schreibst, hier liegst du leider falsch. Alle aktuellen Browser, die Flexbox unterstützen, verwenden die selbe Syntax.
Problematisch wird es nur bei alten Versionen, wobei hier auch nur noch Internetexplorer eine Rolle spielen sollte. Müssen also alte IE Versionen unterstützt werden, dann ist der Einsatz zu überdenken, bzw. mit Bedacht zu wählen. Ansonsten kann flexbox schon jeder Browser.

Bezüglich des Problems des TE: Warum ein span mit der Klasse button und nicht gleich ein button-Element? Das Thema mit Positionierung ist ja geklärt soweit ich es gesehen habe?

 

[patrick_l]

Auch wenn du sonst viel richtiges schreibst, hier liegst du leider falsch. Alle aktuellen Browser, die Flexbox unterstützen, verwenden die selbe Syntax.

Danke fürs Update. Das der Support mittlerweile doch so hoch ist, ist mir entgangen. Vor allem schön zu lesen, das die Syntax gleich ist - man die Prefixes nicht mehr benötigt. Danke dir.

Liebe Grüße, Patrick