Footer mittig am unteren Bildschirmrand mithilfe von Div

Status
Nicht offen für weitere Antworten.
X

xThorx

Mitglied
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

Code: 
<!-- 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 -->
 
CSS-Code:
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:
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>
 
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...
 
:-( 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!
 
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.
 
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:

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;
}
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):

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

Code: 
<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 :)

Code: 
<!-- 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 -->
 
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:
Code: 
div.header { }
div.middle { }
div.content { }
div.footer { }
HTML-Code:
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>
 
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!

Code: 
<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>
 
Hallo xThorx,

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

Code: 
<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>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück