Hallo zusammen, ich habe da ein echtes Problem!
Und zwar bin ich dabei eine Seite zu kreieren, die wie folgt aufgebaut ist:
Header (gänzlich ohne Divs, nur mit Table)
Content Bereich(links Navigation, rechts daneben dann content -->komplett mit
dynamischen DIVS)
Footer (gänzlich ohne Divs, nur mit Table)
Das erste Problem ist, dass ich nicht weiss wie ich die Content Box, rechts neben der Navi-Box bekomme?
Das zweite Problem dann ist noch, dass ich mit zu Beginn versteckten Divs arbeite die dann durch Klick auf die Navi per Java Script angezeigt werden. Da diese Divs versteckt sind und sich merkwürdigerweise eine unter die andere setzt (sind insgesamt sieben links und somit auch sieben Content-Divs) verschiebt sich der Footer unnötig nach unten. Wie kann ich das ganze abstellen?
Hier zunächst einmal mein CSS:
Und hier mein Quellcode
Vielen vielen Dank für Eure Hilfe!
Und zwar bin ich dabei eine Seite zu kreieren, die wie folgt aufgebaut ist:
Header (gänzlich ohne Divs, nur mit Table)
Content Bereich(links Navigation, rechts daneben dann content -->komplett mit
dynamischen DIVS)
Footer (gänzlich ohne Divs, nur mit Table)
Das erste Problem ist, dass ich nicht weiss wie ich die Content Box, rechts neben der Navi-Box bekomme?
Das zweite Problem dann ist noch, dass ich mit zu Beginn versteckten Divs arbeite die dann durch Klick auf die Navi per Java Script angezeigt werden. Da diese Divs versteckt sind und sich merkwürdigerweise eine unter die andere setzt (sind insgesamt sieben links und somit auch sieben Content-Divs) verschiebt sich der Footer unnötig nach unten. Wie kann ich das ganze abstellen?
Hier zunächst einmal mein CSS:
Code:
<style type="text/css">
<!--
body
{
Background:#ffffff;
margin-left:0px;
margin-top:0px;
margin-width:0px;
margin-height:0px;
color: #001122;
font-family: Arial;
font-size: 14px;
}
#mynavi
{
width:400px;
border:0px;
cellpadding:0px;
cellspacing:0px;
}
#header
{
display:block;
width:213px;
height:57px;
background-image:url(images/navi.jpg);
background-repeat:no-repeat;
}
#middle
{
display:block;
width:213px;
background-image:url(images/navico.jpg);
}
#content
{
padding-left:45px;
padding-right:15px;
}
#footer
{
display:block;
width:213px;
height:24px;
background-image:url(images/navifo.jpg);
background-repeat:no-repeat;
}
#menuhover
{
color:#ff5500;
font-weight:bold;
cursor:hand;
}
#menunormal
{
background-color:#ffffff;
}
-->
</style>
Und hier mein Quellcode
Code:
<BODY ONLOAD="preloadImages();">
<!-- Header -->
<div align="center">
<TABLE ID="Tabelle_01" WIDTH=780 HEIGHT=204 BORDER=0 CELLPADDING=0>
Aufbau des Headers
</TABLE>
</div>
<!-- End Header -->
<!-- Navi -->
<div align="center">
<TABLE ID="Tabelle_02" WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<div id="mytable">
<div id="header"></div>
<div id="middle">
<div id="content">
<div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"onmouseout="this.id='menunormal';"
onClick="display('s','sub1')">Test</div>
<div style="width:150px;height:20px" id="menunormal"
onmouseover="this.id='menuhover';" onmouseout="this.id='menunormal';"
onClick="display('s','sub2')">Test</div>
Und noch weitere 5 Menüpunkte! Hier nur abgekürzt</div>
</div>
<div id="footer"></div>
</div>
</table>
</div>
<!-- End Navi -->
<!-- Content -->
<div align="center">
<TABLE ID="Tabelle_03" WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<div id="contentDiv">
<div style="visibility:hidden;" id="sub1" onClick="display('h','sub1')">
<div id="header"></div>
<div id="middle">
<div id="content">
Inhalt 1<br>
</div>
</div>
<div id="footer"></div>
</div>
<div style="visibility:hidden;" id="sub2" onClick="display('h','sub2')">
<div id="header"></div>
<div id="middle">
<div id="content">
Inhalt 2<br>
</div>
</div>
<div id="footer"></div>
</div>
...und noch weitere 5 von den DIVS! Hier nur abgekürzt
<!-- End Content -->
<!-- Footer -->
<div align="center">
<TABLE ID="Tabelle_03" WIDTH=780 HEIGHT=66 BORDER=0 CELLPADDING=0
CELLSPACING=0>
Aufbau des Footers
</TABLE>
</div>
<!-- End Footer -->
</BODY>
</HTML>
Vielen vielen Dank für Eure Hilfe!