Antworten auf deine Fragen:
Neues Thema erstellen

Div ganz unten positionieren

toxicteri

Noch nicht viel geschrieben

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!
 

Jormungand

VonAllemEtwas

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.
 

toxicteri

Noch nicht viel geschrieben

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 :)
 
Zuletzt bearbeitet:

der-tim

Nicht mehr ganz neu hier

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!
 
Zuletzt bearbeitet:

toxicteri

Noch nicht viel geschrieben

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:
 
Zuletzt bearbeitet:

der-tim

Nicht mehr ganz neu hier

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!
 

der-tim

Nicht mehr ganz neu hier

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
118.611
Beiträge
1.538.342
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben