Ergebnis 1 bis 4 von 4

Thema: Footer verschiebt sich

  1. #1
    HTML Newbie
    Registriert seit
    03.11.2018
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Footer verschiebt sich

    Hey Leute,

    hab es durch die Flexbox nach einiger Zeit endlich geschafft den Footer immer am Seitenende zu platzieren, selbst bei einer Seite mit wenig Inhalt.
    Jedoch funktioniert das ganze jetzt nicht mehr bei einer Seite mit Sidebar und Inhalt. Habe die Sidebar und links daneben den Inhalt zusammen in den Wrapper gepackt und der Footer springt wieder nach oben. Wie muss ich den Wrapper platzieren, damit der Footer weiterhin am Ende erscheint, auch wenn die Seite nur wenig Inhalt enthält?
    Hier mal meine Codes:

    Code:
    <div class="wrapper">    
        <div class="vokabeln-content">
             
          
                <h1>Vokabeln</h1>
                <h2>Alphabet</h2> 
                <table>
                    <tr>
                         <th>Name</th>
                         <th>Isoliert</th>
                         <th>Anfang</th>
                         <th>Mitte</th>
                         <th>Ende</th>
                         <th>Aussprache</th>
                     </tr>
                     <tr>
                        <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                          <td></td>
                         <td></td>
                     </tr>
                  </table>
            </div>     
        
                
        <aside class="vokabeln-aside">
            
                
                <a href="#" id="Tiere">Tiere</a>
                <a href="#" id="Büro">Büro</a>
                <a href="#" id="Reisen">Reisen</a>
             
        </aside>
    </div>
    Und das habe ich im CSS:

    Code:
    body {
        background: url(Hintergrund.jpg);
        background-size: cover;
        width: 100%;
        display: flex;
        min-height: 100vh;
        margin: 0 auto;
        flex-direction: column;
    }
    
    .wrapper {
        position: relative;
        min-height: 100%;
        width: 960px;
        max-width: 90%;
        margin: 0 auto;
    }
    
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }
    
    .clearfix:after {
        clear: both;
    }
    .vokabeln-content,
    .vokabeln-aside {
        float: left;
        height: 100%;
        flex: 1 0 auto;
    }
    
    .vokabeln-content {
        width: 80%;
        margin-top: 205px;
        border-right: 1px solid black;
        margin-bottom: 80px;
    }
    
    .vokabeln-content h1 {
        text-align: center;
        font-size: 3em;   
    }
    
    .vokabeln-content h2 {
        padding-top: 30px;
        text-align: center;
        margin: 20px;
        font-size: 2em; 
    }
    
    
    .vokabeln-aside {
        width: 19%;
        top: 0;
        left: 0;
        margin-top: 180px;
    }
    
    .vokabeln-aside a {
    
        text-align: left;
        display: block; width: 88px; height: 21px;
        margin-top: 20px;
        margin-left: 20px;
        text-decoration: none;
        font-weight: bold;
        color: black;
        font-size: 1.8em;
    }
    Bin echt für jede Hilfe dankbar

    LG Lisa

  2. #2
    Fortgeschrittene/r
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    187
    Danke
    0
    Bekam 28 mal "Danke" in 28 Postings

    Standard AW: Footer verschiebt sich

    wo ist den der Footer genau ? Flexbox ist eigentlich dazu da um auf position und float zu verzichten.Dein Wg den body und wrapper ein min-height von 100vh(100%) zu geben ,zwingt den footer auch unten zu bleiben,aber das sollte man eigentlich anders machen.
    Flexbox bietet da auch bessere möglichkeiten dein Layout umzusetzen.

    Vieleicht kuckst du hier nochmal rein das könnte dir helfen
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    Geändert von basti1012 (04.11.2018 um 04:14 Uhr)
    Mein soforthilfe Forum und Chat

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    03.11.2018
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Footer verschiebt sich

    Vielen Dank für den Link, allerdings haben mein body und wrapper schon ein min height von 100%. Auf meiner Seite "Kontakt" mit wenig Inhalt funktioniert alles wunderbar, der footer ist ganz unten. Doch bei dieser Seite mit Tabelle und Sidebar schiebt er sich unter das letzte Element und steht in der Bildschirmmitte.
    Wenn ich das float left bei content und aside weglasse, schiebt sich der aside Text unter den content, anstatt rechts nebendran als Sidebar.

    Das ist mein footer:

    Code:
    #footer {
        z-index: 0;
        overflow: hidden;
        flex: none;
        width: 100%;
        height: 80px;
        background-color: black;
    }
    
    #footer a {
        float: left;
        text-align: center;
        display: block; width: 80px; height: 18px;
        margin-right: 12px;
        margin-top: 10px;
        text-decoration: none;
        font-weight: bold;
        color: gold;
        font-size: 0,5em;
    }

  4. #4
    Fortgeschrittene/r
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    187
    Danke
    0
    Bekam 28 mal "Danke" in 28 Postings

    Standard AW: Footer verschiebt sich

    kannst du mal link zur Seite posten ?
    Mein soforthilfe Forum und Chat

Ähnliche Themen

  1. Footer-Text befindet sich "unter" dem Footer (mit Screenshot)
    Von Janina94 im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 15.05.2018, 10:04
  2. Footer verschiebt sich
    Von micronix im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 27.08.2010, 10:25
  3. Text verschiebt sich
    Von Reyes im Forum HTML & CSS Forum
    Antworten: 33
    Letzter Beitrag: 13.07.2009, 21:50
  4. CSS Verschiebt sich
    Von xisax im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 27.05.2009, 12:26
  5. IE - verschiebt sich alles
    Von Html-Neuling im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 13.08.2005, 20:56

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •