CSS-Seitenlayout --> Layer zentriert ausrichtbar?

[Erri]

Hi,

vor einiger Zeit habe ich begonnen, meine Seite mittels CSS neu zu layouten.

Dabei habe ich einen Layer, welcher folgende Eigenschaften hat:
 #main_in {
         background: #EAE3B5;
         position:absolute;
         z-index:1;
         width: 750px;
 }

Nun würde ich DIESEN LAYER gern IMMER ZENTRIERT AUSRICHTEN wollen, egal ob VERTIKAL oder HORIZONTAL auf der Seite.
Ich habe es mit folgenden Eigenschaften versucht, allerdings ohne Erfolg:

align: center;
         vertical-align: center;

Weiß jemand von euch, ob dies überhaupt möglich ist und wenn ja, wie?
Vielen Dank schon einmal im voraus...

Viele Grüße
Erri

[azok]

hi!

vor einiger Zeit habe ich begonnen, meine Seite mittels CSS neu zu layouten.

schön.

Dabei habe ich einen Layer, welcher folgende Eigenschaften hat:
#main_in {
         background: #EAE3B5;
         position:absolute;

^^^^^^^^^^

z-index:1;
         width: 750px;
}

wieso absolute? geht ja mit relative auch...

Nun würde ich DIESEN LAYER gern IMMER ZENTRIERT AUSRICHTEN wollen, egal ob VERTIKAL oder HORIZONTAL auf der Seite.
Ich habe es mit folgenden Eigenschaften versucht, allerdings ohne

ja, das geht... aber du brauchst nicht so zu schreien...

Erfolg:

align: center;
         vertical-align: center;

Weiß jemand von euch, ob dies überhaupt möglich ist und wenn ja, wie?

ja, ist möglich. ich schreib mal ein tut darüber... ;-).
also das schaut so aus:

#main_in {
margin-right:auto;
margin-left:auto;
margin-top:1em;
text-align:left;
padding:0em;
border:none;
}

hoffe, ich konnte helfen

lg
azok(=freak)

[Erri]

Hi,
erteinmal vielen Dank für die Antwort.

wieso absolute? geht ja mit relative auch...

Mein Layer soll eine bestimmte Breite haben, geht das mit relative auch?

ja, das geht... aber du brauchst nicht so zu schreien...

Sorry, war nicht als schreien gemeint :-)

#main_in {
margin-right:auto;
margin-left:auto;
margin-top:1em;
text-align:left;
padding:0em;
border:none;
}

Das Problem ist hierbei nur, dass der Layer nicht eine bestimmte Breite hat und zentriert ausgerichtet ist, sondern am vollem Fenster angepasst ist.

Viele Grüße
Erri

[azok]

hi!

erteinmal vielen Dank für die Antwort.

gern geschehen

wieso absolute? geht ja mit relative auch...
Mein Layer soll eine bestimmte Breite haben, geht das mit relative auch?

sicher. width:5em etc.

#main_in {
margin-right:auto;
margin-left:auto;
margin-top:1em;
text-align:left;
padding:0em;
border:none;
}

Das Problem ist hierbei nur, dass der Layer nicht eine bestimmte Breite hat und zentriert ausgerichtet ist, sondern am vollem Fenster angepasst ist.

gib ihm irgendeine breite z.b 46em und/oder eine höhe mit height:

er sollte dann eigentlich in der mitte horizontal und vertikal sein.

Viele Grüße
Erri

p.s. verwende statt background:#rrggbb background-color:#rrggbb

lg
azok(=freak)

[Erri]

Hi,

Das Problem ist hierbei nur, dass der Layer nicht eine bestimmte Breite hat und zentriert ausgerichtet ist, sondern am vollem Fenster angepasst ist.

gib ihm irgendeine breite z.b 46em und/oder eine höhe mit height:

er sollte dann eigentlich in der mitte horizontal und vertikal sein.

Okay, habe ich gemacht. Im Mozilla Firefox funktionierts auch prima, aber im IE wird der Layer trotzdem linksbündig angezeigt. Woran könnte das liegen?

Vielen Dank

Viele Grüße
Erri

[wahsaga]

hi,

Okay, habe ich gemacht. Im Mozilla Firefox funktionierts auch prima, aber im IE wird der Layer trotzdem linksbündig angezeigt. Woran könnte das liegen?

daran, dass dieser margin:auto noch nicht interpretiert (in version < 6, bzw. 6 im quirks mode).

dass du das nicht wusstest, liegt vermutlich wiederum daran, dass du vorher nicht mal ansatzweise gesucht hast - die frage nach der zentrierung in x-richtung taucht hier mindestens ein mal wöchentlich auf.
und bei den antworten findest du auch den für den IE nötigen workaround ... also los jetzt: http://suche.de.selfhtml.org/

gruß,
wahsaga

[schwarze Piste]

Tachchen!

Nun würde ich DIESEN LAYER gern IMMER ZENTRIERT AUSRICHTEN wollen, egal ob VERTIKAL oder HORIZONTAL auf der Seite.
Ich habe es mit folgenden Eigenschaften versucht, allerdings ohne Erfolg:

Möglichkeiten gibt's einige, doch die sind entweder nicht schön oder
nicht browserübergreifend nutzbar oder sie haben Beschränkungen.

Halbwegs browserübergreifend funktioniert es, wenn man eine Tabelle(-nzelle)
drumrum zieht ... das ist aber nicht Sinn und Zweck der CSS-Übung.

Dann geht es noch mit einer Kombination absoluter Positionierung (50%)
und negativen margins ... das erfordert aber die Kenntnis um die Maße
des kopletten Containers inkl. Höhe.

Gruß

Die schwarze Piste