ich bin der Verzweiflung nahe und zweifele langsam an meinem Verstand. Ich habe im Zuge meiner ersten XHTML und CSS-Versuche eine Testseite programmiert, und bekomme die Abstände nicht in den Griff. In früheren Versionen hat alles funktioniert, und jetzt nicht mehr. Damit man die <DIV> besser sehen kann, habe ich die grellen Hintergrundfarben hinzugefügt ...
Mein Problem:
1. Woher kommen die Abstände zwischen den weißen flächen?
2. Warum bekomme ich den Abstand zum oberen Browserrand nicht auf Null gesetzt?
Hier ein Bild, das den aktuellen Stand zeigt: (Link)
http://www.petrimedia.de/temp/abstand_fehler.jpg
- Code: Alles auswählen
[b]Die XHTML-Datei:[/b]
[code]<!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">
<head>
<title>Petri Media GmbH - Lösungen für Werbung und IT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" lang="de" content="" />
<meta name="keywords" lang="de" content="" />
<meta name="language" content="de"/>
<meta name="city" content ="Siegen" />
<meta name="country" content ="Germany" />
<meta name="state" content ="NRW" />
<meta name="zipcode" content ="57080" />
<!-- Einbindung des Favicon -->
<link rel="shortcut icon" href="http://petrimedia.de/bitmap/favicon/favicon.ico" />
<!-- Einbindung der Standard-CSS-Dateien -->
<link rel="stylesheet" type="text/css" media="screen" href="css/petrimedia_schriftsatz.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/petrimedia_layout.css"/>
<!-- Einbindung der individuellen CSS-Dateien -->
</head>
<body>
<!-- Beginn des zentrierenden Haupt-DIVs -->
<div id="webauftritt">
<!-- Implementierung des "Slogan"-Bereichs im Kopf -->
<div id="slogan">
<!-- Grafik wird via CSS eingefügt -->
<h1> <br />
Slogan hier einfügen. </h1>
</div>
<!-- Implementierung des "Pfadleisten"-Bereichs im Kopf -->
<div id="pfadleiste">
<!-- Grafik wird via CSS eingefügt -->
</div>
<!-- Implementierung des "Trenner"-Elementes im Kopf -->
<div id="trennerPfadleiste">
<!-- Grafik wird via CSS eingefügt -->
</div>
<!-- Implementierung des "Üenschrift"-Bereiches im Kopf -->
<div id="ueberschrift">
<h1>Überschrift hier einfügen</h1></div>
<!-- Implementierung des "Trenner"-Elementes im Kopf -->
<div id="trennerUeberschrift">
<!-- Grafik wird via CSS eingefügt -->
</div>
<!-- Implementierung des "Hauptbereiches" -->
<div id="hauptbereich">
<!-- Grafik wird via CSS eingefügt -->
<!-- Navigation und Inhaltsbereich folgen -->
<p>Lirum Larum Lorem Ipsum sit dolor amet</p>
<p>Hauptbereich mit Navigation und Inhaltsbereich</p>
</div>
<!-- Implementierung des "Trenner"-Elementes unter dem Hauptbereich -->
<div id="trennerInhalt">
<!-- Grafik wird via CSS eingefügt -->
</div>
<!-- Implementierung des "Fußnavigations"-Bereiches unter dem Hauptbereich -->
<div id="fussnavigation">
<!-- Grafik wird via CSS eingefügt -->
<p>Fussnavigation</p>
<p>lirum <br />
larum</p>
</div>
<!-- Implementierung des "Trenner"-Elementes unter dem Hauptbereich -->
<div id="trennerFuss">
<!-- Grafik wird via CSS eingefügt -->
</div>[/code]
<!-- Implementierung des "Infobereiches"-Bereiches unter dem Fussnavigationsbereich -->
<div id="infobereich">
<!-- Grafik wird via CSS eingefügt -->
<p>Infobereich</p>
</div>
<!-- Implementierung des "Fuß"-Elementes am unteren Ende der Seite -->
<div id="fuss">
<!-- Grafik wird via CSS eingefügt -->
</div>
</div>
</body>
</html>
Die CSS-Datei
- Code: Alles auswählen
body {
/*background-image: url(../bitmap/gemeinsam/layout/seitenhintergrund.jpg);*/ /*temporär auskommentiert */
background-color: #ff9922; /*Farbe nur temporär eingesetzt */
margin: 0px;
}
#webauftritt {
width: 900px;
padding-top: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: #ff0000; /*Farbe nur temporär eingesetzt */
}
#slogan {
width: 876px;
height: 55px;
background-image: url(../bitmap/gemeinsam/layout/slogan.jpg);
margin: 0px;
padding: 0px;
padding-left: 20px;
}
#pfadleiste {
width: 876px;
height: 30px;
background-image: url(../bitmap/gemeinsam/layout/pfadleiste.jpg);
margin: 0px;
padding: 0px;
padding-left: 20px;
}
#trennerPfadleiste {
width: 896px;
height: 1px;
background-image: url(../bitmap/gemeinsam/layout/trenner_pfad.jpg);
margin: 0px;
padding: 0px;
}
#ueberschrift {
width: 876px;
height: 59px;
background-image: url(../bitmap/gemeinsam/layout/ueberschrift.jpg);
margin: 0px;
padding: 0px;
padding-left: 20px;
}
#trennerUeberschrift {
width: 896px;
height: 1px;
background-image: url(../bitmap/gemeinsam/layout/trenner_ueberschrift.jpg);
margin: 0px;
padding: 0px;
}
#hauptbereich {
width: 856px;
background-image: url(../bitmap/gemeinsam/layout/hauptbereich.jpg);
margin: 0px;
padding: 0px;
padding-left: 20px;
padding-right: 20px;
}
#trennerInhalt {
width: 896px;
height: 1px;
background-image: url(../bitmap/gemeinsam/layout/trenner_inhalt.jpg);
margin: 0px;
padding: 0px;
}
#fussnavigation {
width: 856px;
background-image: url(../bitmap/gemeinsam/layout/hauptbereich.jpg); /* hier wird momentan redundant das gleiche Bild wie im Hauptbereich als Hintergrund verwendet */
margin: 0px;
padding: 0px;
padding-left: 20px;
padding-right: 20px;
}
#trennerFuss {
width: 896px;
height: 1px;
background-image: url(../bitmap/gemeinsam/layout/trenner_fuss.jpg);
margin: 0px;
padding: 0px;
}
#infobereich {
width: 856px;
background-image: url(../bitmap/gemeinsam/layout/hauptbereich.jpg); /* hier wird momentan redundant das gleiche Bild wie im Hauptbereich als Hintergrund verwendet */
margin: 0px;
padding: 0px;
padding-left: 20px;
padding-right: 20px;
}
#fuss {
width: 896px;
height: 30px;
background-image: url(../bitmap/gemeinsam/layout/fuss.jpg);
margin: 0px;
padding: 0px;
}
PS: Beide Dateien werden vom validator als Fehlerfrei bestätigt, sprich: die Syntax muss korrekt sein. Daher kann ich ja nur einen semantischen Fehler gemacht haben oder?
![;-]](./images/smilies/icon_impudently.gif "Extrem frech"){kind=icon}
