Kalender Event List Datum css

[Johnny1885]

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.

[Johnny1885]

niemand ne Antwort?

[marX]

Wie sieht das generierte HTML aus? Eventuell musst du dazu in die rs_event_list()-Funktion rein und noch ein wenig Markup dazupacken.

[Johnny1885]

sorry für die Verspätung. Bin mit dem Problem leider immer noch nicht weitergekommen.

<div id="terminkalender">
<ul><ul><li>Do, 23. Jul 2009<span class="events_event"><a href='http://www.example.com/termine/probe/'>probe</a></span></li>
</div>


Was meinst du mit Markup?

[marX]

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>!)

[Johnny1885]

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:

 <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

.events_event {
display:Block;
position:absolute;
width: 390px;
margin:0 0 0 50px;
    }
    
#terminkalender li {
    list-style:none;
    position:relative;
    width: 100%;
    }

Gruss und Danke

[marX]

Zitat von Johnny1885

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!

[Johnny1885]

Hast eine Nachricht per PM.

[marX]

Habs gesehen, Forum geht aber vor PMs.

.events_event {
display:block;
left:150px;
margin-left:150px;
position:absolute;
top:0;
width:70%;
}

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.

[Johnny1885]

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