marco: CSS-Layout-Hilfe

Beitrag lesen

hoi,

schaumal meine Beispiele:

version 1
http://inix.in.funpic.de/stfooter.html

version 2
http://inix.in.funpic.de/stickself.html

HF,
Inita

Danke für Links, ich habe die Links von deiner Seite genutzt und den CSS-Code von http://ryanfait.com/sticky-footer/layout.css angepasst und es geht jetzt auch mit 2 Spalten im Mittelteil. Danke! Der Übersicht halber hier nochmal mein Code der jetzt in IE und FF funktioniert:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>

<title>A CSS Sticky Footer</title>
<style type="text/css">
  * {
 margin: 0;
}
html, body {
 height: 100%;
}

.header {
 height:150px;
  width: 990px;
    margin-left: auto;
    margin-right: auto;
  background: #CCCC99;
  border-top: 1px solid #C0C0C0;
  border-bottom: 1px solid #C0C0C0;

}

.wrapper {
 min-height: 99%;
 height: auto !important;
 height: 99%;
 margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  width: 990px;
  margin-left: auto;
  margin-right: auto;
  border-left: 1px solid #C0C0C0;
  border-right: 1px solid #C0C0C0;
  }

.inhalt {
    float: left;
    padding: 5px;
    width: 770px;
    margin: 0 0 0 0;
    overflow:visible;
    border: 0px solid #C0C0C0;
  }

.info {

float: right;
    width: 200px;
    margin: 0 0 0 0;
    padding: 5px 0 0 5px;
    border-left: 1px solid #C0C0C0;
    border-bottom: 1px solid #C0C0C0;
  }

.footer  {
 height: 50px;
  width: 990px;
    margin-left: auto;
    margin-right: auto;
  background: #CCCC99;
  border: 1px solid #C0C0C0
   /* .push must be the same height as .footer */
}

.push{
 height: 50px;
  clear: both;
}

</style>

</head>
 <body>

<div class="wrapper">

<div class="header">
    <h1>BLABLA</h1>
   </div>

<div class="info">
   <h2>A CSS sticky footer that just works</h2>

We've all tried to use a <strong>sticky footer</strong> one time
      or another, but they never seem to come out right, do they? Well, the
      days of a hard to understand CSS-based <strong>sticky footer</strong>
      are thankfully over. In just a few simple CSS classes with minimal
      extra HTML markup, I've fashioned a <strong>sticky footer</strong>
      that even beginners can get a handle on. It's been tested in IE 5 and
      up, Firefox, Safari and Opera.

</div>
      <div class="inhalt">
      <h2>Usage of the CSS</h2>
   <p><q>Great! this is exactly what I'm looking for! Can I use it?</q></p>

Absolutely. There are no terms, licenses, fees or requirements. Use it as you will.
      If you find the kindness to link to me on your site, I'd appreciate it, but it's by
      no means necessary. Have fun, and don't be afraid to ask me any questions or
      send me your thoughts.

dsg4ewt4et<br>
TEST<br>
      sdgsfg<br>
      dsg4ewt4et<br>
TEST<br>
      sdgsfg<br>
      dsg4ewt4et<br>
TEST<br>
      sdgsfg<br>
      dsg4ewt4et<br>

</div>

<div class="push"></div>

</div>

<div class="footer">
   <p>Copyright &copy; 2006-2007 Ryan Fait | All rights reserved.<br />

You may not reproduce this example without written permission from Ryan Fait</p>
  </div>

</body>
</html>