layer in der mitte ausrichten ??

[steffi]

hallo,

habe hier diese 3 layer im body und möchte sie in der mitte ausrichten. wie bekomme ich das hin? ich bin en newbie, bitte nicht zu kompliziert erklären...

<div id="Layer1" style="position:absolute; width:700px; height:50px; z-index:1; top:20px"></div>
<div id="Layer2" style="position:absolute; width:100px; height:500px; z-index:1; top:70px"></div>
<div id="Layer3" style="position:absolute; width:590px; height:490px; z-index:1; top:80px; left:120px">

[steffi]

muss noch was hinzufügen:

kann man das nicht mit javascript machen? das wäre mir sogar lieber?

[dimitri rettig]

hallo,

<div id="Layer1" style="position:absolute; width:700px; height:50px; z-index:1; top:20px"></div>

für jeden "layer" musst du angeben:
position:absolute; top:auto; bottom:auto; left:auto; right:auto; aber verstehe ich das richtig? sollen die layer alle übereinander liegen?

mit freundlichen grüßen
   dimitri rettig

[steffi]

nein die layer sollen nicht übereinander liegen, schau sie dir doch mal an!

meine layer haben eine exakte größe und sollen zentriert werden. mit deiner lösung komm ich leider nicht weiter

[dimitri rettig]

hi steffi,

ach, jetzt verstehe ich. dann must du angeben:
top:...px; left:auto; right:auto;

mit freundlichen grüßen
   dimitri rettig

[steffi]

ach, jetzt verstehe ich. dann must du angeben:
top:...px; left:auto; right:auto;

ne, ich glaub du verstehst noch immer nicht. mittlerweile hab ich rausgefunden das das ausrichten von layer ohne weiteres nicht geht. es gibt dafür keinen direkten css-befehl. ich muss versuchen das problem anders zu lösen. kennst du dich mit javascript aus?

[Ingo Turski]

Hi Steffi,
Javascript würde ich gleich wieder vergessen, es sei denn Du willst für so ein simples Problem soviel Aufwand betreiben und Du kannst bei den Bersuchern Deiner Seite voraussetzen, daß sie alle Javascript auch aktiviert haben.
Außerdem machst Du einen typischen Anfängerfehler, indem Du versuchst, nicht nur alles in fixe Boxen zu packen, sondern diese dann auch noch absolut positionierst.

Wenn ich Dein Konstrukt richtig verstehe, dann müßte das, was Du erreichen willst, wie folgt funktionieren (ausnahmsweise mal einen fertigen Code, um Dich von der absoluten Positionierung abzubringen, die Dir nachträglich viel Ärger einhandeln kann).

CSS:
<style type="text/css">
  body { text-align:center; }
  #rahmen { width:720px; 20px auto 0; }
  #layer1 { width:700px; height:50px; border:1px solid green; }
  #layer2 { width:100px; height:500px; float:left; border:1px solid red; }
  #layer3 { width:590px; height:490px; float:right; margin-top:10px; border:1px solid blue; }
</style>

HTML:
<div id="rahmen">
  <div id="layer1">Layer1</div>
  <div id="layer2">Layer2</div>
  <div id="layer3">Layer3</div>
</div>

Die Rahmen hab' ich hier natürlich nur zur Verdeutlichung gesetzt. Und eine fixe Höhe würde ich an Deiner Stelle auch nicht angeben, es sei denn, Du hast wirklich so wenig Inhalt, daß dieser selbst bei Schriftvergrößerung noch in den Rahmen paßt.

freundliche Grüße
Ingo

[steffi]

hey supa, es funktioniert. du bist der erste der das hinbekommen hat, von wirklich sau vielen leuten. vielen vielen dank...

[steffi]

hi ingo,

jetzt kann ich aber nur in der mitte der layer meine texte schreiben.
das ist schlecht. ich wollte die texte entweder links oder rechts ausrichten, die layer sollen aba in der mitte bleiben. ich glaub meine vorstellungen kann man nicht mir layer lösen, werd wohl doch wieder auf die guten alten tabellen umsteigen...

[Ingo Turski]

Hi Steffi,

jetzt kann ich aber nur in der mitte der layer meine texte schreiben.

mit ein bisschen nachlesen in CSS hättest Du bestimmt auch selbst herausgefunden, wie Du Texte wieder linksbünddig bekommst.
Einfach (in meinem Beispiel) #rahmen {text-align:left;} für alle Boxen definieren oder wenn der Text in einigen Boxen zentriert bleiben soll, diese CSS-Eigenschaft halt nur den linksbündig auszurichtenden Boxen geben.

freundliche Grüße
Ingo

[Patrick Breitenbach]

Guckstu hier:

http://www.drweb.de/csstechnik/layer_4.shtml

Gruß
Patrick

[steffi]

Guckstu hier:

http://www.drweb.de/csstechnik/layer_4.shtml

Gruß
Patrick

ja das hab ich auch schon gefunden, kann ich für mein problem nicht anwenden, muss ich sagen gefällt mir auch nicht.

[Patrick Breitenbach]

ja das hab ich auch schon gefunden, kann ich für mein problem nicht anwenden, muss ich sagen gefällt mir auch nicht.

Ja das ist halt noch so ein Problem mit CSS und Layern. Wie auch schon bei Dr.Web beschrieben gibt es dafür keinen direkten CSS-Befehl. Allerdings wäre ein möglicher Griff in die Javascript-Trickkiste auch eher fragwürdig.

Dann doch lieber wieder die gute alte Tabelle (ja ich weiss ist nich mehr trendy...)

[steffi]

Allerdings wäre ein möglicher Griff in die Javascript-Trickkiste auch eher fragwürdig.

bist du dir da sicher das es mit javascript nicht funktioniert? schade schade, jetzt muss ich doch wieder mit tabellen arbeiten....

[Patrick Breitenbach]

bist du dir da sicher das es mit javascript nicht funktioniert? schade schade, jetzt muss ich doch wieder mit tabellen arbeiten....

Da geh ich schwer von aus...
aber vielleicht weiß ja noch jemand Genaueres.

[Jan L.]

Hallo,

Wenn es unbedingt mit 'position: absolute;' sein soll, dann nimm:

<div id="Layer1" style="position: absolute; width: 700px; height: 50px; z-index: 1; top: 20px; left: 50%; margin-left: -350px;"></div>

Ansonsten kannst du die Ebenen einfach 'normal' zentrieren:

<div id="Layer1" style="width:700px; height:50px; margin: 0 auto;"></div>

Gruß; Jan