Auf Thema antworten 2026

Beitrag

<blockquote data-quote="patrick_l" data-source="post: 2517203" data-attributes="member: 194379">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 &quot;alle&quot; die es können, mit unterschiedlicher Syntax arbeiten. Wenn du also partout Flex verwenden möchtest, die Browser-Prefixes mit notieren solltest.[code=CSS].example {&nbsp; display: -webkit-flex;&nbsp; /* Safari */&nbsp; display: -ms-flexbox;&nbsp;&nbsp; /* IE10 */&nbsp; display: flex;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* other */}[/code]Eine Fallback-Lösung für ältere Browser solltest du auch mit einbeziehen.- <a href="http://designkarma.co.uk/blog/using-flexbox-now" target="_blank">DesignKarma: Cross-Browser Flexbox Solution with Float Fallback for Older IE&nbsp;&nbsp; </a>Überschriften werden auch nicht mit einem span deklariert. Dafür ist das &quot;H-Element&quot; (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.[html]&lt;button type=&quot;button&quot;&gt;&lt;/button&gt;[/html]Dein Markup sollte/könnte dann wie folgt aussehen:[html]&lt;section id=&quot;work&quot; class=&quot;wrapper&quot;&gt;&nbsp; &lt;article&gt;&nbsp; &nbsp; &lt;h2&gt;title&lt;/h2&gt;&nbsp; &nbsp; &lt;p&gt;content&lt;/p&gt;&nbsp; &nbsp; &lt;button type=&quot;button&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;!-- label as text/image, or use CSS --&gt;&nbsp; &nbsp; &lt;/button&gt;&nbsp; &lt;/article&gt;&lt;/section&gt;[/html]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 &quot;weiterlesen&quot; 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 &quot;display:table&quot;. Hier abschließend nochmal dein Markup mit allen Änderungen.[html]&lt;!doctype html&gt;&lt;html lang=&quot;de&quot;&gt;&lt;head&gt;&nbsp; &lt;meta charset=&quot;utf-8&quot;&gt;&nbsp; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1&quot;&gt;&nbsp; &lt;title&gt;CSS3 Example: display:table&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&nbsp; &lt;section id=&quot;work&quot; class=&quot;container&quot;&gt;&nbsp; &nbsp; &lt;div class=&quot;row&quot;&gt;&nbsp; &nbsp; &nbsp; &lt;article class=&quot;col&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;h2&gt;one&lt;/h2&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 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.&nbsp; &nbsp; &nbsp; &nbsp; &lt;/p&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;button type=&quot;button&quot;&gt;Label&lt;/button&gt;&nbsp; &nbsp; &nbsp; &lt;/article&gt;&nbsp; &nbsp;&nbsp; &lt;article class=&quot;col&quot;&gt;&nbsp; &nbsp; &nbsp;&nbsp; &lt;h2&gt;two&lt;/h2&gt;&nbsp; &nbsp; &nbsp; &lt;p&gt;&nbsp; &nbsp; &nbsp; &nbsp; 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.&nbsp; &nbsp; &nbsp; &nbsp; &lt;/p&gt;&nbsp; &nbsp; &lt;button type=&quot;button&quot;&gt;Label&lt;/button&gt;&nbsp; &nbsp; &nbsp; &lt;/article&gt;&nbsp; &nbsp; &nbsp; &lt;article class=&quot;col&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;h2&gt;three&lt;/h2&gt;&nbsp; &nbsp; &lt;p&gt;&nbsp; &nbsp; &nbsp; 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.&nbsp; &nbsp; &nbsp; &nbsp; &lt;/p&gt;&nbsp; &nbsp; &lt;button type=&quot;button&quot;&gt;Label&lt;/button&gt;&nbsp; &nbsp; &nbsp; &lt;/article&gt;&nbsp; &nbsp; &lt;/div&gt;&nbsp; &lt;/section&gt;&lt;/body&gt;&lt;/html&gt;[/html][code=CSS]* {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;}[/code]Liebe Grüße, Patrick</blockquote>

[QUOTE="patrick_l, post: 2517203, member: 194379"] 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. [code=CSS].example { display: -webkit-flex; /* Safari */ display: -ms-flexbox; /* IE10 */ display: flex; /* other */ }[/code] Eine Fallback-Lösung für ältere Browser solltest du auch mit einbeziehen. - [URL='http://designkarma.co.uk/blog/using-flexbox-now']DesignKarma: Cross-Browser Flexbox Solution with Float Fallback for Older IE [/URL] Ü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. [html]<button type="button"></button>[/html] Dein Markup sollte/könnte dann wie folgt aussehen: [html]<section id="work" class="wrapper"> <article> <h2>title</h2> content <button type="button">  </button> </article> </section>[/html] 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 [I]position:relative[/I]. Dem Button hingegen ein [I]position:absolute[/I] und [I]button:0px;. [/I]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. [html]<!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> 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. <button type="button">Label</button> </article> <article class="col"> <h2>two</h2> 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. <button type="button">Label</button> </article> <article class="col"> <h2>three</h2> 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. <button type="button">Label</button> </article> </div> </section> </body> </html>[/html] [code=CSS]* {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;}[/code] Liebe Grüße, Patrick [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?