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

Sticky Footer - schon wieder...

V

Verzweiflung

Neues Mitglied
Hallöchen folks. Ich hoffe sehr, ihr könnt einem verwirrtem und verzweifeltem Geschöpf wie mir helfen. :sad: Ich sage jedem, der es versucht, schon mal danke.

Es geht um einen Footer...
Was ich will: (html, css) ein footer, welcher IMMER am untersten Rand klebt. Heißt, wenn der Text kurz ist, soller am unteren Bildschirmrand kleben - wenn der Text aber lang ist, einfach unterm Text sein und die Seite dann "abschließen" (nichts mehr darunter).

Ich bin kein Html-Profi und mogle mich wahrscheinlich mit unschönem Coding durch meine Homepages....aber bisher habe ich immer einen Weg gefunden, sei es auch ein unschöner. Na ja. Bis jetzt

Ich habe geschlagene FÜNF footer-Vorschläge von irgendwelchen Seiten und Foren ausprobiert. Die waren alle recht gleich, aber immer mit winzigen veränderten Kleinigkeiten. Leider hats nix geholfen...und schlimmer noch: Ich hab total den Überblick verloren und, glaub ich, sogar den Code vermurkst. *seufzt* Das, was jetzt als letztes steht, ist daher wahrscheinlich recht unschön...

Im Moment siehts so aus: Der Footer klebt am unteren Bildschirmrand. Sieht schön aus bei kurzen Texten, bei langen Texten fließen diese aber UNTER dem Footer durch und wenn man scrollt, scrollt der Footer mit hoch. Also nix vonwegen sticky.

Jetzt zum gräuslichen Html-Code ... (und bitte bitte keine Kommentare wie: "lern erstmal css und dann komm wieder!" ich will einfach nur wissen, was FOOTER-BEDINGT falsch ist und geändert werden muss... *in der Lernphase*)


Das Zeug, was iiiirgendeinem sticky footer-Dingens entstammt:
HTML: 
html, body {
    height: 100%;
}
body {
    margin: 0; padding: 0;
}

#wrapper {min-height: 100%; position: relative; padding-bottom:81px}

* html #wrapper {height: 100%;}

#main {margin-bottom: 81px; float: left;}
Footer-css:
HTML: 
    #footer {
        background-image: url('images/footer.jpg');
        background-repeat: repeat-x;

                width:100%;
                position: absolute;
                bottom: 0;
                left: 0;

        font-family: courier new;
        font-size: 10px;
        line-height:11px;
        text-transform: uppercase;
        color:#ffffff;
}
Body:
HTML: 
<div id="wrapper">
<div id="main">

 <div id="layout">

    <div id="me">
    mini-text
    </div>

      <?php include('affis.php'); ?>

        <div id="counter">
        counter
        </div>

         <div id="menu1">inhalt</div>

        <div id="content">
        inhalt
        </div>


 </div>
</div>
</div>

<br style="clear: both;" />

   <div id="footer" align="center"><br>
    
   <table border="0" width="370">
   tabelle
   </table>

   </div>
</div>
ich weiß, "<br style="clear: both;" />" ist eigentlich unschön, aber das stand so in dem letzten sticky footer-Text und ich wollts einfach mal haargenau so machen wie im beschriebenen Text...

Ich sitze jetzt schon stundenlang daran. Falls man noch mehr zur Hilfe benötigt, wie die css-Sachen für die anderen divs, dann bitte Bescheid geben. :(

MFG,
Verzweiflung
 
Heyho! Erstmal danke - aber leider hat sich kaum etwas geändert. Eigentlich hat sich jetzt nur der Inhalt des Footers nach links bewegt - obwohl ichs als "center" deklariert hab, komisch...
Footer hängt noch immer am Bildschirmende, wenn man scrollt geht auch nach oben und der Text geht durch... Hier meine Änderungen:

CSS:
HTML: 
* {
margin: 0;
pading: 0;
}

html, body {
height: 100%;
}

#wrapper {
position: relative;
min-height: 100%;
}

* html #wrapper {
height: 100%;
} 

#main {
padding:0 0 81px 0;
}


#footer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
Nochmal footer:
HTML: 
    #footer {
        background-image: url('images/footer.jpg');
        background-repeat: repeat-x;

        font-family: courier new;
        font-size: 10px;
        line-height:11px;
        text-transform: uppercase;
        color:#ffffff;
}
body:
HTML: 
<div id="wrapper">
<div id="main">

 <div id="layout">

    <div id="me">
     mini-text
    </div>

      <?php include('affis.php'); ?>

        <div id="counter">
        counter
        </div>

         <div id="menu1">menublabla</div>

        <div id="content">
        </div>


 </div>

   <div id="footer" align="center"><br>
    

   <table border="0" width="370">
   Ne kleine Tabelle
   </table>


   </div>

</div>
</div>
Und jetzt? :(
Nochmal vielen lieben Dank für dein Ohr!
 
Des Rätsels Lösungs ist ganz leicht. Setze deinen "footer-div" unter deinen "wrapper-div".:D

HTML: 
<div id="wrapper">
   ...
</div>
<div id="footer">
   ...
</div>
 
Irgendwie will sich und will sich nichts ändern :(
Der Footer hat sich kein Stück gerührt, body sieht jetzt wie folgt aus:

HTML: 
<div id="wrapper">
<div id="main">

 <div id="layout">

    <div id="me">
     mini-text
    </div>

      <?php include('affis.php'); ?>

        <div id="counter">
        counter
        </div>

         <div id="menu1">menublabla</div>

        <div id="content">
        </div>


 </div>

</div>
</div>

   <div id="footer" align="center"><br>
    

   <table border="0" width="370">
   Ne kleine Tabelle
   </table>


   </div>
"main" und "wrapper" enden nun VOR footer.
Hast du noch genügend Geduld mit mir und kannst dir das vielleicht nochmal ansehen? Ich weiß nicht, was falsch ist :sad:

Mfg,
Verzweiflung
 
Dein Problem ist folgendes:
Du hast sehr viele Elemente deiner HP absolut oder relativ positioniert (z.B. #layout, #layout #me usw).
Dadurch hat der Footer nicht den richtigen Bezugspunkt. Der muss nämlich der #wrapper sein.

Verzichte deshalb innerhalb des #wrapper (außer dem #footer) auf sämtliche absoluten oder relativen Positionierungen.
Verwende stattdessen ausschließlich margin und/oder float.

Der #footer muss dann eingefügt werden, bevor der #wrapper geschlossen wird.
Außerdem solltest du dem #footer vorsichtshalber noch ein
Code: 
clear: both;
spendieren.

Reduziere außerdem deine vielen divs.
Für die Navi nimmt man eine ul-Liste. Es ist weder erforderlich noch richtig, für jeden Einzellink einen div zu verwenden.

Wenn du das alles korrekt gemacht hast, sollte es funktionieren.
 
Hallo nochmal und vielen Dank für deine Mühen!
Ich habe jetzt alles bearbeitet - bis auf das Menü. Ich würde gerne eine ul-Liste machen, aber kann ich damit auch irgendwie die Größe der Spalten und Zeilen zwischen den Links bestimmen? Da meine vier Links ganz genau auf dem Punkt sein müssen, wo sie jetzt sind.

Bisher hat sich der Footer noch nicht bewegt (auch als ich die css-Sachen von den menues kurz mal gelöscht hatte nicht). Glaubst du, das könnte an den vielen divs liegen?

Stimmt alles soweit?

Nochmal vielen lieben Dank für dein Ohr!

Edit: Oh, hab das mit ul selbst gefunden, ich probier das kurz und meld mich dann nochmal!
 
Zuletzt bearbeitet:
@ prm
Wieso muss der footer-div eingefügt werden, bevor der wrapper-div geschlossen wird? Ich habs unter/nach dem wrapper-div eingefügt und es funktioniert perfekt! oO
 
So, ich hab jetzt aaaalles bearbeitet - es gibt kein position-Zeugs mehr zwischen dem wrapper und footer! Allerdings hat sich der footer immer noch kein Stück bewegt... :( falls mal jemand von euch drüber gucken will... wär ich sehr dankbar.
 
Na Mensch, das kann doch gar nich sein. :D

Ich könnte jetzt mal drüber gucken, wenn du willst. Bräuchte ich nur mal deinen ganzen Code irgendwie. :)

EDIT:
Ah, habe gerade gesehen, dass du ja deinen Link gepostet hast. :) Ich guck mal. Vielleicht kann ich dir helfen. :)
 
Zuletzt bearbeitet:
Schon mal vielen Dank! Bin gespannt, ob was bei rauskommt. Wie gesagt, ich habe fünf, mit dem letzten sogar sechs verschiedene Methoden ausprobiert :shock: und irgendwie wills nicht. Am Ende ist es bestimmt irgend so eine ganz doofe Kleinigkeit... na, ich hoffe, ihr könnt mir helfen. :oops: Danke für alle eure Mühen.
 
Ist vielleicht nicht die schönste Variante, aber bei deinem Code (das ist nicht böse gemeint) isses wohl sowieso egal. :)

1. Das "layout"-div nimmst du ganz raus. (Dementsprechend nicht vergessen im CSS die ganzen #layout rauszunehmen. :) )

2. Dann kommt das unter deinen "content"-div.

HTML: 
<div class="clear"></div>

3. Und das in dein CSS.

Code: 
.clear {clear:both;}

Also, das sollte jetzt gehen, habe schließlich direkt das HTML und CSS von deiner Seite als Grundlage genommen und bearbeitet. :D
 
Heyho! Na, wenn das bei dir funktionieren sollte, dann wird das sicher auch bei mir funktionieren! Super, vielen dank!! Und ich weiß, meine Layouts sind meistens mit unschönen Codes zusammengemogelt, die dann doch irgendwie funktionieren, haha :D

Bevor ich mich aber an die Veränderung mache, hätte ich eine Frage:
Wenn ich das layout-div rausmachen soll, brauche ich ja irgendetwas anderes das das trägt:

HTML: 
        background-image: url('images/bg_header.jpg');
        background-position:left top; 
        background-repeat: no-repeat;

        left: 0px;
        top: 0px;
        height:534px;
        width:900px;

Sont habe ich mein Design-Bild nicht mehr o.o sondern nur den Pünktchen-Hintergrund und den Footer. Hättest du eine Idee, wie oder wo ich das sonst einbauen kann?
 
Ah, na Mist, du hast da ja noch ein Hintergrundbild. Ich werde noch wahnsinnig. :D (Hab ich offline übersehen, sry.)

Also, neue Variante.

Lass das "layout"-div drin. Aber so. (Dabei kommts allerdings hauptsächlcih darauf an, dass die Höhe variabel (auto) und kein float vorhanden ist.)

Code: 
#layout {
    background-image: url("http://www.html.de/images/bg_header.jpg");
    background-position: left top;
    background-repeat: no-repeat;
    color: #454545;
    display: block;
    font-family: arial;
    font-size: 11px;
    left: 0;
    letter-spacing: 0;
    text-align: left;
    width: 900px;
    height:auto;
}

Und dann halt wie gesagt noch ins CSS:
Code: 
.clear {clear:both;}

Und unter den "content"-div (aber innerhalb "layout"-divs):

HTML: 
<div class="clear"></div>
 
Zuletzt bearbeitet:
Hihi, ja, ich bin schwierig :( auf jedenfall will mein Layoutbild so gar nicht - ist einfach verschwunden - und der Footer rührt sich auch kein Stück... ist zum Verzweifeln.

Ich hab die neue bildlose-Variante trotzdem mal online gelassen, damit du das auch sehen kannst :( (hab aber ein backup von der vorherigen Version)

Edit: WARTE. Ich hab vergessen, den footer neu hochzuladen, haha! Einen Moment, ich meld mich gleich wieder....

Edit2: Willst du mich heiraten? :D :D :D :D
VIELEN LIEBEN DANK! Es scheint zu klappen!!!
 
Na endlich! High five! :D

Freut mich, dass ich dir doch noch helfen konnte.
Aber ür 'ne Hochzeit isses noch 'n bissl früh oder meinste nich? :D
 
Das war aber auch ne schwere Geburt :D Ich bin dir echt, echt dankbar :) !!

:D

(ich könnt alles mit fröhlichen Smileys zuspammen)

Ohne dich jetzt erschrecken zu wollen, weil ich noch eine Frage habe - ist auch nur ne KLITZEKLEINE und ich könnts auch anders lösen! (indem ich das footer.jpg in ein .gif umwandle und dem Ganzen einen kleinen oberen transparentem Teil gebe :P ) - aber hast du eine Idee, wie ich zwischen content-Ende und footer-Anfang gefahrlos eine Freizeile eingebe? Damits nicht einfach platt zusammenhängt. Ist auch meine letzte Frage, dann hab ich hier im Forum genug herumgezweifelt :D und wie gesagt: dankedankedankedanke
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben