Automatische Trennlinien unter jedem Element

Lkas86

Cadet 3rd Year
Dabei seit
Sep. 2016
Beiträge
41
#1
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

Lkas86

Cadet 3rd Year
Ersteller dieses Themas
Dabei seit
Sep. 2016
Beiträge
41
#3
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";
}
 
Dabei seit
März 2006
Beiträge
3.804
#4
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 :).
 

Lkas86

Cadet 3rd Year
Ersteller dieses Themas
Dabei seit
Sep. 2016
Beiträge
41
#5
Wie genau funktioniert das mit dem "erweitern" ?
Bin wie gesagt noch ganz am Anfang und hab noch eine ganze Menge erklärungsbedarf :D
 
Dabei seit
Mai 2017
Beiträge
132
#6
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%;
}
 
Top