MartinM: Probleme mit Abständen vom Fensterrand

Hallo,

ich habe folgendes Problem:

Ich würde gerne den Inhalt meiner Seite zentriert direkt am oberen Rand des Browserfensters darstellen lassen. Meinem "Container" habe ich eine Breite von 780px gegeben.

Ich habe es aber leider nicht geschafft einen ca. 10 Pixel großen Rand über diesem Container wegzubekommen.
Esseiden ich habe außer meiner Navigationsleiste nichts auf der Seite

Hier ist meine Textseite
http://www.manegold.net/XHTML/index.php

Wenn ihr auf einen der Links klickt kommt ihr auf eine Seite ohne weiteren Inhalt. Das CSS-file ist allerdings das gleiche.

Was mache ich falsch???

Vielen dank für eure Antworten im Voraus

Gruß

Martin

Hier ist der CSS text:

body
{
margin: 0;
background-color: #61A17C;
}
#container
{
margin: 0 auto;
width: 780px;
background-color: #ffffff;
}
ul#navigation
{
margin: 0;
padding:0;
border: 0;
background-color: red;
width:100%;
text-align: center;
}
ul#navigation li
{
display: inline;
  list-style: none;
}
ul#navigation a
{
float : left; width: 130px;
text-decoration: none;
  font-weight: bold;
  color: maroon;
  background-color: #ccc;
  border:0;
}
ul#navigation a:hover
{
  color: white; background-color: gray;
}

------
Hier ist der PHP Code:
<?
echo "<?xml version="1.0" encoding="iso-8859-1" ?>"
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de" xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>testlayout</title>
<link rel="stylesheet" type="text/css" media="screen, projection" href="/XHTML/layout/css/main.css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Language" content="de" />
</head>
<body>
<div id="container">
  <ul id="navigation">
   <li><a href="index.php">home</a></li>
   <li><a href="index.php">home</a></li>
   <li><a href="index.php">home</a></li>
   <li><a href="index.php">home</a></li>
   <li><a href="index.php">home</a></li>
   <li><a href="index.php">home</a></li>
  </ul>
</div>

</body>
</html>

  1. Hi Du,

    ich kann dieses Phänomen zwar nicht wirklich erklären, aber habe mal spasseshalber mal folgendes an deinem Code verändert:

    #container
    {
    margin: 0 auto;
    width: 780px;
    background-color: #ffffff;
    border: 1px solid;
    }

    DAnn verschwindet der Abstand. Vielleicht hilft Dir das ja weiter.

    vg mel

    1. Hi Du,

      ich kann dieses Phänomen zwar nicht wirklich erklären, aber habe mal spasseshalber mal folgendes an deinem Code verändert:

      #container
      {
      margin: 0 auto;
      width: 780px;
      background-color: #ffffff;
      border: 1px solid;
      }

      DAnn verschwindet der Abstand. Vielleicht hilft Dir das ja weiter.

      vg mel

      Danke erst einmal. Allerdings verstehe ich die ganze Sache jetzt noch weniger. Eigentlich wollte ich das ganze ohne extra Rahmen.

      Mal sehen was noch kommt.

      Die Logik habe hinter CSS Layouts habe ich noch nicht ganz verstanden.

      Gruß

      Martin

      1. Habe es mir nochmal angesehen. Also Du verwendest eine ÜBerschrift mit dem <h2>-Tag. Auch dieser hat vordefinierte Abstände. Wenn die diese auf 0 setzt

        h2 {margin: 0;
        padding:0;
        }

        dann verschwindet der Abstand oben.

        vg mel

        1. Hi,

          Habe es mir nochmal angesehen. Also Du verwendest eine ÜBerschrift mit dem <h2>-Tag. Auch dieser hat vordefinierte Abstände.

          genau - wobei h1 hier wohl sinnvoller wäre.

          Und um auch alle Browser zu erreichen, fehlt noch body {padding:0;}

          freundliche Grüße
          Ingo