[Voyager]

Hallo zusammen,

ich habe folgendes Probelm, für das ich noch keine Lösung gefunden habe. Ich möchte einen Layer mit einem Hintergrundbild auf meiner Seite positionieren. Dieser Layer soll aber nun, wenn ich die Auflösung ändere, immer die selbe Position behalten, also nicht "umher wandern", wenn ich die Auflösung ändere bzw. Besucher, egal mit welcher Auflösung sollen den Layer immer an der selben Stelle "verankert" sehen. Hat jemand einen Vorschlag, wie ich das hinbekommen kann?

Danke für eure Hilfe.
Voyager

[aNtiCHrist]

Das müsstest du präzisieren. Soll die Position immer in einem konstanten Abstand zum Ursprung des Viewports sein? Oder immer in einer bestimmten Relation zur verfügbaren Viewport-Fläche

Beides geht über margin-left und margin-top, je nach Wunsch mit Längenangaben oder Prozentwerten.

[Voyager]

Viewport...? - Sorry, bin jetzt nicht sooo der Webdesigner. Will mal so sagen: Der Layer soll also immer über einem bestimmten Punkt der Navi-Leiste liegen. Bisher habe ich die Position des Layers so festgelegt:

#layer1 {
position:absolute;
left:310px;
top:438px;
width:64px;
height:64px;
z-index:1;
}

Habe es auch schon mit "position: fixed" versucht, doch bleibt das Problem das selbe: bei 1280 x 1024 ist alles prima (auch wenn IE6 das etwas anders darstellt), bei 1024 x 768 liegt der Layer irgendwo mittig.

Hilft das?

[Voyager]

Wie von aNTiCHrist vorgeschlagen, habe ich es mit margin-left statt einfach nur left und mit margin-top statt top versucht, doch verschiebt sich die Lage des Layers trotzdem bei veränderter Auflösung

Hat vielleicht noch jemand eine Idee?

[Kirby]

Beschäftige dich mal mit float oder relativer Positionierung und binde das Layer im Menü ein!

[Voyager]

@Kirby

kannst du "binde das Layer im Menü ein" etwas präzisieren?

Danke!

[Kirby]

<div id="navi">
 <ul class="menu">
  <li>Menüpunkt 1</li> 
  <li>Menüpunkt 2</li> 
  <li>Menüpunkt 3</li>
  <li>Menüpunkt ...</li> 
 </ul>
 <div id="layer1">
  [Layer]
 </div>
</div>

#layer1 {
 position: relative;
 margin-top: 1em;
 width: 64px;
 height: 64px;
}

Das Layer befindet sich jetzt immer 1em unter der Navigation.
Über margins kannst du die Abstände direkt bestimmen.