Beiträge von Jule_K

  • Blogeinträge anordnen

    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

  • Blogeinträge anordnen

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

  • Thumbnails anordnen mit Bildunterschrift

    Hallo,


    lerne gerade HTML und CSS. Bei einem Problem komme ich leider alleine nicht weiter.
    Vielleicht habt ihr einen Tipp für mich, was ich falsch mache ... und zwar:


    Ich möchte für meine Bildergalerie einfach nur eine Übersicht mit den Thumbnails haben. 3-4 Bilder in einer Reihe nebeneinander,
    die weiteren darunter, ebenfalls in einer Reihe. Unter jedem Thumbnail soll ein zweizeiliger Text erscheinen.
    Wenn man auf die Thumbnails klickt soll sich ein neues Fenster öffnen mit der Großansicht der Bilder. Das alleine klappt bei mir wunderbar, nur diese Anordnung der Thumbnails
    will einfach nicht funktionieren. Momentan stehen die Bilder alle untereinander und der Text springt (egal was ich mit "float" verändere) unkontrolliert im Raum herum.


    Mittlerweile habe ich einen Tipp gelesen, wo ich den Text einfach mit "table" vom Rest abgrenzen soll. War aber auch nicht die optimale Lösung.


    Dies wäre mein HTML-Code (ein Teil):


    <div id="bild">
    <a class="Malerei" href="../img/malerei/Abstrakt2016.jpg" title="Abstrakt2016" ><img src="../thumbnails/abstrakt2016_thumbnail.jpg" alt="Abstrakt_Vorschau"></a>
    <p class="thumbnail-caption"></p><table>>Abstrakt (2016) <br />zu Hause in Hamburg-Oldenfelde</table></div>
    <a class="Malerei" href="../img/malerei/woa.jpg" title="Woa"><img src="../thumbnails/woa_thumbnail.jpg" alt="Woa_Vorschau"></a>
    <p class="thumbnail-caption"></p><table>WOA (2015) <br />zu Hause in Bremen</table></div>
    <a class="Malerei" href="../img/malerei/grinning_cat.jpg" title="Grinning_Cat"><img src="../thumbnails/grinning_cat_thumbnail.jpg" alt="Grinning_Cat_Vorschau"></a>
    <p class="thumbnail-caption"></p><table>Grinning Cat (2013) <br />zu Hause in Hamburg-Wandsbek</table>
    <a class="Malerei" href="../img/malerei/owl.jpg" title="Mystic_Owl"><img src="../thumbnails/owl_thumbnail.jpg" alt="Mystic_Owl_Vorschau"></a>
    <p class="thumbnail-caption"></p><table>Mystic Owl (2013) <br />zu Hause in Großensee bei Trittau</table>
    <a class="Malerei" href="../img/malerei/thomysisland.jpg" title="Thomys Island"><img src="../thumbnails/thomysisland_thumbnail.jpg" alt="Thomys_Island_Vorschau"></a>
    <p class="thumbnail-caption"></p><table>Thomys Island (2013) <br />zu Hause in Travemünde</table>
    </div>


    ..und mein kläglicher Versuch in CSS:



    .malerei { text-align: center; font-family: 'PT Sans', sans-serif; float: left;}
    .thumbnail-caption { text-align: center; font-family: 'PT Sans', sans-serif; float; left; }


    .bild {
    max-width: 310px;
    border: 1px solid #000;
    margin: 1em;
    padding: .5em 1.2em;
    text-align: center;
    font-size: .8em;
    }


    Vermute mal ihr habt das schon tausendmal beantwortet aber ich hab leider keinen Artikel gefunden der mir weiter hilft ...


    Vielen Dank im Voraus!! :)