[CSS&PHP] Pixelgenaue Liste

reddragon010 · 10.09.2007, 01:01

Hallo erstmal,
dies ist mein erster Post im TP.com Forum als habt ein bisschen nachsehen mit mir. Zu meinem Problem:

Ich bin grad dabei ein PHP Programm zur Radioautomatisierung zu schreiben. Leider scheitere ich schon an den leichtesten Sachen und bitte um etwas Hilfe.
Im Moment bin ich dabei eine Anzeigetabelle für die einzelnen Playlists zu coden. Mein Problem liegt und meinen beschränkten Kenntnissen über CSS.

Die Tabelle soll wie folgt funktionieren:
Es soll aus einer Datenbank Startzeit, Länge und Name der Playlists ausgelesen werden. Anschließend sollen die in einem 2 dimensionalen Array gespeicherten Infos mittels CSS Pixelgenau auf einer Zeitleiste dargestellt werden. Eine Box ist eine Playlist. Im Moment fehlt noch der komplette DB-Code und der Array ist von Hand definiert um schneller Testen zu können. Leider verschieben sich die Boxen in alle möglichen Richtungen in einem für mich total unverständlichen Muster wenn man die Werte ändert. Es kann sein das ich auch einem totalen Denkfehler zum opfer gefallen bin bin also auch für total andere Vorschläge offen um mein Ziel zu erreichen.
Ich hoffe das war nicht zu unverständlich

Danke im Voraus,
RedDragon

Code:

PHP-Code:


			
<?php

$timetable[0]['time'] = 0;

$timetable[0]['text'] = "test mit 01:00";

$timetable[0]['lenght'] = 30;

$timetable[1]['time'] = 60;

$timetable[1]['text'] = "test mit 02:00";

$timetable[1]['lenght'] = 30;

$timetable[2]['time'] = 120;

$timetable[2]['text'] = "test mit 03:00";

$timetable[2]['lenght'] = 60;

$timetable[3]['time'] = 180;

$timetable[3]['text'] = "test mit 04:00";

$timetable[3]['lenght'] = 60;

$timetable[4]['time'] = 240;

$timetable[4]['text'] = "test mit 05:00";

$timetable[4]['lenght'] = 60;

?>

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
td.time {
	line-height: 58px;
	border:1px;
	border-bottom:0px;
	border-style:solid ;
	border-color:#000000;
}

.timeentry {
	position:relative;  
	border:1px; 
	border-style:solid; 
	background-color:#CCCCCC;
}
</style>

</head>
<body>
<table cellpadding="0" cellspacing="4" style="position:relative; top:0; left:0;">
<tr>
<td>
<table width="35" cellspacing="0" cellpadding="0" style="float:left;">

PHP-Code:


			
<?php

for($i=1;$i<=24;$i++) {

    echo "<tr>\n" .

    "<td class='time'>" . $i . "UHR</td>\n" .

    "</tr>\n";

}

?>

HTML-Code:

  <tr>
    <td class="time"></td>
  </tr>
</table>
</td>
<td align="left" valign="top">

PHP-Code:


			
<?php

$end = 0;

foreach($timetable as $key => $time) {

    $top = $time['time'] - $end;

    $text = $time['text'];

    $hight = $time['lenght'] - 2;

    echo "<div class='timeentry' style='top: " . $top . "px; height: ". $hight . 

           "px;'>\n" .

           $text . "\n" .

       "</div>";

    $end = $top + $time['lenght'] + $end + $key +1;

}

?>

HTML-Code:

    </td>
  </tr>
</table>
</body>
</html>

marc22 · 12.09.2007, 08:54

1. Ich habe mir das jetzt nicht genau angesehen. Wo kann man denn das Resultat sehen? Ich habe nicht so viel Lust, das hier zusammen zu schustern
2. Nimm für die Zeiten lieber timestamps. Dann lässt sich das sekundengenau berechnen.
3. Wenn Du timestamps benutzt, könntest Du einfach die Divs mit diesem CSS:

Code:

margin-left:__aktuelle_zeit-timestamp_start__px;width:__timestamp_ende-timestamp_start__px;

positionieren. Vielleicht noch in mehreren Zeilen, wenn sich die Zeiten überlappen

EDIT: Die Liste wäre dann aber waagerecht. Soll sie senkrecht sein, einfach die Pendants margin-top und height nehmen. Außerdem: lenght -> length. Außerdem: CSS wird in " eingeschlossen, nicht in '

reddragon010 · 18.09.2007, 01:24

danke ! habs jetzt hinbekommen ! der tipp mit den Timestamps war goldwert !!
Vielen dank Slayer

Wen interessiert wie ichs gelöst hab pm an mich

danke an alle