Element mittig positionieren

[Heizer]

Hi Forum

Ich steh wahrscheinlich wiedermal aufm Schlauch, aber ich komm nicht drauf, wie man das macht:
Ich möchte links im Fenster ein Menu haben mit "position:fixed; left:0; top:0; height:100%; width:150px;". Das Klappt auch wunderbar, und nun möchte ich eine Grafik im verbleibenden Raum mittig und zentriert ausrichten, also versuchte ich es mit

position:absolute; top:0 left:150px; width:100%; height:100%; text-align:center; vertical-align:middle;

Das funktioniert aber nicht, die Grafik wird immer in der linken oberen Ecke angezeigt, allerdings mit den 150px abstand, also neber dem Menu.

Ich test das mit Mozilla 0.9.9 weil der meiner Erfahrung nach eigentlich am verläßlichsten mit CSS umgeht.
Weiß jemand, wo mein Fehler liegt?

Dank

Heizer

[blowmax]

Hi Forum

Ebenfalls Hi

Ich steh wahrscheinlich wiedermal aufm Schlauch, aber ich komm nicht drauf, wie man das macht:
Ich möchte links im Fenster ein Menu haben mit "position:fixed; left:0; top:0; height:100%; width:150px;". Das Klappt auch wunderbar, und nun möchte ich eine Grafik im verbleibenden Raum mittig und zentriert ausrichten, also versuchte ich es mit

position:absolute; top:0 left:150px; width:100%; height:100%; text-align:center; vertical-align:middle;

Das funktioniert aber nicht, die Grafik wird immer in der linken oberen Ecke angezeigt, allerdings mit den 150px abstand, also neber dem Menu.

??? Das ist ja auch deine Angabe !!!

Ich test das mit Mozilla 0.9.9 weil der meiner Erfahrung nach eigentlich am verläßlichsten mit CSS umgeht.
Weiß jemand, wo mein Fehler liegt?

In der Logik an sich!

Mit CSS-Positionierung kenn ich mich nicht so richtig aus!

ABER eine Tabelle würde dein Problem lösen, einfach

<td align="center">BILD</td>

und fertig

Gruß Christoph

[Heizer]

Hi Forum
Ebenfalls Hi

und wieder Hi

Ich steh wahrscheinlich wiedermal aufm Schlauch, aber ich komm nicht drauf, wie man das macht:
Ich möchte links im Fenster ein Menu haben mit "position:fixed; left:0; top:0; height:100%; width:150px;". Das Klappt auch wunderbar, und nun möchte ich eine Grafik im verbleibenden Raum mittig und zentriert ausrichten, also versuchte ich es mit

position:absolute; top:0 left:150px; width:100%; height:100%; text-align:center; vertical-align:middle;

Das funktioniert aber nicht, die Grafik wird immer in der linken oberen Ecke angezeigt, allerdings mit den 150px abstand, also neber dem Menu.

??? Das ist ja auch deine Angabe !!!

schon klar, ich wollte nur zum Ausdruck geben, daß diese Angabe berücksichtigt wird, allerdings nicht das ganze Align-Zeug.

Ich test das mit Mozilla 0.9.9 weil der meiner Erfahrung nach eigentlich am verläßlichsten mit CSS umgeht.
Weiß jemand, wo mein Fehler liegt?

In der Logik an sich!

Ja, und wie sollte die Logik aussehen? Meiner Logik nach gebe ich mit "height:100%; width:100%" eine Fläche vor, in der ich dann mit "align" etwas positionieren kann? so etwas muß doch möglich sein, oder? Aber wie?

Mit CSS-Positionierung kenn ich mich nicht so richtig aus!

ABER eine Tabelle würde dein Problem lösen, einfach

<td align="center">BILD</td>

und fertig

Richtig, aber ich versuche, neue Webseiten nicht mehr nach dem Tabellenschema zu schreiben, sondern die Fähigkeiten von CSS zu nutzen. Tabellen haben auch ihre Nachteile (die hier sicherlich schon lang und breit diskuztiert wurden).
Nach den Empfehlungen des W3C sollten Tabellen doch nur noch eingesetzt werden, um Tabellarische Strukturen abzubilden, nicht um ein Layout zu erstellen. Daraus forgere ich, daß man alles, was man mit Tabellen machen kann, auch mit CSS hinbekommt. Aber wie?

Gruß Christoph

Gruß zurück und trotzdem Danke

Heizer

[Sönke Tesch]

Ich möchte links im Fenster ein Menu haben mit "position:fixed; left:0; top:0; height:100%; width:150px;". Das Klappt auch wunderbar, und nun möchte ich eine Grafik im verbleibenden Raum mittig und zentriert ausrichten, also versuchte ich es mit

position:absolute; top:0 left:150px; width:100%; height:100%; text-align:center; vertical-align:middle;

Das funktioniert aber nicht, die Grafik wird immer in der linken oberen Ecke angezeigt, allerdings mit den 150px abstand, also neber dem Menu.

Wenn Du ein Element bei oben 0, links 150 positionierst, wird es wohl kaum in der Mitte auftauchen können, oder? Darüberhinaus besagt text-align:center, daß der Text im Element zentriert wird, nicht das Element selber (http://www.w3.org/TR/REC-CSS2/text.html#alignment-prop).

Um ein Blockelement zu zentrieren, mußt Du margin-left und margin-right auf auto setzen (http://www.w3.org/TR/REC-CSS2/visudet.html#q6). Um Inline-Elemente zu zentrieren, setzt Du im darüberliegenden Element text-align auf center.

Da Deine Grafik sicherlich im verbleibenden Raum neben dem Menü zentriert werden soll und nicht im Fenster, mußt Du wohl neben dem Menü noch ein <div> aufmachen, daß als Container und Zentrierhilfe für die Grafik dient.

Gruß,
  soenk.e

[Heizer]

Ich möchte links im Fenster ein Menu haben mit "position:fixed; left:0; top:0; height:100%; width:150px;". Das Klappt auch wunderbar, und nun möchte ich eine Grafik im verbleibenden Raum mittig und zentriert ausrichten, also versuchte ich es mit

position:absolute; top:0 left:150px; width:100%; height:100%; text-align:center; vertical-align:middle;

Das funktioniert aber nicht, die Grafik wird immer in der linken oberen Ecke angezeigt, allerdings mit den 150px abstand, also neber dem Menu.

Wenn Du ein Element bei oben 0, links 150 positionierst, wird es wohl kaum in der Mitte auftauchen können, oder? Darüberhinaus besagt text-align:center, daß der Text im Element zentriert wird, nicht das Element selber (http://www.w3.org/TR/REC-CSS2/text.html#alignment-prop).



Um ein Blockelement zu zentrieren, mußt Du margin-left und margin-right auf auto setzen (http://www.w3.org/TR/REC-CSS2/visudet.html#q6). Um Inline-Elemente zu zentrieren, setzt Du im darüberliegenden Element text-align auf center.

Da Deine Grafik sicherlich im verbleibenden Raum neben dem Menü zentriert werden soll und nicht im Fenster, mußt Du wohl neben dem Menü noch ein <div> aufmachen, daß als Container und Zentrierhilfe für die Grafik dient.

Sorry, ich hatte mich da etwas falsch ausgedrückt, ich hatte schon ein <div> außenherum. Das mit dem margin-left und margin-right funktioniert wunderbar, aber leider nicht in der Höhe. Hab gerade etwas herumprobiert, aber den Effekt, den eigentlich "vertical-align:middle" haben sollte, erreiche ich nicht. Gibt es da noch einen Anderen Trick?

Gruß,
  soenk.e

Danke und gruß zurück

Heizer

[Kai Lahmann]

hi

Sorry, ich hatte mich da etwas falsch ausgedrückt, ich hatte schon ein <div> außenherum. Das mit dem margin-left und margin-right funktioniert wunderbar, aber leider nicht in der Höhe. Hab gerade etwas herumprobiert, aber den Effekt, den eigentlich "vertical-align:middle" haben sollte, erreiche ich nicht. Gibt es da noch einen Anderen Trick?

Höhen haben per default keinen Referenz-Wert. Dieser muss mit html,body{height:100%;} im CSS-Block erst erschaffen werden.

gruss Kai

[Heizer]

super, danke

[DAU :-( der was lernen will]

'n Abend!

Wollte das auch gerade mal ausprobiern, geht aber net:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html style="height:100%">
<head>
<title>Neues Dokument</title>
</head>
<body style="height:100%">
  <div style="
         position:fixed; left:0; top:0;
         margin:0px;padding:10px;
         height:100%;width:300px;
         background-color:#ff0000;">
    <p>das ist ein langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes Menü</p>
    <p>mit vielen Absätzen</p>
    <p>und noch einer</p>
  </div>

<div style="
         position:relative;
         text-align:center;
         margin:auto;">
    Hier mittig
  </div>
</body>
</html>

• Der mittige Abschnitt ist nicht links vom Menü mittig, sondern relativ zur Seite.

• Der IE macht um das erste Div einen Abstand herum, auch margin:0px; left:0; top:0; bringen da nix :-(

• Der eigentlich zentrierte Abschnitt klebt bei IE unten und bei Mozilla oben (??), mittig ist der jedenfalls nicht.

DAU
  (der nicht dachte, dass CSS sooo kompliziert sind :-( )

[Kai Lahmann]

hi

<div style="
         position:fixed; left:0; top:0;
         margin:0px;padding:10px;
         height:100%;width:300px;
         background-color:#ff0000;">
  </div>

<div style="
         position:relative;
         text-align:center;
         margin:auto;">
  </div>

da die beiden <div> nacheinander sind, deckt der obere die komplette Seite an (in der höhe). Der andere sitzt darunter. (IE kann kein position:fixed!)
In Mozilla ist der untere für die Positionierung des oberen nicht vorhanden (DER kann position:fixed), daher sitzt er selbst oben.
Mit position:absolute machen's beide gleich.

Wenn du das untere div jetzt IN das obere legst, wird es u.a. in Mozilla und IE6 vertikal und horizontal in ersten zentriert.

• Der IE macht um das erste Div einen Abstand herum, auch margin:0px; left:0; top:0; bringen da nix :-(

margin:0px für body festlegen.

[DAU]

Hallo!

Wenn du das untere div jetzt IN das obere legst, wird es u.a. in Mozilla und IE6 vertikal und horizontal in ersten zentriert.

Ähm, sorry, wenn das falsch rüber gekommen ist. Ich wollte Links eine Spalte mit 300px und rechts daneben eine weitere für das gesamte übrige Fenster. Und darin soll nun der Text direkt in der Mitte sein.

• Der IE macht um das erste Div einen Abstand herum, auch margin:0px; left:0; top:0; bringen da nix :-(

margin:0px für body festlegen.

Das hilft. Danke!

etwas weniger D ;-)

[Kai Lahmann]

hi

Ähm, sorry, wenn das falsch rüber gekommen ist. Ich wollte Links eine Spalte mit 300px und rechts daneben eine weitere für das gesamte übrige Fenster. Und darin soll nun der Text direkt in der Mitte sein.

achoooo
also für den rechten ein margin-left:300px (oder besser mehr).
und dann diesem noch eine höhe verpassen - sonst wird das nix mit vertikal ausrichten...

gruss Kai

[doppel-DAU]

hi

Ähm, sorry, wenn das falsch rüber gekommen ist. Ich wollte Links eine Spalte mit 300px und rechts daneben eine weitere für das gesamte übrige Fenster. Und darin soll nun der Text direkt in der Mitte sein.

achoooo
also für den rechten ein margin-left:300px (oder besser mehr).
und dann diesem noch eine höhe verpassen - sonst wird das nix mit vertikal ausrichten...

Einen schönen Karfreitag Mittag Kai!

Heul!! Das kann doch nicht soooo schwer sein?!

<html style="height:100%;>
<head>
<title>Neues Dokument</title>
</head>
<body style="height:100%;margin:0px;">

<div style="
         position:absolute;
         left:0; top:0;
         margin:0px;padding:10px;
         height:100%;width:300px;
         background-color:#ff0000;">
    <p>das ist ein langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes, langes Menü</p>
    <p>mit vielen Absätzen</p>
    <p>und noch einer</p>
  </div>

<div style="
         position:absolute;
         width:100%;height:100%;
         margin-left:300px;
         text-align:center;
         margin:auto;">
    Hier mittig
  </div>

</body>
</html>

Warum geht das immer noch nicht?
Bin ich zu dumm, ist CSS sooo kompliziert, was mach ich denn falsch??

schnieeef!

[Kai Lahmann]

hi

<html style="height:100%;> << ein " mehr dürfte wunder wirken

gruss Kai

[dau]

<html style="height:100%;> << ein " mehr dürfte wunder wirken

Hallo!

Wirkt leider überhaupt nicht! <frust>Ich lass das jetzt einfach!<frust> Kann doch irgendwie nicht sein :(

dau