versteckte divs verschieben footer unnötig nach unten

Status
Nicht offen für weitere Antworten.

xThorx

Mitglied
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:

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!
 
Räum erst einmal deinen Quellcode auf und entscheide dich für eine Auszeichungssprache.
 
wenn du willst, dass ein Element nicht nur "unsichtbar" ist, sondern auch keinen Platz beansprucht, verwende statt visibility:hidden-->display:none
 
Danke mein 2 Problem ist gelöst funktioniert nun einwandfrei mit dem footer!

Nur wie bekomme ich jetzt die content box rechts neben die navibox?

Danke nochmal für Eure Hilfe!
 
Status
Nicht offen für weitere Antworten.
Zurück