✔ CSS Layout für IE UND Firefox!

Status
Nicht offen für weitere Antworten.
G

Gladiator6

Erfahrenes Mitglied
Hi

Ich beschäftige mich seit einiger Zeit mit CSS, habe mir auch ein Buch gekauft, um CSS zu lernen. CSS ist ja schon praktisch, aber die Browsereigenheiten machen einem den Anfang wirklich schwer.

Ich möchte folgendes Layout mit CSS erstellen (siehe Anhang):

Die Box sollte Vertikal und Horizontal zentriert sein. Dann hat es noch 4 weitere Div Elemente die sich innerhalb der Box befinden: Navigation, 2 Linien, und der Textbereich.

Ich habe alles mit CSS gemacht, mit Firefox sieht auch alles bestens aus, aber der IE will da natürlich nicht mitmachen! Ich weiss nicht, wie ich Anfangen muss, damit das Layout IE und Firefox konform ist (die anderen Browser sind mir egal).

Da ich am Schluss eine DIV Suppe erhalten habe, würde ich gerne nochmals vorne Anfangen, mit Tipps wie ich Anfangen sollte, damitt das klapt!
 

Anhänge

  • 25675attachment.jpg
    25675attachment.jpg
    35,4 KB · Aufrufe: 22
Als erstes vllt die Suche benutezen ;) ... ist manchmal ganz nützlich.

Was dein Problem angeht, ein kleiner Tipp, wie ich es gelöst hätte. Ist vllt etwas umständlich, aber es funktioniert bei mir ganz gut ^^

Erzeuge ein <div> Element, dass alles umspannt (ich nenne es immer Container).

<div id="container">
<div id="xy-name"></div>
<div id="yz-name"></div>
</div>

Der Vorteil hierbei: "container" sitzt an einer fixen (oder variablen) Stelle des Browserfensters. Die restlichen Elemente kannst du nun in Abhängigkeit von deinem container und nicht mehr vom Browserfenster anordnen. Sehr praktisch, wenn du ein Layout hast, dass sich immer zentral vom Browserfenster befinden soll (egal wie groß selbiges ist).
 
Wenn du uns den dazugehörigen Quelltext (HTML + CSS) zeigst, können wir dir sicherlich sagen, wo der Grund für die unterschiedliche Seitendarstellung in den beiden genannten Browsern liegt.
 
@ stoffelchen

Genau so habe ich es auch gemacht. Das Problem war, dass die Navigation innerhalb des Containers dann im IE mittig und im Firefox links angezeigt wurde!

Hier der Code:

CSS

Code: 
#box1 {

position: absolute;
top: 50%;
left: 50%;
width: 750px;
height: 550px;
margin-top: -275px;
margin-left: -375px;
background-color: #8BB4E6;
border: 3px solid #4545F6;
padding: 0px;

}

#box2 {

width: 160px;
height: 550px;
background-image: url(img/box2.jpg);
border: 0px;
padding: 0px;
margin-left:0px;
margin-top:0px;
}

#box3 {

width: 560px;
height: 470px;
background-color: #8BB4E6;
border: 0px;
padding: 0px;
margin-left: 190px;
overflow:auto;
max-width:565px;
text-align:left;
}

#line1 {

width: 5px;
height: 500px;
background-image: url(img/line1.jpg);
border: 0px;
padding: 0px;
margin-left: 180px;
margin-top: -500px;
}

#line2 {

width: 565px;
height: 25px;
vertical-align: middle;
text-align: left;
font-size: 14pt;
background-image: url(img/line2.jpg);
border: 0px solid black;
padding: 0px;
margin-left: 185px;
margin-top: -500px;
}

HTML

Code: 
<html>
<head>

<link rel="stylesheet" type="text/css" href="style.css">

<title>Index</title>

</head>

<body>
    <div id="box1">

        <div id="box2"></div>
        <div id="line1"></div>
        <div id="line2">Index</div>
        <div id="box3"></div>
</div>
</body>
</html>

Mit Firefox sieht es ok aus, mit IE nicht!
 
Und hier mein Lösungsvorschlag, den ich mal auf die Schnelle gestrickt habe:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body {
font-size: 11px;
}

* {
margin: 0;
padding: 0;
}

div#wrapper {
position: absolute;
left: 50%;
width: 750px;
margin-left: -375px;
top: 50%;
height: 550px;
margin-top: -275px;
background: #6bbbfa;
border: 1px solid #000;
}

div#navigation {
width: 200px;
height: 550px;
background: #39a7fc;
float: left;
margin-right: 0 !important;
margin-right: -3px;
}

div#linie_1 {
margin-left: 200px;
margin-top: 80px;
background: #8ab2e6;
height: 15px;
}

div#linie_2 {
margin-left: 200px;
background: #8ab2e6;
height: 455px;
}

div#text {
width: 535px;
height: 455px;
background: #33709f;
float: right;
margin-left: 0 !important;
margin-left: -3px;
}

div#clear {
clear: both;
height: 0;
line-height: 0;
margin: 0;
padding: 0;
font-size: 0;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="navigation">navigation</div>

     <div id="linie_1">linie 1</div>

     <div id="text">text</div>

     <div id="linie_2"></div>

     <div id="clear"></div>
</div>

</body>
</html>
Den einen oder anderen Dimensionswert der inneren Boxen wirst du noch auf deine Vorstellungen anpassen müssen ;)
 
Was ist jetzt genau der Unterschied? Bzw. was genau stört den IE an meiner Version?

Deinen Code kann ich bis auf div#clear nachvollziehen!
 
Naja, ich habe das Konzept der nebeneinanderliegenden Boxen mit der float-Eigenschaft umgesetzt und zum Schluss mit dem DIV#clear wieder den normalen Textfluss im Dokument hergestellt.

Was der IE an deinem CSS-Code nicht mag, kann ich dir so nicht sagen, da ich in der Seitendarstellung keine Unterschiede gegenüber dem Firefox entdecken kann.
 
div#navigation hat bei mir noch ein Hintergrundbild. Im Firefox wird das korrekt angezeigt, im IE, ist es ganz zuhinterst angeordnet, und in der Mitte des Hauptcontainers, also nicht links.

Gibt es vielleicht irgend ein Tutorial oder ein Buch, das speziell die Anordnung von div Elementen behandelt, damit alles wenigstens auf den gängigen Browsern korrekt angezeigt wird?
 
Hast du schonmal versucht 2 css dateien zu erstellen? Eine für Firefox und eine für IE? Du kannst ja mit Java-Skript ne kleine Abfrage einfüge, die schaut, welcher Browser verwendet wird. Jenachdem sollte dann die css-Datei geladen werden.
 
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück