[CSS] Frage zum Footer und Boxes

Dieses Thema im Forum "Webdesign" wurde erstellt von Neightality, 24. März 2011 .

Schlagworte:
  1. 24. März 2011
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    Frage zum Footer und Boxes

    Hey,

    bin grad dabei css zu lernen, komme aber bei einigen sachen nicht weiter.
    das design ist hässlich - soll aber nur dem übungszweck dienen

    das sieht so aus:

    Screen1:
    page1w9et.jpg
    {img-src: //www.abload.de/thumb/page1w9et.jpg}


    Frage 1:
    Wie bekomme ich es hin, dass die drei Spalten automatisch bis zum Footer gehen?

    Frage 2:
    Zwischen der linken roten und der mittleren grünen Spalte ist ein schwarzer Strich.
    Wie bekomme ich den weg?

    Dann habe ich noch ein Problem. Verkleiner ich vertikal das Browserfenster, überlappen die drei Spalten meinen Footer (siehe Screen 2).

    Screen 2:
    page2pyop.jpg
    {img-src: //www.abload.de/thumb/page2pyop.jpg}


    Frage 3:
    Was muss ich coden, um das Überlappen zu verhindern bzw. das der Footer automatisch mit nach unten "scrollt"?

    HTML:
    <html>
    <head>
     <title></title>
     <style type="text/css">
     html, body { height: 100%; }
     
     body { margin: 0; padding: 0; }
     
     #container { min-height: 100%; width: 970px; border: 0px; background: orange; }
     * html #container {height: 100%;} /* IE Hack für 100 % Höhe */
     
     #header { float: left; height: 100px; width: 960px; border: 0px; background: blue; }
     
     #left { float: left; height: 400px; width: 250px; border: 0px; background: red; }
     
     #content { float: left; margin-bottom: 1.5em; height: 400px; width: 460px; border: 0px; background: green; }
     
     #right { float: left; height: 400px; width: 250px; border: 0px; background: red; }
     
     #footer { position: absolute; float: left; bottom: 0; height: 100px; width: 960px; border: 0px; background: blue; }
     </style>
    </head>
    <body>
     <div id="container"> 
     <div id="left">Links</div>
     <div id="content">Inhalt</div>
     <div id="right">Rechts</div>
     <div id="footer">Unten</div>
     </div>
    </body>
    </html>
    

    Vielen Dank

    Grüße
     
  2. 24. März 2011
    AW: Frage zum Footer und Boxes

    du kannst min-height verwenden und bei deinem footer postion: relativ ... dann werden die spalten je nach inhalt vergrößert und der footer nach unten verschoben ... um alle 3 gleich groß zu halten musst du javascript verwerden (mir ist nichts anderes bekannt)

    der schwarze strich ist bei mir nicht vorhanden wenn ich den quellcode bei mir teste ...
     
  3. 25. März 2011
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Frage zum Footer und Boxes

    WTF?
    Bild

    Und da ist nichts mit Javascript gemacht. Wie wäre es nochmal mit einem CSS Kurs? ^^


    @ TE du musst aber anders vorgehen wenn du die drei Div's auf gleicher höhe haben willst. Du setzt den Footer ins Div "container" mit rein aber auf absolute.
    Setzt du jetzt alle drei Divs auf die volle Höhe, verbirgt sich ein Stück hinter dem Footer.
    (Teil zwei deiner Frage 2 erklärt sich hiermit)

    Um das zu umgehen setzt du entweder den Footer aus dem Div "container" raus oder du setzt die drei Divs in ein neues Div und beschränkst die Höhe.


    Footer raus (saubere Variante):
    Dann hast du allerdings den Footer nicht mehr im sichtfeld, musst also runterscrollen. Ist aber machbar, dass man den Footer "hochschiebt". Ist mir nur jetzt auf die Zeit zu viel arbeit. ^^
    Spoiler
    HTML:
    <html> 
    <head>
     <title></title>
    
     <style type="text/css"> 
     
     html, body { height: 100%; } 
     body { margin: 0; padding: 0; } 
     
     #container { min-height: 100%; width: 970px; border: 0px; background: orange; } 
     * html #container {height: 100%;} 
     
     /* IE Hack für 100 % Höhe */ 
     #header { float: left; height: 100px; width: 960px; border: 0px; background: blue; } 
     
     
     #left { float: left; height: 100%; width: 250px; border: 0px; background: red; } 
     #content { float: left; margin-bottom: 1.5em; height: 100%; width: 460px; border: 0px; background: green; }
     #right { float: left; height: 100%; width: 250px; border: 0px; background: red; }
     #footer { position: relative; bottom: 0; height: 100px; width: 970px; border: 0px; background: blue; }
     
     </style>
    
     </head>
    
     <body> 
     
     
     <div id="container"> 
     
     
     <div id="left">Links</div> 
     <div id="content">Inhalt</div> 
     <div id="right">Rechts</div> 
     </div> 
     
     <div id="footer">Unten</div> 
     </body> 
     
     </html>
    


    Neues Div setzen und höhe beschränken (beim Einzoomen unsauber)

    Spoiler
    HTML:
    <html> 
    <head>
     <title></title>
    
     <style type="text/css"> 
     
     html, body { height: 100%; } 
     body { margin: 0; padding: 0; } 
     
     #container { min-height: 100%; width: 970px; border: 0px; background: orange; } 
     * html #container {height: 100%;} 
     
     /* IE Hack für 100 % Höhe */ 
     #header { float: left; height: 100px; width: 960px; border: 0px; background: blue; } 
     
     
     #left { float: left; height: 100%; width: 250px; border: 0px; background: red; } 
     #content { float: left; margin-bottom: 1.5em; height: 100%; width: 460px; border: 0px; background: green; }
     #right { float: left; height: 100%; width: 250px; border: 0px; background: red; }
     #footer { position: absolute; float: left; bottom: 0; height: 100px; width: 960px; border: 0px; background: blue; }
     #main {height:95%;}
     </style>
    
     </head>
    
     <body> 
     
     
     <div id="container"> 
     
     <div id="main">
     <div id="left">Links</div> 
     <div id="content">Inhalt</div> 
     <div id="right">Rechts</div> 
     </div>
     <div id="footer">Unten</div> 
     
     </div> 
     </body> 
     
     </html>
    
     
  4. 25. März 2011
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    AW: Frage zum Footer und Boxes

    lern lieber css3

    - kein float left/right
    - kein height 100% gewurschtel
    - in verbindung mit box-flex ohne probleme an viewport anpassbar.

    läuft in neuen safaris/chrome und in mozilla ab gecko 2.0

    opera und internet explorer ziehen sicher bald nach (zumindest opera, da display:box und box-flex vorallem in mobilen anwendungen sinnvoll ist)

    leider macht ms mit dem ie wieder ihr eigenes ding und implementieren css3 wie es ihnen gerade passt. schade eigl., obwohl die versprechungen einem echt hoffnungen gemacht haben.

    display:box

    HTML:
    <!DOCTYPE html>
    <html lang="de" dir="ltr">
     <head>
     <title>Spalten Layout mit CSS3</title>
     <style type="text/css">
     body {
     margin: 0;
     padding: 0;
     }
     
     #main {
     width: 980px;
     margin: 20px auto;
     }
     
     #header {
     padding: 1px;
     height: 100px;
     background: yellow;
     }
     
     #body {
     display: -moz-box;
     display: -webkit-box;
     display: -ms-box; /* pffft, geht (noch) nicht */
     display: -o-box; /* kommt sicher noch */
     display: box;
     }
     
     #left, #right {
     background: red;
     width: 180px;
     }
     
     #content {
     width: 620px;
     height: 400px;
     background: green;
     }
     
     #footer {
     padding: 1px;
     background: blue;
     }
     
     p {
     font-family: verdana;
     text-align: center;
     }
     </style>
     </head>
     <body>
     <div id="main">
     <div id="header">
     <p>Hallo Welt</p>
     </div>
     <div id="body">
     <div id="left">
     <p>Links</p>
     </div>
     <div id="content">
     <p>Mitte</p>
     </div>
     <div id="right">
     <p>Rechts</p>
     </div>
     </div>
     <div id="footer">
     <p>Copyright 2011 Murdoc @ RR =)</p>
     </div>
     </div>
     </body>
    </html>
    ergebnis:
    Bild
     
  5. 25. März 2011
    AW: Frage zum Footer und Boxes

    erstmal vielen vielen dank euch allen
    ihr habt mir sehr weitergeholfen.

    @murdoc
    hab nun auch einiges gelesen zu css3, vorallem die vorteile liegen auch deutlich auf der hand, nur würdest du eine webseite mit css3 coden, wenn die zukünftigen besucher eher "allerwelts-pc-user" sind, die nun eher hauptsächlich den ie benutzen?

    grüße
     
  6. 25. März 2011
    AW: Frage zum Footer und Boxes

    Der IE wird auch kurz über lang CSS3 implentieren. Da führt kein wirklicher Weg dran vorbei wenn man mit seinem Browser mithalten willt. Sollte der IE jedenfalls den Weg öffentlich einschlagen, dann lohnt es sich aufjedenfall.

    Man kann nicht mehr großartig auf die Benutzer rücksicht nehmen, die in der heutigen Zeit mit ihren alten Browsern rumgurken und nicht updaten. Natürlich kann man Browserweichen bauen, aber ob man da die Lust drauf hat ist die andere Frage.
    90% der Arbeit besteht dann sicherlich aus Debugging der verschiedenen IE Versionen.
     
  7. 26. März 2011
    AW: Frage zum Footer und Boxes

    klar kann ich die boxen alle gleichgroß machen manuell ... aber sobald ich die mit inhalt füll und dynamisch vergrößern lass ... d.h. box 1 ist zb die längste und die andern 2 kürzer dann ... dann muss ich doch javascript nutzen oder nicht?!
     
  8. 28. März 2011
    AW: Frage zum Footer und Boxes

    das kommt ganz auf dein design und deine umsetzung an. wenn du ein drei-spalten layout hast kann man probieren mit einem hintergrund zu arbeiten, ansonsten muss man wohl oder übel mit javascript nachhelfen wenn es in allen browsern gleich aussehen soll.
     
  9. 29. März 2011
    AW: Frage zum Footer und Boxes

    nicht zwangsläufig wenn ich das richtig verstehe willst du das deine box sich dem inhalt (text) anpasst? oder?

    bei mir hat dies hier funktioniert ...
    .box{
    margin-bottom: -32767px;
    padding:0px 0px 32767px 0px;
    }
    hab aber auch lange an dem problem gehangen ;-)
    greetz
     
  10. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.