Abstand zwischen zwei Div-containern in verschiedenen browsern

[lillcube]

Hallo Leute!
Ich bin  nahezu am verzweifeln. Ich habe ein grafisches Layout entworfen, das wie folgt aussieht: Ein div-container (#all) schließt zwei div-container (#haupt und #links) nebeneinander ein. Die css-datei dazu sieht wie folgt aus:

  
  
  body  
  {  
   background-color:black;  
   margin:0px;  
   padding:0px;  
  }  
  
  #all  
  {  
  width:739px;  
  height:400px;  
  background-color:none;  
  border:none;  
  overflow:auto;  
  margin:0px;  
  padding:0px;  
  }  
  
  #haupt  
  {  
   width:539px;  
   height:400px;  
   overflow:auto;  
   background-color:none;  
   position:relative;  
   border:none;  
   background-image:url(bg3.jpg);  
   margin:0px;  
   padding:0px;  
  }  
  
  #links  
  {  
   width:200px;  
   height:400px;  
   float:left;  
   position:relative;  
   border:none;  
   background-image:url(left.jpg);  
   margin:0px;  
   padding:0px;  
  }  
  
 div a  
  {  
   text-decoration:none;  
   font-size:20px;  
   color:black;  
   margin:0px;  
   padding:0px;  
  }  
  

Wenn ich mir das ganze in Opera anschaue, sieht es so aus, wie es aussehen soll, nämlich beide container ohne Lücke nebeneinander. wenn ich es mir im Firefox jedoch ansehe, dann ist zwischen #left und #haupt eine Lücke. Im IE dagegen sind die beiden Container untereinander, vermutlich weil im #all-container zu wenig platz war.
Ich hab mir schon überlegt, ob es am px liegen kann, wiel ich mal gehört habe, dass verschiedene Browser die Angaben in px verschieden breit interpretieren. am margin oder padding kann es eigentlich nicht liegen, weil ich überall margin:0px; padding:0px; eingefügt habe.
Ich könnte natürlich auch auf Tabellen umsteigen, aber weil ich innerhalb der #left- und #haupt-Container nochmals container hab, die am elternelement orientiert positioniert sind, möchte ich das vermeiden.
Kann mir irgendjemand helfen und sagen, wie ich den abstand zwischen den containern wegbekomme?
Thx im Vorraus, cube

[lillcube]

Oke, ich habs jetzt mit table versucht, und jetzt scheint es (außer kleinen Problemen beim Firefox) zu gehen. Wenn jemand trotzdem eine Idee hat, wie man das oben genannte Problem lösen kann, wäre ich dankbar.
Grüße, eure Cube

[Gernot Back]

Hallo lillcube,

Float (left oder right) impliziert display:block und schließt display:inline eigentlich aus. Gleichwohl empfiehlt es sich für den IE, wie ich auch erst vor kurzem von einem Kollegen gelernt habe, grundsätzlich gleichzeitig display:inline zu setzen. Das schadet auch bei (anderen) Browsern nicht.

vgl.: http://www.positioniseverything.net/explorer/doubled-margin.html

Ein position:relative kann ohne gleichzeitige Angabe von top (bottom) und/oder left (right) kann meiner Erfahrung nach bei Browsern mit Gecko-Engine (Mozilla, Firefox, Netscape 6/7) hingegen sehr wohl schaden. Die Frage ist auch, was du damit ohne Angabe zu den vier "Himmelsrichtungen" bezweckst, wenn du kein Nachfahrenselement hast, das du seinerseits innerhalb dieses relativ-positionierten Element positionieren willst.

Gruß Gernot

[lillcube]

Hi gernot,
Also, dankeschön für deine Antwort.

Die Frage ist auch, was du damit ohne Angabe zu den vier "Himmelsrichtungen" bezweckst, wenn du kein Nachfahrenselement hast, das du seinerseits innerhalb dieses relativ-positionierten Element positionieren willst.

Es gibt ja nochmals Kind-Elemente, die innerhalb des #links und #haupt ausgerichtet werden. Weil ich für mein grafisches Layout die #links und #haupt mit Bildern hinterlegt habe, kann ich nicht den Text direkt ins Elternelement schreiben, sondern in Kindelemente, die ich abhängig von den Elternelemente positioniere.

Float (left oder right) impliziert display:block und schließt display:inline eigentlich aus. Gleichwohl empfiehlt es sich für den IE, wie ich auch erst vor kurzem von einem Kollegen gelernt habe, grundsätzlich gleichzeitig display:inline zu setzen. Das schadet auch bei (anderen) Browsern nicht.

Leider habe ich von display:inline noch nichts gehört, von display:block nur im zusammenhang mit Menüs und kann damit nicht sehr viel anfangen. Ich habe display:inline jetzt eingesetzt, was zur folge hatte, dass meine Kindelemente total deplaziert wurden.

Was ich heute auf jeden Fall gelernt habe, ist, dass Tabellenloses Layout zwar viele Möglichkeiten birgt, aber mindestens doppelt so viele Fallen. Deshalb habe ich die divs jetzt durch eine Tabelle ersetzt, und zumindest sitzen jetzt die ehemaligen divs an der richtigen Stelle. Die Kindelemente haben jetzt zwar immernoch Probleme, denn sie sind noch verschoben.

Auf jeden Fall aber nochmal dankeschön, auch wenn ich das lider nicht anwenden vermag.

Grüße, cube

[Gernot Back]

Hallo lillcube,

Was ich heute auf jeden Fall gelernt habe, ist, dass Tabellenloses Layout zwar viele Möglichkeiten birgt, aber mindestens doppelt so viele Fallen. Deshalb habe ich die divs jetzt durch eine Tabelle ersetzt, und zumindest sitzen jetzt die ehemaligen divs an der richtigen Stelle. Die Kindelemente haben jetzt zwar immernoch Probleme, denn sie sind noch verschoben.

Wer wird denn gleich aufgeben und seine Zuflucht wieder in Tabellen suchen? Rück mal mehr (HTML-)Code raus (bisher hast du ja nur den CSS-Code preisgegeben), dann kann man besser helfen.

Gruß Gernot

[lillcube]

Also, der quelltext sieht folgendermaßen aus:

  
  
<html>  
  
<head>  
<link rel="stylesheet" type="text/css" href="test2.css">  
  
</head>  
  
<body>  
<center>  
  
<br>  
<br>  
<br>  
<br>  
  
<div id="all">  
  
 <div id="links">  
   <div id="linksinnen1">  
   <a href=#>Home</a><br>  
   <a href=#>link1</a><br>  
   <a href=#>link2</a><br>  
  </div>  
 </div>  
  
  
 <div id=haupt>  
  <div id="innen">  
   <h1>Lorem ipsum</h1>  
   Lorem ipsum dolor sit amet.  
  </div>  
 </div>  
  
</div>  
  
</center>  
</body>  
  
</html>  

Dazu gehört das stylesheet (hier mit kindelementen)

  
 body  
  {  
   background-color:black;  
   margin:0px;  
   padding:0px;  
  }  
  
  #all  
  {  
  width:739px;  
  height:400px;  
  background-color:none;  
  overflow:auto;  
  margin:0px;  
  padding:0px;  
  }  
  
  
  #haupt  
  {  
   width:539px;  
   height:400px;  
   overflow:auto;  
   background-color:none;  
   position:relative;  
   background-image:url(bg3.jpg);  
   margin:0px;  
   padding:0px;  
  }  
  
    #innen  
  {  
   width:420px;  
   height:300px;  
   overflow:auto;  
   background-color:none;  
   position:absolute;  
   left:65px;  
   top:50px;  
   text-align:left;  
   margin:0px;  
   padding:0px;  
  }  
  
  #links  
  {  
   width:200px;  
   height:400px;  
   float:left;  
   position:relative;  
   background-image:url(left.jpg);  
   margin:0px;  
   padding:0px;  
  }  
  
    #linksinnen1  
  {  
   position:absolute;  
   left:52px;  
   top:50px;  
   width:70px;  
   height:150px;  
   margin:0px;  
   padding:0px;  
  }  
  
 div a  
  {  
   text-decoration:none;  
   font-size:20px;  
   color:black;  
   margin:0px;  
   padding:0px;  
  }  

In der zwischenzeit habe ich übrigens festgestellt, dass man einfach nur die Bilder, die ich hier als background-images in den div-containern benutze, auch einfach mit <img src=url> nebeneinander stellen kann und dann nur den text einfach positionieren. Das hat aber den unschönen Nebenefekt, wenn man aber die Bilder ausschaltet, sieht man gar nüscht, weil sowohl text als auch hintergrund schwarz sind. außerdem finde ich die Lösung ein wenig unprofesionel ^^.

Danke für deine Hilfe!
Cube

[Orlando]

Hallo lillcube,

<html>

<head>

  
Zunächst aktivieren in den Browsern bitte den [standardkonformen Modus](http://de.selfhtml.org/css/formate/box_modell.htm#standardkonform), dann ergibt sich vieles von alleine.  
  
Grüße  
 Roland  

-- 
[Weblog](http://aktuell.de.selfhtml.org/weblog/) > [SELF wird bei uns großgeschrieben](http://aktuell.de.selfhtml.org/weblog/self-wird-grossgeschrieben)  
[SELFHTML-Community](http://community.de.selfhtml.org/) > [Visitenkarten](http://community.de.selfhtml.org/visitenkarten/) > [Orlando](http://community.de.selfhtml.org/visitenkarten/view.php?key=25)

[Gernot Back]

Hallo Orlando, hallo Cube

Außerdem:

Zunächst aktivieren in den Browsern bitte den standardkonformen Modus, dann ergibt sich vieles von alleine.

Das CENTER-Element entfernen, stattdessen in dem ein oder anderen Element ein text-align:center oder margin:auto. Statt der 4 BR-Elemente am Anfang ein passendes Margin-Top für das Element mit der id="all", "haupt" links floaten lassen und _nicht_ relativ positionieren, das sollte es sein.

Gruß Gernot

[Gernot Back]

Hallo nochmal,

"haupt" links floaten lassen und _nicht_ relativ positionieren

Habe gerade nochmal nachgelesen, Cube; du brauchst das position:relative ja für die absolut-positionierten Kindelemente. Gibt es da keine andere Lösung (margin, padding)?

Naja position:relative scheint da jedenfalls auch nicht zu schaden, wenn du es für die absolute Positionierung der Kindelemente wirklich brauchst.

Gruß Gernot

[lillcube]

Hi Orlando, hi Gernot!

Also, dankeschön, habe ich gemacht wie gesagt, vom Layout passt es. Zuerst hatte ich mit den Kindelementen noch Probleme, aber die Habe ich behoben bekommen.
Als nächstes werde ich morgen oder in nächster Zeit noch weitere Elemente dazufügen, weil zwei leider nicht reichen. Aber wenn es Probleme gibt, weiß ich ja jetzt, an wen ich mich vertrauensvoll wenden kann ;)

Also nochmal großes DANKESCHÖN !

Wenn die Seite mal im Netz steht, poste ich mal den Link.

Liebe grüße und gute Nacht!
Eure Cube