klaas: DIV - VerständnisProblem

Beitrag lesen

SELF-Forum

DIV - VerständnisProblem

klaas
– Informationen zu den Bewertungsregeln

Nabend zusammen,

der Thread beruht auf einen älteren Thread

Nachdem ich mich einige Zeit leider nicht mit dem Thema auseinandersetzten konnte (zeitliches Problem). Wollte ich nochmal auf das Problem zurückkommen.

Ich hab derweil den Code von Suit (danke nochmal) etwas modifiziert, jedoch stoße ich auf das Problem, das sich alle Ebenen überlappen. Daher frage ich mich ob es richtig/wichtig ist in einem tableless-design margin-left, right etc. zu nutzen um die Ebenen zu positionieren.

Ich habe die CSS-Anweisung fürs erste in die HTML gelegt (export erfolgt später ;) )

Grüße
Klaas

<!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" xml:lang="de" lang="de">  
  <head>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
    <title>Template</title>  
    <link type="text/css" rel="stylesheet" href="css/style.css" media="screen, projection" />  
  </head>  
  <body>  
  
    <div id="container" style="width:850px; margin:auto; position:relative; background-color:#0FF;">  
      <div id="header" style="position:absolute; margin-left:370px; width:480px; height:200px; background-color:#09F;">  
        <h1><a href="/">Nightfall Events</a></h1>  
      </div>  
  
      <div id="content" style="display:block; position:absolute; margin-top:200px; background-color:#0F6">  
        <h2>Ãœberschrift</h2>  
        <div id="col0">  
          <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>  
        </div>  
      </div>  
  
      <div id="menu" style="position:absolute; background-color:#009; z-index:1;">  
        <h2>Navigation</h2>  
        <ul>  
          <li>Menüpunkt</li>  
          <li>Menüpunkt</li>  
          <li>Menüpunkt</li>  
        </ul>  
      </div>  
  
      <div id="media" style="position:absolute;"><img src="foo.jpg" height="200px" alt="foo" /></div>  
      <div id="footer" style="background-color:#009; position:absolute; bottom:0px;">  
        footer  
      </div>  
    </div>  
  
  
  </body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln