2
CSS div ignoriert Höhe
Hallo,
ich scheitere gerade an einem Problem. Ich habe mehrere DIVs. Zwei nebeneinander jeweils mit umgebenem Div und Einen Hauptrahmen.
Der Hauptrahmen ignoriert aber den inhalt und macht einfach nur einen Strich, bzw mit padding eine Box mit 4px Höhe... Mit display:block, height:auto habe ich experimentiert.Ohne Erfolg. Das Komische: Warum klappt es bei den beiden inneren divs?
Any Idea?
tsunami
ich scheitere gerade an einem Problem. Ich habe mehrere DIVs. Zwei nebeneinander jeweils mit umgebenem Div und Einen Hauptrahmen.
Der Hauptrahmen ignoriert aber den inhalt und macht einfach nur einen Strich, bzw mit padding eine Box mit 4px Höhe... Mit display:block, height:auto habe ich experimentiert.Ohne Erfolg. Das Komische: Warum klappt es bei den beiden inneren divs?
<html>
<head>
</head>
<body>
<!-- ************Neue Erfassungszelle und Blindzelle ueber Datum -->
<div style="border:1px solid blue;padding:2px;width:400px;height:auto;clear:both;">asd
<div style=" background-color:#F5F5F5;
width:160px;
padding:5px;
border-style:solid;
float:left;
display:block;
border-width:1px;clear:both;">
<div style="border:1px solid red;">Hummelbee</div>
</div>
<div style="background-color:#F5F5F5;
width:160px;
float:left;
margin-left:5px;
padding:5px;
border-style:solid;
border-width:1px; display:block;">
<div style="border:1px solid green;"> Huppel </div>
</div>
</div>
<br style="clear:both;">
</body></html>tsunami
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 563744
Url: https://administrator.de/contentid/563744
Printed on: April 19, 2024 at 03:04 o'clock
2 Comments
Latest comment
Hallo tsunami,
tausche die Zeilen 27 und 28.
Das clear muss innerhalb des div stehen.
Gruß
Klaus
PS: weitere Infos zur Problematik siehe All About Floats | CSS-Tricks
tausche die Zeilen 27 und 28.
Das clear muss innerhalb des div stehen.
Gruß
Klaus
PS: weitere Infos zur Problematik siehe All About Floats | CSS-Tricks
Hi,
vielen Dank.
Der letzte Schliff war: overflow:hidden; !
Nun habe ich aber eine weitreFrage.
Das Ganze soll sowas wie eine Tagesübersicht werden. Das Ganze in php übersetzt.
Das ist ein Teil des generierten Qc. Soweit so gut.
Ich kan nun wunderbar die Zeiten abbilden. Also was weiß ich 8:00 Start, 8:00-8:30 anfahrt. 08:30-14:00 Kunde , 14:00-14:30 Pause. Usw.
Daraus bekomme ich eine Tabelle mit Farbigen Blöcken.
Aber wenn ich nun die Situation kommt, dass Kunde von 08:00- 16:30 und Pause von 12:00-13:00 funktioniert es so nicht, da die Daten nach Startzeit sortiert ausgegeben werden. Dann steht das Div fü die Pause unten bei 16:30.
Lt google muss der Eltern DIv, ich habe es tagesblock genannt, absolute positioniert sein und das Kind-Element, taetigkeitsblock, relativ.
Nun kann es aber sein, dass zb in einem Monat einmal um 6 angefangen und um 14 Uhr aufgehört wird und en anderesmal um 11 angefangen und um 20:00 aufgeöhrt wird und daher müsste die Zeitleiste links von 6:00 - 20:00 gehen und im anderen Monat von 7:00-18:00. Sprich die Inhalte sind dynamisch und damit auch die Positionen.
Theoretisch müsste ich nun anfangen die Startzeiten zu splitten, aber das wird zu kompliziert. Oder ich mache eine feste Zeitleiste von 0:00 - 24:00 Uhr . Nur dann würde ich eine Menge Platz verschwenden.
Negatives margin habe ich probiert, dann müsste ich aber alle Divs anpassen...
mfG
tsunami
vielen Dank.
Der letzte Schliff war: overflow:hidden; !
Nun habe ich aber eine weitreFrage.
Das Ganze soll sowas wie eine Tagesübersicht werden. Das Ganze in php übersetzt.
<div class="tagesblock" style="float:left; overflow:hidden;position:absolute; left:690px;top:270px;outline:1px solid purple;">
<div style='height:32px;z-index:1; width:44px;cursor:pointer;background:lightblue; outline-width:thin;outline-style:dotted; outline-color:black;' title='Fahrzeit 07:30 - 08:00'> </div>
<div style='height:544px;z-index:2; width:44px;cursor:pointer;background:yellow; outline-width:thin;outline-style:dotted; outline-color:black;' title='Kunde 08:00 - 16:30'> </div>
<div style='height:16px;z-index:3; width:44px;cursor:pointer;background:green; outline-width:thin;outline-style:dotted; outline-color:black;' title='Pause 09:30 - 09:45'> </div>
<div style='height:32px;z-index:4; width:44px;cursor:pointer;background:green; outline-width:thin;outline-style:dotted; outline-color:black;position:absolute; top:290px;' title='Pause 12:30 - 13:00'> </div>
<div style='height:48px;z-index:5; width:44px;cursor:pointer;background:lightblue; outline-width:thin;outline-style:dotted; outline-color:black;' title='Fahrzeit 16:30 - 17:15'> </div>
</div>Das ist ein Teil des generierten Qc. Soweit so gut.
Ich kan nun wunderbar die Zeiten abbilden. Also was weiß ich 8:00 Start, 8:00-8:30 anfahrt. 08:30-14:00 Kunde , 14:00-14:30 Pause. Usw.
Daraus bekomme ich eine Tabelle mit Farbigen Blöcken.
Aber wenn ich nun die Situation kommt, dass Kunde von 08:00- 16:30 und Pause von 12:00-13:00 funktioniert es so nicht, da die Daten nach Startzeit sortiert ausgegeben werden. Dann steht das Div fü die Pause unten bei 16:30.
Lt google muss der Eltern DIv, ich habe es tagesblock genannt, absolute positioniert sein und das Kind-Element, taetigkeitsblock, relativ.
Nun kann es aber sein, dass zb in einem Monat einmal um 6 angefangen und um 14 Uhr aufgehört wird und en anderesmal um 11 angefangen und um 20:00 aufgeöhrt wird und daher müsste die Zeitleiste links von 6:00 - 20:00 gehen und im anderen Monat von 7:00-18:00. Sprich die Inhalte sind dynamisch und damit auch die Positionen.
Theoretisch müsste ich nun anfangen die Startzeiten zu splitten, aber das wird zu kompliziert. Oder ich mache eine feste Zeitleiste von 0:00 - 24:00 Uhr . Nur dann würde ich eine Menge Platz verschwenden.
<?php
include_once('includes/static.php');
//if(logged_in()) { ?>
<!DOCTYPE HTML PUBLIC "-//W3C//Ddiv HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<?php global $stunden_conn;
$sql_minmaxuhrzeit="select min(SUBSTRING(startzeit, 11)) as minuhrzeit,max(SUBSTRING(endzeit, 11)) as maxuhrzeit from taetigkeiten";
$msminmaxuhrzeit =mysqli_query($stunden_conn,$sql_minmaxuhrzeit);
$ausgabe_minmaxuhzeit=mysqli_fetch_row($msminmaxuhrzeit) ;
$minuhrzeit=$ausgabe_minmaxuhzeit;
$maxuhrzeit=$ausgabe_minmaxuhzeit[1];
// echo "peep".$minuhrzeit." - ".$maxuhrzeit;
$gewaehltermonat="02";
$gewaeltesjahr="2020";
$gewaehlterjahrmonat=$gewaeltesjahr."-".$gewaeltesjahr;
// echo '<div class="uhrzeitzellel"> </div>';
// $start=strtotime($minuhrzeit)-1;
// $end=strtotime($maxuhrzeit);
$fruehesterstart=substr($minuhrzeit,0,-3);
$spaetestesende=substr($maxuhrzeit,0,-3);
$start = date('H:i', strtotime($fruehesterstart) - 15 * 60);
$end=date('H:i', strtotime($spaetestesende) +15 * 60);
// echo $start." - ".$end;
// echo $start." - ".$end;
$hoeheproviertelstunde=16;
$hoeheprostunde=4*$hoeheproviertelstunde;
// $timediff=(($end-$start)/(15*60))+2;
// $timediff=strtotime($end) -strtotime($start);
// echo "peep".$timediff/(15*60);
// $anzahlgesamtviertstundenmax=$timediff/(15*60);
// $hauptbreite=$anzahlgesamtviertstundenmax*$breiteproviertelstunde;
// $hoehe=((strtotime($end)-strtotime($start))/3600*$hoeheprostunde);
// $breitemitdatumfeld=$breiteprostunde+$breite+$hoeheprostunde;
// echo "Breite".$breite." - ".$breiteprostunde;
// echo "Breite".$breitemitdatumfeld;
?>
<style>
div.zeitkasten{
height:25px;
width:<?php echo $hoeheprostunde;?>px;
border:1px solid grey;
float:left;
}
div.zeitkastenl{
height:25px;
width:<?php echo $hoeheprostunde;?>px;
outline:1px solid black;
outline-width: thin;
float:left;
}
div.uhrzeitzelle{
height:25px;
width:<?php echo $hoeheprostunde;?>px;
float:right;
text-align:center;
outline:1px solid black;
outline-width: thin;
display: flex;
align-items: center;
justify-content: center;
}
div.uhrzeitzelleneu{
height:25px;
width:44px;
float:left;
text-align:center;
outline:1px solid black;
outline-width: thin;
display: flex;
align-items: center;
justify-content: center;
font-size:0.7em;
}
div.uhrzeitzellexydatum{
height:25px;
width:44px;
float:left;
text-align:center;
outline:1px solid black;
outline-width: thin;
display: flex;
align-items: center;
justify-content: center;
font-size:0.7em;
}
div.uhrzeitzellexy{
height:<?php echo $hoeheproviertelstunde;?>px;
width:44px;
text-align:center;
outline:1px solid black;
outline-width: thin;
display: flex;
align-items: center;
justify-content: center;
font-size:0.7em;
}
div.uhrzeitzelleteil{
height:25px;
width:<?php echo $hoeheprostunde;?>px;
float:left;
text-align:center;
border-right:1px solid black;
/*background: repeating-linear-gradient(
90deg,
gray,
gray 1px,
white 1px,
white 32px
); */
}
div.uhrzeitzelleblind{
height:25px;
width:<?php echo $hoeheproviertelstunde;?>px;
float:left;
text-align:center;
background: repeating-linear-gradient(
90deg,
red,
gray 1px,
white 1px,
white 32px
);
}
br.clear
{
clear:both;
line-height:0px;
height:0px;
}
div.hauptdiv
{
border:1px solid blue;
overflow:hidden;
width:1350px;
/* background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.2) 50%, transparent 50%, transparent); */
background-size: 20px 20px;
margin:10px;
padding:10px;
}
</style>
<!-- ********************* css ende **************** -->
</head>
<body>
<div class="hauptdiv">
<table style="border:1px solid blue;">
<tr><td rowspan="7"></td></tr>
<?php
//********************* MIn Max Uhrzeit*******************
$sql_minmaxuhrzeit="select min(SUBSTRING(startzeit, 11)) as minuhrzeit,max(SUBSTRING(endzeit, 11)) as maxuhrzeit from taetigkeiten";
$msminmaxuhrzeit =mysqli_query($stunden_conn,$sql_minmaxuhrzeit);
$ausgabe_minmaxuhzeit=mysqli_fetch_row($msminmaxuhrzeit) ;
$minuhrzeit=$ausgabe_minmaxuhzeit;
$maxuhrzeit=$ausgabe_minmaxuhzeit[1];
$sql_minmaxuhrzeit="select min(SUBSTRING(startzeit, 11)) as minuhrzeit,max(SUBSTRING(endzeit, 11)) as maxuhrzeit from taetigkeiten";
$msminmaxuhrzeit =mysqli_query($stunden_conn,$sql_minmaxuhrzeit);
$ausgabe_minmaxuhzeit=mysqli_fetch_row($msminmaxuhrzeit) ;
$minuhrzeit=$ausgabe_minmaxuhzeit;
$maxuhrzeit=$ausgabe_minmaxuhzeit[1];
$spaetestesende=substr($maxuhrzeit,0,-3);
$start = date('H:i', strtotime($fruehesterstart) - 15 * 60);
$end=date('H:i', strtotime($spaetestesende) +15 * 60);
$startblind=$start;
$endblind=$end;
// echo "peep".$minuhrzeit." - ".$maxuhrzeit;
// echo "peep".$minuhrzeit." - ".$maxuhrzeit;
/**** Statistik / Legende****/
// echo "<table style='border:1px solid blue; padding:px;'>";
$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";
$ms_statistik=mysqli_query($stunden_conn,$sql_statistik) ;
function zeitformat($Sekundenzahl)
{
$Sekundenzahl = abs($Sekundenzahl); // Ganzzahlwert bilden
if(sprintf('%d',$Sekundenzahl/60/60/24)!=0)
{
return sprintf("%d T %02d h:%02d m",
$Sekundenzahl/60/60/24,($Sekundenzahl/60/60)%24,($Sekundenzahl/60)%60,$Sekundenzahl%60);
}
else
{
return sprintf("%02d h:%02d m",
($Sekundenzahl/60/60)%24,($Sekundenzahl/60)%60,$Sekundenzahl%60);
}
if(((sprintf('%d',$Sekundenzahl/60/60/24)==0) && (sprintf("%02d",($Sekundenzahl/60)%60)==0)) )
return sprintf("%02d s:%02d min",
($Sekundenzahl/60/60)%24,($Sekundenzahl/60)%60);
}
$x=0;
$sql_kategorien="select * from kategorien order by name";
$ms_statistik=mysqli_query($stunden_conn,$sql_statistik);
while($ausgabe_statistik=mysqli_fetch_assoc($ms_statistik))
{
echo "<tr>
<td><div style='width:20px;height:10px;background:".$ausgabe_statistik['farbe'].";'> </div></td>
<td>".$ausgabe_statistik['name']."</td>
<td>".zeitformat($ausgabe_statistik['dauer'])."</td>
</tr>";
}
?></table></br>
<!-- ************Neue Erfassungszelle und Blindzelle ueber Datum -->
<div class='datumdiv' style='outline:1px solid brown;height:25px;'>
<div class='uhrzeitzelleneu'><a href="neueerfassung.php"><img src="../mainimages/neu.gif" style="width:14px;" title="Neue Erfassung..."></a></div>
<?php
$monat=02;
// echo "<br/>Diff".$timediff;
$stamp = strtotime("2019-02-01");
//***Datumzeile*****************
// $datum_array="";
while (date("n", $stamp) == 2) {
// echo "<div class='uhrzeitzellexydatum'>".date("d.m.y", $stamp), "</div>";
$datum_array=date("d.m.Y", $stamp);
$stamp = strtotime("+1 day", $stamp);
}
foreach($datum_array as $value)
echo "<div class='uhrzeitzellexydatum'>".str_replace(".20",".",$value)."</div>";
?>
</div>
<!-- unterer Uhrzeitenblock************ -->
<div class="untererblock" style="overflow:hidden; outline:1px solid green;background: repeating-linear-gradient(
0deg,
gray,
gray 1px,
white 1px,
white 16px
);">
<!-- unterer Uhrzeitenblock************ -->
<div class="zeitblock" style='outline:1px solid blue;float:left;clear:both;'>
<?php
while($startblind<=$endblind) {
// echo $start;
//***************Uhrzeit
echo "<div class='uhrzeitzellexy'>".$startblind."</div>";
$startblind=date('H:i', strtotime($startblind) +15*60);
}
// $start=ceil($start/3600)*3600;
// $startblind=date('H:i', strtotime($startblind) +15*60);
foreach($datum_array as $tag){
// echo date_german2mysql($tag);
$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 and startzeit like '%s%%' order by startzeit",mysqli_real_escape_string($stunden_conn,date_german2mysql($tag))) ;
// echo $sql_inhalt;
$ms_inhalt=mysqli_query($stunden_conn,$sql_inhalt);
$tempdatum="";
$grundverschiebung=30;
// }
// while($ausgabe_datum=mysqli_fetch_row($ms_datumschleife))
// {
$sql_arbeitsbeginn=sprintf("select max(DATE_FORMAT(endzeit, '%%H:%%i')) AS individuellesarbeitsende,min(DATE_FORMAT(startzeit, '%%H:%%i')) AS individuellerarbeitsbeginn from taetigkeiten where startzeit like '%s%%'",mysqli_real_escape_string($stunden_conn,date_german2mysql($tag))) ;
// echo $sql_arbeitsbeginn;
$ms_individuellerarbeitsbeginn=mysqli_query($stunden_conn,$sql_arbeitsbeginn);
$individuellerarbeitsbeginn=mysqli_fetch_row($ms_individuellerarbeitsbeginn);
$individuellestartzeit=substr($individuellerarbeitsbeginn[1],-9);
$individuellesarbeitsende=substr($individuellerarbeitsbeginn,-9);
$abstandindividuellestartzeit= strtotime($individuellestartzeit)- strtotime($fruehesterstart);
// echo $abstandindividuellestartzeit/900;
$startpositionareitsbeginn= $abstandindividuellestartzeit/900*25;
$individuellerarbeitsbeginn=$individuellerarbeitsbeginn[1];
// echo "Peppe".$individuellerarbeitsbeginn;
// $datumdeutsch = date("d.m.Y",strtotime($ausgabe_inhalt['datum']));
$taetigkeitsbeginn=substr($individuellerarbeitsbeginn,10);
// echo
// $taetigkeitsende=substr($ausgabe_inhalt['endzeit'],10);
$abstandzudatum=strtotime($individuellerarbeitsbeginn)-strtotime($start);
$viertelstundenseitdatum=$abstandzudatum/900+1;
// echo "pop".$viertelstundenseitdatum;
$pixelbisarbeitsbeginntagesblock=$viertelstundenseitdatum*$hoeheproviertelstunde;
?>
</div>
<!-- *****************Tagesblocks*********** -->
<div class="tagesblock" style="float:left; overflow:hidden;position:relative;outline:1px solid purple;top:<?php echo $pixelbisarbeitsbeginntagesblock?>px;">
<?php $z=0; while($ausgabe_inhalt=mysqli_fetch_assoc($ms_inhalt))
{ $z++;
$dauer=((strtotime($ausgabe_inhalt['endzeit'])-strtotime($ausgabe_inhalt['startzeit']))/900)*$hoeheproviertelstunde;
$xpostotal=0;
$individuellerblockbeginn=$ausgabe_inhalt['startzeit'];
// echo "Peppe".$individuellerarbeitsbeginn;
// $datumdeutsch = date("d.m.Y",strtotime($ausgabe_inhalt['datum']));
$taetigkeitsbeginn=substr($individuellerblockbeginn,10,6);
// echo $taetigkeitsbeginn;
// $taetigkeitsende=substr($ausgabe_inhalt['endzeit'],10);
$abstandzudatum=strtotime($taetigkeitsbeginn)-strtotime($start);
$viertelstundenseitdatum=$abstandzudatum/900+1;
// echo "pop".$taetigkeitsbeginn." - ".$pixelbisarbeitsbeginntagesblock;
$pixelbisarbeitsbeginn=$viertelstundenseitdatum*$hoeheproviertelstunde-$pixelbisarbeitsbeginntagesblock;
//***Grundverschiebung 30px + Datum 80 px +Arbeitsbeginn
// $breitezudatum=$viertelstundenseitdatum*$hoeheproviertelstunde+$grundverschiebung+$breiteprostunde+26;
echo "<div style='height:".$dauer."px;z-index:".$z."; width:44px;cursor:pointer;background:".$ausgabe_inhalt['farbe']."; outline-width:thin;outline-style:dotted; outline-color:black;' title='".$ausgabe_inhalt['name']." ".substr($ausgabe_inhalt['startzeit'],10,6)." - ".substr($ausgabe_inhalt['endzeit'],10,6)."'> </div>\n";
$tempdatum=$ausgabe_inhalt['datum'];
}
}
?>
</div>
</div>
<br/><br/>
</body></html>mfG
tsunami
