Hallo
Ich habe aus deinen Angaben mal eine Beispiel-Blogseite erstellt.
Die Blogseite wirkt zwar eher schlicht, ist aber besucherfreundlich und sehr flexibel, obwohl sie sie überhaupt noch kein Responsive Design enthält.
Da die Blogseite zudem nach den Regeln von HTML5 und CSS3 erstellt ist kann sie (im Rahmen der Möglichkeiten von HTML und CSS) problemlos erweitert und optisch angepasst werden.
Da ich nicht verstehe was du unter den Themen verstehst habe ich die einfach als Text übernommen.
Zunächst der HTML-Quelltext für einen Blog-Beitrag:
Code
<article class="blog">
<section>
<header>
<h2>Thema</h2>
<p>25. März 2013</p>
</header>
<figure>
<img src="http://lorempixel.com/400/200/abstract/1">
<figcaption>Abstraktes Bild</figcaption>
</figure>
<h3>Produkt-Aussage</h3>
<p>Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal reden sollte.</p>
<p>Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein.</p>
<footer>
<p><span>53°26′32.136″N</span> <span>9°53′8.196″E</span></p>
</footer>
</section>
</article>Und das CSS dazu:
Code
.blog {
width: 100%;
max-width: 700px;
margin: 0 auto;
}
.blog section {
padding: 0 0.5rem 0.5rem 0.5rem;
border-top: 1px solid gray;
}
.blog header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
}
.blog section header h2:nth-child(1) {
white-space: none;
padding-bottom: 0;
margin-bottom: 0;
}
.blog section header h2:nth-child(1)::before {
content: "- ";
}
.blog section header h2:nth-child(1)::after {
content: " -";
}
.blog section header p:nth-child(2) {
padding-top: 0;
margin-top: 0;
font-size: 0.8rem;
white-space: none;
}
.blog figure {
min-width: 0;
max-width: 400px;
margin: 0;
}
.blog figcaption {
font-size: 0.7rem;
text-align: center;
}
.blog img {
display: block;
max-width: 100%;
max-height: 100vh;
border: 0;
margin: 0 auto;
}
.blog footer p {
color: #09C;
font-size: 0.8rem;
}
.blog footer p span {
white-space: none;
}Eine gesamte Seite mit verschiedenen Blindtexten könnte zum Beispiel folgendermaßen aussehen:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Blog Layout 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
@media all {
header, nav, main, aside, footer, figure, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
h1 {
font-size: 1.2rem;
letter-spacing: 0.1rem;
}
h2, h3, h4, h5, h6 {
font-size: 1rem;
}
p, li, dl, dt {
font-size: 1rem;
}
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
body {
width: 96%;
margin: 1rem auto;
}
.blog {
width: 100%;
max-width: 700px;
margin: 0 auto;
}
.blog section {
padding: 0 0.5rem 0.5rem 0.5rem;
border-top: 1px solid gray;
}
.blog header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
}
.blog section header h2:nth-child(1) {
white-space: none;
padding-bottom: 0;
margin-bottom: 0;
}
.blog section header h2:nth-child(1)::before {
content: "- ";
}
.blog section header h2:nth-child(1)::after {
content: " -";
}
.blog section header p:nth-child(2) {
padding-top: 0;
margin-top: 0;
font-size: 0.8rem;
white-space: none;
}
.blog figure {
min-width: 0;
max-width: 400px;
margin: 0;
}
.blog figcaption {
font-size: 0.7rem;
text-align: center;
}
.blog img {
display: block;
max-width: 100%;
max-height: 100vh;
border: 0;
margin: 0 auto;
}
.blog footer p {
color: #09C;
font-size: 0.8rem;
}
.blog footer p span {
white-space: none;
}
}
</style>
</head>
<body>
<header role="banner">
</header>
<nav role="navigation">
</nav>
<main role="main">
<article class="blog">
<h1>Jules Blog</h1>
<section>
<header>
<h2>Thema</h2>
<p>25. März 2013</p>
</header>
<figure>
<img src="http://lorempixel.com/400/200/abstract/1">
<figcaption>Abstraktes Bild</figcaption>
</figure>
<h3>Produkt-Aussage</h3>
<p>Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal reden sollte.</p>
<p>Das hier kann es jedenfalls nicht sein. Das klingt ja wie auf dem Totenbett getextet. Da muss wesentlich mehr Produktaussage rein. Ja, wir finden auch, dass man über die Copy noch mal reden sollte. Das hier kann es jedenfalls nicht sein.</p>
<footer>
<p><span>53°26′32.136″N</span> <span>9°53′8.196″E</span></p>
</footer>
</section>
<section>
<header>
<h2>Thema</h2>
<p>15. März 2013</p>
</header>
<figure>
<img src="http://lorempixel.com/400/200/transport/2">
<figcaption>Flugzeug</figcaption>
</figure>
<h3>Lesbarkeit</h3>
<p>Lieber Kunde und Leser, falls Sie keine Probleme haben, diesen Blindtext schnell und zügig zu lesen, können Sie sich glücklich schätzen. Der verantwortliche Art Director, der Ihnen höchstwahrscheinlich gerade diesen Entwurf präsentiert, versteht sein typografisches Handwerk par excellence. Er hat diesen Copyblock weder gestaucht, gezerrt, noch in Versalien oder gar in 6 Punkt Eurostile Outline gesetzt. Er hat ihn ganz einfach lesbar gemacht. Offenbar sogar ziemlich gut, sonst hätten Sie wohl schon einige Zeilen zuvor die Leselust verloren.</p>
<footer>
<p><span>53°26′32.136″N</span> <span>9°53′8.196″E</span></p>
</footer>
</section>
<section>
<header>
<h2>Thema</h2>
<p>06. März 2013</p>
</header>
<figure>
<img src="http://lorempixel.com/400/200/cats/8">
<figcaption>Katze</figcaption>
</figure>
<h3>Gummibärchen</h3>
<p>Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi.</p>
<p>Die Tastempfindung geht auch ins Sexuelle. Das bedeutet nicht unbedingt, daß das Verhältnis zum Gummibärchen ein geschlechtliches wäre, denn prinzipiell sind diese geschlechtsneutral. Nun sind Gummibärchen weder wabbelig noch zäh; sie stehen genau an der Grenze. Auch das macht sie spannend.</p>
<footer>
<p><span>53°26′32.136″N</span> <span>9°53′8.196″E</span></p>
</footer>
</section>
<section>
<header>
<h2>Thema</h2>
<p>17. Oktober 2012</p>
</header>
<figure>
<img src="http://lorempixel.com/400/200/fashion/7">
<figcaption>Fashion</figcaption>
</figure>
<h3>Für die Setzerei Appel</h3>
<p>Zu meiner Entschuldigung kann ich nur sagen: Ich habe diesen Text nur als Blindtext für die Setzerei Appel in Hamburg geschrieben.</p>
<p>Wenn ich gewusst hätte, dass Sie diese Zeilen lesen (man stelle sich das mal vor: Sie persönlich lesen das hier!), dann hätte ich mir natürlich mehr Mühe gegeben. Immerhin bin ich gelernter Texter und seit über 20 Jahren am Üben - da hätte ich wahrlich was Besseres schreiben können als diesen Stuss.</p>
<p>Was sollen Sie jetzt von mir denken? Bisher haben Sie Konstantin Jacoby vielleicht für einen ganz ordentlichen Kreativen gehalten - und dann das hier! Ehrlich gesagt: Ich weiss auch nicht, wie mir das passieren konnte.</p>
<footer>
<p><span>53°26′32.136″N</span> <span>9°53′8.196″E</span></p>
</footer>
</section>
<section>
<header>
<h2>Thema</h2>
<p>03. Oktober 2012</p>
</header>
<figure>
<img src="http://lorempixel.com/400/200/transport/5">
<figcaption>Porsche am Strand</figcaption>
</figure>
<h3>Lieber Onkel Reinhard - Brief an ein Idol</h3>
<p>Lieber Onkel Reinhard, schon lange wollte ich Dir sagen, dass ich Dich für einen ganz tollen Texter halte.</p>
<p>Ich weiss, Du hörst sehr gerne Lob, und deshalb kann man nicht oft genug sagen, dass Du der Grösste bist. Gerade in Deinem Alter ist man ja gesegnet, wenn man noch so witzig schreiben kann wie Du. Viele Deiner Werberkollegen sind ja schon zu wichtig, um noch Humor zu haben.</p>
<p>Du bist da ganz anders. Du kannst richtig komisch sein. Und das, obwohl Du in Deinem sehr langen Leben auch schon viele unangenehme Dinge schreiben musstest. Texte für McDonald's zum Beispiel. Oder kleine Reime für Onkel Norbert.</p>
<p>Nein, Du hast es wirklich nicht leicht gehabt. Und dann noch die Selbstdarstellung für Tante Ika.</p>
<footer>
<p><span>53°35′50.298″N</span> <span>0°0′33.141″E</span></p>
</footer>
</section>
<section>
<header>
<h2>Thema</h2>
<p>20. September 2012</p>
</header>
<figure>
<img src="http://lorempixel.com/400/200/nature/5">
<figcaption>Natur</figcaption>
</figure>
<h3>Lob</h3>
<p>Bevor Sie diesen Text lesen, sollten Sie unbedingt zwei Dinge tun. Erstens sollten Sie der Agentur noch einmal ausdrücklich versichern, dass Sie diese Anzeige für das Beste halten, was Sie je gesehen haben, und noch heute einen langfristigen Vertrag abschliessen möchten. Zweitens sollten Sie davon ausgehen, dass diese Anzeige über Nacht entstanden ist und deshalb noch stark verbessert werden kann. Am Layout wird noch ein bisschen gedreht, das Logo wird noch einen Tick grösser und der Text, der hier stehen soll, wird kein Tippfehler haben.</p>
<footer>
<p><span>53°51′56.904″N</span> <span>10°41′0.083″E</span></p>
</footer>
</section>
</article>
</main>
<footer role="contentinfo">
</footer>
</body>
</html>Und zum direkten Anschauen ein zeitweiliger Link zu einer Beispielseite:
http://boratb.bplaced.net/index01.html
Hinweis: Tagsüber zicken die Freeware-Beispielbilder manchmal etwas herum. Dann die Seite einfach mehrmals laden bis sie angezeigt werden.
Gruss
MrMurphy