Footer mittig am unteren Bildschirmrand mithilfe von Div

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

Neue Beiträge

Zurück