Versions-Historie des Beitrags „Darstellung Terminkalender“

Darstellung Terminkalender

bearbeitet von Oliver 04.12.2015 12:02

Hallo,

für eine neue Rubrik auf meiner Webseite möchte ich gerne folgende Darstellung

![Bildbeschreibung](http://up.picr.de/23880953fk.jpg "Titel des Bildes")

Folgendes habe ich in HTML und CSS erledigt (wenn Verbesserungen möglich sind, gerne sagen)

~~~html
<section>
<h1 class="contentHeader">Terminkalender</h1>

<article class="teaser">
<div class="teaserImage">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97150&w=300&h=150" alt="Test Bild">
</div>
<div class="teaserText">
<h1>Test Artikel 1</h1>
<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.</p>
</div>
</article>

<article class="teaser">
<div class="teaserImage">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97150&w=300&h=150" alt="Test Bild">
</div>
<div class="teaserText">
<h1>Test Artikel 1</h1>
<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.</p>
</div>
</article>

<article class="teaser">
<div class="teaserImage">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97150&w=300&h=150" alt="Test Bild">
</div>
<div class="teaserText">
<h1>Test Artikel 1</h1>
<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.</p>
</div>
</article>

</section>
~~~

Mein dazugehöriges CSS

~~~css
section {
max-width: 980px;
margin: 0 auto;
box-sizing: border-box;
}

.contentHeader {
border-bottom: 3px solid #c0c7ba;;
padding-bottom: 5px;
}

.teaser {
width: 30.70%;
display: inline-block;
background: #efefef;
margin-right: 2.15em;
}

.teaser:last-child {
margin-right: 0em;
}

.teaserImage {}

.teaserText {
padding: 0 1em;
}
~~~

Ich stelle euch auch ein Online Beispiel zur Verfügung: [http://codepen.io/anon/pen/qbBaLz](http://codepen.io/anon/pen/qbBaLz)

Was ich jetzt nicht verstehe, wie kann ich neben meiner h1 Überschrift die weiteren Punkte:

- Alle Termine
- Konzerte
- Partys
- Flohmärkte

platzieren?

Oliver

bearbeitet von Christian Kruse 04.12.2015 12:11

Hallo, für eine neue Rubrik auf meiner Webseite möchte ich gerne folgende Darstellung ![Bildbeschreibung](http://up.picr.de/23880953fk.jpg "Titel des Bildes") Folgendes habe ich in HTML und CSS erledigt (wenn Verbesserungen möglich sind, gerne sagen) ~~~html <section> <h1 class="contentHeader">Terminkalender</h1> <article class="teaser"> <div class="teaserImage"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97150&w=300&h=150" alt="Test Bild"> </div> <div class="teaserText"> <h1>Test Artikel 1</h1> <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.</p> </div> </article> <article class="teaser"> <div class="teaserImage"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97150&w=300&h=150" alt="Test Bild"> </div> <div class="teaserText"> <h1>Test Artikel 1</h1> <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.</p> </div> </article> <article class="teaser"> <div class="teaserImage"> <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97150&w=300&h=150" alt="Test Bild"> </div> <div class="teaserText"> <h1>Test Artikel 1</h1> <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.</p> </div> </article> </section> ~~~ Mein dazugehöriges CSS ~~~css section { max-width: 980px; margin: 0 auto; box-sizing: border-box; } .contentHeader { border-bottom: 3px solid #c0c7ba;; padding-bottom: 5px; } .teaser { width: 30.70%; display: inline-block; background: #efefef; margin-right: 2.15em; } .teaser:last-child { margin-right: 0em; } .teaserImage {} .teaserText { padding: 0 1em; } ~~~ Ich stelle euch auch ein Online Beispiel zur Verfügung: [http://codepen.io/anon/pen/qbBaLz](http://codepen.io/anon/pen/qbBaLz) Was ich jetzt nicht verstehe, wie kann ich neben meiner h1 Überschrift die weiteren Punkte: - Alle Termine - Konzerte - Partys - Flohmärkte platzieren?