Blogeinträge anordnen

Jule_K · 30. Mai 2016

Hallo zusammen,

ich habe heute zum ersten Mal versucht mit meinen Anfänger-Kenntnissen einen Blog aufzubauen (für meine private Foto-Website).

Das Grundgerüst steht schon, allerdings habe ich Probleme die ich alleine nicht in den Griff bekomme:
Die einzelnen Blog-Posts haben (wohl wegen der unterschiedlichen Textlängen) immer einen mal kleineren und mal größeren Abstand zueinander.
Ich hätte gerne die Abstände irgendwie einheitlich. Also zwischen den Bildern jeweils der gleiche weiße Raum.
Es scheint mir so, als ob die Abstände sich von einem zum anderen Text ergeben, also von letzten Footer bis zum Datum des nächsten Artikels oder zur nächsten Headline ... Ich bin etwas ratlos.

Kann mir jemand einen kleinen Tipp geben was ich da besser machen kann?

Vielen Dank im Voraus!

Dies wäre mein HTML-Code:

!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Meine Foto-Website</title>
<link rel="stylesheet" href="content_style.css" type="text/css">
</head>
<body>
<article>– Thema –</article><time>25. März 2013</time>
<img src="http://lorempixel.com/400/200/abstract/1" alt="Selfhtml" width="400" height="300">
<section>
<h2>Überschrift</h2>
<hr><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
<footer><br / >53°26'32.136"N 9°53'8.196"E</footer>
</section>
</article>
<article>– Thema –</article><time>15. März 2013</time>
<img src="http://lorempixel.com/400/200/transport/2" alt="Selfhtml" width="400" height="300">
<section>
<h2>Überschrift</h2>
<hr><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
<footer><br / >53°26'32.136"N 9°53'8.196"E</footer>
</section>
</article>
<article>– Thema –</article><time>6. März 2013</time>
<img src="http://lorempixel.com/400/200/cats/8" alt="Selfhtml" width="400" height="300">
<section>
<h2>Überschrift</h2>
<hr><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fringilla vel, aliquet nec, vulputate eget, arcu.
<footer><br / >53°26'32.136"N 9°53'8.196"E</footer>
</section>
</article>
<article>– Thema –</article><time>17. Oktober 2012</time>
<img src="http://lorempixel.com/400/200/fashion/7" alt="Selfhtml" width="400" height="300">
<section>
<h2>Überschrift <font color="0099cc">â™¥</font></h2>
<hr><br />
Dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
<footer><br / >53°26'32.136"N 9°53'8.196"E</footer>
</section>
</article>
<article>– Thema –</article><time>03. Oktober 2012</time>
<img src="http://lorempixel.com/400/200/transport/5" alt="Selfhtml" width="400" height="300">
<section>
<h2>Überschrift</h2>
<hr><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
<footer><br / >53°35'50.298"N 0°0'33.141"E</footer>
</section>
</article>
<article>– Thema –</article><time>20. September 2012</time>
<img src="http://lorempixel.com/400/200/abstract/1" alt="Selfhtml" width="400" height="300">
<section>
<h2>Überschrift</h2>
<hr><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
<footer><br / >53°51'56.904"N 10°41'0.083"E</footer>
</section>
</article>
</head>
</body>
</html>

Und die CSS-Datei (Auszug):

/* ALLGEMEINES */
@media all {
header, nav, main, aside, footer, figure, article, figure, figcaption, audio, video {
display: block;
}

/* BLOG-Eintrag */

img { align: left; float: left; padding-right: 30px; padding-bottom: 10px; }
section { text-align: justify; color: dimgrey; }
article { padding-top: 140; color: grey; padding-bottom: 0px;}
h2 { padding-top: 0; font-size: 30px;
font-family: 'Playfair Display', serif;
color: dimgrey; }
time { float:right; margin-top: 0; color: dimgrey; }
footer { font-size: 11; color: #09C; background-color: white; }
hr { width: 55%;
height: 0.1;
margin: 0 auto;
color: lightgrey;
opacity: 0.5;}

MrMurphy · 31. Mai 2016

Hallo

Zitat

Kann mir jemand einen kleinen Tipp geben was ich da besser machen kann?

Schwierig.

Mal abgesehen davon, dass ich das

Zitat

Ich hätte gerne die Abstände irgendwie einheitlich. Also zwischen den Bildern jeweils der gleiche weiße Raum.
Es scheint mir so, als ob die Abstände sich von einem zum anderen Text ergeben, also von letzten Footer bis zum Datum des nächsten Artikels oder zur nächsten Headline

nicht verstehe reicht ein kleiner Tipp beziehungsweise reichen ein paar kleine Änderungen nicht aus.

Dein HTML-Quelltext enthält leider jede Menge Fehler, die zunächst korrigiert werden müssen. Viele Fehler sind dabei nicht direkt offensichtlich und Anfängern entsprechend schwer zu erklären. Du hast dir leider viele vermeintliche Lösungen falsch beigebracht, die dir nachträglich schwer wieder auszutreiben sind. So ist bei den meisten HTML5-Elementen ziemlich genau festgelegt, wozu sie verwendet werden dürfen - und wozu nicht. Dazu fehlt dir leider noch jedes Verständnis.

Außerdem scheinst du ein paar recht eigenwillige Vorstellungen zu haben wie eine Blog-Seite optisch dargestellt werden sollte. Deine Vorstellungen erschweren deinen Besuchern aber das Lesen der Seite und die verjagst du damit eher als sie zu einem erneuten Besuch einzuladen.

Ich kann dir zwar eine korrekte Seite erstellen, bezweifele aber, dir damit wirklich zu helfen.

Gruss

MrMurphy

MrMurphy · 31. Mai 2016

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&prime;32.136&Prime;N</span> <span>9°53&prime;8.196&Prime;E</span></p>
            </footer>
         </section>
      </article>

Alles anzeigen

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

Alles anzeigen

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&prime;32.136&Prime;N</span> <span>9°53&prime;8.196&Prime;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&prime;32.136&Prime;N</span> <span>9°53&prime;8.196&Prime;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&prime;32.136&Prime;N</span> <span>9°53&prime;8.196&Prime;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&prime;32.136&Prime;N</span> <span>9°53&prime;8.196&Prime;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&prime;50.298&Prime;N</span> <span>0°0&prime;33.141&Prime;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&prime;56.904&Prime;N</span> <span>10°41&prime;0.083&Prime;E</span></p>
            </footer>
         </section>




      </article>
   </main>
   <footer role="contentinfo">
   </footer>
</body>
</html>

Alles anzeigen

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

Jule_K · 31. Mai 2016

Hallo MrMurphy,

danke auch diesmal für die Hilfe!

Du hast schon recht. Und ich habe auch lange gezögert, bis ich hier meinen Anliegen veröffentlicht habe.
Es ist so, dass ich wirklich noch ganz am Anfang bin und die Person, die mir regelmäßig helfen wollte (vom Fach) krankheitsbedingt auf unbestimmte Zeit ausgefallen ist.
Ich denke bis ich das ganze System verstanden habe, geht noch ganz viel Zeit ins Land.
40 Euro für eine Lern-DVD (ja es gibt noch Leute die so etwas kaufen) waren auch rausgeschmissenes Geld. Und am Ende des Tages hatte ich irgendwie ein blödes Gefühl so viel Zeit damit zu verbringen ohne dass etwas sinnvolles dabei rauskommt. Ja, die Ungeduld ...

Deshalb dachte ich man könnte mir zumindest vorübergehend bei meiner Website helfen, damit ich wieder etwas motivierter bin. Und etwas dabei lerne.
Jedenfalls werde ich mich weiter damit beschäftigen, damit euch derartige dämliche Fragen zukünftig erspart bleiben
Und ich drücke die Daumen, dass mein Fachmann bald wieder gesund ist und mir alles noch einmal genauer erklären kann.

Find ich auf jeden Fall super lieb, dass du dir die Mühe gemacht und mir eine Beispiel-Blogseite erstellt hast.
Tausend Dank dafür!

Gruß, Jule

MrMurphy · 1. Juni 2016

Hallo

Zitat

Jedenfalls werde ich mich weiter damit beschäftigen, damit euch derartige dämliche Fragen zukünftig erspart bleiben

Im Gegensatz zu vielen Anderen bin ich zwar der Ansicht dass es dämliche Fragen gibt. Du stellst deine Fragen aber aus Unwissenheit um zu lernen, das ist etwas anderes. Darum solltest du dir also keine allzu großen Gedanken machen.

Zitat

Deshalb dachte ich man könnte mir zumindest vorübergehend bei meiner Website helfen

Das machen die meisten Helfenden in Foren doch gerne. Die Frager sollten nur akzeptieren, dass den Helfenden nicht unbegrenzt Zeit und Energie zur Beantwortung ihrer Fragen zur Verfügung steht. Sprich: Wir sind damit überfordert den Fragenden komplette individuelle Schulungen zu bestimmen Themen anzubieten. Dafür sind Foren schlicht nicht gedacht.

Zitat

damit ich wieder etwas motivierter bin.

Das kann leider auch nach hinten losgehen, was sich leider manchmal nicht vermeiden läßt.

Zitat

40 Euro für eine Lern-DVD (ja es gibt noch Leute die so etwas kaufen) waren auch rausgeschmissenes Geld.

Es ist leider ein Problem für Anfänger geeignete Lernkurse zu finden, egal ob Webseiten, Bücher oder Videokurse. Gute kostenlose sind mir noch nicht untergekommen.

Im Internet gibt es zwar jede Menge Informationen, die sind aber mehr zum Nachlesen oder Erweitern bereits bekannter Tatsachen geeignet. Aber nicht um als Anfäger HTML / CSS von der Pike auf zu lernen.

Grade Anfänger könnnen bei Informationen im Internet auch kaum entscheiden, ob sie aktuell sind oder veraltet oder gar unsinnig. Von daher kann ich deine Probleme gut nachvollziehen.

Du solltest dich von vermeintlichen Rückschlägen deshalb nicht abschrecken lassen.

Gruss

MrMurphy

Blogeinträge anordnen

Jetzt mitmachen!

Teilen