Positionierungs-Problem

[Maxi]

Hi zusammen, ich hab ein kleines problem mit dieser neuen Seite: www.maxi.internet-paten.de

Und zwar soll der inhalts-Div nach oben rutschen, dass er genau rechts von der Navigation liegt, aber wie bekomm ich das hin?

 

[ganymed]

Hi zusammen, ich hab ein kleines problem mit dieser neuen Seite: Testdesign
Und zwar soll der inhalts-Div nach oben rutschen, dass er genau rechts von der Navigation liegt, aber wie bekomm ich das hin?

ich glaub mit absoluter positionierung und %-angaben wärs einfacher. dann musst weniger mit margin und padding rumpfuschen.
im zweifelsfall liegts daran. ich denke, dass sich die margins überschneiden würden, wenn der inhaltsteil weiter oeb n wär. setzt die mal bei den ganzen divs auf 0 und steiger dich dann langsam. so kannst du genau sehen ab wann es probleme gibt.

 

[gruenspan]

ich glaub mit absoluter positionierung und %-angaben wärs einfacher. dann musst weniger mit margin und padding rumpfuschen.

So ein Unfug. Von absoluter Positionierung sollte man stets absehen. Schmeiss alle position raus und benutze float.

Nimm als Grundgerüst 3 DIV'S. Einen aussen rum und darin einen links und einen rechts (float:left;), darein packst Du dann entsprechend Deine Navigation und Deinen Content.

 

[Maxi]

also mit float hab ich das jetzt, und so weit passt auch alles, aber

• kann der IE 6 das richtig darstellen?
• warum hat der "aussen"-Div, der dem ganzen eine Hintergrundfarbe geben soll diese nicht mehr?

 

[gruenspan]

• kann der IE 6 das richtig darstellen?

hast Du es probiert?

• warum hat der "aussen"-Div, der dem ganzen eine Hintergrundfarbe geben soll diese nicht mehr?

woher soll ich das wissen ;ugl kenn ich Deinen Code?

 

[Maxi]

den IE 6 hab ich nicht mehr, warum schaust du nicht einfach in den Quelltext rein?

 

[gruenspan]

Ich kann keine Veränderung sehen, der contentbereich ist immer noch nicht da, wo er sein sollte, oder? Deshalb hab ich mir den Quelltext nicht angeschaut.

EDIT: IE7 und IE5 stellen es richtig dar. Firefox macht Probleme. Könnte an margin o.ä. liegen. Mach in deiner CSS-datei ganz am Anfang padding:0 und margin:0 sowie nach den gefloateten Elementen ein <br clear="all" >

 

[Maxi]

Doch er ist da, Opera (9.2) FF und IE 7 zeigens auch richtig an...

 

[gruenspan]

Also in meinem FF2.0 ist der Content nach unten gerutscht.

 

[Maxi]

Bei mir stimmts:
http://www.maxi.internet-paten.de/testdesign/screen.png

 

[pmmueller]

So ein Unfug. Von absoluter Positionierung sollte man stets absehen.

Das kann man so "absolut" nicht sagen ;)

Für ein zweispaltiges Layout ohne durchgehende Fusszeile (wie in gutschiguhs Beispiel) ist position:absolute für die Navi-Spalte zusammen mit einem großen margin-left für den Inhaltsbereich durchaus brauchbar und bringt - besonders im IE - viel weniger Folgeprobleme mit sich.

 

[Maxi]

[...] und bringt - besonders im IE - viel weniger Folgeprobleme mit sich.

Hast du denn so Probleme mit der Darstellung (Version 6 mein ich)?

 

[pmmueller]

den IE 6 hab ich nicht mehr

Die Lösung für mehrere IE-Versionen auf einem Rechner:

• Multiple IE von Tredosoft

Einfach downloaden und installieren. Völlig problemlos und kein Rumgepfusche in der Registry.

 

[Maxi]

Die Lösung für mehrere IE-Versionen auf einem Rechner:

• Multiple IE von Tredosoft

Einfach downloaden und installieren. Völlig problemlos und kein Rumgepfusche in der Registry.

Zwar danke für den Link, aber ich werde mir diese alten versionen nicht installieren, mir würde es vollkommen ausreichen, wenn ich einen Screenshot bekommen könnte...

 

[pmmueller]

warum hat der "aussen"-Div, der dem ganzen eine Hintergrundfarbe geben soll diese nicht mehr?

Weil #aussen die beiden gefloateten divs nicht einschließt. Die einfachste Möglichkeit, das zu erreichen ist es, #aussen die Zeile overflow: hidden; zuzuweisen. Dann geht die Box bis unter die anderen beiden:

div#aussen {
  overflow: hidden;  /* vergrößert die Box bis unter die gefloateten Elemente  */ 
  width: 920px;
  background-color: #CCCCCC;
  text-align: left;
  margin: 0px auto;
}

 

[pmmueller]

Hast du denn so Probleme mit der Darstellung (Version 6 mein ich)?

Ja. Der Inhalt beginnt erst unterhalb der Navileiste. Das nennt man float-drop und ist eine der angesprochenen Nebenwirkungen bei float-Layouts. Die Gründe dafür sind unterschiedlich. Navi- und Inhaltsbereich geben genau 920px. Probiere einfach mal ein paar Pixel weniger.

Zwar danke für den Link, aber ich werde mir diese alten versionen nicht installieren,

Tja, wenn du keine Lust hast dir die zu installieren, ist das dein Pech. Ich habe keine, dir nach jeder Änderung wieder einen Screenshot zu machen ;)

 

[Maxi]

Danke, der div#aussen past jetzt.

Ich hab jetzt insgesamt 20px weniger genommen, je 10 bei Navi und Content-Bereich, wat macht der IE 6 jetzt?

 

[ganymed]

So ein Unfug. Von absoluter Positionierung sollte man stets absehen. Schmeiss alle position raus und benutze float.

kannst du deine meinung auch begründen? solange man es nicht mit px umsetzt ist das doch vollkommen ok.
@gutschiguh:
IE NetRenderer - Browser Compatibility Check -
das könnte dir helfen.

 

[Maxi]

kannst du deine meinung auch begründen? solange man es nicht mit px umsetzt ist das doch vollkommen ok.
@gutschiguh:
IE NetRenderer - Browser Compatibility Check -
das könnte dir helfen.

ganz genau so ne Seite wollt ich schon immer haben ;-)
Danke dir ;-)

Also, die versionen 6 und 5.5 zeigen es etwas verschoben an, aber alles ist eigentlich so wie es auch sein sollte...
Schön

 

[gruenspan]

kannst du deine meinung auch begründen?

Wenn man Elemente einer Webseite absolut positioniert, folgen diese nicht mehr dem normalen Fluss des Dokuments. Durch allzu leichtfertigen Einsatz dieser Art der Positionierung leidet die inhaltliche Struktur des selben. Außerdem kann es beim skalieren einer Seite zu Darstellungsfehlern kommen.

Weiterhin sollte man bedenken, das absolute Positionierung doch eine recht starre und steife Konstruktion hervorbringt.

Letztendlich bin ich ja auch nicht vollkommen dagegen, man sollte sie jedoch nur sehr sparsam und mit Bedacht einzetzen.