Delphi-PRAXiS - Positionieren mit CSS

Seite 1 von 2

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - Positionieren mit CSS (https://www.delphipraxis.net/76016-positionieren-mit-css.html)

Positionieren mit CSS

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:

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

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

Re: Positionieren mit CSS

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:

Code:

kannst du auch das nehmen:

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

Re: Positionieren mit CSS

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.

Re: Positionieren mit CSS

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:

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

Re: Positionieren mit CSS

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:

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. :P

Re: Positionieren mit CSS

Zitat:

Zitat von xJulian

Es sind 560. Links und rechts. :P

Stimmt. Mathe war noch nie meine Staerke :mrgreen:

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

Re: Positionieren mit CSS

Vielen Dank noch einmal.
Das mit der Breite von 640px bei content und dem container ist mir gar nicht aufgefallen :shock:. 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?

Re: Positionieren mit CSS

Zitat:

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:

Zitat von Alexander

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

Re: Positionieren mit CSS

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

Re: Positionieren mit CSS

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).

Seite 1 von 2