Footer richtig positionieren, aber wie ?

raul25 · 5 Dezember 2008

Hallo zusammen,

ich bin neu hier und hoffe man kann mir hier helfen, ich bin leider noch ziemlicher Anfänger in Sachen HTML und CSS.

Ich habe einen Footer in mein Template eines CMS-Tools integriert.

Dieser erscheint aber nicht automatisch am Ende der Seite sondern bleibt oben stehen.

Ich brauche Hilfe bei der Positionierung des Footers.

Hier der Code aus der Template-Datei:

Code:

<body>
<?php ob_start();
?> 
<div id="logo"><cc:print value="&site.caption"></div>
<div id="eyecatcher"><cc:printpicture obj="pic.eyecatcher"></img></div>  


<cc:if cond="&site.plaintextfile">
<div id="plaintext">
<a href="<cc:print value="&site.plaintextfile">"><cc:print value="&site.ressource.plaintext"></a>
</div>
</cc:if>

<cc:if cond="&site.ftsfile">
<form class="search" action="<cc:print value="&site.ftsfile">" method="get">
<input class="search" type="text" name="criteria" maxlength="30" title="Suchbegriff eingeben..." value="Suchbegriff eingeben..." onfocus="if(this.value=='Suchbegriff eingeben...') {this.value='';}" onblur="if (this.value=='') {this.value='Suchbegriff eingeben...'}" />
<input type="image" src="<cc:printpictureurl obj="pic.search">" />
</form>
</cc:if>

<cc:if cond="&site.plaintextfile">
<div id="plaintext">
<a href="<cc:print value="&site.plaintextfile">"><cc:print value="&site.ressource.plaintext"></a>
</div>
</cc:if>


<div id="common">

<cc:if cond="&topic.isshop">
<cc:if cond="&site.showmemo">
<a href="<cc:print value="&site.memofile"><?php echo '?basket_id='.$basket->session_id; ?>"><cc:print value="&site.ressource.memoshow"></a>
</cc:if>
<a href="<cc:print value="&site.basketfile">"><cc:print value="&site.ressource.showbasket"></a>
<a href="<cc:print value="&site.shippingfile"><?php echo '?basket_id='.$basket->session_id; ?>"><cc:print value="&site.ressource.basketcheckout"></a>
<a href="<cc:print value="&site.userfile"><?php echo '?basket_id='.$basket->session_id; ?>"><cc:print value="&site.ressource.shop.user"></a>
</cc:if>
<br />

<cc:loop type="commonpages" obj="mycommonpage">
<a href="<cc:print value="&mycommonpage.url">"><cc:print value="&mycommonpage.caption"></a>
</cc:loop>

<br />

<cc:if cond="&site.tsid">
<p align="center">
<form name="formSiegel" method="post" action="https://www.trustedshops.de/de/tshops/seal_de.php3" target="_blank">
<input name="shop_id" type="hidden" value="<cc:print value="&site.tsid">">
<input type="image" border="0" src="<cc:printpictureurl obj="pic.tslogo">" alt="<cc:print value="&site.ressource.tslogo">" name="Seal" align="middle" width="100" height="100">
</form>
</p>
</cc:if>


</div>

<cc:loop type="maintopic" obj="mymaintopic">
<cc:if cond="&mymaintopic.topiccount gt 0">
<div id="topicmenu<cc:print value="&mymaintopic.number">" class="menu">
<cc:loop type="topic" obj="mytopic" maintopic="&mymaintopic.number">
<a class="menuItem" <cc:if cond="&mytopic.ispagetopic">style="font-weight:bold;"</cc:if> href="<cc:print value="&mytopic.url">"  onmouseout="autoClose();"  onmouseover="return subMenuTouch(event, '<cc:if cond="&mytopic.subtopiccount gt 0">subtopicmenu<cc:print value="&mymaintopic.number"><cc:print value="&mytopic.number"></cc:if>');"><cc:print value="&mytopic.caption"></a>
</cc:loop>
</div>
</cc:if>
</cc:loop>

<cc:loop type="maintopic" obj="mymaintopic">
<cc:if cond="&mymaintopic.topiccount gt 0">
<cc:loop type="topic" obj="mytopic" maintopic="&mymaintopic.number">
<cc:if cond="&mytopic.subtopiccount gt 0">
<div id="subtopicmenu<cc:print value="&mymaintopic.number"><cc:print value="&mytopic.number">" class="menu">
<cc:loop type="subtopic" obj="mysubtopic" maintopic="&mymaintopic.number" topic="&mytopic.number">
<a class="menuItem" <cc:if cond="&mysubtopic.ispagesubtopic">style="font-weight:bold;"</cc:if> href="<cc:print value="&mysubtopic.url">" onmouseout="autoClose();"  onmouseover="clearTimeout(active);" ><cc:print value="&mysubtopic.caption"></a>
</cc:loop>
</div>
</cc:if>
</cc:loop>
</cc:if>
</cc:loop>

<div id="menuBar"><a class="menuButton" <cc:if cond="&page.ishome">style="font-weight:bold; color: <cc:print value="&usercolor.bright">;"</cc:if> href="<cc:print value="&home.url">"  onmouseout="autoClose();" onmouseover="menuTouch(event, '<cc:if cond="&mymaintopic.topiccount gt 0">topicmenu<cc:print value="&mymaintopic.number"></cc:if>');"><cc:print value="&site.ressource.home"></a><cc:loop type="maintopic" obj="mymaintopic"><a class="menuButton" <cc:if cond="&mymaintopic.ispagemaintopic">style="font-weight:bold;color: <cc:print value="&usercolor.bright">;"</cc:if> href="<cc:print value="&mymaintopic.url">" onmouseout="autoClose();" onmouseover="menuTouch(event, '<cc:if cond="&mymaintopic.topiccount gt 0">topicmenu<cc:print value="&mymaintopic.number"></cc:if>');"><cc:print value="&mymaintopic.caption"></a></cc:loop></div>

<div id="content">
<cc:print value="&site.htmlheader">
<cc:print value="&page.content.text">

<br />
<br />

</div>

<cc:if cond="&sidebar.count gt 0">
<div id="sidebar">
<cc:loop type="sidebar" obj="mysidebar">
<cc:if cond="&mysidebar.caption">
<h2><cc:print value="&mysidebar.caption"></h2>
</cc:if>
<cc:print value="&mysidebar.text"><br/>
</cc:loop>
</div>
</cc:if>
<?php
if (!function_exists("ob_get_clean")) {
   function ob_get_clean() {
       $ob_contents = ob_get_contents();
       ob_end_clean();
       return $ob_contents;
   }
}
  $content=ob_get_clean();
  $content=str_replace('ä','&auml;',$content);
  $content=str_replace('Ä','&Auml;',$content);
  $content=str_replace('ö','&ouml;',$content);
  $content=str_replace('Ö','&Ouml;',$content);
  $content=str_replace('ü','&uuml;',$content);
  $content=str_replace('Ü','&Uuml;',$content);
  $content=str_replace('ß','&szlig;',$content);
  $content=str_replace(' & ',' &amp; ',$content);
  $content=str_replace("<br>","<br />",$content);
  $content=str_replace("php#","php#title",$content);
$content=str_replace('target="_blank"','',$content);

  echo $content;
?>
<div style="height: 200px"><br/></div>
<div style="clear both"></div>
<div id="footer">
      <p><a class="link" <cc:if

cond="&page.ishome">style="font-weight:bold;"</cc:if> href="<cc:print

value="&home.url">"><cc:print value="&site.ressource.home"></a><cc:loop

type="maintopic" obj="mymaintopic"> | <a class="link" <cc:if

cond="&mymaintopic.ispagemaintopic">style="font-weight:bold;"</cc:if>

href="<cc:print value="&mymaintopic.url">"><cc:print

value="&mymaintopic.caption"></a></cc:loop></p>
      <p>©<?php echo date(Y); ?> raul-blog.de | Designed by

<cc:print value="&site.metaauthor"></p>
   </div>  

</body>
</html>

Der Eintrag für den Footer steht ganz am Ende vor dem schließenden </body> Tag.

Hier der Code aus der Style.css:

Code:

#content {
    width: 530px;
    padding: 0px;
    margin: 0px;
    position: relative;
    top: 150px;
    left: 260px;
    z-index: 0;
}

#sidebar {
    position: absolute;
    top: 150px;
    left: 830px;
    width: 160px;
    padding: 0px;
    
}

#logo {
    width: 700px;
    height: 40px;
    padding: 0px;
    margin: 0px;
    position: absolute;
    top: 20px;
    left: 260px;
    font-size: 280%;
    font-variant : small-caps;
    color: <cc:print value="&usercolor.dark">;
}

#plaintext {
    position: absolute;
    top: 55px;
    left: 820px;
}

#plaintext a {
    color: #888888;
    text-decoration: none;
}


#eyecatcher {
    top: 20px;
    left: 20px;
    width: 200px;
    height: 500px;
    padding: 1px;
    border : 1px solid #000000;
    background-color: #888888;
    position: absolute;
    z-index: 5;
}

#common {
    top: 540px;
    left: 20px;
    width: 204px;
    position: absolute;
    padding-bottom: 20px;
    
}

#common a {
    color: <cc:print value="&usercolor.bright">;
    display: block;
    text-decoration: none;
    padding: 4px 0px 4px 15px;
    background : url(../images/<cc:print value="&pic.bullet.filename">) no-repeat 0px 3px;
    font-weight: bold;
    font-style: italic;
}

#common a:hover {
    color: #ffffff;
}


/* Menü */

#menuBar {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 101px;
    left: 260px;
    z-index: 20;
    height: 27px;
    overflow: hidden;
}

a.menuButton, a.menuButtonActive  {
    display: block;
    float: left;
    height: 17px;
    color: <cc:print value="&usercolor.alt.medium">;
    text-decoration: none;
    padding: 5px 6px 5px 6px;
    border-right: 1px solid #000000;
}

.menu {
    background: #0B0C0B url(../images/<cc:print value="&pic.menu.filename">) repeat-x top left;
    border: 1px solid #000000;
    padding: 0px;
    position: absolute;
    text-align: left;
    visibility: hidden;
    left:0px;
    top:0px;
    z-index: 10;
}

a.menuItem, a.menuItemActive {
    color: <cc:print value="&usercolor.alt.medium">;
    background-color: transparent;
    display: block;
    padding: 6px 16px 6px 16px;
    text-decoration: none;
    white-space: nowrap;
}

a.menuButtonActive, a.menuButton:hover {
  background-color: #000000;
  color: <cc:print value="&usercolor.bright">;
}

a.menuItem:hover, a.menuItemActive {
  background-color: #000000;
  color: <cc:print value="&usercolor.bright">;
}

form.search {
    padding: 0px;
    position: absolute;
    top: 30px;
    left: 820px;
}

form.search input {
    margin: 0px;
    vertical-align : middle;
}

input.search {
    border: #888888 1px solid;
    background : #ffffff url(../images/<cc:print value="&pic.fade.filename">) repeat-x;
    width: 160px;
    padding: 2px;
    margin: 0;
}


/* Footer*/
#footer {
   clear: both;
   width: 500px;
   padding: 10px 10px 10px 10px;
   background-color: #202020;
   font-size:0.9em;
   text-align:center;
}
#footer {
   \width: 510px;
   w\idth: 500px;
   position: absolute;
   left: 240px;
}
#footer a {
   text-decoration: none;
   font-weight : bold;
   color: <cc:print value="&usercolor.alt.medium">;
}
#footer a:hover {
   text-decoration: underline;
   color: <cc:print value="&usercolor.bright">;
}

Der Eintrag für den Footer steht ganz am Ende.

Ich hoffe Ihr könnt mir helfen.

Grüße

Raul ;)

prm · 5 Dezember 2008

Es ist mir jetzt etwas zu mühsam, durch deinen code zu steigen.
Vielleicht hilft dir das weiter: Footer immer unten anordnen

Absolute Positionierungen solltest du nur sehr gezielt einsetzen. Meist sind sie nicht erforderlich und lassen sich durch margin- oder float-Angaben ersetzen.

raul25 · 5 Dezember 2008

Hier nochmal nur der relevante Code für den Footer:

Code:

<div style="height: 200px"><br/></div> 
<div style="clear both"> 
<div id="footer"> 
      <p><a class="link" <cc:if 
 
cond="&page.ishome">style="font-weight:bold;"</cc:if> href="<cc:print 
 
value="&home.url">"><cc:print value="&site.ressource.home"></a><cc:loop 
 
type="maintopic" obj="mymaintopic"> | <a class="link" <cc:if 
 
cond="&mymaintopic.ispagemaintopic">style="font-weight:bold;"</cc:if> 
 
href="<cc:print value="&mymaintopic.url">"><cc:print 
 
value="&mymaintopic.caption"></a></cc:loop></p> 
      <p>©<?php echo date(Y); ?> raul-blog.de | Designed by 
 
<cc:print value="&site.metaauthor"></p> 
   </div>

Und hier die CSS-Angaben:

Code:

/* Footer*/ 
#footer { 
   clear: both;  
   width: 500px; 
   padding: 10px 10px 10px 10px; 
   background-color: #202020; 
   font-size:0.9em; 
   text-align:center; 
} 
#footer { 
   \width: 510px; 
   w\idth: 500px; 
   position: absolute; 
   left: 240px;  
} 
#footer a { 
   text-decoration: none; 
   font-weight : bold; 
   color: <cc:print value="&usercolor.alt.medium">; 
} 
#footer a:hover { 
   text-decoration: underline; 
   color: <cc:print value="&usercolor.bright">; 
}

Vielleicht kann sich jetzt jemand diesen Code ansehen, und so ändern, dass der Footer automatisch am Ende der Seite steht.

Vielen Dank

Efchen · 5 Dezember 2008

Der Code wäre übersichtlicher, wenn der fremde Code vom Template nicht drin wäre. Du hast doch ein Darstellungsproblem, warum postest Du also nicht entweder einen Link oder den fertig generierten Code?

neuroleptika · 5 Dezember 2008

raul25 schrieb:
Hier nochmal nur der relevante Code für den Footer:
...

Der Code reicht nicht.
Damit ein unten stehender, mitwachsender Footer funktioniert muß das ganze Gerüst stimmen.
Es gibt zwei bewährte Techniken:
FooterStick: siehe prms Link
Oder
FooterStickAlt: The Man in Blue > footerStickAlt: A more robust method of positioning a footer

Ersteres positioniert den footer mit position: absolut;. Die zweite Variante mit einem negativen margin-top.

Beide Techniken brauchen height: 100%; für html+body und eine Mindesthöhe für den gesamten Inhalt (bei footerStickAlt ohne #Footer).

@prm
Ich habe gerade gesehen, daß du auf deiner Seite auch den Begriff footerStickAlt erwähnt hast.
Es handelt sich bei deinem (gut beschriebenen) Beispiel aber um footerStick. Auf AlistApart habe ich es in ähnlicher Form als Exploring Footers gefunden.
A List Apart: Articles: Exploring Footers

prm · 5 Dezember 2008

Danke, hab's korrigiert.
Sind in der Tat zwei unterschiedliche Ansätze.

Footer richtig positionieren, aber wie ?

raul25

Neues Mitglied

prm

Aktives Mitglied

raul25

Neues Mitglied

Efchen

Guest

neuroleptika

Aktives Mitglied

prm

Aktives Mitglied

Neueste Beiträge