Layer ausrichten mit float oder margin oder position:absolut

heinz · #1 (**permalink**) 07.05.2004, 16:25

Hallo liebe CSSer,

habe nur etwas Ahnung (Anfänger) und möchte mehrere Layer nebeneinander positionieren, sie sollen zusammen je nach Bildschirmgröße mittig ausgerichtet werden, denke so wäre die Lösung.

Code:

 
....
<div id="Layer-zentriert">
<div id="Layer1"></div>
<div id="Layer2"></div>
<div id="Layer3"></div>
<div id="Layer4"></div>
<div id="Layer5"></div>
<div id="Layer6"></div>
</div>
......

------------------------------------

body {
 text-align: center;
...
 }

#Layer-zentriert {
 margin-right: auto;
 margin-left: auto;
....
 }

Jetzt die Frage wie sollen die Layer 1 bis 6 gegeneinander ausgerichtet werden:

1) mit float:

Code:

 #Layer1 {
  float: left;
.....
}

 #Layer2 {
  float: left;
.....
}

usw.

2) oder mit margin-left: (Summe der "width"s der vorigen Layers)

Code:

#Layer1 {
 height: 330px;
 width: 30px;
}

#Layer 2 {
 width:145px;
 height:350px;
 margin-left: 30px;
}

#Layer3 {
 width:50px;
 height:330px;
 margin-left: 175px;

usw.

habe beide Möglichkeiten ausprobiert funktionieren auch (IE 6), aber welche ist die bessere Variante zum einen nach evtl. CSS Richtlinien(?) sowie auch im Bezug auf die Browser-Kompatibilität (im allgemeinen (IE , Opera, Mac) + evtl. Netscape 4 im spezillen)

-----------

3) Habe auch probiert die Layer absolut auszurichten , in der Hoffnung das dies auf denn "Layer-zentriert" bezieht, funktioniert aber irgendwie nicht. Warum, mache ich da einen Denkfehler oder ist dies nicht möglich oder muss ich was spezielles "Layer-zentriert" beachten (Info: vor dem Layer-zentriert sind auch noch Layer die ich aber der Übersichtlichkeit weggelassen habe? Wenn möglich, ist dies eine gute Lösung?

Code:

#Layer1 {
 height: 330px;
 width: 30px;
 position: absolute;
left: 0px;
}

#Layer2 {
 width:145px;
 height:350px;
 position: absolute;
 left: 30px;
}

#Layer3 {
 width:50px;
 height:330px;
 position: absolute;
 left: 175px;

4) Wie sieht es mit dieser Lösung aus, die Layer alle mit left: 50% zentrieren und dann mit negativen bzw. positiven margin-left Werten ausrichten. Besser als andere Möglichkeiten? Wenn ja warum.

Was ich nicht machen möchte ist Java-Script einzusetzen.

Für eine Ausführliche Erläuterung wäre ich sehr Dankbar:
VIELEN VIELEN DANKE für Eure Hilfe!!!!

Gruss
Heinz

Thomas (css 4 you) · #2 (**permalink**) 10.05.2004, 18:55

Hallo Heinz,
zunächst zu deiner dritten Lösung.
Die absolute Positionierung bezieht sich nur auf den "Layer-zentriert", wenn dieser ebenfalls absolute Positioniert ist. Du kannst dann aber auch die 4. Lösung anstreben und auf den "Layer-zentriert" verzichten.
Ich bevorzuge z.Z. floatende Container, da sie je nach Layout leichter zu handlen sind. Sie haben aber einen Nachteil:
Wird der Inhalt zu breit, passen sie beim IE evtl. nicht mehr nebeneinander, so dass dieser Browser sie untereinander darstellt.
Für dein Layout würde ich aber ebenfalls dein erstes Beispiel verwenden.

Eine "Beste" Lösung gibt es nicht. Es hängt eigentlich nur vom Layout ab und welcher Weg einfacher zu erstellen ist.

Gruß
Thomas

heinz · #3 (**permalink**) 14.05.2004, 01:27

Thomas Vielen Dank für Deine Hilfe !!!

------------------------------------------------------

Die 3. Lösung ist wie ich es aus deiner Antwort verstehe nicht möglich.

#Layer1 {
height: 330px;
width: 30px;
position: absolute;
left: 0px;
}

#Layer2 {
width:145px;
height:350px;
position: absolute;
left: 30px;
}

#Layer-zentriert {
margin-right: auto;
margin-left: auto;
}

(Vorteil hierbei wäre nämlich gewesen - glaube ich - das ich in einem
zweites Style Sheet für den Netscape 4 (der es sonst nicht richtig
darstellt), nur den Layer "#Layer-zentriert" mit width + top verändern
hätte müssen, die Werte der anderen Layer aber nicht verändern hätte
müssen Wäre dann zwar nicht mittig aber sonst genauso.)

------------------------------------------------------

Von Lösung 4. bin ich etwas abgekommen (zu komplex / wenn ein layer sich
ändert muss alles neu berechnet werden)

------------------------------------------------------

Die Lösung 1. Float denke ich werde ich einsetzen (wird auch in der
Grafischen Editor Ansicht, im Gegensatz zu Lösung 2. richtig
dargestellt).

In die Layer kommt vor allem Text, nur teilweise Fotos, wenn
ich hierbei darauf aufpasse das die Fotos nicht breiter sind als die breite
der Layer, dürfte der Nachteil das wenn der Inhalt zu breit ist die Layer
untereinander dargestellt werden nicht eintreten, oder???
(Bin Anfänger, deshalb evtl. blöde Fragen)

------------------------------------------------------

Haben die versch. Lösungen unterschiedliche Auswirkungen auf die Ladezeit
und/oder Suchmaschinen-Ranking?

------------------------------------------------------

Ich möchte noch einen Layer positionieren der die Layer 3-6 teilweise überdeckt.
Dieser Layer sollte die Layer 3-6 immer an der selben stelle überdecken. Wie am besten?

------------------------------------------------------

Im Voraus schon einmal ein grosses DANKE !!!
Gruss Heinz

Thomas (css 4 you) · #4 (**permalink**) 14.05.2004, 13:27

Hallo Heinz,
die 3. Lösung ist durchaus möglich. Du musst den Layer-zentriert nur ebenfalls absolut posizionieren:

Code:

#Layer1 { 
height: 330px; 
width: 30px; 
position: absolute; 
left: 0px; 
} 

#Layer2 { 
width:145px; 
height:350px; 
position: absolute; 
left: 30px; 
} 

#Layer-zentriert { 
position: absolute; 
}

In diesem Fall beziehen sich die Angaben für left und top auf den Rand des Layer-zentriert. Ich bin nur der Meinung, dass du somit auf diesen Layer auch verzichten kannst.

Zitat:

Ich möchte noch einen Layer positionieren der die Layer 3-6 teilweise überdeckt.
Dieser Layer sollte die Layer 3-6 immer an der selben stelle überdecken. Wie am besten?

Befinden sich die 6 Layer immer an der gleichen Position? Horizontal sicherlich, da du alles zentrierst und die Breite in Pixel angibst.
Aber auch vertikal? Nur dann könntest du mit absoluter Positionierung arbeiten.
Im anderen Fall würde ich es mit relativer Positionierung versuchen. Das müsste ein gangbarer Weg sein. Kennst du dich damit aus?

Zitat:

Vorteil hierbei wäre nämlich gewesen - glaube ich - das ich in einem
zweites Style Sheet für den Netscape 4 (der es sonst nicht richtig
darstellt), nur den...

Wofür erstellst du deine Seite? Privat oder gewerblich?
In der Regel brauchst du den Netscape 4 nicht mehr berücksichtigen.

Gruß
Thomas
www.css4you.de

heinz · #5 (**permalink**) 17.05.2004, 21:34

Danke Tohmas, das ist sehr nett das du mir hilfst!

Habe die 3. Lösung getestet, leider gelinkt mir es aber dann nicht den Layer-zentriert (mit den darin enthaltenen Layer) mittig auszurichten (body { text-align: center } #Layer-zentriert { margin-right: auto; margin-left: auto } )

(Seite ist gewerblich und sollte nach Möglichkeit auch bei dem kleinen Kreis der Netscape 4 User funktionieren.)

Noch ne Frage zu der Lösung "float". In die Layer kommt vor allem Text, nur teilweise Fotos, wenn ich hierbei darauf aufpasse das die Fotos nicht breiter sind als die breite der Layer, dürfte der Nachteil das wenn der Inhalt zu breit ist die Layer untereinander dargestellt werden nicht eintreten, oder???
(Bin Anfänger, deshalb evtl. blöde Fragen)

Thomas (css 4 you) · #6 (**permalink**) 19.05.2004, 12:11

Hallo Heinz, wie heißt es doch so schön?
"Es gibt keine blöden Fragen, nur Blöde, die nicht fragen", oder?

Um in der 3. Lösung den Layer-zentriert mittig auszurichten, positionierst du ihn mit top:50%; und left:50% mittig auf der Seite und verschiebst ihn mit negativem margin um die halbe Breite nach links und um die halbe Höhe nach oben:
Z.B.:

Code:

#layer-zentriert {
position:absolute;
width:770px;
height:330px;

margin-left:-385px;
margin-top:-165px;
}

Und als Beispiel ein zentrierter Layer, 6 gleichgroße Layer und der 7., der den 4. - 6. etwas überdeckt:

Code:

<style type="text/css">
div {
background-color: #efefef;
border:1px solid #f00;
height:100px;
}

#Layer-zentriert {
position:absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-165px;
width:600px;
height:330px;
}
#Layer1 { position:absolute;left:0px;width:100px;}
#Layer2 { position:absolute;left:100px;width:100px;}
#Layer3 { position:absolute;left:200px;width:100px;}
#Layer4 { position:absolute;left:300px;width:100px;}
#Layer5 { position:absolute;left:400px;width:100px;}
#Layer6 { position:absolute;left:500px;width:100px;}
#Layer7 { position:absolute;left:350px;top:20px;width:200px;}

</style>

...

<div id="Layer-zentriert">
 <div id="Layer1">Layer1</div>
 <div id="Layer2">Layer2</div>
 <div id="Layer3">Layer3</div>
 <div id="Layer4">Layer4</div>
 <div id="Layer5">Layer5</div>
 <div id="Layer6">Layer6</div>
 <div id="Layer7">Layer7</div>
</div>

Ist es in etwa das?

Gruß
Thomas
www.css4you.de

cric · #7 (**permalink**) 19.05.2004, 13:08

Zum Problem LayerZentriert ist durch Verwendung von position: absolute nicht mehr zentriert:
Die Variante, den Layer erst um jeweils 50% zu mitten und anschliessend mit negativen margins erneut zu verschieben ist eigentlich in Ordnung. Trotzdem möchte ich hier noch kurz darauf eingehen, warum der absolut positionierte Bereich auf einmal nicht mehr zentriert ist. Dieser Punkt ist entscheidend und hilft oft in verzweifelten Situationen:

Um die margins berechnen zu können müssen bei der Angabe position: absolute die anderen Werte eindeutig definiert sein. Das bedeutet, dass die Positionsangaben wie top, bottom, left und right und die Höhe, Breite des Contents angegeben werden müssen, ansonsten würde der rechte bzw. obere margin einfach auf Null gesetzt. In deinem Fall, da du nur an einer horizontalen Ausrichtung interessiert bist, reicht da right, left und width an zu geben.
Hier also die korrekte Art, einen Bereich ein zu mitten:

Code:

#mittig {
	position: absolute;
	left: 0px;
	right: 0px;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	}

Und wenn der Bereich horizontal wie vertikal zentriert sein muss, dann gilt folgendes:

Code:

#mittig {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 500px;
	height: 300px;
	margin: auto;
	}

Diese Betrachtungsweise habe ich erst seit kurzem entdeckt und poste sie nun ständig bei irgendwelchen Foren, da ich weiss, wie nervenaufreibend diese Angelegenheit ist. Beim W3C gibt es noch genauere Angaben dazu:

Visual Formating Model

Thomas (css 4 you) · #8 (**permalink**) 19.05.2004, 14:20

Zitat:

Hier also die korrekte Art, einen Bereich ein zu mitten:

Hallo cric,
dein Vorschlag entspricht in etwa dem, wenn man nicht positionierte Elemente mit margin:0px auto; zentriert. Dies funktioniert aber nicht beim IE.
Weiterhin sind die Abmessungen in der Regel bekannt, wenn man Elemente positioniert und mir ist noch kein Fall bekannt, in dem der von mir aufgezeigte Weg nicht funktioniert.

Gruß
Thomas
www.css4you.de

cric · #9 (**permalink**) 19.05.2004, 15:51

Natürlich funktioniert deine Variante. Das weiss ich auch und ich habe nie behauptet, dass sie nicht in Ordnung sei. Es ging mir eher darum, auf zu zeigen, warum es mit der Verwendung von margin:auto oftmals zu Problemen kommt.
Es scheint, als hättest du mich in dieser Hinsicht falsch verstanden. Sorry.

Thomas (css 4 you) · #10 (**permalink**) 19.05.2004, 21:04

Zitat:

Es scheint, als hättest du mich in dieser Hinsicht falsch verstanden

Oder du dich falsch ausgedrückt

Ich habe immer noch nicht verstanden, wieso du deinen Weg als den Korrekten bezeichnest. Er funktioniert nicht im IE.

Gruß
Thomas
www.css4you.de

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Verschiebungen bei größerem Bildschirm	seelefant	CSS	4	28.07.2014 15:43
Navigation positionieren	maybebabe	CSS	4	08.04.2013 22:17
CSS von Plugin beisst!	expand	CSS	0	28.09.2012 17:44
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße	Spencer	Javascript & Ajax	3	18.09.2012 23:16
joomla template	wrock	CSS	2	06.04.2012 19:24