✔ Footer platzieren

Status
Nicht offen für weitere Antworten.
S

schwarzer_prinz

Mitglied
Hallo, leider komme ich bei folgendem Problem nicht weiter und hoffe deshalb auf euere Hilfe.

Ich habe ein Navigationsmenü in einem DIV-Container platziert. Der DIV-Container erstreckt sich über 100% des Browserfensters. Oben gibt es die einzelnen Menüeinträge etwas unterhalb folgen noch drei grafische Quadrate. Nun möchte ich Boden des besagten Div-Containers noch in einer kleiner Schrift eine Art Footer in welchem das Copyright und ein Link zum Impressum hinterlegt ist integrieren. Wie bekomme ich es hin, dass der Footer immer am Boden platziert ist? Egal was ich anstelle, leider bekomme ich das immer nur so geregelt, dass der Footer unmittelbar bzw. unterhalb der grafischen Quadrate platziert wird aber eben nicht am Boden.

Wer weiß Rat?

CSS-Code:

Code: 
#nav {background-image:url(images/backmen.png)!important;
background-image:url(images/backmen.jpg); background-repeat:repeat;
height:100%; padding:20px 0px 0px 0px;
margin: 0px 0px 0px 0px;
vertical-align:middle;
width:200px;
border: 1px solid #800000;
position: absolute;
top: 0px;
left: 80px;
color:#fff;
_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);}

/* menue links*/

#menu1 a , #menu1 a:visited , #menu1 a:active {display:block;
font-size: 13pt;line-height: 125%;
font-family: arial, helvetica, tahoma ,verdana,  sans-serif;
color:#400000;
line-height:28px;
text-decoration:none ;
text-align:right;
width:200px;}

#menu1 a:hover{
color:#fff;
text-decoration:none ;
background-image:url(images/cube1.png)!important;
background-image:url(images/cube1.gif);}

HTML-Code:
Code: 
<div id="nav">

<table align="center"  id="menu1"  border="0" cellpadding="0" cellspacing="0">

<tr>
<td>
<a href="menue1.php" onfocus="this.blur()">Menüpunkt1</a></td>
</tr>
<tr>
<td>
<a href="menue2.php" onfocus="this.blur()">Menüpunkt2</a></td>
</tr>
<tr>
<td>
<a href="menue3.php" onfocus="this.blur()">Menüpunkt3</a></td>
</tr>

</table>

<br>
<br>

<img style="background-image:url(images/back.png)!important;background-image:url(images/cube1.gif);background-repeat:repeat;_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);margin-right:10px;border:solid 1px #400000"  align="right" src="http://www.tutorials.de/forum/images/pixelspace.gif" width="40" height="40" border="0" alt=""><br>

<img style="background-image:url(images/cube2.png)!important;background-image:url(images/cube2.gif);background-repeat:repeat;_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);margin-right:10px;border:solid 1px #400000"  align="right" src="http://www.tutorials.de/forum/images/pixelspace.gif" width="30" height="30" border="1" alt=""><br>

<img style="background-image:url(images/cube3.png)!important;background-image:url(images/cube3.gif);background-repeat:repeat;_filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);margin-right:10px;border:solid 1px #400000"  align="right" src="http://www.tutorials.de/forum/images/pixelspace.gif" width="20" height="20" border="0" alt="">

</div>
 
Zuletzt bearbeitet:
Hi,

hier ein grundlegendes Beispiel für einen Footer, der am unteren Fensterrand positioniert ist:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_schwarzer_prinz</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

html,body {
height:100%;
}

#wrapper {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
}

#content {
padding-bottom:20px;
}

#footer {
position:absolute;
bottom:0px;
height:20px;
width:100%;
background:#ddd;
}
-->
</style>

</head>
<body>

<div id="wrapper">
    <div id="content">
         <p>some dummy text to expand the box</p>
         <!-- Ab hier ist der Inhalt zunächst auskommentiert -->
         <!--<p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>
         <p>some dummy text to expand the box</p>-->
    </div>
    <div id="footer">footer</div>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück