Kalender Event List Datum css

  • Hallo,

    nun, bei google und hier nicht gefunden = Status nach wie vor Ratlos.

    Ich benutze das Plugin events-calendar in Verbindung mit RS-event um auf einer Page die Upcomming Events anzuzeigen.

    Das Problem ist die Länge der Datumsausgabe

    Do, 23. Jul 2009 Hammefest
    Fr, 24. Jul 2009 Wettkampf

    Wie hier schön zu sehen ist, die die 2te Datumsangage kürzer und somit ist auch die Ausgabe der Beschreibung weiter vorne.


    Die Ausgabe des plugins ist wie folgt geregelt.

    <div id="terminkalender">
    <ul><?php
    $rsconfig = array(
    "title" => "Anstehende Termine",
    "timespan" => 365,
    "history" => (intval((date("H")/24)*10)/10+0.05),
    "date_format" => "D, d. M Y",
    "time_format" => "H:i",
    "event_html" => "<span class=\"events_event\"><a href='%URL%'>%TITLE%</a></span>",
    "max_events" => 0,
    "group_by_date" => 1,
    "no_events_msg" => "Keine Termine gefunden.",
    "sort_order" => "ASC",
    "category" => 0

    );
    rs_event_list($rsconfig);
    ?></ul>
    </div>


    Die Ansicht laut .css habe ich so eingestellt:


    #terminkalender {
    display:inline;
    }

    #terminkalender ul {
    list-style:none;
    }

    .events_event{
    padding:0 0 0 50px;
    }


    Die Frage ist nun: wie erzwinge ich mit .css dass die Ausgabe immer immer mit dem gleichen Abstand ausgeben wird.
    Padding sowohl als auch Margin beziehen sich ja immer auf die Box des Datums und führt somit auch zu einer versetzen ausgabe.

    Wer weiss hier hilfe?

    Gruss und danke schon vorab.

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Du kannst das <span> zum Beispiel positionieren. Das <li> bekommt eine feste Breite (z.B. 100%) und die Eigenschaft position:relative. Das <span wird zu einem Blockelement (display:block) und dann ebenfalls positoniert, aber absolut. Wie, da gibt es 2 Möglichkeiten. Entweder es bekommt eine feste Breite und wird rechts ausgerichtet. Oder es bekommt einen festen Abstand nach links.
    Mit float für das <span> könntest du auch zum Ziel kommen. Das würde ich verwenden wenn die Eventtitel auch länger werden können.

    PS: Verwende bitte standardisierte Beispieldomains. Die mit den vielen X drin verweisen häufig unbeabsichtigt auf einschlägige Seiten. ;-) Und das "M in HTML steht für "Markup", ich mein also den HTML-Code. (Und wenn das HTML so raus kommt, dann ists eh kaputt - 2x <ul> aber kein </ul>!)

  • Hallo Marx,

    super, sieht schon viel Besser aus. Danke. Die fehlenden Ul war wohl mein Fehler beim hineinkopieren.

    Jedoch habe ich jetzt dadurch ein anderes Problem:
    Display Block erzeugt einen Absatz. Das hat zum Ergebniss dass die Beschreibung vom ersten Datum beim Zweiten Datum angezeigt wird.

    Gibt es eine möglichkeit den Umbruch bei Display Block zu verhindern?


    html:

    HTML
    <div id="terminkalender">
     <ul>
    <li>Do, 23. Juli 2009<span class="events_event"><a href='http://www.example.de/termine/probe/'>probe</a></span></li>
     <li>Fr, 24. Juli 2009<span class="events_event"><a href='http://www.example.de/termine/nade/'>nade</a></span></li>
     </ul>
    </div>


    .css

    Gruss und Danke

    Einmal editiert, zuletzt von marX (17. Juli 2009 um 19:10)

  • Display Block erzeugt einen Absatz. [...] Gibt es eine möglichkeit den Umbruch bei Display Block zu verhindern?


    Nein, display:block erzeugt immer einen "Absatz" bzw. einen Block. Sagt ja schon der Name. Aber: position:absolute sowie float:left/right nehmen den Block aus dem normalen Elementfluß heraus, so dass der Block keinen Umbruch erzeugt.

    Ein Link zu einem Testcase (oder der Seite selbst) wäre gut, dann könnte ich besser helfen. Und bitte zeichne deine Quellcodes hier im Forum mit dne entsprechenden Tags aus. Danke!

  • Habs gesehen, Forum geht aber vor PMs. ;-)

    Code
    .events_event {
    display:block;
    [COLOR="Blue"]left:150px;[/COLOR]
    [COLOR="Red"][del]margin-left:150px;[/del][/COLOR]
    position:absolute;
    [COLOR="#0000ff"]top:0;[/COLOR]
    [COLOR="#ff0000"][del]width:70%;[/del][/COLOR]
    }


    So müsste es funktionieren. Die width kannst du evtl. noch auf einen festen Wert setzen - Prozentwerte machen bei position:absolute Probleme, eben weil sich das Element nicht mehr im normalen Fluß befindet.

  • Wahnsinn. Es geht!
    Eine Woche Kopfzerbrechen ist weg. Recht herzlichen vielen Dank.

    p.s. Ja ich weiss, wollte jedoch die url hier net posten.

    Gruss alex

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!