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

Footer Bottom position (immer unten positionieren)

Y

ypso

Neues Mitglied
Hallo liebe Leute,

ich habe mich hier angemeldet weil ich echt nicht mehr weiter weiß, ich hoffe ihr könnt mir bei meinem Problem helfen.

Es geht um eine Seite die ich gerade aufbaue. Dort positioiere ich einen Footer so (bzw. versuche es so zu positionieren=)) das er egal welche Auflösung der Betrachter hat immer unten am ViewPort positioniert wird. Egal wie groß der Content ist (der Inhalt der Seite) so soll auch der Footer immer unterhalb positioniert werden. Gibt es nur wenig Inhalt soll dennoch der Footer immer unten bleiben.

Ich poste zusätzlich mal den Quelltet mit:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>CRW</title>
<link rel="SHORTCUT ICON" HREF="/img/favico.ico">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">

<div id="cont1">
 <div id="cont1-logo">
  <img id="logo" src="img/logo.png" width="350" height="68" alt="" title="">
 </div>
 
  <div id="cont1-top">
  <ul id="nav">
   <li class="nav"><a href="#">Start</a></li>
   <li class="nav">|</li>
   <li class="nav"><a href="#">News</a></li>
   <li class="nav">|</li>
   <li class="nav"><a href="#">Kontakt</a></li>
   <li class="nav">|</li>
   <li class="nav"><a href="#">Community</a></li>
   <li class="nav">|</li>
   <li class="nav"><a href="#">History</a></li>
   <li class="nav">|</li>
   <li class="nav"><a href="#">Family Affairs</a></li>
   <li class="nav">|</li>
   <li class="nav"><a href="#">Media</a></li>
  </ul>
  
  <div class="clr">
  </div>
 </div>
 
 <div id="cont1-middle">
  <div id="cont1-content">
  <p>
  sads<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  </p>
  </div>
 </div>
 
 <div id="cont1-bottom">
  <a id="top" href="#logo">Go to Top</a>
 </div>
 
 <div id="cont1-bubbles">
 </div>
</div>

<!-- -->
<div id="footer">
 <div id="footer-left">
 </div>
  
 <div id="footer-middle">
 </div>
 
 <div id="footer-right">
 </div>
  
 <div class="clr">
 </div>
</div>
<!-- -->

</div>
</body>
</html>
Und hier die zugehörige CSS:

HTML: 
/*************** standart ***************/

* {
    padding:0px;
    margin:0px;
    }

html, body {
    height:100%;
    width:100%;
    margin:0px;
    background-color:#f5f5f5;
    }

img {
    border:none;
    outline:none;
    }

div.clr {
    width:0px;
    height:0px;
    clear:left;
    }

a {
    outline:none;
    }

a:link {
    color:#3bbffe;
    text-decoration:none;
    }
    
a:visited {
    color:#3bbffe;
    text-decoration:none;
    }
    
a:focus {
    color:#3bbffe;
    text-decoration:none;
    }
    
a:hover {
    color:#3bbffe;
    text-decoration:underline;
    }
    
a:active {
    color:#3bbffe;
    text-decoration:underline;
    }

    
/*************** body ***************/

div#wrapper {
    position:relative;
    padding-bottom:150px;
    background-image:url('img/bg.png');
    background-position:bottom;
    background-repeat:repeat-x;
    }

div#footer {
    position:absolute;
    width:100%;
    height:100%;
    height:375px;
    bottom:0px;
    }
    
div#footer-left {
    width:570px;
    height:375px;
    float:left;
    background-image:url('img/footer-left.png');
    }
    
div#footer-middle {
    position:absolute;
    height:375px;
    left:570px;
    right:450px;
    background-image:url('img/footer-middle.png');
    background-repeat:repeats-x;
    background-position:right;
    }

div#footer-right {
    width:450px;
    height:375px;
    float:right;
    background-image:url('img/footer-right.png');
    }
    
/*************** cont1 ***************/

div#cont1 {
    width:604px;
    margin:50px 100px;
    font-family:arial;
    font-size:12px;
    color:#595959;
    }

div#cont1-logo {
    width:350px;
    height:68px;
    margin-left:31px;
    }
    
div#cont1-top {
    width:604px;
    height:50px;
    background-image:url('img/cont1-top.png');
    color:#3bbffe;
    }

ul#nav {
    list-style-type:none;
    padding:15px 20px;
    }
    
li.nav {
    float:left;
    padding:5px 5px;
    }

div#cont1-middle {
    width:604px;
    background-image:url('img/cont1-bg.png');
    background-repeat:repeat-y;
    }

div#cont1-content {
    padding-left:20px;
    padding-right:15px;
    }

div#cont1-bottom {
    width:604px;
    height:50px;
    background-image:url('img/cont1-bottom.png');
    }

a#top {
    color:#3bbffe;
    position:absolute;
    margin-top:15px;
    margin-left:530px;
    }

div#cont1-bubbles {
    width:467px;
    height:50px;
    background-image:url('img/cont1-bubbles.png');
    }
 
Werbung:
sehr sehr sehr sehr ärgerlich -.-

vielen dank Philastan ich küss dir die füße =) hat funktioniert!
 
Werbung:
ich habe allerdings ein neues problem festgestellt:

dem footer habe ich nun "position:fixed;" verpasst allerdings liegt der footer jetzt als höchste eben selbst wenn z-index auf 0 gesetzt ist und das größte problem ist das der footer bei wenig inhalt nicht unter dem content (cont1) liegt.

beispielsweise wenn ich mit der maus den viewport verkleinere liegt der footer über dem content, er sollte aber imemr unter dem content bleiben.
 
Und du meinst das es besser aussieht wenn dein Content über dem Footer liegt? Oder wie darf ich das verstehen?

Kannst du einfach mal das Skizieren wie du es haben willst und hier hochladen? Ich weis grad nicht was du willst... ;)
 
Werbung:
tut mir leid aber es ist schwer zu erklären ich hätte doh ein paar screens direkt mit schicken sollen.

das ganze sieht so rihtig aus: ein kleiner abstand zwischen der skyline (footer) und dem content (content 1)
1.jpg

wenn ich aber den viewport verkleinere (ich ziehe das browser fenster mit der maus einfach kleiner) dann bekomm ich folgendes zu sehen:
2.jpg
deshalb möchte ich halt das zwischen dem content und dem footer eine art abstand besteht damit sich beide container nicht überlappen.
 
sauber=) hat funktioniert. ich möchte euch ja nicht nerven aber der ie bekommt dies irgendwie nicht hin. der css teil hat sich wie folgt geändert:

HTML: 
/*************** standart ***************/

* {
    padding:0px;
    margin:0px;
    }
    
/* ie6+ */
* html #wrapper {
    height: 100%;
    } 

html, body {
    height:100%;
    width:100%;
    margin:0px;
    background-color:#f5f5f5;
    }

img {
    border:none;
    outline:none;
    }

div.clr {
    width:0px;
    height:0px;
    clear:left;
    }

a {
    outline:none;
    }

a:link {
    color:#3bbffe;
    text-decoration:none;
    }
    
a:visited {
    color:#3bbffe;
    text-decoration:none;
    }
    
a:focus {
    color:#3bbffe;
    text-decoration:none;
    }
    
a:hover {
    color:#3bbffe;
    text-decoration:underline;
    }
    
a:active {
    color:#3bbffe;
    text-decoration:underline;
    }

    
/*************** body ***************/

div#wrapper {
    min-height: 100%;
    position:relative;
    background-image:url('img/bg-nix.png');
    background-position:bottom;
    background-repeat:repeat-x;
    }

div#footer {
    position:absolute;
    min-width:1024px;
    width:100%;
    height:375px;
    bottom:0px;
    }
    
div#footer-left {
    width:570px;
    height:375px;
    float:left;
    background-image:url('img/footer-left.png');
    }
    
div#footer-middle {
    position:absolute;
    height:375px;
    left:570px;
    right:450px;
    background-image:url('img/footer-middle.png');
    background-repeat:repeat-x;
    background-position:right;
    }

div#footer-right {
    width:450px;
    height:375px;
    float:right;
    background-image:url('img/footer-right.png');
    }
    
/*************** cont1 ***************/

div#cont1 {
    width:604px;
    font-family:arial;
    font-size:12px;
    color:#595959;
    padding:50px  0px 200px 75px;
    }

div#cont1-logo {
    width:350px;
    height:68px;
    margin-left:31px;
    }
    
div#cont1-top {
    width:604px;
    height:50px;
    background-image:url('img/cont1-top.png');
    color:#3bbffe;
    }

ul#nav {
    list-style-type:none;
    padding:15px 20px;
    }
    
li.nav {
    float:left;
    padding:5px 5px;
    }

div#cont1-middle {
    width:604px;
    background-image:url('img/cont1-bg.png');
    background-repeat:repeat-y;
    }

div#cont1-content {
    padding-left:20px;
    padding-right:15px;
    }

div#cont1-bottom {
    width:604px;
    height:50px;
    background-image:url('img/cont1-bottom.png');
    }

a#top {
    color:#3bbffe;
    position:absolute;
    margin-top:15px;
    margin-left:530px;
    }

div#cont1-bubbles {
    width:467px;
    height:50px;
    background-image:url('img/cont1-bubbles.png');
    }

hier fliegt der footer quer über die seite und liegt weiterhin auf dem content. getestet habe ich es mit dem ie7
 
Werbung:
Nimm mal diesen Doctype
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

und lass bei #middle-footer die absolute Positionierung weg.
Klappt aber damit immer noch nicht.
Vermutlich sind einige Divs nicht korrekt geschlossen
Ein Link zur Problemseite oder zumindest nochmal der neue HTML-Quelltext wäre hilfreich.

Edit:

Du musst noch den HTML-Teil etwas umstellen:
Code: 
<div id="footer">FOOTER
 <div id="footer-left">
 </div>
   <div id="footer-right">footer right
 </div>
 <div id="footer-middle">footer middle
 </div>
  
 <div class="clr">
 </div>
 
Zuletzt bearbeitet:
zu finden ist die seite hier: CRW
der doctype ist identisch mit dem der auch schon im dokument stand. das absolute habe ich noch stehen lassen da ich sonst noch ausprobieren müsste wie ich das richtig "rein float'e"

vielen vielen dank nochmals für die hilfe !!!
 
Werbung:
fast =)))) wenn du mir noch bei einer sache helfen könntest wäre ich top zufrieden !!!

es klappt jetzt und der footer ist auch beim ie7 da wo es sein soll. allerdings habe ich das absolute beim mittleren teil des footers entfernt doch wie mache ich es jetzt das er in der mitte bleibt und sich von rechts nach links vergrößert? die aktuellen daten liegen auf dem host. hier nochmals der link:

CRW
 
Code: 
div#footer-middle {
	height:375px;
	margin-left:570px;
	background-image:url('img/footer-middle.png');
	background-repeat:repeat-x;
	background-position:right;
	}

Ggf. dem #wrapper noch 100% width geben.
 
vielen lieben dank jaaa genau so wollte ich es haben :-* top ich werde dieses board aufjedenfall weiter empfehlen!
 
Werbung:
arrrrrrrggggg mir ist da eine sache noch aufgefallen die ich sonst mit position und z-index gelöst hatte. unzwar möchte ich den footer mittels z-index hinter den cont1 setzen weil er sonst über die links lappt. allerdings kann ich cont1 kein position:absolute verpassen da sonst alle elemente rum fliegen =( wie behebe ich das nun?
 
Werbung:
vielen dank das mache ich so neben bei wenn ich mal zeit und geduld auf der arbeit habe

edit---

da fällt mir gerade ein das ich gestern noch ein kleines problem hatte welches ich nicht bewältigen konnte. ich uss euh wieder um rat fragen...

1.jpg

unter cont1-bubbles und cont1-lineb1 soll ein div sich immer bis unten an den viewport strecken. hab es mit height und width auf 100% versucht aber das geht leider nicht. die linien so zu positionieren ist kein problem allerdings bekomm ich das div nicht bis nach unten gestreckt.

hier ein zweites bild um zu zeigen wie ich das meine mit dem gestreckten div:
2.jpg

ich werde dort mittels background-image die grafik laden die sich dann halt mit streckt und in diesem div plaziere ich den unteren teil wie auf bild 1 zu sehen ist mit den zwei schrecken etwas fetteren line's.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben