Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

gelöst Div zu übergeordnetem div ausrichten

Mitglied: tsunami

tsunami (Level 1) - Jetzt verbinden

11.06.2019 um 09:51 Uhr, 173 Aufrufe, 2 Kommentare

Hallo,
ich möchte sowas wie einen Tagesablauf dokumentieren.
1.2.19 | Anfahrt: 8:00-08:15 | Kunde: 08:15-14:00 | 14:00-14:30 Pause | Abfahrt 14:30-15:00
usw.
Das Ganze farblich mit Divs dargestellt. Soweit so gut. Das ganze in ner Db und die Divs nebeneinander ausgeben, die Länge nach der Dauer.

Aber ich bekomme Probleme wenn, die Pause innerhalb eines anderen Blocks liegt.
Also Kunde: 08:00-17:00 | Pause 12:30-13:00

Nun könnte ich natürlich mit split und ifs die Kundendauer zerlegen.
Meine Idee ist nun die divs nicht einfach aus zugeben, sondern zu positionieren. Einfach den Abstand zum frühesten Arbeitsbeginn im Monat. Der ist aber nicht fix. Mit relative gebe ich nur den Abstand zum vorhergehenden div aus.
Mit absolute bekomme ich nur den Abstand zum Hauptdiv.
Wie kriege ich die Position von der Datumbox als Referenz hin?
01.
  <?php include_once("./includes/stunden.php");?>
02.
  <!DOCTYPE HTML PUBLIC "-//W3C//Ddiv HTML 4.01 Transitional//EN">
03.
<html>
04.
  <head>
05.
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
06.
  <meta name="generator" content="PSPad editor, www.pspad.com">
07.
  <title></title>
08.
  <?php  global $stunden_conn;
09.
   $sql_minmaxuhrzeit="select min(SUBSTRING(startzeit, 11)) as minuhrzeit,max(SUBSTRING(endzeit, 11)) as maxuhrzeit from taetigkeiten";
10.
   $msminmaxuhrzeit =mysqli_query($stunden_conn,$sql_minmaxuhrzeit);
11.
   $ausgabe_minmaxuhzeit=mysqli_fetch_row($msminmaxuhrzeit) ;
12.
   $minuhrzeit=$ausgabe_minmaxuhzeit[0];
13.
    $maxuhrzeit=$ausgabe_minmaxuhzeit[1];
14.
//      echo "peep".$minuhrzeit." - ".$maxuhrzeit;
15.

16.
// echo '<div class="uhrzeitzellel">&nbsp;</div>';
17.
// $start=strtotime($minuhrzeit)-1;
18.
// $end=strtotime($maxuhrzeit);
19.
$fruehesterstart=substr($minuhrzeit,0,-3);
20.
$spaetestesende=substr($maxuhrzeit,0,-3);
21.
$start = date('H:i', strtotime($fruehesterstart) - 15 * 60);
22.
$end=date('H:i', strtotime($spaetestesende) +15 * 60);
23.
// echo $start." - ".$end;
24.
// echo $start." - ".$end;
25.
$breiteproviertelstunde=20;
26.
$breiteprostunde=4*$breiteproviertelstunde;
27.
        $standardbreite=20*4;
28.
//         $timediff=(($end-$start)/(15*60))+2; 
29.
//         $timediff=strtotime($end) -strtotime($start); 
30.
//            echo "peep".$timediff/(15*60);
31.
//            $anzahlgesamtviertstundenmax=$timediff/(15*60);
32.
//         $hauptbreite=$anzahlgesamtviertstundenmax*$breiteproviertelstunde;
33.
   $breite=((strtotime($end)-strtotime($start))/3600*$breiteprostunde);
34.
   $breitemitdatumfeld=$breiteprostunde+$breite+$breiteprostunde;
35.
//    echo "Breite".$breite." - ".$breiteprostunde;
36.
//    echo "Breite".$breitemitdatumfeld;
37.
         ?>
38.
  <style>
39.
div.zeitkasten{
40.
height:25px;
41.
width:<?php echo $breiteprostunde;?>px;
42.
border:1px solid grey; 
43.
float:left;
44.
}
45.
div.zeitkastenl{
46.
height:25px;
47.
width:<?php echo $breiteprostunde;?>px;
48.
outline:1px solid black; 
49.
outline-width: thin;
50.
float:left;
51.
}
52.
div.uhrzeitzelle{
53.
height:25px;
54.
width:<?php echo $breiteprostunde;?>px;
55.
 float:right;
56.
text-align:center;
57.
outline:1px solid black;
58.
outline-width: thin;
59.
display:block;
60.

61.
}
62.
div.uhrzeitzellel{
63.
height:25px;
64.
width:<?php echo $breiteprostunde;?>px;
65.
 float:left;
66.
text-align:center;
67.
outline:1px solid black;
68.
outline-width: thin;
69.
  }
70.
div.uhrzeitzelleteil{
71.
height:25px;
72.
width:<?php echo $breiteprostunde;?>px;
73.
 float:left;
74.
text-align:center;
75.
border-right:1px solid black;
76.
/*background: repeating-linear-gradient(
77.
  90deg,
78.
  gray,
79.
  gray 1px,
80.
  white 1px,
81.
  white 32px
82.
);    */
83.
}
84.
div.uhrzeitzelleblind{
85.
height:25px;
86.
width:<?php echo $breiteproviertelstunde;?>px;
87.
 float:left;
88.
text-align:center;
89.
background: repeating-linear-gradient(
90.
  90deg,
91.
  red,
92.
  gray 1px,
93.
  white 1px,
94.
  white 32px
95.
);
96.
}
97.
br.clear
98.
{
99.
clear:both;
100.
line-height:0px;
101.
height:0px;
102.
}
103.
div.hauptdiv
104.
{
105.
border:1px solid blue;
106.
overflow:visible;
107.
white-space:nowrap;
108.
width:<?php echo $breitemitdatumfeld;?>px;
109.
/* background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent); */
110.
background-size: 20px 20px;
111.
margin:10px;
112.
padding:10px;
113.
}      
114.
</style>
115.
<!-- ********************* css ende **************** -->
116.
  </head>
117.
  <body>
118.
  <div class="hauptdiv">
119.
   <div>
120.
            <table style="border:1px solid blue;">
121.
                <tr><td rowspan="7"></td></tr>
122.
                <?php 
123.
                /**** Statistik / Legende****/
124.
//                   echo "<table style='border:1px solid blue; padding:px;'>";
125.
   $sql_statistik="SELECT sum(taetigkeiten.endzeit-taetigkeiten.startzeit) as dauer,kategorien.name,taetigkeit_id,farbe from taetigkeiten,kategorien where taetigkeit_id=kategorien.id group by taetigkeit_id";
126.
   $ms_statistik=mysqli_query($stunden_conn,$sql_statistik) ; 
127.
   function zeitformat($Sekundenzahl) 
128.
{ 
129.
  $Sekundenzahl = abs($Sekundenzahl); // Ganzzahlwert bilden 
130.
 if(sprintf('%d',$Sekundenzahl/60/60/24)!=0)
131.
 {
132.
return sprintf("%d T %02d h:%02d m", 
133.
         $Sekundenzahl/60/60/24,($Sekundenzahl/60/60)%24,($Sekundenzahl/60)%60,$Sekundenzahl%60); 
134.
         }
135.
         else
136.
         {
137.
  return sprintf("%02d h:%02d m",
138.
                ($Sekundenzahl/60/60)%24,($Sekundenzahl/60)%60,$Sekundenzahl%60); 
139.
     
140.
} 
141.
if(((sprintf('%d',$Sekundenzahl/60/60/24)==0) &&  (sprintf("%02d",($Sekundenzahl/60)%60)==0)) )
142.
return sprintf("%02d s:%02d min",
143.
                ($Sekundenzahl/60/60)%24,($Sekundenzahl/60)%60);
144.
}
145.

146.
$x=0;
147.
  $sql_kategorien="select * from kategorien order by name";
148.
                $ms_statistik=mysqli_query($stunden_conn,$sql_statistik);
149.
                while($ausgabe_statistik=mysqli_fetch_assoc($ms_statistik))
150.
                {
151.
                 echo "<tr>
152.
                   <td><div style='width:20px;height:10px;background:".$ausgabe_statistik['farbe'].";'>&nbsp;</div></td>
153.
                   <td>".$ausgabe_statistik['name']."</td>
154.
                   <td>".zeitformat($ausgabe_statistik['dauer'])."</td>
155.
                   </tr>";
156.
                     } 
157.

158.
                     ?>
159.
                     </table>
160.
    </div> </br>
161.
  <div class='uhrzeitzellel'>&nbsp;</div> 
162.
  <?php
163.

164.
//         echo "<br/>Diff".$timediff;
165.
$startblind=$start;
166.
$endblind=$end;
167.
//  echo "sart".$start." - ".$end; 
168.
while($startblind<=$endblind) {  
169.
// 	echo $start;
170.
   
171.
  echo "<div class='uhrzeitzellel'>".$startblind."</div>";
172.
// 	$start=ceil($start/3600)*3600;
173.
    $startblind=date('H:i', strtotime($startblind) +60*60);
174.

175.
}  
176.
// echo "<br class='clear'>";  
177.

178.
while($startblind<$endblind) {   
179.
$startblind=date('H:i', strtotime($startblind) +60*15); 
180.
// 	echo $startblind;
181.

182.
  echo "<div class='uhrzeitzelleblind'>&nbsp;</div>";
183.
}
184.
   echo "<br class='clear'>";
185.
        $sql_inhalt=sprintf("select startzeit,DATE_FORMAT(startzeit, '%%Y-%%m-%%d') AS datum, endzeit,taetigkeit_id, kategorien.farbe, kategorien.name from taetigkeiten, kategorien where taetigkeit_id=kategorien.id order by startzeit") ;
186.
//         echo $sql_inhalt;
187.
      $ms_inhalt=mysqli_query($stunden_conn,$sql_inhalt);
188.
      $tempdatum="";
189.
      while($ausgabe_inhalt=mysqli_fetch_assoc($ms_inhalt))
190.
      {  
191.
        $xpostotal=0;
192.
       $sql_arbeitsbeginn=sprintf("select min(DATE_FORMAT(startzeit, '%%H:%%i')) AS individuellerarbeitsbeginn from taetigkeiten where startzeit like '%s%%'",
193.
       mysqli_real_escape_string($stunden_conn,$ausgabe_inhalt['datum']));
194.
//         echo $sql_arbeitsbeginn;
195.
       $ms_individuellerarbeitsbeginn=mysqli_query($stunden_conn,$sql_arbeitsbeginn);
196.
       $individuellerarbeitsbeginn=mysqli_fetch_row($ms_individuellerarbeitsbeginn);
197.
       $individuellerarbeitsbeginn=$individuellerarbeitsbeginn[0];
198.
//     echo "Peppe".$individuellerarbeitsbeginn;
199.
      $datumdeutsch = date("d.m.Y",strtotime($ausgabe_inhalt['datum']));
200.
             
201.
  $differenzzuminstartzeitinviertelstunden=(strtotime($individuellerarbeitsbeginn)-strtotime($start))/900;
202.
//   echo "peep".$individuellerarbeitsbeginn;
203.
                       $breitezustart=$breiteproviertelstunde*$differenzzuminstartzeitinviertelstunden;
204.
         if($tempdatum!=$ausgabe_inhalt['datum'])
205.
       {
206.
        echo '<br class="clear"> ';
207.
       echo '<div style="width:'.$breiteprostunde.'px;height:25px;float:left;outline:1px solid black;">'.$datumdeutsch."</div>";   
208.
        echo '<div style="width:'.$breitezustart.'px;height:25px;float:left;outline:1px solid black;">&nbsp;</div>';
209.
        }
210.
//            echo "peep".$breitezustart;
211.
//  echo "Vergangen seit start".$differenzzuminstartzeitinviertelstunden." Blöcke - bedeutet in px: ".$breitezustart."<br>";
212.
       $xpostotal=$breiteprostunde+$breitezustart;
213.
//        echo "xpostot: ".$xpostotal." - breiteprostunde".$breiteprostunde." - breitezustart: ".$breitezustart."<br>";
214.
 echo "<div style='height:25px;position:absolute; left:".$xpostotal."px;background:".$ausgabe_inhalt['farbe']."; outline-width:thin;outline-style:dotted; outline-color:black";
215.
 echo ";width:".$dauer."px; float:left;cursor:pointer;' title='".$ausgabe_inhalt['name']." - ".date('H:i',strtotime($ausgabe_inhalt['startzeit']))." bis ".date('H:i',strtotime($ausgabe_inhalt['endzeit']))."'>".$xpostotal."</div>\n";
216.
 $tempdatum=$ausgabe_inhalt['datum'];
217.
 }
218.
  echo "<br class='clear'>\n\n"; 
219.
  echo "</div></body>
220.
</html>";
Der Haken ist hier, dass der Arbeitsbeginn auch nicht fix ist. Mal geht es um 8 los, mal ist einer morgens beim Arzt oder hat verschlafen oder der Kunde wohnt weit weg, so dass es um 6 los geht usw.
In der Skizze habe ich versucht, zu skizzeren was ich will oder wie meine Idee ist. Sind uU divs ungeeignet, besse p oder grafische Rechtecke? Oder Tabellen?
Irgendeine Idee. Vielen Dank im vorraus!
tsunami
skizze - Klicke auf das Bild, um es zu vergrößern
ausgabe - Klicke auf das Bild, um es zu vergrößern
Mitglied: shellschrubber
LÖSUNG 11.06.2019, aktualisiert um 09:54 Uhr
Täglich grüßt das Murmeltier...
Für sowas gibt's CSS Grids
https://administrator.de/forum/css-div-boxen-nebeneinander-431061.html
Bitte warten ..
Mitglied: tsunami
11.06.2019 um 11:00 Uhr
Hups. Sorry.
Werde auch älter...
Bitte warten ..
Ähnliche Inhalte
CSS
Css div-Boxen nebeneinander
gelöst Frage von tsunamiCSS2 Kommentare

Hallo, ich habe Thema welches auf den ersten Blick mit unzähligen ähnlichen Ansätzen funktionieren soll, tut es aber nicht. ...

CSS
Positionierung von DIV - Sidebar
gelöst Frage von chris84CSS5 Kommentare

Hallo Zusammen, ich möchte gern ein eine Sidebar auf meiner Seite einbauen. Leider wird diese aktuell am DIV "Company" ...

CSS
DIV Container einheitliche Höhe
Frage von YanmaiCSS7 Kommentare

Hallo ihr Administratoren, ich habe DIVs mit der display: inline-block Eigenschaft. An sich funktioniert alles, aber wenn in einem ...

HTML
DIV-Container mit variabler Höhe
gelöst Frage von dimaqwHTML4 Kommentare

Hallo! Kurz zu meinem Problem: ich habe 3 DIVs (Header, Container und Footer), die untereinander stehen. Es muss erreicht ...

Neue Wissensbeiträge
LAN, WAN, Wireless
Sophos RED50 stürzt ab und ist danach tot
Information von Ex0r2k16 vor 2 TagenLAN, WAN, Wireless

Hey, nach meinem Thread bin ich durch Zufall auf das hier gestoßen: Also wenn ihr UTMs und RED50's im ...

Windows 10

Microsoft macht Bluetooth absichtlich kaputt: Windows 10 Update blockiert Bluetooth-Verbindungen zu Android

Tipp von 1Werner1 vor 2 TagenWindows 107 Kommentare

Moin, jetzt spinnt MS total , was muss ich da auf Chip.de lesen: Auch im Juni schließt Microsoft im ...

Soziale Netzwerke

Facebook - künftig ohne Account des Bundeslandes Sachsen-Anhalt

Information von VGem-e vor 3 TagenSoziale Netzwerke3 Kommentare

Servus, mal sehen, ob andere öffentliche Einrichtungen folgen wollen/können Gruß

Humor (lol)
Facebook Mailer auf NIX-Spamlist
Information von Henere vor 3 TagenHumor (lol)

Eben aus dem Log meines Postfix gefischt. Recht haben Sie. FB ist SPAM :-) lachende Grüße, Henere

Heiß diskutierte Inhalte
Router & Routing
Synology NAS in anderem Subnetz nicht erreichbar
Frage von Tech1KonniRouter & Routing24 Kommentare

Hallo Leute, ich bin Software-Entwickler und daher auch etwas bewandert in den Grundkenntnissen der Netzwerktechnik. Aktuell habe ich allerdings ...

Netzwerke
Zugriff auf mehrere Clients via RDP
Frage von xXMariusXxNetzwerke11 Kommentare

Moin, ich würde gerne auf mehrere Clients in einem Netzwerk via RDP zugreifen. Gibt es eine elegantere Lösung als ...

Windows 7
RDP funktioniert nur einmal
Frage von Sc0rc3dWindows 710 Kommentare

Hi, ich arbeite mittels Remote Desktop von zu Hause. Manchmal per VPN und manchmal direkt (Portfreigabe 3389 -> 46XXX). ...

Windows Server
Probleme Installation Windows Server 2019
Frage von AK-47.2Windows Server7 Kommentare

Hallo zusammen, ich habe das Problem einen Windows Server 2019 auf ein Testsystem zu bringen. Das Mainboard ist ein ...