Automatische Trennlinien unter jedem Element

Lkas86

Cadet 3rd Year
Registriert
Sep. 2016
Beiträge
41
Ich arbeite grade an einer Webseite/Webapp, die als Eventfinder für Nachtclub-events funktionieren soll.
Dabei werden die einzelnen Veranstaltungen, zsm. mit den nötigen Infos (Datum, Uhrzeit, Musikrichtung etc.) untereinander aufgelistet.
Diese Auflistung funktioniert auch ganz gut, jedoch fehlen noch die nötigen Trennlinien zwischen den einzelnen Elementen.
Mit Hilfe des <hr /> Tag lässt sich der gewünschte Effekt natürlich erzielen, jedoch nur für jeweils ein Element.
Gibt es eine Möglichkeit oder einen Befehl mit dem sich die Trennlinien automatisch unter jedes Objekt in diesem Element setzten ?

Schonmal sorry im Voraus für diese sehr unformale Beschreibung aber ich bin ein Blutiger Anfänger was das angeht. Momentan ist das auch ehr ein hobby projekt, um ein wenig dazu zu lernen. Ich packe euch in den Anhang screenshots davon wie es momentan aussieht und wie es aussieht, wenn ich die Trennlinien manuell einfüge
 

Anhänge

  • 001.JPG
    001.JPG
    72,5 KB · Aufrufe: 310
  • 002.JPG
    002.JPG
    80,6 KB · Aufrufe: 293
Quelltext ohne die manuell eingefügten Trennlinien:





<tbody><tr id="wpgmza_marker_3" mid="3" mapid="1" class="wpgmaps_mlist_row odd" role="row"> <td class="wpgmza_table_marker" height="40"><img src="https://clubchoice.eu/wp-content/plugins/wp-google-maps//images/marker.png" style="" class=""></td> <td class="wpgmza_table_title all"><p>Fr. 26.01.2018
<br>Big Deal Party <br>Die Trompete</p></td> <td class="wpgmza_table_address">Viktoriastraße 45, 44787 Bochum</td> <td class="wpgmza_table_description"><p>Rock, Alternativ, Hip Hop
<br>DJ Benni
<br>20:00Uhr
<br>AVK: 10€</p></td></tr><tr id="wpgmza_marker_7" mid="7" mapid="1" class="wpgmaps_mlist_row even" role="row"> <td class="wpgmza_table_marker" height="40"><img src="https://clubchoice.eu/wp-content/plugins/wp-google-maps//images/marker.png" style="" class=""></td> <td class="wpgmza_table_title all"><p>Fr. 26.01.2018
<br>Birthday Bash <br>Schumacher</p></td> <td class="wpgmza_table_address">Kurt-Schumacher-Platz 1, 44787 Bochum</td> <td class="wpgmza_table_description"><p>Techno, Goa
<br>DJ Tekk, Pete
<br>23:50Uhr
<br>AVK: 8€</p></td></tr><tr id="wpgmza_marker_8" mid="8" mapid="1" class="wpgmaps_mlist_row odd" role="row"> <td class="wpgmza_table_marker" height="40"><img src="https://clubchoice.eu/wp-content/plugins/wp-google-maps//images/marker.png" style="" class=""></td> <td class="wpgmza_table_title all"><p>Fr. 26.01.2018
<br>Goa Expirience <br>Projekt X</p></td> <td class="wpgmza_table_address">Hans-Böckler-Str. 10-12 / Citypassage</td> <td class="wpgmza_table_description"><p>Techno, Goa, Hard Techno
<br>DJ FFM
<br>23:30Uhr
<br>AVK: 8€ + 10€ MV</p></td></tr><tr id="wpgmza_marker_6" mid="6" mapid="1" class="wpgmaps_mlist_row even" role="row"> <td class="wpgmza_table_marker" height="40"><img src="https://clubchoice.eu/wp-content/plugins/wp-google-maps//images/marker.png" style="" class=""></td> <td class="wpgmza_table_title all"><p>Sa. 27.01.2018
<br>New Years After Party <br>Riff</p></td> <td class="wpgmza_table_address">Konrad-Adenauer-Platz 3, 44787 Bochum</td> <td class="wpgmza_table_description"><p>House, Rock, Hip Hop
<br>DJ Gessus
<br>21:30Uhr
<br>AVK: 6€</p></td></tr><tr id="wpgmza_marker_4" mid="4" mapid="1" class="wpgmaps_mlist_row odd" role="row"> <td class="wpgmza_table_marker" height="40"><img src="https://clubchoice.eu/wp-content/plugins/wp-google-maps//images/marker.png" style="" class=""></td> <td class="wpgmza_table_title all"><p>Sa. 27.01.2018
<br>House Mash-Up Night <br>Appartment 45</p></td> <td class="wpgmza_table_address">Viktoriastraße 45, 44787 Bochum</td> <td class="wpgmza_table_description"><p>Techno, House
<br>Solomum
<br>22:30Uhr
<br>AVK: 12€</p></td></tr></tbody>
Ergänzung ()

Wie genau müsste ich dass denn machen ? Also was muss im custom css feld eingetippt werden mit dieser Methode ?


p::after {
content: " - Remember this";
}
 
So ins Blaue gesprochen könnte man bspw. die Klasse "wpgmaps_mlist_row" einfach erweitern. Würde aber dazu führen, dass das letzte Element auf der Seite auch den Strich unten hat. Zumindest sollte mit CSS da was gehen :).
 
Wie genau funktioniert das mit dem "erweitern" ?
Bin wie gesagt noch ganz am Anfang und hab noch eine ganze Menge erklärungsbedarf :D
 
Formatiere mal bitte deinen Quelltext, so etwas wird sich niemand freiwillig anschauen ;).

Wenn es semantisch auch um die inhaltliche Trennung von Bereichen geht, passt <hr> super.

CSS-Code:

Code:
hr {
    background-color: #eee;
    border: 0;
    clear: both;
    display: block;
    height: 1px;
    margin: whatever;
    padding: 0.5px;
    width: 100%;
}
 
Zurück
Oben