Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Footer Problem“

maromedia84

Aktives Mitglied

Hey Leute,

habe nach einer langen durchgearbeiteten Nacht langsam keinen durchblick mehr.

Mein Problem ist, dass ich einen Footer habe, der soll bei kurzem Inhalt am unteren Bildschirmrand sein und wenn der Inhalt länger ist soll er mitscrollen bzw. wie z.B. bei einem Disclaimer ganz unten auftauchen, quasi aus meinen Viewport verschwinden.

Wie bewerkstellige ich das?

Mit

Code:
position: absolute;
bottom: 0;

bewerkstellige ich ja nur dass er am unteren ende ist, aber wie bekomme ich es gebacken, dass bei längerem Inhalt einer Seite gang ganz unten auftaucht?

Hoffe doch könnt mir helfen?
 

S

serverhombre

Guest

AW: Footer Problem

Hallo,

Hab hier mal ne mögliche Lösung:


so und hier ist es nochmal beschrieben:
 

maromedia84

Aktives Mitglied

AW: Footer Problem

Leider funktioniert es immer noch nicht auf der Disclaimer seite!

alle anderen seiten ist es schön am ende

Hier der Quellcode!

<!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>
<title>Hubert Burgmaier | Schlosserei & Metallbau</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="wrap">
<div id="masthead">
<img src="logo2.jpg" alt="" border="0" width="714" height="110">

<div id="menucontainer">


<div class="pro_linedrop">
<ul class="select">

<li><a href="index.html"><b>Home</b></a></li>

<li class="line"><a href="wir_ueber_uns.html"><b>Wir &uuml;ber uns</b><!--[if IE 7]><!--></a><!--<![endif]--> </li>


<li class="line"><a href="portofolio.html"><b>Portofolio</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="gelaenderbau.html">Gel&auml;nderbau</a></li>
<li><a href="torbau.html">Torbau</a></li>
<li><a href="treppenbau.html">Treppenbau</a></li>
<li><a href="balkonbau.html">Balkonbau</a></li>
<li><a href="zaunbau.html">Zaunbau</a></li>
<li><a href="vordaecher.html">Vord&auml;cher mit Glas</a></li>




</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="line"><a href="kontakt.html"><b>Kontakt</b><!--[if IE 7]><!--></a><!--<![endif]--> </li>


<li class="line"><a href="impressum.html"><b>Imressum</b><!--[if IE 7]><!--></a><!--<![endif]--> </li>


<li class="line"><a href="disclaimer.html"><b>Disclaimer</b><!--[if IE 7]><!--></a><!--<![endif]--></li>


</ul>
</div>

</div>
</div>


<div id="content">


<h1>Disclaimer - rechtliche Hinweise</h1>

<h2>1. Haftungsbeschr&auml;nkung</h2>

<p>Die Inhalte dieser Website werden mit gr&ouml;&szlig;tm&ouml;glicher Sorgfalt erstellt. Der Anbieter &uuml;bernimmt jedoch keine Gew&auml;hr
f&uuml;r die Richtigkeit, Vollst&auml;ndigkeit und Aktualit&auml;t der bereitgestellten Inhalte. Die Nutzung der Inhalte der Website
erfolgt auf eigene Gefahr des Nutzers. Namentlich gekennzeichnete Beitr&auml;ge geben die Meinung des jeweiligen Autors
und nicht immer die Meinung des Anbieters wieder. Mit der reinen Nutzung der Website des Anbieters kommt keinerlei
Vertragsverh&auml;ltnis zwischen dem Nutzer und dem Anbieter zustande.</p>

<h2>2. Externe Links</h2>

<p>Diese Website enth&auml;lt Verkn&uuml;pfungen zu Websites Dritter ("externe
Links"). Diese Websites unterliegen der Haftung der jeweiligen
Betreiber. Der Anbieter hat bei der erstmaligen Verkn&uuml;pfung der
externen Links die fremden Inhalte daraufhin &uuml;berpr&uuml;ft, ob etwaige
Rechtsverst&ouml;&szlig;e bestehen. Zu dem Zeitpunkt waren keine
Rechtsverst&ouml;&szlig;e ersichtlich. Der Anbieter hat keinerlei Einfluss auf
die aktuelle und zuk&uuml;nftige Gestaltung und auf die Inhalte der
verkn&uuml;pften Seiten. Das Setzen von externen Links bedeutet nicht,
dass sich der Anbieter die hinter dem Verweis oder Link liegenden
Inhalte zu Eigen macht. Eine st&auml;ndige Kontrolle dieser externen
Links ist f&uuml;r den Anbieter ohne konkrete Hinweise auf
Rechtsverst&ouml;&szlig;e nicht zumutbar. Bei Kenntnis von Rechtsverst&ouml;&szlig;en
werden jedoch derartige externe Links unverz&uuml;glich gel&ouml;scht.</p>






<h2>3. Urheber- und Leistungsschutzrechte</h2>

<p>Die auf dieser Website ver&ouml;ffentlichten Inhalte unterliegen dem deutschen Urheber- und Leistungsschutzrecht.
Jede vom deutschen Urheber- und Leistungsschutzrecht nicht zugelassene Verwertung bedarf der vorherigen schriftlichen
Zustimmung des Anbieters oder jeweiligen Rechteinhabers. Dies gilt insbesondere f&uuml;r Vervielf&auml;ltigung, Bearbeitung,
&Uuml;bersetzung, Einspeicherung, Verarbeitung bzw. Wiedergabe von Inhalten in Datenbanken oder anderen elektronischen
Medien und Systemen. Inhalte und Rechte Dritter sind dabei als solche gekennzeichnet. Die unerlaubte Vervielf&auml;ltigung
oder Weitergabe einzelner Inhalte oder kompletter Seiten ist nicht gestattet und strafbar. Lediglich die Herstellung
von Kopien und Downloads f&uuml;r den pers&ouml;nlichen, privaten und nicht kommerziellen Gebrauch ist erlaubt.</p>
<p>Die Darstellung dieser Website in fremden Frames ist nur mit schriftlicher Erlaubnis zul&auml;ssig.</p>




<h2>4. Datenschutz</h2>

<p>Durch den Besuch der Website des Anbieters k&ouml;nnen Informationen
&uuml;ber den Zugriff (Datum, Uhrzeit, betrachtete Seite) gespeichert werden. Diese Daten geh&ouml;ren nicht zu den
personenbezogenen Daten, sondern sind anonymisiert. Sie werden
ausschlie&szlig;lich zu statistischen Zwecken ausgewertet. Eine
Weitergabe an Dritte, zu kommerziellen oder nichtkommerziellen
Zwecken, findet nicht statt.</p>
<p>Der Anbieter weist ausdr&uuml;cklich darauf hin, dass die
Daten&uuml;bertragung im Internet (z.B. bei der Kommunikation per
E-Mail) Sicherheitsl&uuml;cken aufweisen und nicht l&uuml;ckenlos vor dem
Zugriff durch Dritte gesch&uuml;tzt werden kann.</p>
<p>Die Verwendung der Kontaktdaten des Impressums zur gewerblichen Werbung ist ausdr&uuml;cklich nicht erw&uuml;nscht, es sei denn der Anbieter hatte zuvor seine schriftliche Einwilligung erteilt oder es besteht bereits eine Gesch&auml;ftsbeziehung. Der Anbieter und alle auf dieser Website genannten Personen widersprechen hiermit jeder kommerziellen Verwendung und Weitergabe ihrer Daten.</p>

<h2>5. Besondere Nutzungsbedingungen</h2>

<p>Soweit besondere Bedingungen f&uuml;r einzelne Nutzungen dieser Website
von den vorgenannten Nummern 1. bis 4. abweichen, wird an
entsprechender Stelle ausdr&uuml;cklich darauf hingewiesen. In diesem
Falle gelten im jeweiligen Einzelfall die besonderen
Nutzungsbedingungen.</p>

Quelle: <a href="http://www.juraforum.de/" title="forum">Juraforum.de</a>
</div><br><br>
</div>




<div id="footer"> &copy; 2009 Maro Media IT - Services | Design by <a href="http://www.maro-media.de"> www.maro-media.de</a> | <a href="mailto:info@maro-media.de">contact</a> |<br/>
</div>
</body>
</html>

Und hier die CSS:

html, body {
margin : 0;
padding : 0;
height: 100%
}
body {
font : 73% "Trebuchet MS", Arial, Helvetica, Tahoma, sans-serif;
background : #fff;
color : #555;
}
/*WRAP*/
#wrap {
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
color : #555;
background: #fff url(images/wrap_bg.jpg) repeat-x;
}
/*TOP BANNER*/
#masthead {
height:180px;
padding: 0;
margin-bottom: 0;
}
/* News */

#news {
height:50px;
padding-top: 0;
margin-bottom:0px;
margin-left: 150px;

}

/*MAIN CONTAINER*/
#container {
width: 100%;
border: 0px solid #aaa;
margin-left: auto;
margin-right: auto;
margin-top:30px;
padding: 0;
line-height: 1.8em;
}
/*TOP NAVIGATION*/
#menucontainer{position:relative;height:65px;color:#E0E0E0;background:#396D8C; /*#143D55 alte farbe*/
width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}

.pro_linedrop {
height:36px;
width:101%;
background:url(images/menu_bg-ON.gif);
position:relative;
font-family:arial, verdana, sans-serif;
font-size:12px;
z-index:500;
}

.pro_linedrop .select {
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
}

.pro_linedrop li {
float:left;
background:url(images/transparent.gif);
}

.pro_linedrop .select a {
display:block;
height:36px;
float:left;
background: url(images/menu_bg-ON.gif);
padding:0 0 0 15px;
text-decoration:none;
line-height:25px;
white-space:nowrap;
color:#ddd;
}

.pro_linedrop .select li.line a {color:#fc0;}

.pro_linedrop .select a b {
display:block;
padding:0 30px 10px 15px;
background:url(images/menu_bg-ON.gif) right top;
}

.pro_linedrop .select a:hover,
.pro_linedrop .select li:hover a {
background: url(images/transparent.gif);
padding:0 0 0 15px;
line-height:27px;
cursor:pointer;
color:#fff;
}

.pro_linedrop .select li.line a:hover,
.pro_linedrop .select li.line:hover a {
color:#fc6;}

.pro_linedrop .select a:hover b,
.pro_linedrop .select li:hover a b {
display:block;
padding:0 30px 9px 15px;
background:url(images/transparent.gif) right top;
cursor:pointer;
text-decoration:underline;
}

.pro_linedrop .sub {
display:none;
}
.pro_linedrop ul ul {display:none;}

/* IE6 only */
.pro_linedrop table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.pro_linedrop .sub {
margin:0;
padding:0;
list-style:none;
}

.pro_linedrop .sub li {background:transparent;}

.pro_linedrop .select :hover .sub {
height:25px;
display:block;
position:absolute;
float:left;
width:740px;
top:28px;
left:0;
text-align:center;
background:transparent url(images/transparent.gif);
border:0px solid #aaa;
}

.pro_linedrop .select :hover .rt li {float:right;}

.pro_linedrop .select :hover .sub li a
{display:block; height:45px; line-height:42px; float:left; background:transparent url(images/transparent.gif); padding:0 18px; margin:0; white-space:nowrap; color: white; font-size:12px; font-weight: bold;}

/*färbänderung standard zustand siehe eine zeile darüber */

.pro_linedrop .select :hover .sub li.subline a {color:#c00;}

.pro_linedrop .select :hover .sub li a:hover,
.pro_linedrop .select :hover .sub li:hover
{color:#000; line-height:30px; position:relative; font-weight:bold;}

.pro_linedrop .select :hover .sub li:hover > a {color:eek:range;} /*farbänderung bei over wenn hochgestellt */

.pro_linedrop .select :hover .sub :hover ul {padding:0; margin:0; list-style:none; display:block; width:112px; position:absolute; left:-1px; top:25px; border:1px solid #aaa; border-top:0; background:#fff;}

.pro_linedrop .select :hover .sub :hover ul li a {width:80px; text-align:left; height:20px; line-height:18px;}
.pro_linedrop .select :hover .sub :hover ul li a:hover {line-height:16px;}

ul.download {list-style-image:url(zip.gif);}
ul.download li {padding-left:5px; font-size:11px; line-height:1.5em;}
h3.spacer {padding-top:30px;}
img.rgt {float:right;}





/*MAIN CONTENT*/
#content {
padding-left: 360px;
margin-top: 100px;
margin: 0 360px 0 0;
overflow: auto;
min-height: 100%;
position: relative;

}

#content ul li {font-size: 140%; font-style: bold}

#contentLeft {
float: left;
width: auto;
;
}

#contentMiddle

#contentRight {

width: auto;
margin-left: auto;
margin-right: auto;
}

#contentRight {
float: right;
width: auto;
margin-left: auto;
margin-right: auto;

}




/*FOOTER*/
#footer {
clear: both;
height: 50px;
padding: 0;
margin-bottom: 0;
margin-top: auto;
text-align: center;
background: #143D55;
position: absolute;
bottom: 0; /* wichtig */
width: 100%;
color: orange;
}

/*TYPOGRAPHY*/
h1 {
margin: 0;
padding: 20px 0 20px 25px;
font-size: 175%;
letter-spacing: 5px;
color: #143D55;
}
h2 {
margin: 0;
padding: 20px 0 20px 0;
font-size: 160%;
letter-spacing: 3px;
color: #143D55;
}
blockquote {
padding: 15px;
font-weight : bold;
font-style : italic;
border-bottom: 1px solid #aaa;
border-top: 1px solid #aaa;
color : #b29b35;
}
/*LINKS*/
a:link, a:visited {
color : #bbb;
background : inherit;
text-decoration : underline;
}
a:hover {
color : #143D55;
background : inherit;
text-decoration : none;
}
/*IMAGES*/
.right {
float: right;
border: 0px solid #656C4A;
margin: 5px 0 10px 0;
padding: 10px;
}
/*SEARCH BAR*/
legend {
color: green;
}
input {
background: #eee;
}

Hoffe es kann mir jemand weiterhelfen!!
 

maromedia84

Aktives Mitglied

AW: Footer Problem

Nö das geht erst online wenn es fertig ist!

Wie gesagt, der Ansatz von serverhombre passt soweit.
Habe nun auch meinen Footer am unteren Bildschirmrand.

Problem nur das wenn mehr inhalt da ist er nicht automatisch nach unten wandert!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.874
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben