Div-Container -Darstellung Web

straub · 04.01.2011

Hallo Leute,
ich bastle immer noch an meiner HP. Dabei ist mir aufgefallen, dass die Testseite in Chrome und IE unterschiedlich dargestellt werden. Ist das normal oder hab ich mal wieder was übersehen?
Ich danke schon mal für eure Hilfe.
Hier mal den Code für die Profis:

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
    background-color: #00C;
}
#rahmen {
    margin: 0px;
    height: 800px;
    width: 1500px;
}
#navibox {
    background-color: #666;
    width: 880px;
    margin-top: 10px;
    margin-left: 200px;
    height: 40px;
}
#physiotherapie {
    height: 40px;
    width: 250px;
    margin-left: 10px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 36px;
    color: #999;
}
#navigation {
    height: 40px;
    width: 550px;
    margin-left: 300px;
    margin-top: -40px;
    margin-right: auto;
    margin-bottom: auto;
}
ul {
    list-style-type: none;
}
li {
    float: left;
    margin-right: 1.2em;
    font-size: 18px;
}
#rahmen #navibox #physiotherapie #navigation ul li a {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    text-decoration: none;
    color: #999;
    margin: auto;
}
-->
</style></head>

<body>
<div id="rahmen">
<div id="navibox">
    <div id="physiotherapie">Physiotherapie
      <div id="navigation">
        <ul>
          <li><a href="#">Home          </a></li>
          <li><a href="#">Leistungen</a></li>
          <li> <a href="#">Profil </a></li>
          <li><a href="#">Flyer</a></li>
          <li> <a href="#">Kontakt</a></li>
        </ul>
      </div>
   </div>
  </div>
</div>
</body>
</html>

Tim1901091 · 04.01.2011

AW: Div-Container -Darstellung Web

straub schrieb:

Hallo Leute,
ich bastle immer noch an meiner HP. Dabei ist mir aufgefallen, dass die Testseite in Chrome und IE unterschiedlich dargestellt werden. Ist das normal oder hab ich mal wieder was übersehen?
Ich danke schon mal für eure Hilfe.
Hier mal den Code für die Profis:

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
    background-color: #00C;
}
#rahmen {
    margin: 0px;
    height: 800px;
    width: 1500px;
}
#navibox {
    background-color: #666;
    width: 880px;
    margin-top: 10px;
    margin-left: 200px;
    height: 40px;
}
#physiotherapie {
    height: 40px;
    width: 250px;
    margin-left: 10px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 36px;
    color: #999;
}
#navigation {
    height: 40px;
    width: 550px;
    margin-left: 300px;
    margin-top: -40px;
    margin-right: auto;
    margin-bottom: auto;
}
ul {
    list-style-type: none;
}
li {
    float: left;
    margin-right: 1.2em;
    font-size: 18px;
}
#rahmen #navibox #physiotherapie #navigation ul li a {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    text-decoration: none;
    color: #999;
    margin: auto;
}
-->
</style></head>

<body>
<div id="rahmen">
<div id="navibox">
    <div id="physiotherapie">Physiotherapie
      <div id="navigation">
        <ul>
          <li><a href="#">Home          </a></li>
          <li><a href="#">Leistungen</a></li>
          <li> <a href="#">Profil </a></li>
          <li><a href="#">Flyer</a></li>
          <li> <a href="#">Kontakt</a></li>
        </ul>
      </div>
   </div>
  </div>
</div>
</body>
</html>

Welcher IE? IE9 und IE8 zeigens bei mir genauso wie in Firefox oder Chrome an. IE7 funktioniert mit lokalen Dateien wohl nicht. Bei IE6 und IE5.5 ist die Beschriftung der Navigation nach oben gerutscht.

Übrigens würde ich dir empfehlen, die Anzahl deiner Divs mal zu reduzieren. Das gibt sonst ne chronische Div-Eritis ;-) (ansteckend und nicht mit Antibiotika behandelbar...).
Das Rahmen-Div kann z.B. weg. Ebenso das Navibox- und das Navigation-Div. id="navigation" weist du einfach dem <ul>-Element zu, die Rolle von id="rahmen" übernimmt das <body>-Element (ohne zusätzliche id) und id="navibox" brauchst du für das Design gar nicht. Es ist zwar einfacher, um alles eine Box drum zu basteln, aber man brauch es in den seltensten Fällen wirklich, sodass es dann meistens überflüssiger Code ist, der jedes Mal neu geladen werden muss und der die Fehlersuche nicht gerade einfacher macht.

Edit:
Noch ne Kleinigkeit:

Code:

<div id="physiotherapie">Physiotherapie

ist schlechter Stil. Pack das "Physiotherapie" lieber in ne Überschrift.

straub · 04.01.2011

AW: Div-Container -Darstellung Web

Danke für Deine Hilfe,
hab mir IE8 gerade geladen, es ist wie DU schreibst. Auf die Idee bin ich nicht gekommen,dass es am IE liegt. Ich werde die Divs reduzieren.

Gruß
Straubi