• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Footer nicht unten

P

Paulles

Neues Mitglied
Hey Leute,

ich weiss es ist eine leidige und oft gestellte Frage, in meinem Fall werde ich aber einfach nicht schlauer.
Ich würde gern den Footer auf ner Website so haben, dass er am unteren Ende des Browserfensters abschliesst beim Scrollen.

Auch wenn zu wenig Content ist soll er bis "nach unten gedrückt" werden.

Hier mal der Link zum Testserver:

Susann Lorenz Immobilienverwaltung

Hoffe ihr könnt mir hilfreiche Anhaltspunkte geben.

Gruss,
Paulles
 
Hey,

auf selfhtml bin ich als erstes gegangen (Standard) ...

deswegen habe ich ja hier gepostet.

Also gibt es noch andere Anregungen?> Lösungsvorschläge
 
Hey,

das ist nicht wie ich es haben möchte, sondern dass er nicht permanent sichtbar ist sondern sich immer über die komplette höhe drückt, bei mehr Inhalt aber erst beim scrollen nach unten sichtbar ist und NICHT permanent.
 
Wenn du prm meinst, dann nimm bitte den ersten der beiden Links. Das willst du doch. Ansonsten mal nach Footer Sticky gooeln.

@prm: Zeitgleich, sorry
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Susann Lorenz Immobilienverwaltung</title>

<link rel="shortcut icon" href="images/favicon.ico" />

<style type="text/css" media="screen">@import "./menu.css" ;</style>

<link rel="stylesheet" href="./lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="./js/prototype.js"></script>
<script type="text/javascript" src="./js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="./js/lightbox.js"></script>


</head>

<body>


<div id="balken_rot">
<img src="./images/balken_rot.png" id="balken_rot" width="802" height="60" align="left" /></div>


<div>
<img src="./images/logo.jpg" id="sli_logo" width="230" height="60" align="left" /></div>


<div id="tabs-container">
<a href="index.html"><img src="./images/navi/menu-home_off.png" onmouseover="this.src='./images/navi/menu-home_on.png'" onmouseout="this.src='images/navi/menu-home_off.png'" alt="home" /></a>
<a href="referenzen.html"><img src="./images/navi/referenzen_off.png" onmouseover="this.src='./images/navi/referenzen_on.png'" onmouseout="this.src='images/navi/referenzen_off.png'" alt="referenzen" /></a>
<a href="projekte.html"><img src="images/navi/projekte_on.png" onmouseover="this.src='./images/navi/projekte_on.png'" alt="projekte" /></a>
<a href="partner.html"><img src="images/navi/partner_off.png" onmouseover="this.src='./images/navi/partner_on.png'" onmouseout="this.src='./images/navi/partner_off.png'" alt="partner" /></a>
<a href="kontakt.html"><img src="images/navi/kontakt_off.png" onmouseover="this.src='images/navi/kontakt_on.png'" onmouseout="this.src='images/navi/kontakt_off.png'" alt="kontakt" /></a> </div>

<div id="menu">
<h1 id="first">PROJEKT #01 "Das Haus am See" </h1>

<a href="projekte.html" class="selected">Ansicht 01</a>
<a href="sustain-a-what.html" >Ansicht</a>
<a href="mrs-eaves.html">Ansicht</a>
<a href="kiwifruit-letterpress.html">Ansicht</a>

<h1>Makrostandort</h1>
<a href="makro.html">Ansicht</a>

<h1>Mikrostandort</h1>
<a href="web-stayaway.html">Ansicht</a>
<a href="web-samdog.html">Ansicht</a>

<h1>Grundrisse</h1>
<a href="3d-sit.html">Erdgeschoß</a>
<a href="3d-expressive.html">Obergeschoß</a>
<a href="3d-poetry.html">Dachgeschoß und Spitzboden</a>

<br />
<br />

</div>

<div id="content">



<div id="galleria-main-image">
<a href="images/gallerie/Am-SeeAkut1b_gross.png" rel="lightbox" title="Ansicht_01"><img src="./images/gallerie/Am-SeeAkut1b.png" </a></div>


<li><img src="images/content/portfolio/print/sustain-a-what-2.jpg" alt="Image01"></li>

</div>

<div id="footer">
Copyright 2012
</div>

</body>

</html>




Css:

html {
background-image: url(./images/bg_rapport.png);
background-attachment: fixed;
background-repeat:repeat;
height: 100%;
}

body {
background-position: right bottom;
background-repeat: repeat-y;
min-height: 100%;
margin: auto;
padding-left: 230px;
padding-top: 0px;
padding-bottom: 9em;
width: 802px;
background-color: #ffffff;
box-shadow: 0 0 17px #999;
border-bottom: 0px solid #000000;
border-left: 0px solid #000000;
border-right: 0px solid #000000;
font-family: Arial,"Times New Roman",Times,serif;
font-size: 12px;
position: relative;

}

h5 {
border: 0 none transparent;
font-size: 14px;
color: #666 ;
line-height: 1.2;
margin: 0;

padding: 12px 12px 12px 12px;
}



a {
text-decoration: none;
}





#balken_rot {

padding: 0px 0px 0px 0px;
position:absolute;
top: 0cm;
z-index:1;
}

#seal {

position:absolute;
top: 0cm;
right: 40px;
z-index:2;
}

#sli_logo {
left: 0;
position: absolute;
top: 0;
padding: 0px;

}



#tabs-container {
height: 105px;
padding-top: 90px;
}

/* -------------------------------------------------------------------------------- */
/* Left Menu */
/* -------------------------------------------------------------------------------- */

div#menu {
width: 195px;
position: absolute;
left: 0px;
margin:0px 10px 0px 15px;
height: 100%;
}

div#menu p {
line-height: 1.4;
}

div#menu h1 {
width: 195px;
border-bottom: 1px solid #e0e0e0;
font-size: 11px;
padding-bottom: 5px;
margin-bottom: 7px;
margin-top: 15px;
}

div#menu h1#first {
margin-top: 0px;
}

div#menu a {
color: #4f4f4f;
display: block;
padding-bottom: 5px;
}

div#menu a:hover {
color: #e54045;
}

div#menu a.selected {
color: #e54045;
}

/* -------------------------------------------------------------------------------- */
/* Content */
/* -------------------------------------------------------------------------------- */


div#content {
min-height: 100px;
}

.galleria {
width: 800px;
height: 97px;
border-bottom: 1px solid #e0e0e0;

}

.galleria li {
width: 50px;
height: 50px;
border: 1px solid #e0e0e0;
/* border-right: 2px solid #e0e0e0; IE bug apparently - needs to be dealt with */
margin: 22px 7px 22px 0px;
}

.galleria li:hover {
border-color: #bbbbbb;
}

#galleria-main-image {

border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 0px solid #000000;
position: relative;
margin: 0px 0px 0px 0px;
float: right;

}


#footer {
clear:both;
float: right;
width: 1022px;

border: 0px solid #e0e0e0;
border-right: 0 none transparent;
border-bottom: 0 none transparent;
border-left: 0 none transparent;
color: #fff;
background-color: #999;
box-shadow: 0px 10px 17px #999;
margin-bottom: 0px;
padding: 10px 10px 15px 0px;
font-size: 9px;
text-align: right;
position: relative;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben