✔ Div-Tabellen verschieben sich bei Verkleinerung des Fensters

christina1234 · 12. August 2009

Hallo!

Ich habe eine Seite mit diversen Div-Tabellen, die sich über das ganze Fenster ausstrecken, sobald ich aber mein Fenster verkleinere, verschieben sich die Div-Tabelle mit und es sieht dann sehr komisch aus. Wie kann ich es denn bewerkstelligen, dass bei Verkleinerung des Fensters Scrollbars auftauchen und sich nichts an den Tabellen ändert?

hier ist mein code:

Code:

<html>
<style type="text/css">
    /*
    Document   : eOWCstyle
    Created on : 07.06.2009, 16:07:15
    Author     : Linney
    Description:
        Purpose of the stylesheet follows.
*/

/*
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

p {font-family:arial; font-size:9pt; margin: 0;}
#container
{width: 97%; margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray; line-height: 130%;}
#menue
{text-align: center; padding: .5em; background-color: #ddd; border: 1px solid gray; }

#top
{text-align: center; padding: .5em; background-color: #ddd; border: 1px solid gray; }
#top h1
{padding: 0; margin: 0;}

#middle
{text-align: center; padding: .5em; border-bottom: 1px solid gray;}

#projektT {float: left; width: 300px; margin: 0; padding: 4px 8px 4px 8px; vertical-align: middle; text-align:left; border-left: 1px solid gray;}
#mo {text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 4px 0 4px 0; width: 77px; }
#di {text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 4px 0 4px 0; width: 77px; }
#mi {text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 4px 0 4px 0; width: 77px; }
#do {text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 4px 0 4px 0; width: 77px; }
#fr {text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 4px 0 4px 0; width: 77px; }
#sa {text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 4px 0 4px 0; width: 77px; }
#so {text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 4px 0 4px 0; width: 77px; border-right: 1px solid gray;}

#pName {border-left: 1px solid gray; border-top: 1px solid gray; clear: both; float: left; width: 300px; margin: 0; border-top: 1px solid gray; padding: 4px 8px 4px 8px; vertical-align: middle; text-align:left; height: 23px}
#stunde {border-top: 1px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 4px 0px; width: 77px; height:auto;}
#stunde1 {border-top: 1px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 4px 0px; width: 77px; }
#stunde2 {border-top: 1px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 4px 0px; width: 77px; }
#stunde3 {border-top: 1px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 4px 0px; width: 77px; }
#stunde4 {border-top: 1px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 4px 0px; width: 77px; }
#stunde5 {border-top: 1px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 4px 0px; width: 77px; height:22px;}
#stunde6 {border-top: 1px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 4px 0px; width: 77px; border-right: 1px solid gray; height:22px;}

#pDynamic {border-left: 1px solid gray; border-top: 1px solid gray; clear: both; float: left; width: 300px; margin: 0; border-top: 1px solid gray; padding: 4px 8px 4px 8px; vertical-align: middle; text-align:left; height: 40px}
#stunde00 {border-top: 1px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 4px 0px; width: 77px; height:40px;}
#stunde11 {border-top: 1px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 4px 0px; width: 77px; height:40px;}
#stunde22 {border-top: 1px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 4px 0px; width: 77px; height:40px;}
#stunde33 {border-top: 1px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 4px 0px; width: 77px; height:40px;}
#stunde44 {border-top: 1px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 4px 0px; width: 77px; height:40px;}
#stunde55 {border-top: 1px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 4px 0px; width: 77px; height:40px;}
#stunde66 {border-top: 1px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 4px 0px; width: 77px; height:40px; border-right: 1px solid gray; }

#Summe {border-left: 1px solid gray; clear: both; float: left; width: 300px; margin: 0; border-top: 5px solid gray; padding: 4px 4px 0 8px; vertical-align: middle; text-align:center; height: 45px;}
#SumMo {border-top: 5px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 0 0px; width: 77px; height: 40px;}
#SumDi {border-top: 5px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 0 0px; width: 77px; height: 40px;}
#SumMi {border-top: 5px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 0 0px; width: 77px; height: 40px;}
#SumDo {border-top: 5px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 0 0px; width: 77px; height: 40px;}
#SumFr {border-top: 5px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 0 0px; width: 77px; height: 40px;}
#SumSa {border-top: 5px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 0 0px; width: 77px; height: 40px;}
#SumSo {border-top: 5px solid gray; text-align:center; float: left; border-left: 1px solid gray; margin: 0; padding: 5px 0px 0 0px; width: 77px; height: 40px; border-right: 1px solid gray;}


#footer
{clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border: 1px solid gray;}

#leftnav p, #rightnav p { margin: 0 0 1em 0; }

#body p {margin:0; padding:0;}
</style>
<head>
<title>eOWC v1.8</title>
</head>
<body onload = "reset()">

<div id="menue">
    <?
    echo "[<a href=\"main.php\">Main</a>] &nbsp;&nbsp";
    echo"[<a href=\"userinfo.php?user=$session->username\">My Account</a>] &nbsp;&nbsp;"."[<a href=\"useredit.php\">Edit Account</a>] &nbsp;&nbsp;";
    if($session->isAdmin()){
        echo "[<a href=\"admin/admin.php\">Admin Center</a>] &nbsp;&nbsp;";
    }
    echo "[<a href=\"process.php\">Logout</a>]";
    ?>
</div>

<br>

<form name="form" id="form" action="db.php" method="post" onreset="document.form.reset()">

<div id="top">
<?php echo "Buchungssystem von <b>$session->username</b> vom ".date("d.m.Y", time()-((date("N")-1)*86400))." bis zum ".date("d.m.Y", time()-((date("N")-7)*86400)) ?>
</div>

<div id="projektT"><b><p>Projekt/Tätigkeit</p></b></div>
<div id="mo"><b><p>Mo. <?php echo date("d.m", time()-((date("N")-1)*86400)) ?></p></b></div>
<div id="di"><b><p>Di. <?php echo date("d.m", time()-((date("N")-2)*86400)) ?></p></b></div>
<div id="mi"><b><p>Mi. <?php echo date("d.m", time()-((date("N")-3)*86400)) ?></p></b></div>
<div id="do"><b><p>Do. <?php echo date("d.m", time()-((date("N")-4)*86400)) ?></p></b></div>
<div id="fr"><b><p>Fr. <?php echo date("d.m", time()-((date("N")-5)*86400)) ?></p></b></div>
<div id="sa"><b><p>Sa. <?php echo date("d.m", time()-((date("N")-6)*86400)) ?></p></b></div>
<div id="so"><b><p>So. <?php echo date("d.m", time()-((date("N")-7)*86400)) ?></p></b></div>

<div id="pName"><b><p>Absence</p></b></div>
<div id="stunde"><input name="moA" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde1"><input name="diA" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde2"><input name="miA" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde3"><input name="doA" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde4"><input name="frA" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde5"><p></p></div>
<div id="stunde6"><p></p></div>

<div id="pName"><b><p>Business as usual</p></b></div>
<div id="stunde"><input name="moB" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde1"><input name="diB" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde2"><input name="miB" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde3"><input name="doB" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde4"><input name="frB" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde5"><p></p></div>
<div id="stunde6"><p></p></div>

<div id="pName"><b><p>Continuous Improvement</p></b></div>
<div id="stunde"><input name="moCI" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde1"><input name="diCI" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde2"><input name="miCI" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde3"><input name="doCI" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde4"><input name="frCI" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde5"><input name="saCI" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>
<div id="stunde6"><input name="soCI" type="text" size = "2" maxlength="5" onblur="RefreshSums();"></div>

<div id="pDynamic">
<input name="moCI" type="text" size = "43.5" maxlength="5" onblur="RefreshSums();">
<select size=1  style="width:300px;" width=300 name="select" id="select" onChange="filldrop2('select','select2');">

<option value="0">Bitte ausw&auml;hlen</option>

<?php
$db = @new mysqli('localhost', 'root', '', 'eOWC');
if (mysqli_connect_errno()) {
    die ('Konnte keine Verbindung zur Datenbank aufbauen: '.mysqli_connect_error().'('.mysqli_connect_errno().')');
}
$sql = 'SELECT Pname,idProjekte FROM projekte';
$result = $db->query($sql);
if (!$result) {die ('Etwas stimmte mit dem Query nicht: '.$db->error);}
while ($row = $result->fetch_assoc()) {
    echo '<option value="'.$row['idProjekte'].'">'.$row['Pname']."\n";
}
?>
</select>

<p></p>
</div>


<div id="stunde00"><input name="moP" type="text" size = "2" maxlength="5"  onblur="RefreshSum();"></div>
<div id="stunde11"><input name="diP" type="text" size = "2" maxlength="5" onblur="RefreshSum();"></div>
<div id="stunde22"><input name="miP" type="text" size = "2" maxlength="5" onblur="RefreshSum();"></div>
<div id="stunde33"><input name="doP" type="text" size = "2" maxlength="5" onblur="RefreshSum()"></div>
<div id="stunde44"><input name="frP" type="text" size = "2" maxlength="5" onblur="RefreshSum()"></div>
<div id="stunde55"><input name="saP" type="text" size = "2" maxlength="5" onblur="RefreshSum()"></div>
<div id="stunde66"><input name="soP" type="text" size = "2" maxlength="5" onblur="RefreshSum()"></div>

<div id="Summe"><b><p>Summe</p></b></div>
<div id="Summe2"></div>
<div id="SumMo"><input name="moS" type="text" size = "2" maxlength="5" readonly></div>
<div id="SumDi"><input name="diS" type="text" size = "2" maxlength="5" readonly></div>
<div id="SumMi"><input name="miS" type="text" size = "2" maxlength="5" readonly></div>
<div id="SumDo"><input name="doS" type="text" size = "2" maxlength="5" readonly></div>
<div id="SumFr"><input name="frS" type="text" size = "2" maxlength="5" readonly></div>
<div id="SumSa"><input name="saS" type="text" size = "2" maxlength="5" readonly></div>
<div id="SumSo"><input name="soS" type="text" size = "2" maxlength="5" readonly></div>

<div id="footer">
<input type="button" value="Weiteres Projekt hinzuf&uuml;gen" onclick="display();">
<input type="submit" value="Absenden">
<input type="reset" value="L&ouml;schen">
&nbsp;&nbsp Anzahl der Projekte: <input type="text" size="1" name="anzahlP" onblur="getNumber();" readonly>

</div>
</form>


</body>
</html>

<?


}
else{
?>
<html>
<link rel="stylesheet" type="text/css" href="css/eOWCstyle2.css">
<title>Login</title>

<body>
<?
/**
 * If the user is not logged in, the login form will be shown.
 * If user has already tried to login, but errors were
 * found, display the total number of errors.
 * If errors occurred, they will be displayed.
 */

if($form->num_errors > 0){
   echo "<font size=\"2\" color=\"#ff0000\">".$form->num_errors." error(s) found</font>";
}
?>
<form action="process.php" method="POST">
<div id="top">
<b>Login</b> <?php echo date("d.m.Y")," - ",date("H:i")," Uhr"; ?>
</div>
<br>

<table align="center" border="0" cellspacing="2" cellpadding="3">
<tr><td>Username</td><td><input type="text" name="user" maxlength="30" value="<? echo $form->value("user"); ?>"></td><td><? echo $form->error("user"); ?></td></tr>
<tr><td>Password</td><td><input type="password" name="pass" maxlength="30" value="<? echo $form->value("pass"); ?>"></td><td><? echo $form->error("pass"); ?></td></tr>
<tr><td colspan="2" align="left"><input type="checkbox" name="remember" <? if($form->value("remember") != ""){ echo "checked"; } ?>>
<font size="2">Remember me next time &nbsp;&nbsp;&nbsp;&nbsp;
<tr><td><br></td></tr>
</table>

<div id="footer">
<input type="hidden" name="sublogin" value="1">
<input type="submit" value="Login">
<font size="3">[<a href="forgotpass.php">Forgot Password?</a>]</font>
[<a href="register.php">Sign-Up!</a>]
</div>
</form>
<script>document.write(valueMo)</script>
</body>
</html>

chmee · 12. August 2009

Vielleicht macht es Sinn, Tabellendaten wirklich in eine Tabelle zu packen, jene mit fixer Größe auszustatten. Ich hab jetzt keine Lust, den Code zu kopieren und aufm Server anzuschauen.. Der CSS-Code ist aufgebläht für das, was es machen soll. Als weitere Idee könnte man die "Tabellendaten" in eine weitere div packen, und jene wiedermals mit absoluter Größe fixieren.

mfg chmee

Maik · 12. August 2009

Hi,

christina1234 hat gesagt.:
Wie kann ich es denn bewerkstelligen, dass bei Verkleinerung des Fensters Scrollbars auftauchen und sich nichts an den Tabellen ändert?

richte einen weiteren DIV-Block #wrap ein, der den Seitenbestand umschliesst, und formatiere ihn mit min-width, damit er eine Mindestbreite besitzt. Unterschreitet nun die Fensterbreite dieses Maß, blendet der Browser den horizontalen Scrollbalken ein.

HTML:

<body>
<div id="wrap">
    <!-- Hier folgt der Bestand -->
</div>
</body>

CSS:

#wrap { min-width:900px; /* Wert ist von mir frei gewählt */ }

Ebenso ist hier aber auch eine absolute Breitenangabe für #wrap möglich.

mfg Maik

✔ Div-Tabellen verschieben sich bei Verkleinerung des Fensters

christina1234

Grünschnabel

chmee

verstaubtes inventar

Maik

Neue Beiträge