Bräuchte Hilfe bezüglich eines Abstandes

[Thaddel]

Hi Leute

Ich bin neu hier im Forum, und auch ziemlich neu im Bereich HTML. Ich bin momentan gerade dabei, eine kleine Seite zu erstellen, und habe im Bereich Events eine Bildergallerie eingebaut. Nun bin ich dabei, zwischen vergangenen und aktuellen Events aufzuteilen.

Leider klebt das untere "Vergangene Events" an den oberen Bildern. Ich habe dazu mal einen Screenshot angehängt.

Und hier noch mein HTML Code.

        <div class="section" id="events">
            <ul id="gallery_wrapper">
           
<h4>Aktuelle Events</h4>
           
                  <li><a href="images/gallery/09-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/09.jpg" alt="image 9" /></a></li>
                <li><a href="images/gallery/10-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/10.jpg" alt="image 10" /></a></li>
                <li><a href="images/gallery/11-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/11.jpg" alt="image 11" /></a></li>
                <li><a href="images/gallery/12-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/12.jpg" alt="image 12" /></a></li>
                <li><a href="images/gallery/01-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/01.jpg" alt="image 01" /></a></li>
                <li><a href="images/gallery/02-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/02.jpg" alt="image 02" /></a></li>
                <li><a href="images/gallery/03-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/03.jpg" alt="image 03" /></a></li>
                <li><a href="images/gallery/04-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/04.jpg" alt="image 04" /></a></li>
               
<h4>Vergangene Events</h4>             
                <li><a href="images/gallery/09-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/09.jpg" alt="image 09" /></a></li>
                <li><a href="images/gallery/10-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/10.jpg" alt="image 10" /></a></li>
                <li><a href="images/gallery/11-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/11.jpg" alt="image 11" /></a></li>
                <li><a href="images/gallery/12-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/12.jpg" alt="image 12" /></a></li>
                <li><a href="images/gallery/01-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/01.jpg" alt="image 01" /></a></li>
                <li><a href="images/gallery/02-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/02.jpg" alt="image 02" /></a></li>
                <li><a href="images/gallery/03-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/03.jpg" alt="image 03" /></a></li>
                <li><a href="images/gallery/04-l.jpg" rel="lightbox[gallery]"><img src="images/gallery/04.jpg" alt="image 04" /></a></li>
        </div>

Ich wäre hier sehr dankbar, wenn mir jemand helfen und mir sagen könnte, wie ich da den Abstand etwas vergrössern kann. :)

Viele Grüsse,

Stephan

 

[Tronjer]

Du musst die zweite H4 targeten und ihr ein margin-top geben. Also etwas wie #events h4:nth-of-type(2) {margin-top: 50px;}.

 

[Thaddel]

Wow, das geht ja schnell... :)

Wie gesagt, bin noch ziemlicher Neuling in der Materie, wie mache ich das denn genau? :)

 

[Tronjer]

Das ist eine CSS-Anweisung und gehört demzufolge in deine CSS Datei.

 

[Thaddel]

In der CSS habe ich folgenden Code:

h1, h2, h3, h4, h5, h6 { color: #fff; font-weight: normal; }
h1 { font-size: 36px; margin: 0 0 30px; padding: 5px 0 }
h2 { font-size: 24px; margin: 0 0 25px; padding: 5px 0 }
h3 { font-size: 20px; margin: 0 0 20px; padding: 0; }
h4 {
    font-size: 16px;
    padding: 0;
}
h5 { font-size: 14px; margin: 0 0 10px; padding: 0;  }
h6 { font-size: 12px; margin: 0 0 5px; padding: 0; font-weight: 700 }

p { padding: 0; margin: 0 0 15px 0; }

Was muss ich denn da genau eintragen? Puh, ich seh schon, da gibts noch viel zu lernen... :)

 

[Tronjer]

Schreibe es einfach ans Ende.

Ich habe das übrigens nicht überprüft. Also falls es nicht funktionieren sollte, musst du du etwas anderes ausprobieren, wie bsw. eine CSS-Klasse für das entsprechende Element.

CSS-Grundlagenwissen sollte man eigentlich schon besitzen, bevor man mit JS-Plugins hantiert.

 

[thecain]

Ein <h4> direkt in einem <ul> ist nicht valides HTML

Aber nur ein Tipp am Rande

 

[Thaddel]

Vielen lieben Dank für eure Hilfe bisher...

Da es nicht valides HTML ist, fällt das so sowieso flach... Wenn dann richtig. Wie würdet ihr das denn Codemässig aufteilen, sodass ihr da zwei unabhängige Gallerien bekommt?

Der Tipp von Tronjer hat leider nicht funktioniert, aber eben, da es eh nicht valide wäre muss ich das so oder so anders angehen....

EDIT: Ich habs nun relativ einfach mit einer eigenen Section für die vergangenen Events gelöst. ;)

 

[thecain]

<h4>Erste Gallerie</h4>
<ul class="gallery_wrapper">
<li><a><img /></a></li>
</ul>
<h4>Zweite Gallerie</h4>
<ul class="gallery_wrapper">
<li><a><img /></a></li>
</ul>

wäre doch was