Positionieren mit CSS

**Alexander**

Hallo,
ich bin gerade dabei eine Website ohne Tabellen, dafür aber mit Div's aufzubauen. Klappt so weit auch schon ganz gut, nur zerpflückt der FireFox mir die Seite etwas. Soll heißen, dass links und rechts sowie oben und unten ein kleiner weißer Rand zwischen dem mittleren und dem äußeren Div bleibt. Im Internet Explorer rutscht das mitlere Div sogar ganz nach unten.
Ich hänge beide Fehler mal als Screenshot an. Dann sollte man das Problem erkennen können.

Wie kann ich den Fehler beheben?

Das CSS:

markieren

Code:

			* {

   text-align: left;

   border: none;

   font-family: Verdana, Helvetica, Sans-Serif;

}

div#container {

   margin: auto;

   width: 640px;

   height: 437px;

   padding : 0px;

}

div#header {

   background-image: url(../images/header.jpg);

   background-repeat: no-repeat;   

   width:640;

   height: 83px;   

}

div#navBar {

   background-image: url(../images/nav.jpg);

   background-repeat: repeat-x;   

   width:640;

   height: 27px;

}

div#left {

   background-image: url(../images/left.jpg);

   background-repeat: no-repeat;   

   float: left;   

   width: 7px;

   height:306px;

}

div#content {

   background-image: url(../images/contentbg.jpg);

   background-repeat: repeat-x;   

   width:640px;

   height: 306px;

   color: #71737A;

   font-size:10pt;

   text-align: justify;

   /* overflow:auto;*/ 

}

div#right {

   background-image: url(../images/right.jpg);

   background-repeat: no-repeat;   

   float:right;

   width: 8px;

   height:306px;

}

div#footer {

   background-image: url(../images/footer.jpg);

   background-repeat: no-repeat;   

   width: 640px;

   height: 22px

}

h1 {

   color: #213D96;

   font-size: 12pt;

   letter-spacing: 0.1em;

     list-style-image:url(../images/dot.gif);   

}

Die HTML-Seite

markieren

Code:

			<!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" lang="de" xml:lang="de">

  <head>

    <style type="text/css" media="all">@import "style/main.css";</style>

  </head>

  <body>

    <div id="container">

      <div id="header"></div>

      <div id="navBar"></div>

      <div id="left"></div>

      <div id="right"></div>

      <div id="content">

        <h1>Herzlich willkommen!</h1>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laore

et dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea

commodo consequat.

Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, duis autem vel

eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla

facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis

dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis

nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

     </div>

      <div id="footer"></div>

    </div>

  </body>

</html>

An den Spaces in den Div's ("") liegt es auch nicht. Wäre toll, wenn ihr einen Ansatz habt!

Vielen Dank für eure Antworten.
Alexander

**alcaeus**

Moin,

ein Grund koennte sein, dass du die Standardwerte fuer margin und padding belaesst. Da hat jeder Browser seine Eigenheiten, und daran koennte es liegen.

Der Grund fuer das Verschieben des content-divs ist einfach: ist nicht Platz genug, bricht es um. Du hast zwar alles pixelgenau berechnet, aber die oben angesprochenen Margins koennten dir da einen Strich durch die Rechnung machen.

Letzter Tipp:
Anstatt sowas:

markieren

Code:

kannst du auch das nehmen:

markieren

Code:

Vor allem aeltere Browser kennen @import nicht, waehrend das link-Tag immer funktioniert hat

[add]
Einen Tipp hab ich noch: verwende nicht absolute Hoehen, sondern relative, also nicht px, sondern em. Besonders bei Hoehenangaben ist das wichtig, aber auch bei Breiten. Der Vorteil: der Benutzer kann absolut in der Seite zoomen, und alles vergroessern, nicht nur den Text

Bei deinen height:83px-Angaben kommt es zu haesslichen Gebilden, wenn der Benutzer zoomt

[/add]

Greetz
alcaeus

**Alexander**

Vielen Dank für deine Antwort.
Ich habe jetzt überall margin: 0px und padding:0px; hinzugefügt.
Zwar ist das eine Problem mit den "Lücken" oben und unten weg, die Lücken an den Seiten aber sind geblieben.
Genau so das Problem mit dem IE.

Wie genau meinst du das mit den em-Angaben? Wenn ich alle px durch em ersetze, wird mir das Layout noch viel mehr zerpflückt.

**alcaeus**

Moin,

natuerlich, denn 1px ist nicht 1em. 1em ist die Breite eines "M" in der derzeitigen Schriftgroesse und -art. Siehe auch

Wikipedia

Was du bei der Breitenangabe beachten musst ist, dass die Gesamtbreite des Elements sich so berechnet:

markieren

Code:

			leftMargin + leftBorder + leftPadding + width + rightPadding + rightBorder + rightMargin
		

Im IE ist das allerdings nur der Fall, wenn du einen korrekten DOCTYPE und eine DTD angibst (das ist ja bei dir der Fall)
Wenn du also ein Element mit 500px Breite, 0px Border, 15px Padding und 15px Margin hast, ist die Gesamtbreite des Elements 530px. Ich hab jetzt nicht nachgerechnet, aber hast du das auch beachtet?

Greetz
alcaeus

**xJulian**

Ich würde die Standardwerte für margin und padding oben beim * reinschreiben, das spart Arbeit und Bytes.

Für das konkrete Problem: Nun, div#content hat eine Breite von 640px, genau wie div#container, also kein Wunder, dass für links und rechts da kein Platz mehr ist.

Deine weißen Rahmen solltest du mit margin und padding auf 0 eigentlich wegbekommen. Ansonsten achte darauf, dass du bei deinen Pixelangaben auch überall "px" dazuschreibst, das fehlt teilweise.

Zitat von alcaeus:

Wenn du also ein Element mit 500px Breite, 0px Border, 15px Padding und 15px Margin hast, ist die Gesamtbreite des Elements 530px. Ich hab jetzt nicht nachgerechnet, aber hast du das auch beachtet?

Es sind 560. Links und rechts.

**alcaeus**

Zitat von xJulian:

Es sind 560. Links und rechts.

Stimmt. Mathe war noch nie meine Staerke

Ob es intelligent ist, fuer alle Elemente margin und padding zu ueberschreiben, ist fraglich; ich mach das normalerweise nur fuer die Elemente bei denen ich es auch benoetige

Greetz
alcaeus

**Alexander**

Vielen Dank noch einmal.
Das mit der Breite von 640px bei content und dem container ist mir gar nicht aufgefallen

. Aber daran lag es scheinbar auch nicht.
Die em-Angaben muss ich mir noch einmal genauer anschauen, irgendwie glaube ich, dass das bei meinem Design nicht so passt. Denn eigentlich soll das ja bei jeder Größe gleich bleiben (unabhängig von der Schriftgröße). Ansonsten müsste mir ja bei einer anderen Schriftgröße das ganze Design wieder zerstückelt werden.

Habt ihr vielleicth noch eine andere Idee?

**xJulian**

Zitat von alcaeus:

Ob es intelligent ist, fuer alle Elemente margin und padding zu ueberschreiben, ist fraglich; ich mach das normalerweise nur fuer die Elemente bei denen ich es auch benoetige

Wieso soll das fraglich sein? Du sagst ja selbst, dass die Browser unterschiedliche Standardwerte haben können (auch bei Elementen, an die man vielleicht selbst gar nicht denkt). Um elegant dafür zu sorgen, dass die Seite in allen Browsern möglichst gleich aussieht, ist also die folgerichtig einzig sinnvolle Lösung, margin und padding generell komplett abzuschalten und dort auf einen anderen Wert zu setzen, wo man sie haben möchte. Oder sagen wir: Es ist die einfachste Lösung (mit dem geringsten Aufwand).

Zitat von Alexander:

Vielen Dank noch einmal.
Das mit der Breite von 640px bei content und dem container ist mir gar nicht aufgefallen

. Aber daran lag es scheinbar auch nicht.
Die em-Angaben muss ich mir noch einmal genauer anschauen, irgendwie glaube ich, dass das bei meinem Design nicht so passt. Denn eigentlich soll das ja bei jeder Größe gleich bleiben (unabhängig von der Schriftgröße). Ansonsten müsste mir ja bei einer anderen Schriftgröße das ganze Design wieder zerstückelt werden.

Habt ihr vielleicth noch eine andere Idee?

Toll wäre, wenn du die verwendeten Grafiken noch nachreichen könntest, damit ich ein bisschen testen kann. 8)

**Alexander**

Hallo Julian,
es hat sich leider ja nichts getan. Aber ich hänge noch mal CSS an. Das ist wohl das beste.

**xJulian**

Im Firefox funktioniert es so bereits tadellos. Im IE müsstest du die Breite des Inhalts noch einige Pixel herabsetzen - dabei würde der von dir angesprochene weiße Rahmen entstehen, der anscheinend von einem der vielen IE-float-Bugs ausgelöst wird (wäre meine spontane Erklärung). Lösung: Setze die Breite von div#content auf 640px und verschiebe div#left und div#right in div#content hinein. So sieht's bei mir in beiden Browsern gut und gleich aus (siehe Anhang).