Probleme mit Abständen vom Fensterrand
MartinM
- css
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>
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
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
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
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