Problem bei der Positionierung eines Divs (Footer)

Breaker · 03.02.2010

Hey Leute,

ich habe ein kleines Problem.
Und zwar möchte ich auf folgender Seite noch unter die Seite einen Footer bringen über die komplette Breite der Seite.

Allerdings wird der Footer jetzt im Moment immer im Inhaltsbereich angezeigt und ich komme einfach nicht dahinter. Ich vermute, dass es ein einfacher Tippfehler ist, aber ich finde ihn einfach nicht...

Könnt ihr mir helfen?

Hier der Code

HTML:

Code:

<body>

<div id="overall">

  <div id="wrapper">

  <div id="header">
  
    <div id="header_top"></div>
  
    <div id="logo">
    <img src="images/logo.png" />
    </div>
    
    <div id="navi">
    
    <ul>
        <li class="start" id="active"><a href="index.html">Startseite</a></li>
        <li><a href="wir.html">Tankstelle</a></li>
        <li><a href="leistungen.html">Petit Bistro</a></li>
        <li><a href="referenzen.html">Aktionen</a></li>
        <li><a href="service.html">Ultimate</a></li>
        <li class="ende"><a href="partner.html">Impressum</a></li>
    </ul>
    
    </div>
    
    
    <div id="sidebar_top"></div>
    
    
    <div="floatclear"></div>
    
  
  </div>
  
  
  
    <div id="content">
    
      <div id="inhalt"></div>
      
      <div id="sidebar">
        <img src="images/bistro_logo.jpg" />
        <img src="images/ultimate_logo.jpg" />
        
        <div id="sidebar_navi">
        
        <ul>
          <li><a href="index.html">SuperWash</a></li>
          <li><a href="wir.html">Aral Store</a></li>
          <li><a href="leistungen.html">PAYBACK</a></li>
          <li><a href="referenzen.html">Autohof</a></li>
          <li><a href="service.html">Truck Service</a></li>
          <li><a href="partner.html">So finden Sie Uns</a></li>
        </ul>
        
        </div>
        
        <div id="sidebar_infos">
        
        <h1>Tankstellen Details</h1>
        <h2>René Mende</h2>
        Osdorfer Ring 33-35 <br />
        14979 Großbeeren <br /><br />

        Telefon: 033701/90587 <br />
        Telefax: 033701/90588 <br /><br />
 
        E-Mail:  rene.mende@tankstelle.de<br />
        Web:     www.aral-mende.de <br />

        <h2>Öffnungszeiten</h2>
        24 Stunden <br />
        
        </div>
        
      </div>
      
      <div="floatclear"></div>
  
    </div>
    
    
  
  
  </div>
  

</div>


<div id="footer">Hier soll der Footer sein</div>

</body>

Und hier der CSS:

Code:

* {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #0064cc;
}

body {
background: url('images/top.png') top left repeat-x;
width: 100%;
}

#overall {
width: 802px;
left:50%;
margin: 0 auto;
margin-bottom: 50px;
}

#wrapper {
width: 802px;

}

#header {
height: 274px;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}

#header_top {
width: 800px;
height: 6px;
margin-bottom: 1px;
}

#navi {
clear: both;
width: 600px;
height: 28px;
float: left;
}

#navi li {
text-decoration: none;
text-align: center;
width: 99px;
height: 15px;
display: block;
float:left;
border-right: 1px solid #FFFFFF;
padding-top: 10px;
}

#navi li a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;


}


#sidebar_top {
float: right;
width: 200px;
height: 28px;
background-color: #0064cc;
}



#content {
width: 802px;
margin: 0 auto;
}

#inhalt {
float: left;
width: 600px;
}

#sidebar {
float: right;
width: 200px;
height: 300px;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}

#sidebar_navi {
border-left: 1px solid #0064cc;
border-right: 1px solid #0064cc;
}

#sidebar_navi ul {
list-style: none;
}

#sidebar_navi li {
border-bottom: 1px solid #0064cc;
padding: 2px 5px 2px 20px;
background: url('images/sidebar_navi_punkt.png') center left no-repeat;
}

#sidebar_navi li a {
text-decoration: none;
}

#navi li.ende {
height: 28px;
}


#sidebar_infos {
width: 182px;
padding: 3px 8px 3px 8px;
color: #363737;
background-color: #e0eaf0;
border-left: 1px solid #0064cc;
border-right: 1px solid #0064cc;
border-bottom: 1px solid #0064cc;
}

#sidebar_infos h1 {
font-size: 14px;
margin: 5px 0px 5px 0px;
}

#sidebar_infos h2 {
font-size: 12px;
color: #363737;
margin: 10px 0px 0px 0px;
}




#footer {
background: url('footer_back.png') top left repeat-x;
height: 30px;
width: 100%;
margin-top: 30px;
}


#floatclear {
clear: both;
}

Vielen Dank im Vorraus!

Gruß Stefan

dorleeins · 03.02.2010

AW: Problem bei der Positionierung eines Divs (Footer)

Hi,
vielleicht kann ich ja nicht zählen, aber es erscheint mir so, als ob ein "div" zu wenig geschlossen wurde - liegt vielleicht daran.

LG

leveler · 03.02.2010

AW: Problem bei der Positionierung eines Divs (Footer)

moinsen, hast Du Dir fuer den Firefox mal das add-on 'html-validator' angeschaut?
solltest du fehler im code haben, wird er Dir so sehr anschaulich praesentiert...
ungemein nutzlich, da ich auch grad keine lust hab , div`s zu zaehlen...

Scalper88 · 03.02.2010

AW: Problem bei der Positionierung eines Divs (Footer)

ändere deine css

#footer {
background: url('footer_back.png') top left repeat-x;
height: 30px;
width: 100%;
margin-top: 510px;
}

bei mir funzt das zumindest

ich hoffe bei dir auch

gruß
manu

micr0 · 03.02.2010

AW: Problem bei der Positionierung eines Divs (Footer)

ich stimme scalper88 zu.. Mir faellt auch nur der Wert von margin-top auf!

Breaker · 03.02.2010

AW: Problem bei der Positionierung eines Divs (Footer)

aber wenn ich darüber sage clear: both; dann muss doch der footer zwangsweise darunter sein oder?

MyBad · 03.02.2010

AW: Problem bei der Positionierung eines Divs (Footer)

Schau mal hier:

[Invalid] Markup Validation of http://www.aral-mende.de/neuearalseite2010/ - W3C Markup Validator

Dein "floatclear" ist falsch. Du rufst es so auf:

HTML:

<div="floatclear"></div>

da fehlt das "class" davor!

Das mit dem Margin auf über 500px ist unsinn! Das würde dann ja bedeuten, dass der Abstand zum Content immer über 500px wäre...

Breaker · 03.02.2010

AW: Problem bei der Positionierung eines Divs (Footer)

jetzt schauts so aus...

hier der code html:

Code:

<body>

<div id="overall">

      <div id="wrapper">

            <div id="header">
              <div id="header_top"></div>
             <div id="logo"><img src="images/logo.png" /></div>
                
                <div id="navi">
                <ul>
                     <li class="start" id="active"><a href="index.html">Startseite</a></li>
                  <li><a href="wir.html">Tankstelle</a></li>
                  <li><a href="leistungen.html">Petit Bistro</a></li>
                     <li><a href="referenzen.html">Aktionen</a></li>
                    <li><a href="service.html">Ultimate</a></li>
                    <li class="ende"><a href="partner.html">Impressum</a></li>
                </ul>
                </div>
    
                  <div id="sidebar_top"></div>
                
         </div>
    
    
      <div style="clear:both;"></div>
  
  
  
         <div id="content">
    
      <div id="inhalt"></div>
      
          <div id="sidebar">
          
          
          <img src="images/bistro_logo.jpg" />
          <img src="images/ultimate_logo.jpg" />
        
          <div id="sidebar_navi">
          <ul>
          <li><a href="index.html">SuperWash</a></li>
          <li><a href="wir.html">Aral Store</a></li>
          <li><a href="leistungen.html">PAYBACK</a></li>
          <li><a href="referenzen.html">Autohof</a></li>
          <li><a href="service.html">Truck Service</a></li>
          <li><a href="partner.html">So finden Sie Uns</a></li>
          </ul>
          </div>
        
          <div id="sidebar_infos">
          <h1>Tankstellen Details</h1>
          <h2>René Mende</h2>
          Osdorfer Ring 33-35 <br />
          14979 Großbeeren <br /><br />

          Telefon: 033701/90587 <br />
          Telefax: 033701/90588 <br /><br />
 
          E-Mail:  rene.mende@tankstelle.de<br />
          Web:     www.aral-mende.de <br />

          <h2>Öffnungszeiten</h2>
          24 Stunden <br />
        
          </div>
        
      </div>
     
      
  
    </div>
    
    </div>
   
    
    </div>
    
    <div style="clear:both;"></div>
      
     
      <div id="footer">Hier soll der Footer sein</div>
    

</body>

und CSS:

Code:

* {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #0064cc;
}

body {
background: url('images/top.png') top left repeat-x;
width: 100%;
}

#overall {
width: 802px;
left:50%;
margin: 0 auto;
margin-bottom: 50px;
}

#wrapper {
width: 802px;

}

#header {
height: 274px;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}

#header_top {
width: 800px;
height: 6px;
margin-bottom: 1px;
}

#navi {
clear: both;
width: 600px;
height: 28px;
float: left;
}

#navi li {
text-decoration: none;
text-align: center;
width: 99px;
height: 15px;
display: block;
float:left;
border-right: 1px solid #FFFFFF;
padding-top: 10px;
}

#navi li a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;


}


#sidebar_top {
float: right;
width: 200px;
height: 28px;
background-color: #0064cc;
}



#content {
width: 802px;
margin: 0 auto;
}

#inhalt {
float: left;
width: 600px;
}

#sidebar {
float: right;
width: 200px;
height: 300px;
border-right: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
}

#sidebar_navi {
border-left: 1px solid #0064cc;
border-right: 1px solid #0064cc;
}

#sidebar_navi ul {
list-style: none;
}

#sidebar_navi li {
border-bottom: 1px solid #0064cc;
padding: 2px 5px 2px 20px;
background: url('images/sidebar_navi_punkt.png') center left no-repeat;
}

#sidebar_navi li a {
text-decoration: none;
}

#navi li.ende {
height: 28px;
}


#sidebar_infos {
width: 182px;
padding: 3px 8px 3px 8px;
color: #363737;
background-color: #e0eaf0;
border-left: 1px solid #0064cc;
border-right: 1px solid #0064cc;
border-bottom: 1px solid #0064cc;
}

#sidebar_infos h1 {
font-size: 14px;
margin: 5px 0px 5px 0px;
}

#sidebar_infos h2 {
font-size: 12px;
color: #363737;
margin: 10px 0px 0px 0px;
}




#footer {
background: url('images/footer_back.png') top left repeat-x;
height: 30px;
width: 100%;
left:50%;
margin: 0 auto;
}

ich krieg das ding immer noch nicht weiter nach unten ohne margin zu verwenden. aber das muss doch mit clear both funktionieren :S

Scalper88 · 03.02.2010

AW: Problem bei der Positionierung eines Divs (Footer)

clear: both beendet das umfließen eines elements. so wie ich das erkenne, wird dein #navi-element umflossen. das funktioniert ja auch. aber du hast im footer margin-top 30, deshalb wird ja auch die navi "umflossen" mit 30 px von oben. du kannst also entweder den margin-wert ändern oder versuchen "clear: both" in die css von #sidebar_infos zu packen mit dem entsprechenden abstand. das solltest du ausprobieren. ich würde das mit margin-top lösen.

MyBad · 03.02.2010

AW: Problem bei der Positionierung eines Divs (Footer)

Du hast ja deiner Sidebar auch eine feste höhe von 300px vergeben. Dann rutscht es natürlich nicht weiter nach unten... Da die Sidebar aber schon höher als 300px ist, läuft sie über... Das bedeutet schmeiß die fixe Höhe dort raus.

Breaker · 03.02.2010

AW: Problem bei der Positionierung eines Divs (Footer)

danke mybad das wars^^
omg tut mir leid, das hab ich ganz am anfang gemacht als noch kein inhalt drin war -.-
danke euch allen für eure bemühungen, einfach klasse hier

leveler · 03.02.2010

AW: Problem bei der Positionierung eines Divs (Footer)

versuch mal :
position: fixed;
bottom: 0px;
fuer den footer

edit: zu spaet,,,sorry....