CSS Layout Probleme

Silverhawk1988 · 21. Dezember 2008

Hallo Community,

ich bitte um Hilfe bei meinem Layout, dass ich kürzlich erstellt habe. Ich bin kurz vorm durchdrehen.

http://uengelmann.ue.ohost.de/CSS/

Das ist mein Layout.

Bei Firefox und Opera wird alles korrekt angezeigt.. aber wenn der IE rankommt sieht mal alles total anders aus.. Verschoben usw usw..

Ich habe schon eine Menge gelesen über Webstandards, Browserversionen - anpassung auf einen Nenner, Quirksmode und W3C Standard..

Leider muss ich sagen, dass ich nirgendswo eine direkte Antwort auf mein Problem gefunden habe, weil ich es einfach nicht verstanden habe.

Ich habe auch schon mein CSS prüfen ( validieren ) lassen:

http://jigsaw.w3.org/css-validator/...rofile=css21&usermedium=all&warning=1&lang=de

Da ist alles in bester Ordnung..

Kann mir jemand eine direkte Antwort auf mein Problem geben? was mache ich falsch.. wo ist das problem?? Wie kann ich dafür sorgen, dass alle Browser das selbe anzeigen??

Ich muss doch irgend etwas ändern.. aber was???

Bitte um Hilfe..

Ich hoffe dass jemand in der Lage ist mit zu helfen.. Ich möchte doch nur ein Layout, dass überall funktioniert..

hier ist der CSS Code.

Code:

body {
background-image: url("hintergrund.jpg");
}

#zentrum { position:absolute; top:50px; left:100px; right:100px; width: 800px;   
min-height:390px;  z-index:1; background-color:white; }

#logo { position:absolute; top:0px; left:0px; width:120px; height:120px;
      z-index:1; background-image: url("logo.jpg"); }
#mitte { position:absolute; top:0px; left:120px; width:400px; height:120px;
      z-index:1; background-image: url("background.jpg"); }
#back { position:absolute; top:0px; left:120px; right:0px; height:120px;
      z-index:1; background-image: url("rechts.jpg"); }
#navi { position:absolute; top:120px; left:0px; width:800px; height:20px;
      z-index:1; background-color:#8CCDE1; }

#impressum { position:absolute; bottom: 0px; left: 0px; background-color:#DADADA;
      width:800px; height: 40px;

 }

#inhalt { position:absolute; top:145px; width: 585px; left: 5px;
      background-color:#DADADA; z-index:1; }

#status { position:absolute; margin-top:5px;  margin-right: 5px; top:140px; right: 0px; width:200px; height: 200px;
      background-color:#DADADA; z-index:1; }

und hier der HTML Code:

Code:

<html>
  <head>
    <title>Mein Dokument</title>
    <link rel="stylesheet" type="text/css" href="Style/style.css" />
  </head>

<body>

<!-- Layout Anfang-->
<div id="zentrum">zentrum

<div id="logo"></div>
<div id="back"></div>
  <div id="navi">Navigationsleiste</div>
  <div id="mitte"></div>
  <div id="impressum">Copright & Impressum</div>
  <div id="status">Statusanzeige des Logins</div>
  <div id="inhalt"> Hier soll der Inhalt hin.
</div>
</div>
<!-- Layout Ende-->


</body>

</html>

Mit freundlichen Grüßen

Uwe Engelmann

- Ein verzweifelter CSS Anfänger -

Livven · 21. Dezember 2008

AW: Layout Probleme!!!

Mach mal einen Screenshot davon, wie es aussehen soll, und davon, wie es im IE aussieht. Kann deine Schilderungen nur begrenzt nachvollziehen, zumal ich grad nur den IE6 zur Verfügung hab.

Und du kannst dein CSS noch so validieren - der IE wird es trotzdem (eher: gerade deshalb) falsch anzeigen

.

Darii · 21. Dezember 2008

AW: Layout Probleme!!!

Silverhawk1988 schrieb:
Kann mir jemand eine direkte Antwort auf mein Problem geben? was mache ich falsch.. wo ist das problem??

Der IE ist das Problem.

Wie kann ich dafür sorgen, dass alle Browser das selbe anzeigen??

Das ist ein u.U. unmögliches Ziel, also verabschiede dich davon. Versuch durch rumprobieren herauszubekommen, wo es beim IE hakt.

DaveStar · 21. Dezember 2008

AW: Layout Probleme!!!

Tja, Willkommen im Club der IE-Geplagten.

Ich hatte vor einigen Wochen das Vergnügen eine Website mit CSS zu realisieren. Diese sah dann ziemlich schnell in Opera und Firefox genau so aus wie ich wollte... Dann öffnete ich sie mit dem IE und sah ein Desaster, die Elemente waren wild durcheinander verstreut, einige davon sogar zur Hälfte ausserhalb des Anzeigebereiches.

Lange Rede kurzer Sinn: Der IE interpretiert CSS fehlerhaft (je nach Version ziemlich fehlerhaft oder sogar katstrophal fehlerhaft). Musst du bei deiner Website auf IE Benutzer Rücksicht nehmen (was bei professionellen Seiten natürlich der Fall ist... bei ner privaten Seite würde ich den IE Usern einfach klipp und klar ne Meldung hinklatschen, dass sie sich nen richtigen Browser holen sollen), dann macht CSS leider keinen Spass, da du selten wirklich vorhersehen kannst, was der IE anzeigen wird.

Du hast nun (falls du auch IE User berücksichtigen willst/musst) entweder die Wahl, an deinem CSSheet so lange rumzudoktorn, bis es der IE zufällig mal halbwegs richtig anzeigt (und musst dabei hoffen, dass es dann auch die anderen Browser noch tun), oder du baust eine "Fork" ein, die bei IE Usern z.B. ein Tabellendesign anstelle eines CSS Designs anzeigt.
Beim herumdoktorn kann ich dir leider nicht helfen, da ich hier gerade gar keinen IE zum testen installiert hab, aber es gibt im Internet sicher einige hilfrecihe Infos, auf welche CSS-Kommandos der IE allergisch reagiert.
Ich habe mich bei meiner letzten Page für die Fork ($useragent = $_SERVER['HTTP_USER_AGENT']; if (eregi("MSIE", $useragent)) { ...) entschieden, da es mir einfach zu schade war ein an sich super funktionierendes CSSheet zu verschandeln, nur weil der IE damit nicht klar kam.

PW-toXic · 23. Dezember 2008

AW: Layout Probleme!!!

es gibt kein min-height beim internet explorer, das dem CSS standard entsrpricht.
ebenfalls gibt es keine height beim internet explorer, das dem CSS standard entsrpciht.

firefox/opera min-height == IE height

also einfach min-height mit height ersetzen, und alles geht.
Solltest du wirklich min-height brauchen, dann musst das 2 CSS layouts machen.. einmal für firefox/opera und einmal für IE6
und das geht so:



davon abgesehn: warum machst du alles mit position absolute? Das macht keinen Sinn, und ist imho schlechtes design.

An alle anderen:
Die Meisten Fehler beim IE entstehen durch die Benutzung von den CSS Attributen min-height (min-width) und padding allgemein.
Ein weiterer SEHR SEHR schwer zu findender Fehler sind Zeilenumbrüche im HTML code, die EIGENTLICH keine Auswirkung im design haben sollten, ihn aber beim IE haben.
Es macht beim IE z.b. einen unterschied, ob man
<img .. /><img .. /> schreibt oder
<img .. />
<img .. />

wenn man die drei Sachen beachtet, dann geht eignetlich alles super

(mal von png bildern abgesehn)
Und natürlich muss der (X)HTML und CSS validator ein valid ausspucken.

IE debuggin workflow:
alle interessanten Block elemente einen border geben:
border: 1px solid red/blue/yellow/green usw-- dann erkennt man den fehler meist recht schnell

busymonster · 31. Dezember 2008

AW: Layout Probleme!!!

PW-toXic schrieb:
davon abgesehn: warum machst du alles mit position absolute? Das macht keinen Sinn, und ist imho schlechtes design.

Das ist schlichtweg falsch.
Absolute Positionierung hat nichts mit schlechten Design zu tun, weil die Programmierung nichts mit Design gemeinsam hat. Die Programmierung muss das Design umsetzten. Und bei manchen Projekten ist es halt sinnvoll auch mal Teilbereiche oder das gesamte Projket absolut zu positionieren. Das ist aber von Fall zu Fall unterschiedlich.

PW-toXic schrieb:
... eignetlich alles super (mal von png bildern abgesehn)

PNG (8-Bit) Bilder sollten für aktuelle Browser immer den Gif-Bilder vorgezogen werden. Sie liefern durch einen anderen Algorithmus kleinere Dateigröße.

Suche

CSS Layout Probleme

Silverhawk1988

Newbie

Livven

Commander

Darii

Lt. Junior Grade

DaveStar

Commander

PW-toXic

Lieutenant

busymonster

Ensign

Ähnliche Themen