|
|||
Layer ausrichten mit float oder margin oder position:absolut
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; .... } 1) mit float: Code:
#Layer1 { float: left; ..... } #Layer2 { float: left; ..... } usw. Code:
#Layer1 { height: 330px; width: 30px; } #Layer 2 { width:145px; height:350px; margin-left: 30px; } #Layer3 { width:50px; height:330px; margin-left: 175px; usw. ----------- 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 |
Sponsored Links |
|
|||
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 |
Sponsored Links |
|
|||
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 |
|
|||
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; } Zitat:
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:
In der Regel brauchst du den Netscape 4 nicht mehr berücksichtigen. Gruß Thomas www.css4you.de |
|
|||
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) |
|
|||
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; } 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> Gruß Thomas www.css4you.de |
|
|||
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; } Code:
#mittig { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 500px; height: 300px; margin: auto; } Visual Formating Model |
|
|||
Zitat:
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 |
|
|||
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. |
Sponsored Links |
|
|||
Zitat:
Ich habe immer noch nicht verstanden, wieso du deinen Weg als den Korrekten bezeichnest. Er funktioniert nicht im IE. Gruß Thomas www.css4you.de |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |