• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem beim Footer-Einbau mit CSS (DIV's)

Status
Für weitere Antworten geschlossen.
S

Sid786

Mitglied
Hallo

Ich habe folgendes Problem:
Ich "designe" grade eine neu Website und habe schon den Header, 2 Randbereiche und den Inhaltsbereich fertig. Jetzt wollte ich einen Footer einbauen, der sich unter die beiden Randbereiche und den Inhaltsbereich setzt, doch stattdessen setzt sich das Ding in den Inhaltsbereich. Das sieht dann so aus:
http://img116.imageshack.us/img116/3394/untitledoi8.th.jpg

So soll es aber nicht aussehen. Hier ist die Problemseite mal hochgeladen:
http://people.freenet.de/xpakix/sidv2/html/all/index.html

Hier der Inhalt der CSS-Datei:
Code: 
<style type="text/css">
    <!--
        html
            {
                padding: 0px;
                margin: 0px;
                height: 100%;
            }
        body
            {
                background-color: #A2ABB2;
                padding: 0px;
                margin: 0px;
                height: 100%;
            }
        #space
            {
                padding: 2px;
            }
        #header
            {
                border: solid 1px #000000;
            }
        #kopfbereich
            {
                height: 20px;
                width: 100%;
                background-color: #A2ABB2;
                background: url("../img/leiste.jpg");
                font-size: 10pt;
                font-family: tahoma, sans-serif;
                font-weight: bold;
                text-align: center;
                padding-top: 2px;
                border-bottom: solid 1px #000000;
            }
        #bannerbereich
            {
                width: 100%;
                height: 90px;
                background-color: #3F3F3F;
            }
        #navibox1
            {
                position: absolute;
                left: 0px;
                width: 200px;
                margin: 0px; 
                padding: 0px;
                height: 100%;
                background-color: #3F3F3F;
                border-bottom: solid 1px #000000;
                border-right: solid 1px #000000;
                border-left: solid 1px #000000;
            }
        #navileiste
            {
                height: 20px;
                width: 100%;
                background-color: #A2ABB2;
                background: url("../img/leiste.jpg");
                font-size: 10pt;
                font-family: tahoma, sans-serif;
                font-weight: bold;
                text-align: center;
                padding-top: 2px;
                border-bottom: solid 1px #000000;
            }
        #inhaltsbox
            {
                margin: 0px 200px 0px 200px;
                border-left: solid 1px #000000;
                border-right: solid 1px #000000;
                padding: 0px;
                background-color: #A2ABB2;  
                height: 100%;
            }
        #inhaltsleiste
            {
                height: 20px;
                width: 100%;
                background-color: #A2ABB2;
                background: url("../img/leiste.jpg");
                font-size: 10pt;
                font-family: tahoma, sans-serif;
                font-weight: bold;
                text-align: center;
                padding-top: 2px;
                border-bottom: solid 1px #000000;
            }
        #navibox2
            {
                position: absolute;
                right: 0px;        
                width: 200px;
                margin: 0px; 
                padding: 0px;
                height: 100%;
                background-color: #3F3F3F;
                border-bottom: solid 1px #000000;
                border-right: solid 1px #000000;
                border-left: solid 1px #000000;
            }
        #fussbereich
            {
                height: 20px;
                width: 100%;
                background-color: #A2ABB2;
                background: url("../img/leiste.jpg");
                font-size: 10pt;
                font-family: tahoma, sans-serif;
                font-weight: bold;
                text-align: center;
                padding-top: 2px;
                border-bottom: solid 1px #000000;
                border-left: solid 1px #000000;
                border-right: solid 1px #000000;
            }
                    
    //-->
</style>
Und der HTML-Code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <title>.: Private Homepage von Siddeeq Iqbal :.</title>
        
        <link rel="stylesheet" type="text/css" href="../../ext/style.css">
        
    </head>

    <body>
        <div id="header">
            <div id="kopfbereich">
                .: Private Homepage von Siddeeq Iqbal :.
            </div>
            
            <div id="bannerbereich" align="center">
                <img src="../../img/banner.jpg">
            </div>
        </div>
        
        <div id="navibox1"> 
            <div id="navileiste">
            .: Navigation :.
            </div>
            <div id="navi">
            LINK 1<br>
            LINK2
            </div>
        </div>
        
        <div id="navibox2">
            <div id="navileiste">
                .: Diverses :.
            </div>
        </div>        

        <div id="inhaltsbox"> 
            <div id="inhaltsleiste">
            .: Home :.
            </div>
            loool^^
        </div>
                    
    </body>
</html>
Ich hoffe jemand weiß Rat.

Greetz
Sid786
 
Hallo Sid786, das
Problem ist nicht so ganz einfach zu lösen und ich kann dir vielleicht
nicht die Lösung geben die du brauchst. Aber hier sind 2 Ansätze:

Nr1:
HTML: 
        div#inhaltsbox
            { 
                min-height:600px;
                height:expression(this.scrollHeight > 600 ? "auto":"600px"); 
            }
Anstatt 600 solltest du deine Seitenhöhe angeben, auf der der footer liegen soll. Er schiebt sich automatisch weiter nach unten, sofern der Content zu groß wird.

Nr2:
HTML: 
#footer{
      margin-left:0px;
      margin-right:0px;
      width:100%;
      height:18px;
      bottom:0px;
      font-size:10px;
      left:0px;
      color:black;
      border-top:2px solid #DC0001;
      background-color:white;
    
      /* ab hier  ist für den IE die Deklaration  beendet */    
      voice-family: "\"}\"";
      voice-family:inherit;
    
      /*  hier  gehts für alle anderen weiter*/    
      position:fixed;
}
Hier entsteht ein Footer der IMMER ganz unten sichtbar ist.
Gruss prostel
 
Danke für die Ansätze. Mit dem ersten wirds im FF genauso dargestellt wie ich es möchte. Im IE hingegen landet der Footer wieder im Inhaltsbereich.

Was solls... Ich mach mir ein neues Design...

Greetz
 
Huch sehe jetzt auch erst warum das so ist. das oben war natürlich
ein hack für den FF aber du hast das Problem, das du deine divs absolut
positionierst was man nicht unbedingt tun sollte. Versuche die divs mal mit
float:left; nebeneinander fließen zu lassen. dann kannst du dem footer sagen:
clear: left; damit er nicht mehr um die divs fließt und dann sollte er auch im IE unter den containern liegen
 
Hab das ganze nochmal neu gecoded und die Dinge liegen jetzt auch da wo sie liegen sollen (hab dein clear trotzdem nochmal dazu geschrieben - Danke.).

Jetzt hab ich 2 neue Fragen: (Hier erstmal der Link zur hochgeladenen Seite: http://people.freenet.de/xpakix/sidv2/html/all/index.html)

Schaut Euch die Seite einmal im IE und einmal im FF an.

1. Ich möchte, dass die Seite im FF genauso dargestellt wird wie jetzt im IE. Also soll die Höhe aller Divs 100% betragen. Wie bekomme ich das im FF hin?

2. Aus einem mir unerklärlichen Grund setzt der IE bei der Leiste mit den Inschriften "Navigation", "Home" und "Diverses" 2 Lücken (genauer hingucken...). Wie bekomme ich die weg? (Im FF werden die nicht angezeigt.)

Bitte um Hilfe ;)

Hier nochmal die neuen Codes:

Code: 
<style type="text/css">
    <!--
        html
            {
                height: 100%;
            }
        body
            {
                background-color: #666666;
                padding: 0px;
                margin: 0px;
                height: 100%;
            }
        #container
            {
                background-color: #A2ABB2;
                font-size: 10pt;
                font-family: tahoma, sans-serif;
                height: 100%;
                margin: 0px;
            }
        #leiste
            {
                background-color: #A2ABB2;
                height: 20px;
                padding-top: 2px;
                font-weight: bold;
                text-align: center;
                background: url("../img/leiste.jpg");
            }
        #banner
            {
                height: 90px;
                background-color: #3F3F3F;
                font-weight: bold;
            }
        #navi1
            {
                width: 190px;
                float: left;
                background-color: #3F3F3F;
                height: 100%;
            }
        #navi2
            {
                width: 190px;
                float: right;
                background-color: #3F3F3F;
                height: 100%;
            }
        #content
            {
                background-color: #A2ABB2;
                height: 100%;
            }
        #footer
            {
                background-color: #A2ABB2;
                height: 20px;
                padding-top: 2px;
                font-weight: bold;
                text-align: center;
                background: url("../img/leiste.jpg");
                clear:both;
            }
    //-->
</style>



Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>
        
        <title>
            .: Private Homepage von Siddeeq Iqbal :.
        </title>
        
        <link rel="stylesheet" type="text/css" href="../../ext/style.css">
        
    </head>
    
    <body>
    
        <div id="container">
            <div id="leiste">
                .: Private Homepage von Siddeeq Iqbal :.
            </div>
            <div id="banner">
            </div>
            <div id="navi1">
                <div id="leiste">
                    .: Navigation :.
                </div>
                <ul id="navigation">
                    <li> .: Link 1 :.</li>
                    <li> .: Link 2 :.</li>
                </ul>
            </div>
            <div id="navi2">
                <div id="leiste">
                    .: Diverses :.
                </div>
                <ul id="diverses">
                    <li> .: Eintrag 1 :.</li>
                    <li> .: Eintrag 2 :.</li>
                </ul>
            </div>
                <div id="content">
                    <div id="leiste">
                        .: Home :.
                    </div>
                        <h1> lol</h1>
                </div>
            <div id="footer">
                .: http://www.xsidx.de.vu :.
            </div>
        </div>
    
    </body>

</html>

Greetz
Sid786
 
1. Ich möchte, dass die Seite im FF genauso dargestellt wird wie jetzt im IE. Also soll die Höhe aller Divs 100% betragen. Wie bekomme ich das im FF hin?
Zum Vergrößern anklicken....
Kurz und Knapp - Geht nicht! Dieses Problem existiert schon ewigkeiten und bis jetzt gabs noch keine wirklich schöne Lösung die für alle Browser gilt.
Kannst auch mal nach div height 100% oder so suchen, da wirst viele viele
Threads in anderen Foren sehen. Mir fallen spontan 2 Lösungen ein um
das Problem zu beheben.
1. Nutze den Teil, den ich in meiner 1. Antwort gegeben habe.
div#inhaltsbox
{
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px");

}
Das ist nicht unglaublich schön, aber immerhin hat das div dann eine größere Höhe. Müsste man halt den Rest der Seite auch anpassen...

2. Lösung:
Ein Javascript welches dir beim Laden deiner Seite die Größe des Scrollbaren
Bereichs ermittelt, und dann per document.getElementById("DEIN DIV").style.height = "die ermittelte höhe"; den Wert dort speichert. Das funktioniert zu 100% ist aber nicht schön, sofern der Benutzer kein JS aktiviert hat.
Hier mal ein komplettes Beispiel dafür:
Code: 
function windowHeight() {
        var windowHeightY;
      var test1 = document.body.scrollHeight;
      var test2 = document.body.offsetHeight
      if (test1 > test2) // all but Explorer Mac
      {
        windowHeightY = document.body.scrollHeight;
      }
      else // Explorer Mac;
           //would also work in Explorer 6 Strict, Mozilla and Safari
      {
        windowHeightY = document.body.offsetHeight;
      } 
      document.getElementById("deindiv").style.height = windowHeightY + "px";    
}

2. Mhm ich sehe da keine Lücken :)
 
Sieht hier irgendjemand die Lücken?

EDIT: Wie schaffe ich es, dass die beiden Bereiche "Navigation" und "Diverses" ganz nach unten an den Footer gehen? Also, dass unter den beiden Bereichen nicht die Blaue Farbe des Inhaltsbereich kommt.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben