Div-layer richtig positionieren

[Sahneschnitte]

Heyho alle zusammen,

ich hoffe ihr könnt mir weiterhelfen, brauch einfach mal euren Rat. Ich habe letzte Woche ein Template erstellt, um verschiedene CSS Befehle mal auszuprobieren. Hab die Seite mit folgenden div-layern aufgebaut:

:: einen Container, der alle weiteren Div-layer beinhaltet
:: einer für das Menü
:: einer für den Inhalt
:: einer rechts neben den Inhalt (für Umfragen, News usw)

Hat die Seite immer mit Firefox getestet....lief auch alles super...bis ich Sie im IE ausprobiert habe. Ein Freund hat sich das mal angeschaut und er meinte:

„.... Ein Div hat die Eigenschaft position, womit du ihn ausrichten kannst. Mit padding und margin würde ich nicht arbeiten, dass bringt nur Probleme. Bau deine Seite lieber noch einmal neu auf...“

Ich hab die div-layer anhand des CSS-Befehls margin ausgerichtet, hab dabei halt auch Minuswerte vergeben
z.B. #content{
…
margin-top :-200px ;
…}
Hab aber bei einigen Beispielen im Internet gelesen, dass das geht. Es hat ja auch funktioniert, nur nützt es mir halt nichts wenn die Seite nur mit Firefox dargestellt wird.

Nun meine Frage: Wie positioniere ich die Div-layer am besten? Mit margin-top,margin-left…oder mit position:;left:;top:;z-index:;….Position absolute fällt für mich schon mal weg, weil ich die Seite dynamisch aufbauen wollte.

Danke schon mal im Voraus, ich hoffe Ihr könnt mir helfen =)!

[Laus]

Hallo

Die Positionierung eines Divs kommt immer auf die art der Verwendung und der Lage zu den anderen Elementen an.
Dann ist die korrekte Darstellung in verschiedenen Browsern von vielen weiteren Faktoren abhängig, wie zb. welchen Doctype du verwendest.
Man kann also so ohne mehr von deinem Code gesehen zu haben keine eindeutige Aussage treffen.
Poste doch mal eine Link zu deiner Seite damit man sich das genauer ansehen kann.

Gruß Xaver

[Sahneschnitte]

Hi Xaver,

danke erstmal für deine Antwort. Hier ist mal die CSS-Datei. Hab diese aber ein bisschen verkürzt (beinhaltet halt nur die div-layer um die es geht).

Diese Variante funktioniert bestens mit Firefox, mit IE halt überhaupt nicht...

#banner { width: 610px;
height:130px;
margin-left:100px;
margin-top:-140px;
background-image:url('../images/joomla.png');
}

#logo_right { width: 160px;
height:160px;
margin-left:690px;
margin-top:-860px;
background-image:url('../images/logo_right.gif');
}

#sgj { width:165px;
height:131px;
margin-left:-80px;
margin-top:10px;
background-image:url('../images/sgj_logo.gif');


#menu { width: 160px;
height:auto;
min-height:700px;
margin-left:0px;
margin-top:10px;
background-color:#000033;
}
#content { width: 520px;
height:auto;
min-height:800px;
font-size:12px;
padding-left:7px;
padding-right:7px;
padding-top:0px;
background-color:#006699;
margin-top:-600px;
margin-left:160px;
}


#extra { width: 160px;
height:auto;
min-height:700px;
background-color: #C76100;
padding-top:0px;
margin-top:-750px;
margin-left: 690px;
font-family: tahoma, verdana, arial;
font-size: 10px;
text-align: left;
text-decoration: none;
background-color:#000033;
}

Hier findest du den PHP-Teil:
http://pspatr.gas.hl-users.com/joomla/index.php

Danke Dir schon mal =)! Hoffe du kannst mir einen guten Rat geben ^^!

Gruß Patrick

[Laus]

Hallo Patrick

Entferne mal bei deinem Doctype das <?xml version="1.0"?> am Anfang.
Der IE schaltet in diesem fall in den Quirxmodus und stellt deshalb die Seite nicht mehr korrekt dar. -->Siehe Hier<--

Gruß Xaver

[Sahneschnitte]

Hallo Xaver,

hab die Zeile aus dem Quellcode entfernt....Der IE stellt es nun zentriert da mit automatischen margin (genau so wie ich es will =). Zeigt mir aber die Seite immer noch nicht so genau an, dass dürfte aber an meiner IE Version liegen, die ein bisschen veraltet ist...

Noch mal zum Ausrichten der div-layer....ist meine Arbeitsweise, dass ich die layer mit margin-left,margin-top..ausrichtet sehr ungewöhnlich in der Praxis?

Danke für deinen Rat, der hat mir wirklich sehr geholfen!

!!!Klasse Sache, diese CSS-Forum!!!



[/quote]

[Laus]

Noch mal zum Ausrichten der div-layer....ist meine Arbeitsweise, dass ich die layer mit margin-left,margin-top..ausrichtet sehr ungewöhnlich in der Praxis?

Nein sie ist normal, da eine Ausrichtung mit den Angaben -->top<-- und -->left<-- ohne margin nur bei absolut positionierten Elementen sinnvoll ist.
Ungewöhnlich ist allerdings die Zuhilfenahme des -->negativen margins<--.
Normalerweise erfolgt die Ausrichtung der Elemente im Fluss des HTML Quelltextes an den entsprechenden stellen automatisch und brauch eigentlich nur noch leicht korrigiert werden. In deinem Fall sind die Elemente aber nicht an den entsprechenden Stellen im Quelltext abgelegt sondern eigentlich hinten angefügt, darum musst du die Layer ja mit negativen Werten an ihre Positionen bringen. Im Prinzip könntest du bei deinem Seitenaufbau mit fester Breite auch position absolute verwenden. Wobei ich persönlich auch einen negativen Margin Wert eleganter finde als absolute Positionierung.

Gruß Xaver

[Sahneschnitte]

Danke, dass du mir deine Meinung gesagt hast !! Also dein erster Ratschlag hat schon viel geholfen, vielleicht kannst du dir noch einmal die Seite anschauen, denn der IE stellt die Seite halt immer noch anders dar.

Danke für deine Hilfe!!

Gruß Patrick