Problem mit Hintergrund

[znarf]

Hallo liebe Leute =)
Ich bin gerade dabei eine kleine Homepage mit Dreamweaver zu erstellen.
Mit den HTML-Codes bin ich einigermaßen vertraut, allerdings keineswegs ein Profi.

Jetzt ist mir aber ein Problem aufgekommen, wofür ich einfach keine Lösung weiß.
Ich habe ja mittlerweile akzeptiert, dass die von mir entworfene Seite nur mit Firefox korrekt angezeigt wird (Schriftart, sich erweiternde Navigation), allerdings wird diese Sache auch beim Fuchs falsch angezeigt.

Und zwar: Ich möchte für meinen Text einen Hintergrund, allerdings läuft er leider nicht flüßig, wenn <p></p>. Ich kann mein Problem leider nicht genau schildern, somit sind meine Informationen ein wenig dürftig.
Deshalb habe ich meine Seite (keinesfalls fertig) mal hochgeladen und hoffe ihr könnt mir helfen und, falls euch gleich was einfällt, mir ein paar Tips geben da ich eigentlich mit meinem Lyout noch nicht zufrieden bin, auch nicht, dass meine Seite nur mit Firefox korrekt angezeigt wird.

>> meine Seite <<

lg znarf

PS: Da ihr ja nicht die .css – Datei anschauen könnt:

@charset "utf-8";
body {
background-color: #F0E68C;
font-family: "Berlin Sans FB";
}

#navigation {
padding-top: 10px;
padding-left: 10px;
height: 100%;
width: 100%;
padding-bottom: 11px;
font-family: "Century Gothic";
}
#top {
background-image: url(images/top.png);
background-repeat: no-repeat;
height: 99px;
width: 1108px;
text-align: center;
}
#oben {
background-image: url(images/oben.png);
background-repeat: no-repeat;
height: 168px;
width: 1057px;
}
#mitte {
background-image: url(images/mitte.png);
background-repeat: repeat-y;
height: 100%;
width: 1029px;
padding-right: 15px;
padding-left: 15px;
font-family: "Century Gothic";
font-size: 18px;
text-align: justify;
}
#aktuell {
font-family: Broadway;
font-size: 40px;
text-align: center;
}

h2 {
font-family: "Century Gothic";
font-size: 30px;
}


h1 {
font-family: Forte;
font-size: 53px;
letter-spacing: 5px;
color: #b77c27;
}
#inhalt {
height: 100%;
width: 100%;
padding-right: 10%;
padding-left: 10%;
padding-top: 40px;
padding-bottom: 10px;
}
#vorwort {
width: 100%;
padding-top: 40px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

#middle {
background-image: url(images/middle.png);
background-repeat: repeat-y;
width: 1078px;
padding-right: 15px;
padding-left: 15px;
height: 100%;
font-size: 20px;
}
#unten {
background-image: url(images/unten.png);
background-repeat: no-repeat;
height: 168px;
width: 1057px;
position: absolute;
}

#bottom {
background-image: url(images/bottom.png);
background-repeat: no-repeat;
height: 70px;
width: 1053px;
font-family: "Gill Sans MT";
text-align: left;
padding-left: 55px;
font-size: 15px;
position: absolute;
}
#logo {
background-image: url(images/fkay.jpg);
padding-bottom: 150px;
}

#navi, #navi ul { list-style-type:none; margin:0; padding:0; }
#navi li { width:128px; float:left; }
#navi li { margin:0 15px 0 0; }
#navi li ul { display:none; }
#navi li:hover ul { display:block; }
#navcontainer { height:16px; position:relative; }
#navi { position:absolute; }
#navi ul li { border:none; margin:0; }
#navi a { text-align:center; display:block; padding:0.1em; }
#navi a:link { color:#FF6347; background:#8B0000; text-decoration:none;}
#navi a:visited { color:#FF6347; background:#8B0000; text-decoration:none;}
#navi a:active { color:#FF6347; background:#8B0000; text-decoration:none;}
#navi a:hover { color:#800000; background:#FF0000; text-decoration:none; }

#navisecret a { text-align:center; display:block; padding:0.1em; }
#navisecret a:link { color:#f0e68c; background:#f0e68c; text-decoration:none;}
#navisecret a:visited { color:#f0e68c; background:#f0e68c; text-decoration:none;}
#navisecret a:active { color:#f0e68c; background:#f0e68c; text-decoration:none;}
#navisecret a:hover { color:#8B0000; background:#FF6347; text-decoration:none; }

#navisecret2 a { text-align:center; display:block; padding:0.1em; }
#navisecret2 a:link { color:#414141; background:#e1e1e1; text-decoration:none;}
#navisecret2 a:visited { color:#414141; background:#e1e1e1; text-decoration:none;}
#navisecret2 a:active { color:#414141; background:#e1e1e1; text-decoration:none;}
#navisecret2 a:hover { color:#e1e1e1; background:#414141; text-decoration:none; }
a {
font-family: Bauhaus 93;
}
a:link {
text-decoration: underline;
}
#diary {
padding-left: 150px;
}

a:visited {
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: underline;
}
#haftungshinweis {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
}

 

[Efchen]

Mit den HTML-Codes bin ich einigermaßen vertraut, allerdings keineswegs ein Profi.

Bei HTML braucht man kein Computerprofi zu sein, um das zu verstehen. Denn HTML ist eine Sprache, mit der Du die Bedeutung Deines Inhalts auszeichnest. Und das weißt Du am besten, was Dein Inhalt bedeuten soll. Das wichtige ist, dass man versteht, dass HTML nicht für das Aussehen einer Website gedacht ist, sondern allein die Semantik definiert. Das ist schon alles. Dann muss man nur noch wissen, was es für Tags gibt und das richtige auswählen. Die letzte Wahl ist das <div>, das Sinnbereiche gruppieren soll, oftmals auch einfach, um mehrere Elemente gemeinsam zu formatieren (dann mit CSS!).

Ich habe ja mittlerweile akzeptiert, dass die von mir entworfene Seite nur mit Firefox korrekt angezeigt wird

Das muss man nicht hinnehmen. Durch gutes HTML wird eine Website in jedem Browser nutzbar, mit CSS sieht sie auch schön aus. Und selbst, wenn der IE immer hinter den W3C-Standards hinterher hinkt, gibt es für die meisten Fälle irgendwelche Würgarounds.

allerdings wird diese Sache auch beim Fuchs falsch angezeigt.

Dann wirst Du mit großer Wahrscheinlichkeit einen Fehler in Deinem Code haben.

allerdings läuft er leider nicht flüßig, wenn <p></p>.

Deutsche Sprache, schwäre Sprache? ;-) Ich nix verstehen dieses Satz.

falls euch gleich was einfällt, mir ein paar Tips geben da ich eigentlich mit meinem Lyout noch nicht zufrieden bin, auch nicht, dass meine Seite nur mit Firefox korrekt angezeigt wird.

1. Der Abstand wird vom margin der Textabsätze verursacht. Installier Dir das FF-Plugin Firebug, dann siehst Du das sofort.
2. Dein HTML-Code tendiert zu div-Suppe. Du gruppierst z.B. ein <h1> mit Deinem div#top. Warum? Zum Gruppieren braucht man eigentlich mindestens zwei Elemente. Dein div#top kannst Du getrost vergessen. Alle Eigenschaften, die Du dem div gibst, kannst Du auch dem h1 geben, denn beides sind Block-Elemente, die sich gleich verhalten.
Genauso Dein div#bottom. Darin sind überdies die <br> überflüssig, weil man Abstände mit CSS macht. Das <strong> sagt aus, dass der Text darin für Dich enorm wichtig ist, bei Vorlesebrowsern wird er demnach betont. Ich bezweifle, dass das Dein Intent ist. Außerdem fehlt die Auszeichnung als Textabsatz (<p>, als Ersatz für das div).

Da ihr ja nicht die .css – Datei anschauen könnt:

Warum nicht? Wenn ich das nicht könnte, könnte es mein Browser nicht, und könnte die Seite nicht gemäß der Vorgaben darstellen. Natürlich geht das, die URL steht doch im HTML-Code.

Gruß,
-Efchen

P.S.: Es sind noch ein paar mehr Fehler im HTML-Code, sowohl von der Syntax her, als auch in bezug auf die Semantik.