Div ganz unten positionieren

toxicteri · 19.02.2014

Hallo! Hoffentlich kam die Frage nicht schon zu oft, ich hab versucht andere Tips zu verfolgen, aber nichts funktioniert.
Folgendes: Ich möchte gerne ein div ganz unten positionieren. Bei mir sieht das aber so aus:
(das Gras hier wiederholt sich horizontal)
Mein CSS sieht so aus, ich hab jetzt aus Verzweiflung mal überall die Werte 0 eingefügt...

Code:

html {
background: url(../images/hg.png);
margin: 0;
padding: 0;
height: 100%;
bottom: 0;
}  
    
body {font-color: #000000;
font-family:Georgia;
font-size: 11pt;
padding:0;
margin: 0;
bottom: 0;
height: 100%;
}

#grass {
height: 60px;
width: auto;
bottom: 0;
margin:0;
padding: 0;
background: url(../images/grashg.png) repeat-x;}

Das Div mit der id grass liegt im Body. Es gibt noch andere id-divs, die werden aber wohl kaum abhängig sein...?!
Herzlichen Dank!

owieortho · 19.02.2014

Vielleicht hilft Dir Stickyfooter weiter.

O.

Jormungand · 20.02.2014

Unter Umständen kannst du dein grashg.png auch als Hintergrundbild des body nehmen und unten ausrichten. Dann brauchst du auch keinen extra Container #grass.

afr0kalypse · 20.02.2014

owieortho schrieb:
Vielleicht hilft Dir Stickyfooter weiter.
O.

StickyFooter ist das was du benötigst, wenn du nicht willst, dass das Gras über dem Content lagert und nicht Teil des Hintergrundbildes sein soll.

toxicteri · 20.02.2014

Das mit Sticky Footer funktioniert nicht?! Hoffentlich könnt ihr mir helfen

Code:

html {
background: url(../images/hg.png);
margin: 0;
padding-top: 0;
padding-bottom: 0;
height: 100%;
bottom: 0;
} 
   
body {font-color: #000000;
font-family:Georgia;
font-size: 11pt;
padding-top: 0;
padding-bottom: 0;
margin: 0;
bottom: 0;
height: auto;
}
/*FOOTER*/

#wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 60px;}


#grass {
    position: relative;
    margin-top: -60px; /* Negativer Wert der Footer-HÃ¶he */
    height: 60px;
    clear:both;
background: url(../images/grashg.png) repeat-x;}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
/*FOOTER*/

#outside{
width: 800px;
height: 550px;
margin: 0 auto;
padding-top: 0;
padding-bottom: 0;
z-index: 1;
background-color: #ffffff;}

Code:

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="grass">

</div>

Außerdem habe ich noch eine Frage:

Ich habe hier ein div (#outside), folgender Code:

Code:

#outside{
width: 800px;
height: 550px;
margin: 0 auto;
z-index: 1;
background-color: #ffffff;}

Dieser Div soll aber unter dem Gras hinaus gehen - also nicht über dem Gras aufhören sondern das Gras soll über das Weiße "wachsen" - deshalb hatte ich das Gras auch in ein Div und nicht in den Hintergrund gegeben, weil ich dachte es sei dann möglich.
Danke euch allen

der-tim · 20.02.2014

Hallo,
gibt es einen Link zu der Seite, damit man sich das mal genau ansehen kann (wäre etwas leichter)? Ansonsten würde ich es mal mit folgender Formatierung für den Gras-div testen (sollte dann auch bewirken, dass er oberhalb der weißten Fläche liegt):

Code:

#grass {
        position: absolute;
//alternativ (würde ich bevorzugen - gerade beim Gras-Motiv): postion: fixed;
        width:100%;
        bottom:0px;
        background: url(PFAD) repeat-x;
        margin:0;
        padding:0;
        z-index:99;
}

Musst Du mal ausprobieren, ob das gewünschte Ergebnis erreicht werden kann, ansosnten wirklich gern mal den Link senden, dann kann man am richtigen Beispiel testen.

Viel Erfolg!

toxicteri · 20.02.2014

Danke, da fehlt mir dann aber leider der Code fürs div - Geht es überhaupt, das weiße div ganz bis nach unten gehen zu lassen, auch wenn der Inhalt nicht so weit geht?

Link: entfernt

EIGENTLICH soll das ganze so aussehen:

der-tim · 20.02.2014

Hey, hier mal mein Lösungsvorschlag:

HTML:

Code:

<body>
     <div id="outside">
          <div id="logo"> </div>
          <div id="navi-gruppen"> </div>
          <div id="content"> </div>
          <div id="navi"> </div>
   </div>

<div id="grass">
     <img width="40" height="40" style="margin-left: 30px;" class="icons" src="images/facebook.png">
  <img width="40" height="40" class="icons" src="images/twitter.png">
  <img width="40" height="40" class="icons" src="images/youtube.png">
  <img width="40" height="40" class="icons" src="images/myspace.png">
  <img width="40" height="40" class="icons" src="images/flickr.png">

  <div "="" class="clear-muecke" id="muecke">
      <img src="images/muecke_gruen.png">
  </div>
</div>
</body>

Geändertes CSS:

Code:

html {
    background: url("../images/hg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 100%;
    margin: 0;
    padding-bottom: 0;
    padding-top: 0;
}

body {
    font-family: Georgia;
    font-size: 11pt;
    height: 100%;
    margin: 0;
    padding-bottom: 0;
    padding-top: 0;
}

#outside {
    background-color: #FFFFFF;
    border-bottom: 10px solid #C9087E;
    display: table;
    height: 100%;
    margin: 0 auto;
    width: 800px;
}


#content {
    display: table;
    float: right;
    margin-bottom: 80px;
    width: 500px;
}

#grass {
    background: url("../images/grashg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    bottom: 0;
    height: 60px;
    position: fixed;
    width: 100%;
    z-index: 99;
}


#muecke {
    bottom: 80px;
    float: right;
    height: 110px;
    position: fixed;
    right: 30px;
    width: 270px;
}

Hoffe, es klappt nach Deinen Vorstellungen.
Viel Erfolg!

toxicteri · 20.02.2014

WOWOWOWO herzlichen Dank

Genau wie ichs wollte, genial!
An was hat denn das gelegen?

der-tim · 20.02.2014

Gerne.
Schlüssel war "display: table;" und "height:100%" an entsprechenden Stellen.

der-tim · 20.02.2014

Du müsstest im HTML-Code noch den wrap-div entfernen. Der wird nicht benötigt, hindert den weißen outside-div nur daran, bis nach ganz unten hinter das Gras zu laufen. Ansonsten scheint alles zu klappen.