# Footer mittig am unteren Bildschirmrand mithilfe von Div



## xThorx (7. März 2005)

Hallo zusammen,

ich habe ein div konstrukt in dem sich eine Tabelle befindet die den footer zusammensetzt. Diese möchte ich gerne am unteren Bildschirmrand mittig positionieren. Breitenangaben sollen erhalten bleiben!

Wie lautet der Befehl in css den ganzen Inhalt zentriert darzustellen, mit align:center komme ich leider nicht weiter, das hilft nur wenn ich position:absolute;bottom:0 herausnehme. 

Ich bekomme das ganze entweder am unteren bildschirmrand gesetzt oder aber mittig und nicht am unteren Bildschirmrand.

Hier mal der Code...

Vielen Dank für Eure Hilfe


```
<!-- Footer -->


<div style="position:absolute;bottom:0">
<TABLE ID="Tabelle_02" WIDTH=780 HEIGHT=66 BORDER=1 CELLPADDING=0 CELLSPACING=0>
	<TR>
		<TD COLSPAN=9><IMG SRC="images/17.jpg" WIDTH=780
                                                              HEIGHT=8></TD>
	</TR>
	...
</TABLE>
</div>


<!-- End Footer -->
```


----------



## Maik (7. März 2005)

CSS-Code:

```
div.footer
{
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px; /* neg. Hälfte von width:780px = zentriertes Div */
bottom: 0px;
height: 66px;
}
```
HTML-Code:

```
<div class="footer">
<TABLE ID="Tabelle_02" WIDTH="780" HEIGHT="66" BORDER="1" CELLPADDING="0" CELLSPACING="0">
	<TR>
		<TD COLSPAN=9><IMG SRC="http://www.tutorials.de/forum/images/17.jpg" WIDTH=780
                                                              HEIGHT=8></TD>
	</TR>
	...
</TABLE>
</div>
```


----------



## xThorx (7. März 2005)

Danke Maik, klappt super, nur verstehen tu ich da ganze nicht

Falls mal jemand Zeit und Lust hat mir das zu erklären, wäre echt super,w as ich auch nicht verstehe ist, dass ich mir nicht erklären kann, wieso es dennoch zentriert erscheint (was zweifelsohne gut ist) auch wenn die bildschirmauflösung geändert wird?

Danke für Eure Mühen!

Schönen Tag noch...


----------



## xThorx (7. März 2005)

:-( Klappt doch noch nicht ganz so wie es soll! Sorry!

Das Problem jetzt ist noch, dass wenn ich einen längeren Kontent habe, wo man die seite normalerweise auf und ab scrollen müsste lagert sich das footer div über den content und der content geht erst danach weiter!

Wie kann ich es bewerkstelligen, dass der Footer je länger der content wird automatisch nach unten verschoben wird?

Vielen Dank nochmal!


----------



## Maik (7. März 2005)

Hallo xThorx,

mit der Positionierung *left: 50%* sitzt zunächst der linke Elementrand in der Seiten- / Bildschirmmitte, das Element somit aussermittig, und wird mit der Eigenschaft *margin-left:-390px* (= linker Aussenabstand) in der Mitte zentriert.

Wie ich im obigen CSS-Code kommentiert habe, muss zum Zentrieren der Wert für *margin-left* immer die negative Hälfte von *width* betragen.


----------



## Maik (7. März 2005)

Poste mal den kompletten Quelltext, thanx.


----------



## xThorx (7. März 2005)

Okay hier der Code, danke erstmal! Ich hoffe ich kann ihn einigermassen übersichtlich posten, hab da echt meine Probleme mit, sorry!

Also zunächst das Stylesheet:


```
<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;
}
div.bottomfoot
{
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px; /* neg. Hälfte von width:780px = zentriertes Div */
bottom: 0px;
height: 66px;
}
-->
</style>
```

Den Header habe ich mal aussen vorgelassen, wird per table hergestellt, da sich daran nichts ändert!

Hier dann jetzt die Navi (Achtung: Das erste Div align und die Table werden erst im Content geschlossen):


```
<div align="center">
<TABLE ID="Tabelle_02" WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<div id="mytable" style="position:absolute;">
<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>

...mehrere Menüpunkte

</div>
</div>
<div id="footer"></div>
</div>
```

Dann geht es unmittelbar mit dem Content weiter:


```
<div id="contentDiv">

<div style="display:none; margin-left:250px; top:50px;" 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>

</table>
</div>

<!-- End of Content -->
```

Und zuguter letzt der Footer 


```
<!-- Footer -->
<div class="bottomfoot">
<TABLE ID="Tabelle_03" WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>

	...mehrere Grafiken die hier zusammengefügt werden

</table>
</div>
<!-- End Footer -->
```


----------



## Maik (7. März 2005)

Nennst du das einen kompletten Source-Code?

Sorry, aber mit deinen unvollständigen und fehlerhaften Code-Schnippseln kann man als Aussenstehender überhaupt nichts anfangen.
Selbst wenn ich die Einzelteile in einem HTML-Dokument zusammenfüge und anschliessend im Browser betrachte, kann ich nicht erkennen, wo dein Problem mit dem Content-Bereich liegen soll. Und von welchem Content-Bereich sprichst du eigentlich: *#contentDiv* oder *#content*?

In puncto ID's ist dir zudem ein Fehler unterlaufen, denn diese können in einer Seite nur einmal verwendet / vergeben werden. Du hast aber die ID's *#header , #middle , #content & #footer* zweimal in dem Dokument eingebaut.

In diesem Fall musst du für diese DIV-Elemente jeweils eine CSS-Klasse erzeugen:

CSS-Code:

```
div.header { }
div.middle { }
div.content { }
div.footer { }
```
HTML-Code:

```
<body>

<div class="header"> ... </div>
<div class="middle">
<div class="content"> ... </div></div>
<div class="footer"> ... </div>

<div class="header"> ... </div>
<div class="middle">
<div class="content"> ... </div></div>
<div class="footer"> ... </div>

</body>
```


----------



## xThorx (8. März 2005)

Hallo zusammen,

also den Fehler mit den ID`s habe ich revidiert und natürlich Klassen eingesetzt.

Der Bereich *#content* ist nur für die Ausgabe innerhalb der Grafik gedacht und *nicht* der Contentbereich. Diesen habe ich versucht mit *#contentDiv* darzustellen. Ob das so richtig ist, lass ich mal dahin gestellt. 

Nun nochmal den vollständigen Quellcode. Ich hoffe er erscheint nicht zu unübersichtlich und abschreckend...

Das Problem nach wie vor ist, dass der Footer immer am Boden stehen soll doch wenn der Contentbereich über eine Seite hinausgeht dieser sich dann unter den ContentBereich legen soll und nicht wie es zur Zeit bei mir ist, sich am unteren Ende der Seite einfach über den Content-Bereich legt!

Vielen Dank nochmal!


```
<HTML>
<HEAD>
<TITLE>Header</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<SCRIPT TYPE="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		id111_over = newImage("images/uns-over.jpg");
		id112_over = newImage("images/home-over.jpg");
		id113_over = newImage("images/produkte-over.jpg");
		id114_over = newImage("images/services-over.jpg");
		id115_over = newImage("images/jobs-over.jpg");
		id116_over = newImage("images/kontakt-over.jpg");
		id117_over = newImage("images/suche-over.jpg");
		id118_over = newImage("images/weg-over.jpg");
		id119_over = newImage("images/ref-over.jpg");
		id120_over = newImage("images/agb-over.jpg");
		id121_over = newImage("images/imp-over.jpg");
		id122_over = newImage("images/kon-over.jpg");
		id123_over = newImage("images/suf-over.jpg");
		preloadFlag = true;
	}
}

  var subs=new Array('sub1','sub2','sub3','sub4','sub5','sub6','sub7');
    
  function hideall(){
    for(x=0; x<subs.length;x++){
      document.getElementById(subs[x]).style.display='none';
    }
  }
    
  function display(mode,ele){
    if(mode=='s'){
      hideall();
      document.getElementById(ele).style.display='block';
      
    }else{
      document.getElementById(ele).style.display='none';
    }
  }

// -->
</SCRIPT>
<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;
}

div.header
{
display:block; 
width:213px; 
height:57px;
background-image:url(images/navi.jpg);              
background-repeat:no-repeat;
}

div.middle
{
display:block;
width:213px;
background-image:url(images/navico.jpg);
}

div.content
{
padding-left:45px; 
padding-right:15px;
}

div.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;
}
div.bottomfoot
{
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px; /* neg. Hälfte von width:780px = zentriertes Div */
bottom: 0px;
height: 66px;
}

-->
</style>
</HEAD>
<BODY ONLOAD="preloadImages();">

<!-- Navi -->
<div align="center">
<TABLE ID="Tabelle_02" WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<div id="mytable" style="position:absolute">
<div class="header"></div>

<div class="middle">

<div class="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>

	<div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';" 			
		onmouseout="this.id='menunormal';"
		onClick="display('s','sub3')">Test</div>

	<div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';" 			
		onmouseout="this.id='menunormal';"
		onClick="display('s','sub4')">Test</div>

	<div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';" 			
		onmouseout="this.id='menunormal';" 		
		onClick="display('s','sub5')">Test</div>

	<div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';" 			
		onmouseout="this.id='menunormal';"
		onClick="display('s','sub6')">Test</div>

	<div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';" 
		onmouseout="this.id='menunormal';" 
		onClick="display('s','sub7')">Test</div>



</div>
</div>
<div class="footer"></div>
</div>


<!-- Content -->

<div id="contentDiv">

<div style="display:none; margin-left:250px; top:50px;" id="sub1" onClick="display('h','sub1')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
		
</div>
</div>
<div class="footer"></div>
</div>

<div style="display:none; margin-left:250px; top:50px;" id="sub2" onClick="display('h','sub2')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 2<br>		
</div>
</div>
<div class="footer"></div>
</div>

<div style="display:none; margin-left:250px; top:50px;" id="sub3" onClick="display('h','sub3')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 3<br>		
</div>
</div>
<div class="footer"></div>
</div>

<div style="display:none; margin-left:250px; top:50px;" id="sub4" onClick="display('h','sub4')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 4<br>		
</div>
</div>
<div class="footer"></div>
</div>

<div style="display:none; margin-left:250px; top:50px;" id="sub5" onClick="display('h','sub5')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 5<br>		
</div>
</div>
<div class="footer"></div>
</div>

<div style="display:none; margin-left:250px; top:50px;" id="sub6" onClick="display('h','sub6')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 6<br>		
</div>
</div>
<div class="footer"></div>
</div>

<div style="display:none; margin-left:250px; top:50px;" id="sub7" onClick="display('h','sub7')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 7<br>		
</div>
</div>
<div class="footer"></div>
</div>
</div>
</table>
</div>
</table>
</div>

<!-- End of Content -->


<!-- Footer -->
<div class="bottomfoot">
<TABLE ID="Tabelle_02" WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>

	<TR>
		<TD COLSPAN=9>
			<IMG SRC="images/17.jpg" WIDTH=780 HEIGHT=8></TD>
	</TR>
	<TR>
		<TD>
			<IMG SRC="images/18.jpg" WIDTH=147 HEIGHT=27></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('id118', 'images/weg-over.jpg'); return true;"
				ONMOUSEOUT="changeImages('id118', 'images/weg.jpg'); return true;"
				ONMOUSEDOWN="changeImages('id118', 'images/weg-over.jpg'); return true;"
				ONMOUSEUP="changeImages('id118', 'images/weg-over.jpg'); return true;">
				<IMG NAME="id118" SRC="images/weg.jpg" WIDTH=118 HEIGHT=27 BORDER=0></A></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('id119', 'images/ref-over.jpg'); return true;"
				ONMOUSEOUT="changeImages('id119', 'images/ref.jpg'); return true;"
				ONMOUSEDOWN="changeImages('id119', 'images/ref-over.jpg'); return true;"
				ONMOUSEUP="changeImages('id119', 'images/ref-over.jpg'); return true;">
				<IMG NAME="id119" SRC="images/ref.jpg" WIDTH=99 HEIGHT=27 BORDER=0></A></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('id120', 'images/agb-over.jpg'); return true;"
				ONMOUSEOUT="changeImages('id120', 'images/agb.jpg'); return true;"
				ONMOUSEDOWN="changeImages('id120', 'images/agb-over.jpg'); return true;"
				ONMOUSEUP="changeImages('id120', 'images/agb-over.jpg'); return true;">
				<IMG NAME="id120" SRC="images/agb.jpg" WIDTH=52 HEIGHT=27 BORDER=0></A></TD>
		<TD ROWSPAN=2>
			<IMG SRC="images/19.jpg" WIDTH=1 HEIGHT=58></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('id121', 'images/imp-over.jpg'); return true;"
				ONMOUSEOUT="changeImages('id121', 'images/imp.jpg'); return true;"
				ONMOUSEDOWN="changeImages('id121', 'images/imp-over.jpg'); return true;"
				ONMOUSEUP="changeImages('id121', 'images/imp-over.jpg'); return true;">
				<IMG NAME="id121" SRC="images/imp.jpg" WIDTH=91 HEIGHT=27 BORDER=0></A></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('id122', 'images/kon-over.jpg'); return true;"
				ONMOUSEOUT="changeImages('id122', 'images/kon.jpg'); return true;"
				ONMOUSEDOWN="changeImages('id122', 'images/kon-over.jpg'); return true;"
				ONMOUSEUP="changeImages('id122', 'images/kon-over.jpg'); return true;">
				<IMG NAME="id122" SRC="images/kon.jpg" WIDTH=77 HEIGHT=27 BORDER=0></A></TD>
		<TD>
			<A HREF="#"
				ONMOUSEOVER="changeImages('id123', 'images/suf-over.jpg'); return true;"
				ONMOUSEOUT="changeImages('id123', 'images/suf.jpg'); return true;"
				ONMOUSEDOWN="changeImages('id123', 'images/suf-over.jpg'); return true;"
				ONMOUSEUP="changeImages('id123', 'images/suf-over.jpg'); return true;">
				<IMG NAME="id123" SRC="images/suf.jpg" WIDTH=83 HEIGHT=27 BORDER=0></A></TD>
		<TD>
			<IMG SRC="images/20.jpg" WIDTH=112 HEIGHT=27></TD>
	</TR>
	<TR>
		<TD COLSPAN=4>
			<IMG SRC="images/21.jpg" WIDTH=416 HEIGHT=31></TD>
		<TD COLSPAN=4>
			<IMG SRC="images/22.jpg" WIDTH=363 HEIGHT=31></TD>
	</TR>
</TABLE>
</div>
</div>
<!-- End Footer -->
</BODY>
</HTML>
```


----------



## Maik (8. März 2005)

Hallo xThorx,

habe deinen Source-Code überarbeitet, so dass der Footer *.bottomfoot* nun unterhalb des Content-Bereichs *#contentDiv* angezeigt wird:


```
<HTML>
<HEAD>
<TITLE>Header</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<SCRIPT TYPE="text/javascript">
<!--

function newImage(arg) {
        if (document.images) {
                rslt = new Image();
                rslt.src = arg;
                return rslt;
        }
}

function changeImages() {
        if (document.images && (preloadFlag == true)) {
                for (var i=0; i<changeImages.arguments.length; i+=2) {
                        document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
                }
        }
}

var preloadFlag = false;
function preloadImages() {
        if (document.images) {
                id111_over = newImage("http://www.tutorials.de/forum/images/uns-over.jpg");
                id112_over = newImage("http://www.tutorials.de/forum/images/home-over.jpg");
                id113_over = newImage("http://www.tutorials.de/forum/images/produkte-over.jpg");
                id114_over = newImage("http://www.tutorials.de/forum/images/services-over.jpg");
                id115_over = newImage("http://www.tutorials.de/forum/images/jobs-over.jpg");
                id116_over = newImage("http://www.tutorials.de/forum/images/kontakt-over.jpg");
                id117_over = newImage("http://www.tutorials.de/forum/images/suche-over.jpg");
                id118_over = newImage("http://www.tutorials.de/forum/images/weg-over.jpg");
                id119_over = newImage("http://www.tutorials.de/forum/images/ref-over.jpg");
                id120_over = newImage("http://www.tutorials.de/forum/images/agb-over.jpg");
                id121_over = newImage("http://www.tutorials.de/forum/images/imp-over.jpg");
                id122_over = newImage("http://www.tutorials.de/forum/images/kon-over.jpg");
                id123_over = newImage("http://www.tutorials.de/forum/images/suf-over.jpg");
                preloadFlag = true;
        }
}

  var subs=new Array('sub1','sub2','sub3','sub4','sub5','sub6','sub7');

  function hideall(){
    for(x=0; x<subs.length;x++){
      document.getElementById(subs[x]).style.display='none';
    }
  }

  function display(mode,ele){
    if(mode=='s'){
      hideall();
      document.getElementById(ele).style.display='block';

    }else{
      document.getElementById(ele).style.display='none';
    }
  }

// -->
</SCRIPT>
<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;
}

div.main /* Ersatz für <div align='center'> */
{
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px; /* neg. Hälfte von width:780px = zentriertes Div */
}

#mynavi
{
width:400px;
border:0px;
cellpadding:0px;
cellspacing:0px;
}

div.header
{
display:block;
width:213px;
height:57px;
background-image:url(images/navi.jpg);
background-repeat:no-repeat;
}

div.middle
{
display:block;
width:213px;
background-image:url(images/navico.jpg);
}

div.content
{
padding-left:45px;
padding-right:15px;
}

div.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;
}

div.bottomfoot
{
width: 780px;
height: 66px;
}
-->
</style>
</HEAD>
<BODY ONLOAD="preloadImages();">

<!-- Navi -->
<div class="main">

<div id="mytable">
<div class="header"></div>

<div class="middle">

<div class="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>

        <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"
                onmouseout="this.id='menunormal';"
                onClick="display('s','sub3')">Test</div>

        <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"
                onmouseout="this.id='menunormal';"
                onClick="display('s','sub4')">Test</div>

        <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"
                onmouseout="this.id='menunormal';"
                onClick="display('s','sub5')">Test</div>

        <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"
                onmouseout="this.id='menunormal';"
                onClick="display('s','sub6')">Test</div>

        <div style="width:150px;height:20px" id="menunormal" onmouseover="this.id='menuhover';"
                onmouseout="this.id='menunormal';"
                onClick="display('s','sub7')">Test</div>



</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div> <!-- END #mytable -->


<!-- Content -->

<div id="contentDiv">

<div style="display:none; margin-left:250px; margin-top: 50px;" id="sub1" onClick="display('h','sub1')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>

</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>

<div style="display:none; margin-left:250px; margin-top:50px;" id="sub2" onClick="display('h','sub2')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 2<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>

<div style="display:none; margin-left:250px; margin-top:50px;" id="sub3" onClick="display('h','sub3')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 3<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>

<div style="display:none; margin-left:250px; margin-top:50px;" id="sub4" onClick="display('h','sub4')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 4<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>

<div style="display:none; margin-left:250px; margin-top:50px;" id="sub5" onClick="display('h','sub5')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 5<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>

<div style="display:none; margin-left:250px; margin-top:50px;" id="sub6" onClick="display('h','sub6')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 6<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>

<div style="display:none; margin-left:250px; margin-top:50px;" id="sub7" onClick="display('h','sub7')">
<div class="header"></div>
<div class="middle">
<div class="content">
Inhalt 7<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>

</div> <!-- END #contentDiv -->
<!-- End of Content -->


<!-- Footer -->
<div class="bottomfoot">
<TABLE ID="Tabelle_02" WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>

        <TR>
                <TD COLSPAN=9>
                        <IMG SRC="http://www.tutorials.de/forum/images/17.jpg" WIDTH=780 HEIGHT=8></TD>
        </TR>
        <TR>
                <TD>
                        <IMG SRC="http://www.tutorials.de/forum/images/18.jpg" WIDTH=147 HEIGHT=27></TD>
                <TD>
                        <A HREF="#"
                                ONMOUSEOVER="changeImages('id118', 'images/weg-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('id118', 'images/weg.jpg'); return true;"
                                ONMOUSEDOWN="changeImages('id118', 'images/weg-over.jpg'); return true;"
                                ONMOUSEUP="changeImages('id118', 'images/weg-over.jpg'); return true;">
                                <IMG NAME="id118" SRC="http://www.tutorials.de/forum/images/weg.jpg" WIDTH=118 HEIGHT=27 BORDER=0></A></TD>
                <TD>
                        <A HREF="#"
                                ONMOUSEOVER="changeImages('id119', 'images/ref-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('id119', 'images/ref.jpg'); return true;"
                                ONMOUSEDOWN="changeImages('id119', 'images/ref-over.jpg'); return true;"
                                ONMOUSEUP="changeImages('id119', 'images/ref-over.jpg'); return true;">
                                <IMG NAME="id119" SRC="http://www.tutorials.de/forum/images/ref.jpg" WIDTH=99 HEIGHT=27 BORDER=0></A></TD>
                <TD>
                        <A HREF="#"
                                ONMOUSEOVER="changeImages('id120', 'images/agb-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('id120', 'images/agb.jpg'); return true;"
                                ONMOUSEDOWN="changeImages('id120', 'images/agb-over.jpg'); return true;"
                                ONMOUSEUP="changeImages('id120', 'images/agb-over.jpg'); return true;">
                                <IMG NAME="id120" SRC="http://www.tutorials.de/forum/images/agb.jpg" WIDTH=52 HEIGHT=27 BORDER=0></A></TD>
                <TD ROWSPAN=2>
                        <IMG SRC="http://www.tutorials.de/forum/images/19.jpg" WIDTH=1 HEIGHT=58></TD>
                <TD>
                        <A HREF="#"
                                ONMOUSEOVER="changeImages('id121', 'images/imp-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('id121', 'images/imp.jpg'); return true;"
                                ONMOUSEDOWN="changeImages('id121', 'images/imp-over.jpg'); return true;"
                                ONMOUSEUP="changeImages('id121', 'images/imp-over.jpg'); return true;">
                                <IMG NAME="id121" SRC="http://www.tutorials.de/forum/images/imp.jpg" WIDTH=91 HEIGHT=27 BORDER=0></A></TD>
                <TD>
                        <A HREF="#"
                                ONMOUSEOVER="changeImages('id122', 'images/kon-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('id122', 'images/kon.jpg'); return true;"
                                ONMOUSEDOWN="changeImages('id122', 'images/kon-over.jpg'); return true;"
                                ONMOUSEUP="changeImages('id122', 'images/kon-over.jpg'); return true;">
                                <IMG NAME="id122" SRC="http://www.tutorials.de/forum/images/kon.jpg" WIDTH=77 HEIGHT=27 BORDER=0></A></TD>
                <TD>
                        <A HREF="#"
                                ONMOUSEOVER="changeImages('id123', 'images/suf-over.jpg'); return true;"
                                ONMOUSEOUT="changeImages('id123', 'images/suf.jpg'); return true;"
                                ONMOUSEDOWN="changeImages('id123', 'images/suf-over.jpg'); return true;"
                                ONMOUSEUP="changeImages('id123', 'images/suf-over.jpg'); return true;">
                                <IMG NAME="id123" SRC="http://www.tutorials.de/forum/images/suf.jpg" WIDTH=83 HEIGHT=27 BORDER=0></A></TD>
                <TD>
                        <IMG SRC="http://www.tutorials.de/forum/images/20.jpg" WIDTH=112 HEIGHT=27></TD>
        </TR>
        <TR>
                <TD COLSPAN=4>
                        <IMG SRC="http://www.tutorials.de/forum/images/21.jpg" WIDTH=416 HEIGHT=31></TD>
                <TD COLSPAN=4>
                        <IMG SRC="http://www.tutorials.de/forum/images/22.jpg" WIDTH=363 HEIGHT=31></TD>
        </TR>
</TABLE>
</div> <!-- End .bottomfoot -->

</div> <!-- END .main -->
</BODY>
</HTML>
```


----------



## xThorx (8. März 2005)

Hallo Maik,

vielen vielen Dank erstmal dafür!

Das Problem leider :-( ist nur, dass ich gerne möchte dass der content bereich ab der selben höhe angeziegt wird wo auch die navibox dargestellt wird. der content bereich fängt so erst nach der navi an.

Das zweite wäre der footer der eigentlich immer am bottom feststehen soll, es sei denn, der content geht über den bottom hinaus, dann soll sich dieser natürlich dementsprechend nach unten verschieben!

Ist das überhaupt möglich?

Vielen vielen Dank mal wieder!


----------



## Maik (8. März 2005)

Verstehe ich dich richtig, dass der Content-Bereich rechts neben der Navigation positioniert / angezeigt werden soll? Wenn ja, dann bedarf es einiger Modifikationen am HTML- und CSS-Code. (Werde heute abend ein Demo erarbeiten und posten)

Zu deiner zweiten Frage: entweder wird der Footer am unteren Bildschirmrand positioniert, oder unterhalb des Content-Bereichs angezeigt - beides funktioniert nicht.


----------



## xThorx (8. März 2005)

Zu 1: Ja da stimme ich dir zu, dieser soll genau neben der Navigation villeicht mit ein bisschen luft dazwischen erscheinen...

Zu 2: Schade dass das nicht funktioniert! Gibt es dort auch keine eventuelle Java-Lösung?

Vielen Dank für Deine Hilfe!


----------



## Maik (9. März 2005)

Hallo xThorx,

habe zwei CSS-Konzepte für dich erarbeitet. In beiden Varianten *floaten* die Navigation und der Content-Bereich.
Wegen dem Zeichenlängen-Limit poste ich die Source-Codes ohne Script im HEAD und Tabelle im Footer.

1. Variante - bei übergrossem Inhalt in *#contentDiv* wird die Seite (=body) gescrollt:

```
<html>
<head>
<title>header</title>

<style type="text/css">
<!--
body
{
margin: 0px;
padding: 0px;
color: #001122;
font-family: arial;
font-size: 14px;
}

#mainDiv
{
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px; /* neg. Hälfte von width:780px = horizontal zentriertes DIV */
border: 1px solid #dfdfdf;
}

#menuDiv
{
float: left;
width: 215px; /* Im Kontext zu .header-, .middle- & .footer-width = 213px */
padding: 0px;
margin: 0px;
}

div.menunormal
{
font-weight: bold;
cursor: hand;
}

div.menuhover
{
color: #ff5500;
font-weight: bold;
cursor: hand;
}

#contentDiv
{
float: right;
width: 550px;
border-left: 1px dotted #dfdfdf;
padding: 0px;
margin: 0px;
}

div.header
{
display: block;
width: 213px;
height: 57px;
background-image: url(images/navi.jpg);
background-repeat: no-repeat;
}

div.middle
{
display: block;
width: 213px;
background-image: url(images/navico.jpg);
}

div.content
{
padding-left: 45px;
padding-right: 15px;
}

div.footer
{
display: block;
width: 213px;
height: 24px;
background-image: url(images/navifo.jpg);
background-repeat: no-repeat;
}

#footDiv
{
clear: both;
width: 780px;
height: 66px;
padding: 0px;
margin: 0px;
}
-->
</style>

</head>
<body onload="preloadImages();">

<!-- #mainDiv -->
<div id="mainDiv">

<!-- #menuDiv -->
<div id="menuDiv">

<div class="header"></div>
<div class="middle">
<div class="content">

<div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub1')">&raquo; show sub1</div>

        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub2')">&raquo; show sub2</div>

        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub3')">&raquo; show sub3</div>

        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub4')">&raquo; show sub4</div>

        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub5')">&raquo; show sub5</div>

        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub6')">&raquo; show sub6</div>

        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub7')">&raquo; show sub7</div>

</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div> <!-- END #menuDiv -->

<!-- #contentDiv -->
<div id="contentDiv">

<!-- #sub1 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub1" onClick="display('h','sub1')">
<div class="header">sub1.header</div>
<div class="middle">
<div class="content"><br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br></div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub1 -->

<!-- #sub2 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub2" onClick="display('h','sub2')">
<div class="header">sub2.header</div>
<div class="middle">
<div class="content">
Inhalt 2<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub2 -->

<!-- #sub3 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub3" onClick="display('h','sub3')">
<div class="header">sub3.header</div>
<div class="middle">
<div class="content">
Inhalt 3<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub3 -->

<!-- #sub4 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub4" onClick="display('h','sub4')">
<div class="header">sub4.header</div>
<div class="middle">
<div class="content">
Inhalt 4<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub4 -->

<!-- #sub5 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub5" onClick="display('h','sub5')">
<div class="header">sub5.header</div>
<div class="middle">
<div class="content">
Inhalt 5<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub5 -->

<!-- #sub6 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub6" onClick="display('h','sub6')">
<div class="header">sub6.header</div>
<div class="middle">
<div class="content">
Inhalt 6<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub6 -->

<!-- #sub7 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub7" onClick="display('h','sub7')">
<div class="header">sub7.header</div>
<div class="middle">
<div class="content">
Inhalt 7<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub7 -->

</div> <!-- END #contentDiv -->


<!-- #footDiv -->
<div id="footDiv">
<!-- Hier folgt deine Tabelle -->
</div>
<!-- End #footDiv -->

</div> <!-- END #mainDiv -->

</body>
</html>
```

2. Variante - bei übergrossem Inhalt in *#contentDiv* wird das DIV gescrollt:

```
<html>
<head>
<title>header</title>

<style type="text/css">
<!--
body
{
margin: 0px;
padding: 0px;
color: #001122;
font-family: arial;
font-size: 14px;
overflow: hidden; /* optional IE-Scrollbars deaktivieren */
}

#mainDiv
{
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px; /* neg. Hälfte von width:780px = horizontal zentriertes DIV */
top: 50%;
height: 400px;
margin-top: -200px; /* neg. Hälfte von height:400px = vertikal zentriertes DIV */
border: 1px solid #dfdfdf;
}

#menuDiv
{
float: left;
width: 215px; /* Im Kontext zu .header-, .middle- & .footer-width = 213px */
padding: 0px;
margin: 0px;
}

div.menunormal
{
font-weight: bold;
cursor: hand;
}

div.menuhover
{
color: #ff5500;
font-weight: bold;
cursor: hand;
}

#contentDiv
{
float: right;
width: 550px;
height: 330px;
overflow: auto; /* übergrosser Inhalt ist scrollbar */
border-left: 1px dotted #dfdfdf;
padding: 0px;
margin: 0px;
}

div.header
{
display: block;
width: 213px;
height: 57px;
background-image: url(images/navi.jpg);
background-repeat: no-repeat;
}

div.middle
{
display: block;
width: 213px;
background-image: url(images/navico.jpg);
}

div.content
{
padding-left: 45px;
padding-right: 15px;
}

div.footer
{
display: block;
width: 213px;
height: 24px;
background-image: url(images/navifo.jpg);
background-repeat: no-repeat;
}

#footDiv
{
clear: both;
width: 780px;
height: 66px;
padding: 0px;
margin: 0px;
}
-->
</style>

</head>
<body onload="preloadImages();">

<!-- #mainDiv -->
<div id="mainDiv">

<!-- #menuDiv -->
<div id="menuDiv">

<div class="header"></div>
<div class="middle">
<div class="content">

<div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub1')">&raquo; show sub1</div>

        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub2')">&raquo; show sub2</div>

        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub3')">&raquo; show sub3</div>

        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub4')">&raquo; show sub4</div>

        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub5')">&raquo; show sub5</div>

        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub6')">&raquo; show sub6</div>

        <div style="width:150px;height:20px" class="menunormal"
                onmouseover="this.className='menuhover';"onmouseout="this.className='menunormal';"
                onClick="display('s','sub7')">&raquo; show sub7</div>

</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div> <!-- END #menuDiv -->

<!-- #contentDiv -->
<div id="contentDiv">

<!-- #sub1 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub1" onClick="display('h','sub1')">
<div class="header">sub1.header</div>
<div class="middle">
<div class="content"><br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
Inhalt 1<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub1 -->

<!-- #sub2 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub2" onClick="display('h','sub2')">
<div class="header">sub2.header</div>
<div class="middle">
<div class="content">
Inhalt 2<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub2 -->

<!-- #sub3 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub3" onClick="display('h','sub3')">
<div class="header">sub3.header</div>
<div class="middle">
<div class="content">
Inhalt 3<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub3 -->

<!-- #sub4 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub4" onClick="display('h','sub4')">
<div class="header">sub4.header</div>
<div class="middle">
<div class="content">
Inhalt 4<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub4 -->

<!-- #sub5 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub5" onClick="display('h','sub5')">
<div class="header">sub5.header</div>
<div class="middle">
<div class="content">
Inhalt 5<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub5 -->

<!-- #sub6 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub6" onClick="display('h','sub6')">
<div class="header">sub6.header</div>
<div class="middle">
<div class="content">
Inhalt 6<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub6 -->

<!-- #sub7 -->
<div style="display:none; margin-left:250px; margin-top:50px;" id="sub7" onClick="display('h','sub7')">
<div class="header">sub7.header</div>
<div class="middle">
<div class="content">
Inhalt 7<br>
</div> <!-- END .content -->
</div> <!-- END .middle -->
<div class="footer"></div>
</div>
<!-- END #sub7 -->

</div> <!-- END #contentDiv -->


<!-- #footDiv -->
<div id="footDiv">
<!-- Hier folgt deine Tabelle -->
</div>
<!-- End #footDiv -->

</div> <!-- END #mainDiv -->

</body>
</html>
```


----------

