1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

Hilfe Footer

  • Atila
  • 18. März 2015 um 22:03
  • Atila
    Anfänger
    Beiträge
    5
    • 18. März 2015 um 22:03
    • #1

    Hallo Leute brauche dringend HLFE
    Wie krieg ich den footer (Fuss bei css) o das er immer am Boden ist? Natürlich soll er mit dem Textcontainer mitwachsen
    Wahrscheinlich sehr einfach aber bitte schaut euch das mal an

    #Main {
    position:absolute;
    width:100%;
    height:1324px;
    z-index:1;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    }
    #Kopf {
    position: absolute;
    height:200px;
    z-index:1;
    background-color: #1C548D;
    width: 100%;
    left: 0px;
    top: 0px;
    }
    #Kopf2 {
    position:absolute;
    width:100%;
    height:30px;
    z-index:3;
    left: 0px;
    top: 200px;
    background-color: #62A0DF;
    }
    #text {
    position: relative;
    width:670px;
    top: 220px;
    right: 0%;
    margin:auto;
    border-top: solid 20px #fff;
    background-color:#fff;
    vertical-align:top;
    height:auto;
    padding-top: 0px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right:30px;
    letter-spacing:0px;
    color:#000;
    font-size: 85%;
    line-height: 22px;
    font-family: tahoma, verdana, arial, helvetica, verdana, tahoma, sans-serif;
    background-image:url(images/fv1.jpg);
    background-repeat:repeat-x;
    background-position: 0% 0%;
    page-break-before: always;
    text-align: left;
    overflow: visible;
    z-index: 1;
    }
    #Fuss {
    position:absolute;
    width:100%;
    height:115px;
    z-index:2;
    background-color: #1C548D;
    bottom: 0%;
    left: 0px;
    }

    und hier noch der HTML Code

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Test</title>

    <link rel="stylesheet" href="format.css" type="text/css"/>
    <link rel="stylesheet" href="menue.css" type="text/css"/>

    </head>
    <body>
    <div id="Kopf">
    </div>
    <div id="Fuss"></div>

    <div id="Kopf2"></div>
    <div id="text">
    Text hier rein
    </div>
    </body>
    </html>


    DANKE DANKE

  • MrMurphy
    Profi
    Reaktionen
    3
    Beiträge
    639
    • 18. März 2015 um 22:31
    • #2

    Hallo,

    du suchst "Sticky Footer".

    Zudem solltest du dir angewöhnen auf "position: absolute" zu verzichten.

    Gruss

    MrMurphy

  • synaptic
    Forum Guru
    Reaktionen
    11
    Beiträge
    10.917
    • 19. März 2015 um 08:01
    • #3

    ich würd eher empfehlen den konkreten umgang damit zu erlernen, als die nutzung nicht zu empfehlen!

  • Bieni
    Anfänger
    Beiträge
    2
    • 30. März 2015 um 19:57
    • #4

    versuch mal im html code diese reihenfolge:

    Text hier rein


    und nimm bei #text die höhe raus :)

    - - - Aktualisiert - - -

    versuch mal im html code diese reihenfolge:

    Text hier rein


    und nimm bei #text die höhe raus :)

  • Gastl
    Kaiserliche Hoheit
    Reaktionen
    3
    Beiträge
    1.464
    • 30. März 2015 um 20:00
    • #5

    einzige Lösung ist:

    Zitat

    position: fixed;

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  • Bieni
    Anfänger
    Beiträge
    2
    • 30. März 2015 um 20:08
    • #6

    tu das text-div in das fuss-div und nimm bei #text die höhe raus :) und am besten den text in ein p element setzen

  • djheke
    Meister(in)
    Beiträge
    491
    • 31. März 2015 um 12:56
    • #7

    Guck mal hier. ist eine weitere Variante des Sticky Footer.
    http://www.gipspferd.de/css/anleitung/…unten/index.php

Tags

  • hilfe
  • html
  • link
  • color
  • background
  • body
  • jpg
  • format
  • auto
  • bot
  • bottom
  • div
  • position
  • font
  • border
  • utf-8
  • css
  • image
  • repeat
  • container
  • visible
  • align
  • overflow
  • z-index
  • padding
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche