Fußzeile unten an Browser heften

DiiDii · 16. Juni 2010

Also ich habe folgendes Problem:

Ich möchte meine Website in die länge ziehen. In dem Bild sieht man es am besten:

[Blockierte Grafik: http://s1.directupload.net/images/100615/qy3ibcdp.jpg]

Leider weiß ich nicht wie ich dass machen muss weil ich HTML und CSS erst seit wenigen Tagen hier auf der Seite gelernt habe =)

Mfg DiiDii

Basi · 16. Juni 2010

Soll der Inhalt mitwachsen oder soll nur die Fußzeile unten sein?

Nur Fußzeile unten:

Code

div#footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 50px;
   background-color: pink;
   border-top: 1px solid lightred;
}

Code

<!-- Inhalt --> 
      <div id="footer"><!-- Inhalt --></div>
   <!-- Inhalt -->

Edit:

Habe mich verlesen, soll nachrücken, da weiß ich gerade nicht wie das heißt aber NeoAramis kann dir da auf jeden Fall weiterhelfen.

DiiDii · 16. Juni 2010

Zitat von "Basiii"
Soll der Inhalt mitwachsen oder soll nur die Fußzeile unten sein?

Nur Fußzeile unten:
Code
div#footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 50px;
   background-color: pink;
   border-top: 1px solid lightred;
}
Code
 
      <div id="footer"></div>
   
Edit:

Habe mich verlesen, soll nachrücken, da weiß ich gerade nicht wie das heißt aber NeoAramis kann dir da auf jeden Fall weiterhelfen.
Alles anzeigen

Danke schonmal =)

Also das "herzlich willkommen" usw. soll schon da oben bleiben, nur der hell-graue teil soll bis zur fußzeile nach unten nachrücken... die fußzeile soll dann unten an den browser "festgenagelt" werden...

Allerdings wenn ich jetzt den code von dir noch nemme kommt das hier raus:
[/img]

Das Ergebnis soll nacher so sein: (bearbeitet)

[/img]

lauras · 16. Juni 2010

Such mal nach "Footer Stick" bzw. "Footer Stick Alt". Nehme an dass du das meinst, ist aber schwierig in einem Beitrag zu erklären..

Basi · 16. Juni 2010

Genau das meinte ich, Footer Stick, danke Laura

Das brauche ich zwar nie aber egal^^

DiiDii · 16. Juni 2010

Also Footer Stick hab ich schon probiert, aber ich kapier das leider nichit... ich hab mehrere Seiten durchgelesen aber iwie will das nicht funktionieren... kann mir einer erklären (ggf. mit code) wie das funktioniert? Wäre sehr nett

lauras · 16. Juni 2010

Ich habe damals dieses kleine Tut gelesen, dort ist auch Code dabei:

http://www.themaninblue.com/writing/perspective/2005/08/29/

NeoAramis · 16. Juni 2010

Ich habe folgendes Tutorial verwendet. War bisher das Beste das ich gefunden habe. Wie man nachher den Footer Stick zentriert (aus Deinem Layout ersichtlich), kann ich Dir auch gerne erklären, wenn du es nicht selber hinkriegst :wink:

<a class="postlink" href="http://ryanfait.com/resources/footer-stick-to-bottom-of-page/">http://ryanfait.com/resources/footer-st ... m-of-page/</a>

DiiDii · 16. Juni 2010

mmhh bei mir will dass nicht... kann mir einer sagen, was ich genau machen muss? Also wo muss "height:100%" überall hin? Evtl. Falls es nichts ausmacht, könntet ihr es ja einmal erklären, indem ihr alles bei mir einfügt (erst aber wenn ichs gar nicht kapiere weil ich wills verstehen )...
Vielen Dank schonmal für eure antworten =)

lauras · 16. Juni 2010

In dem Tut was ich dir geposted habe steht doch der Code drin?

DiiDii · 16. Juni 2010

Zitat von "lauras"

In dem Tut was ich dir geposted habe steht doch der Code drin?

Ja schon, aber das Problem ist, ich weiß nicht was bei mir der "nonfooter" ist und wo das hinkommt in der HTML datei...
Sry aber ich versteh das nicht :oops:

lauras · 16. Juni 2010

Lies dir mal den Text dazu durch, steht eigentlich alles drin..

DiiDii · 17. Juni 2010

Also manchmal kann sich ein Mensch dumm anstellen oder? xDD
Naja ich bin gerade das beste beispiel gewesen
Danke lauras =) Ich habs geschafft die Fußzeile nach unten zu versetzen...

Soweit so gut... Jetzt fehlt mir nur noch eins... das mittelstück (hellgrau) soll bis zur fußzeile nach unten rutschen... ich werds mal versuchen bin aber nicht sicher ob ichs schaffe...

€dit: nach langem herumprobieren hab ichs leider noch nicht geschafft... brauche mal wieder eure hilfe =)

Nächstes Problem: Beim FIrefox wird die Fußzeile nicht angezeigt und mein Datum/Uhrzeit wird nicht in der Mitte angezeigt... um zu verstehen was ich meine --> <a class="postlink" href="http://zocker006.zo.funpic.de/">http://zocker006.zo.funpic.de/</a>

lauras · 17. Juni 2010

Grundsätzliche Empfehlung: Datum, Uhrzeit und Counter raus. Braucht eigentlich niemand, so gut wie jeder Mensch hat an seinem PC ne Uhr und das Datum. Wenn doch, dann in normaler Schrift in den Kopfbereich oder so.. Und ein Counter ist finde ich immer überflüssig, speziell in dieser grafischen Form.

Wenn du da den Footer-Stick von meinem Beispiel anwenden wolltest, hast du es falsch gemacht, schau nochmal in den Code. Angezeigt wird die Fußzeile bei mir, nur halt nicht unten.

LG
Laura

DiiDii · 17. Juni 2010

Also so sieht es gerade aus:

[Blockierte Grafik: http://s10.directupload.net/images/100617/temp/2ah64272.jpg]

wie bekomme ich jetzt den mittleren teil runter? ich habe es mit dem code von deiner seite versucht aber damit ging es nicht... was genau muss ich ändern?

hier nochmal der CSS Code:

Code

html, body
{
font-family: sans-serif ;
color: black;
text-align: center;
background-color:black;
height:100%;
margin: 0;
padding: 0;




}
h1 {
    text-align:center;
    border-bottom-style: dotted;
    border-width:4px;
    border-color:#4C4C4C;




}







h4 {
    background-color:#999999
}










#seitenbereich {
  width: 1000px;
  background-color:#333333;
  text-align:left;
  margin: 0 auto;
  height:100%;
  position: relative;
  min-height: 100%;
  height: auto
}










#middle {
  margin: 0 200px 0 13em;
  background-color:#999999;
  text-align:center;










}




#infokasten {
  float:right;
  width: 12em;
  background-color:#333333;
  text-align:center;




}




#fusszeile, {
    clear: both;
    background-color:#999999;
    border-top:2px solid black;
    text-align:center;
    height:25px;
    margin-top: -25px;
    position: absolute;
    width: 100%;
    bottom: 0;




}







#navi {
   float:left;
   width:200px;
   text-align:left;
   margin-top:10px;
   margin-bottom:10px;




 }




 #navi ul {
   list-style:none;
 }




 #navi li {
   background-color:#999999;       /* Hintergrundfarbe   */
   border-top:1px black solid;    /* Rahmenfarbe Auflistungpunkt oben */
   border-left:25px orange solid; /* Rahmenfarbe Auflistungpunkt oben */
   border-bottom:1px red solid;   /* Rahmenfarbe unten  */
   border-right:2px blue solid;   /* Rahmenfarbe unten  */
   margin-top:10px;
   padding-top:8px;
   padding-bottom:8px;
   padding-left:8px;
   padding-right:8px;
 }







#kopfzeile {
    height: 200px;
    width: 1000px;




}










#navi a:link    { color:blue;   text-decoration:none; }
#navi a:visited { color:black;  text-decoration: none; }
#navi a:focus   { color:green;  text-decoration:overline; }
#navi a:hover   { color:red;    text-decoration:none; }
#navi a:active  { color:orange; text-decoration:underline; }

Alles anzeigen

Und der Quellcode:

HTML

<!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" xml:lang="de" lang="de">




<head>
    <title>Zocker 06 - Startseite</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />




    <link href="style.css" type="text/css" rel="stylesheet" />
</head>




<body>







<div id="seitenbereich">




    <div id="kopfzeile">
        <img src="kopfzeile.jpg" />
    </div>










    <div id="navi">




                        <ul>
                            <li><a href="index.html">Startseite</a></li>
                            <li><a href="gruendung.html">Die Gr&uuml;ndung</a></li>
                            <li><a href="mannschaft.html">Die Mannschaft</a></li>
                            <li><a href="fans.html">Unsere Fans</a></li>
                            <li><a href="turnier.html">Das Turnier</a></li>
                            <li><a href="statistiken.html">Statistiken</a></li>
                            <li><a href="links.html">Links</a></li>
                            <li><a href="kontakt.html">Kontakt</a></li>
                            <li><a href="partner.html">Partner</a></li>
                        </ul>




    </div>




    <div id="infokasten">
                    <br /><h4>Unsere Sponsoren:</h4>




    </div>










    <div id="middle">
                    <h1>Zocker 06</h1>
                    <b>Herzlich Willkommen bei den Zockern aus Dahenfeld.<br />
                    Hier erfahren Sie alles &uuml;ber uns.  <br />
                    Viel Spa&szlig; =)</b>
    </div>







    <div id="fusszeile">
        Lob oder Kritik?













    </div>




</div>
</body>
</html>

Alles anzeigen

lauras · 17. Juni 2010

Du darfst den div#seitenbereich nicht mehr um den footer machen.. einfach nur den code von der site kopieren...

DiiDii · 17. Juni 2010

Ja kopieren ist leicht gesagt... ich muss ja auch wissen, was bei mir das "nonfooter" und "content" ist... und wenn ich den seitenbereich vor der fußzeile beende, ist die fußzeile breiter wie sonst und nach rechts versetzt...

lauras · 17. Juni 2010

nonfooter ist (wie der name schon sagt) alles das, was eben nicht footer ist. Damit kannst du prinzipiell machen was du willst. Und footer sit eben der footer. content ist das, wo du dan deinen inhalt reinschreibst.

DiiDii · 17. Juni 2010

sooo jetzt ist mir mal das mittelding egal... denn es gibt
ein noch größeres problem ... im firefox wird die fußzeilfarbe nicht angezeigt (siehe <a class="postlink" href="http://zocker006.zo.funpic.de/">http://zocker006.zo.funpic.de/</a> ). Wieso ist das so und wie kann man das ändern?

NeoAramis · 17. Juni 2010

Also so eine Sache ist das nicht, hättest Du mein Tutorial genommen, hättest du keine Schwierigkeiten gehabt.

Habe Dir einmal das Grundlayout zusammengestellt:

index.html

HTML

<!doctype html>
<html>
<head>
<title>[title]</title>
<meta charset="utf-8">
<meta name="content-language" content="de" />
<link href="core.css" type="text/css" rel="stylesheet" /> 
</head>
<body>
<div id="wrapper">
	<div id="page_margin">
		<!-- no content -->
	</div>
    <div class="push"><!-- no content --></div>
</div>
<div id="footer">
	<!-- no content -->
</div>                                                                                                                         
</body>
</html>

Alles anzeigen

core.css

CSS

/*	style.css */
/*	----------------------------------- */
	* {
		padding: 0;
		margin: 0;	
	}

	/*	Footer Stick */
		html, body {
			height: 100%;
		}

		#wrapper {
			min-height: 100%;
			height: auto !important;
			height: 100%;
			margin: 0 auto -4em;	
		}

		#footer, .push {
			height: 4em;
			clear: both;	
		}

	/*	Zentrierung Layout */
		body {
			text-align: center;
			min-width: 55.1em;	
		}

		#wrapper {
			width: 55em;
			text-align: left;	
		}

	/*	Layout */
		body {
			background-color: #ccc;
		}

		#wrapper {
			background-color: #fff;	
		}

Alles anzeigen

Fußzeile unten an Browser heften

Jetzt mitmachen!

Teilen