✔ Problem mit Footer

pamax · 3. Oktober 2006

Hi,

ich habe ein Problem mit dem Footer. Ich will, dass er immer da angezeigt wird wo der Text endet. Im Moment habe ich das mit einem festen Wert getan.
Jetzt habe ich mir überlegt, wenn ich den Footer in den Main-Div mache und Margin top auf 0 setze, dass er dann richtig angezeigt wird. Von der Position stimmt es dann aber nicht von der Breite.

HTML:

.footer {
    position:absolute;
    margin-top:625px;
    height:50px;
    left:0px;
    min-width:100%; /* Für moderne Browser */
    width: auto !important;/* Für moderne Browser */
    width:100%; /* Für IE */
    background-color:#eee;
    border-top: 1px solid #ddd;
}

Hier mal der Code:
Index.html

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Problem</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="stripe1"></div>
<div class="stripe2"></div>
<div class="container">
<div class="main">
    <div class="header">    </div>
    <div class="bild">
    <div class="s2">TEST</div>
    </div>
  <div class="menu">
  <div class="s1">
    Select a Language:
        <select name="menu1">
          <option>German</option>
          <option>English</option>
        </select>
  </div>
        <div class="nav">
                  <a href="#">Home</a>
                 <a href="#">Produkte</a>
                  <a href="#">Über Uns</a>
                  <a href="#">Kontakt</a>
                  <a href="#">Impressum</a>        </div>
  </div>
    <div class="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam blandit pede ut leo. Nunc placerat, libero nec consequat nonummy, metus odio volutpat diam, non luctus arcu tellus et tortor. Donec sapien. Fusce posuere feugiat urna. Nam mollis tempus diam. In vulputate. Nullam nec lectus. Maecenas non felis ac nibh mollis viverra. Integer purus. Praesent dignissim leo vel erat.

Suspendisse malesuada, nunc et posuere lobortis, purus nunc semper pede, quis eleifend massa augue ut sapien. Class aptent taciti sociosqu ad litora.    </div>
    <div class="right_tab">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam sit amet pede sit amet sem sagittis rutrum. Donec tortor. Nunc ligula quam, dictum ut, hendrerit at, malesuada nec, diam. Nulla scelerisque tellus sed leo. Phasellus massa massa, pellentesque id, nonummy eu, hendrerit et, lectus. Integer augue. Praesent lacinia. Nunc tortor.    </div>
</div>
    <div class="footer">
    <div class="footy">
                <a href="#">Testlink</a>
                  <a href="#">Testlink</a>
                  <a href="#">Kontakt</a>
                  <a href="#">Impressum</a>
    </div>
    </div>
</body>
</html>

und hier die style.css

HTML:

body {
    font-family:Arial, Helvetica, sans-serif;
}
a {
    color:#266494;
}
a:hover {
    color:#4b7ea6;
}
.main {
    position:absolute;
    left:50%;
    margin-left:-325px;
    width:650px;
    min-height:99%; /* Für moderne Browser */
    height: auto !important;/* Für moderne Browser */
    height:99%; /* Für IE */
    font-family:Arial, Helvetica, sans-serif;
}
.stripe1 {
    position:absolute;
    margin-top:87px;
    min-width:100%; /* Für moderne Browser */
    width: auto !important;/* Für moderne Browser */
    width:100%; /* Für IE */
    height:39px;
    left:0px;
    background-color:#266494;
}
.stripe2 {
    position:absolute;
    margin-top:126px;
    min-width:100%; /* Für moderne Browser */
    width: auto !important;/* Für moderne Browser */
    width:100%; /* Für IE */
    height:187px;
    left:0px;
    background-color:#4b7ea6;
    
}
.header {
    margin-top:0px;
    width:650px;
    height:87px;
    background-image:url(images/trans-word1_01.png);
}
.bild {
    margin-top:0px;
    width:432px;
    height:226px;
    background-image:url(images/trans-word1_02.png);
}
.menu {
    position:absolute;
    top:87px;
    margin-left:432px;
    background-image:url(images/trans-word1_03.png);
    color:#FFFFFF;
    font-size:24px;
    width:218px;
    height:226px;
}
.content {
    margin-top:0px;
    width:432px;
    height:auto;
    border-right: 1px solid #ddd;
}
.right_tab {
    position:absolute;
    top:313px;
    width:215px;
    height:auto;
    left:435px;
    color:#aaa;
    font-style:italic;
}
.footer {
    position:absolute;
    margin-top:625px;
    height:50px;
    left:0px;
    min-width:100%; /* Für moderne Browser */
    width: auto !important;/* Für moderne Browser */
    width:100%; /* Für IE */
    background-color:#eee;
    border-top: 1px solid #ddd;
}
.footy {
    position:absolute;
    left:50%;
    padding-top:17px;
    margin-left:-325px;
    font-size:12px;
    width:650px;
}
.nav {
    position:absolute;
    top:44px;
    width:226px;
    height:187px;
    left:0px;
}
.nav a {
    text-decoration:none;
    background: url(images/arrow.png) no-repeat left;
    display:block;
    color:#FFFFFF;
    margin-left:10px;
    padding-left:20px;

}
.nav a:hover {
    text-decoration:none;
    background: url(images/arrowh.png) no-repeat left;
    color:#FFFFFF;
}
.s1 {
    margin-top:9px;
    padding-left:5px;
    horizontal-align:center;
    font-size:14px;
    float:left;
}
.s2 {
    padding-top:6px;
    horizontal-align:center;
    font-size:24px;
    color:#FFFFFF;}
.footy a {
    margin-left:5px;
}
.footy a:hover {
    color:#4b7ea6;
}

Ich hoffe ihr könnt mir helfen...

pMx

Maik · 3. Oktober 2006

pamax hat gesagt.:
[...] Von der Position stimmt es dann aber nicht von der Breite.

Erweiter mal das Stylesheet mit folgender Regel:

Code:

html, body {
margin: 0;
padding: 0;
}

pamax · 3. Oktober 2006

Hi,

@michaelsinterface: hat leider nicht geholfen.

Wie gesagt, wenn ich den Footer in den Main-Div mache wird er dirket unter dem Text angezeigt.(das ist OK) Nur hat er dann nicht die Breite 100%, weil das Main Div nur eine Breite von 650px hat und in der Mitte zentriert ist. Andererseits wenn ich ihn nicht in den Main-Div mache muss ich immer die Position in Pixeln angeben.(oben im Quellext height:625px) Da aber auf der Seite ab und zu neue Inhalte hinzugefügt werden sollen ist dies sehr unpraktisch, weil ich sonst immer eine änderung in der CSS Datei machen müsste.

Ich bedanke mich schonmal für die Hilfe!

pMx

Maik · 4. Oktober 2006

Sorry, da habe ich dein Anliegen mißverstanden, denn im IE war noch eine Lücke zwischen dem Footer und dem rechten Fensterrand.

Okay, hier mein nächster Vorschlag: Pack den Footer in das vorhandene DIV .container, das 100% breit ist.

HTML:

<div class="stripe1"></div>
<div class="stripe2"></div>

<div class="container">
     <div class="main">
          <div class="header"></div>
          <div class="bild">
               <div class="s2">TEST</div>
          </div><!-- / bild -->
          <div class="menu">
               <div class="s1">
                    Select a Language:
                      <select name="menu1">
                      <option>German</option>
                      <option>English</option>
                      </select>
               </div><!-- / s1 -->
               <div class="nav">
                  <a href="#">Home</a>
                  <a href="#">Produkte</a>
                  <a href="#">Über Uns</a>
                  <a href="#">Kontakt</a>
                  <a href="#">Impressum</a>
               </div><!-- / nav -->
          </div><!-- / menu -->
          <div class="content">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam blandit pede ut leo. Nunc placerat, libero nec consequat nonummy, metus odio volutpat diam, non luctus arcu tellus et tortor. Donec sapien. Fusce posuere feugiat urna. Nam mollis tempus diam. In vulputate. Nullam nec lectus. Maecenas non felis ac nibh mollis viverra. Integer purus. Praesent dignissim leo vel erat. Suspendisse malesuada, nunc et posuere lobortis, purus nunc semper pede, quis eleifend massa augue ut sapien. Class aptent taciti sociosqu ad litora.
          </div><!-- / content -->
          <div class="right_tab">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam sit amet pede sit amet sem sagittis rutrum. Donec tortor. Nunc ligula quam, dictum ut, hendrerit at, malesuada nec, diam. Nulla scelerisque tellus sed leo. Phasellus massa massa, pellentesque id, nonummy eu, hendrerit et, lectus. Integer augue. Praesent lacinia. Nunc tortor.
         </div><!-- / right_tab -->
    </div><!-- / main -->
    <div class="footer">
         <div class="footy">
                <a href="#">Testlink</a>
                <a href="#">Testlink</a>
                <a href="#">Kontakt</a>
                <a href="#">Impressum</a>
         </div><!-- / footy -->
    </div><!-- / footer -->
</div><!-- / container -->

Ansonsten würde ich mir Gedanken über ein alternatives Layout-Konzept machen, das ohne absolute Positionierung der DIV-Elemente auskommt, damit der Footer auf den Inhalt im DIV .content bzw. .right_tab "reagiert".

pamax · 4. Oktober 2006

Hat leider noch immer nicht geklappt

Aber Vielen Dank für deine Hilfe! Ich werde mir jetzt mal ein paar Gedanken machen, wie ich anders machen kann.

pMx

EDIT : Habs hinbekommen!!

Und zwar habe ich das Main-Div anstatt position:absolute; mit position:relative; gemacht.

Maik · 4. Oktober 2006

pamax hat gesagt.:
[...] EDIT : Habs hinbekommen!!

Wenn Du die Problemstellung eines Themas gelöst hast, dann markiere bitte zukünftig das "gelöste" Thema auch als erledigt.

✔ Problem mit Footer

pamax

Erfahrenes Mitglied

Maik

pamax

Erfahrenes Mitglied

Anhänge

Maik

pamax

Erfahrenes Mitglied

Maik

Neue Beiträge