Jonny F.: Dynamische DIV konstellation

Beitrag lesen

SELF-Forum

Dynamische DIV konstellation

Jonny F.
– Informationen zu den Bewertungsregeln

Hallo,

ich versuche mich zur Zeit ein bisschen in CSS einzuarbeiten, nun kommt schon die erste Hürde das Design das ich erstellt habe Passt soweit, doch wenn mein Inhalt (soll später mal eine aus PHP erzeugte Tabelle werden) breiter als das Browserfenster wird geht es über das Design hinaus.

Die Sache ist nur die, #contents  soll sich dynamisch der generierten Tabelle anpassen sprich mit vertikalen Scrollbalken,

Dann noch eine Frage
Wenn ich jetzt angenommen für die Tabelle einen div nehme, soll ich die Spalten dann auch als div machen sprich verschachtelte divs oder wie macht man das normal.

<center>
<table>
  <tr>
     <td></td>
     <td></td>
     <td></td>
  </tr>
</table>
</center>

<html>
<head>
<style type="text/css">
#container{
 margin-top: 5px;
 width: 100%;
 min-width: 800px;
 background-color: red;
 border: 1px solid black;
}

#banner{
 height: 70px;
 background-color: blue;
}

#menueline{
 height: 30px;
 background-color: green;
}

a.menuebutton{
  float: left;
  width: 120px;
  background: yellow;
  valign: middle;
  margin-top:3px;
  margin-left: 3px;

text-align: center;
  text-valign: middle;
  font-family: Arial;
  font-size:10pt;
  text-decoration:none;
  color:#000000;
 }

a.menuebutton:link    { color:#000000; background-color:blue; }
a.menuebutton:visited { color:#000000; background-color:blue; }
a.menuebutton:hover   { color:#000000; background-color:green; }
a.menuebutton:active  { color:#000000; background-color:green; }

#infoleiste{
  margin:0px auto;
  margin-top:20px;
  width: 85%;
  height: 60px;
  background-color: #CC9999;
  border-top:4px solid #EE0000;
  border-bottom:4px solid #EE0000;
 }

#configmenue{
 margin:0px auto;
 margin-top:20px;
 width: 400px;
 height: 30px;
 background-color: yellow;
 border: 4px solid #ffffff;
}

#contents {
 margin-top:20px;
 margin-right: 20px;
 margin-left: 20px;
 background-color: aqua;
}

#footer {
 margin-top: 20px;
 clear: both;
 height: 30px;
 background-color: lime;
}
</style>
</head>
<body>

<div id="container"> <!--Ist ein schwarzer Rahmen -->
 <div id="banner">

</div>
 <div id="menueline">

<div class="menuebutton">
<a class="menuebutton" href="index.htm">Home</a>
<a class="menuebutton" href="extras/index.htm">Extras</a>
<a class="menuebutton" href="links/index.htm">Links</a>
<a class="menuebutton" href="mailto:name@domain.de">E-Mail</a>
<a class="menuebutton" href="links/index.htm">Links</a>
<a class="menuebutton" href="mailto:name@domain.de">E-Mail</a>
</div>

</div>

<div id="infoleiste"></div>
 <div id="configmenue"></div>

<div id="contents">

php generierte Tabelle

</div>
 <div id="footer"></div>
 </div>
</body>
</html>

Ich hoffe mir kann jemand hilfreiche Tipps geben.

Danke im Voraus

Gruß Jonny F.

Beitrag melden
–
Informationen zu den Bewertungsregeln