Sebastian Schmidt: CSS-Design verschwendet Platz

SELF-Forum

CSS-Design verschwendet Platz

Sebastian Schmidt
– Informationen zu den Bewertungsregeln

Hallo zusammen,

ich habe ein kleines Problem mit einem CSS-Design.

hier der Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>
      Test
    </title>
    <style type="text/css">
      #site {
        max-width:1000px;
        min-width:500px;
        margin: auto;
        padding-top:20px;
        background-color: #FFFFFF;
      }

#header {
        position:relative;
        background-color: #EEEEEE;
        height: 200px;
        z-index:1;
      }

#content {
        position:relative;
        width:90%;
        left:5%;
        top:-220px;
        padding-top:220px;
        background-color: #AAAAAA;
        border: 3px solid #FF0000;
        z-index:0;
      }

#footer {
        position:relative;
        top:-210px;
        max-width:1000px;
        min-width:500px;
        margin: auto;
        clear: both;
        text-align: center;
        color: #CCCCCC;
        font-size:0.8em;
      }

</style>
  </head>
  <body>
    <div id="site">
      <div id="header"><a href="/"><ipg src="header.png" alt="header" /></a></div>
      <div id="content">
        <p>Lorem ipsum dolor sit amet consectetuer dolor eros tempor Praesent ac. Quis ac sem Aliquam penatibus neque sed fringilla Aliquam nec nec. Nec dui pellentesque iaculis accumsan vitae Curabitur Nullam tellus enim rutrum. Orci tempus consequat convallis sed Aliquam tincidunt nec lorem Integer Aenean. Ut Donec metus enim eget ac et tincidunt lobortis.</p>
       </div>
      <div id="footer">Bla bla bla, Impressum und so</div>
    </div>
  </body>
</html>

Mein Problem ist, dass wenn der Inhalt (content) länger wird immer ein unschöner weißer Bereich am Ende der Seite entsteht, der zu einer Scrollleiste führt, obwohl überhauptnichts zu scrollen ist.
Ich hab mich jetzt etwas "festgefahren" und suche ein paar Ideen.

Gruß
Sebastian

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS-Design verschwendet Platz

    Cheatah
    – Informationen zu den Bewertungsregeln

    Hi,

    Mein Problem ist, dass wenn der Inhalt (content) länger wird immer ein unschöner weißer Bereich am Ende der Seite entsteht, der zu einer Scrollleiste führt, obwohl überhauptnichts zu scrollen ist.

    doch: die 220 Pixel, die das content-Element in seiner Darstellung nach oben geschoben wurde. Der reservierte Platz eines relativ positionierten Elements ist exakt der, den es ohne die relative Positionierung einnehmen würde.

    Ich hab mich jetzt etwas "festgefahren" und suche ein paar Ideen.

    Wenn (also falls) Du das Element wirklich nach oben schieben musst, verwende negative margins.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. CSS-Design verschwendet Platz

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    Schickst du Browser absichtlich in den Quirks-Modus? [Jendryschik]

    #content {
            position:relative;
            top:-220px;
          }

    Mein Problem ist, dass wenn der Inhalt (content) länger wird immer ein unschöner weißer Bereich am Ende der Seite entsteht

    Lass mich raten: Es sind 200 Pixel?

    Relative Positionierung verschiebt nur die Box; der Platz, den sie ohne Verschiebung beansprucht hätte, wird dennoch für sie freigehalten. [CSS2 §9.4.3]

    See ya up the road,
    Gunnar

    --
    „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln