Startseite zentrieren

[Korrix]

Hallo Leute,

auf einer Startseite habe ich ein paar Grafiken zur Sprachwahl plaziert. Wie kann ich es erreichen, dass diese stets zentriert sind, also horizontal und vertikal, unabhängig von der gewählten Bildschirmauflösung (800x600 und größer)?

Danke für Eure Anworten im Voraus und frohe Ostern an alle!

[AceTheFace]

ich mach das einfach so in meiner css-Datei:



#main {
width:900px;
margin-left:auto;
margin-right:auto;


Ich sage halt, wie breit es mind. sein soll, und dann setze ich den linken und den rechten Abstand auf auto.

Gruß,
Ace

[Korrix]

und vertikale Zentrierung, geht das dann mit margin-top und margin-bottom: auto?

[AceTheFace]

und vertikale Zentrierung, geht das dann mit margin-top und margin-bottom: auto?

Probiers aus :) Das hab' ich nie gebraucht...

Gruß,
Ace

[Pingu]

Nein, leider nicht. Wie man genau die vertikale Zentrierung hinbekommt, habe ich auch nocht nicht heraus gefunden.

Unabhängig davon, die horizontale Zentrierung funktioniert mit margin: auto auch nur in CSS2-kompatiblen Browsern anständig. Beim IE muß die Zentrierung fälschlicher Weise mit text-align: center erfolgen, d.h. Du mußt noch ein <div> um Deine eigentlichen Daten herum setzen und diesem text-align: center mitgeben.

Pingu

[Korrix]

kann ich nicht irgendwie eine Tabelle um das ganze herummachen und diese dann vertikal zentrieren?

[Reaper]

ja kannst du
aber mit css sollte es auch gehen (ist eleganter)
evtl wenn man höhe und breite auf 100% setzt und den text auf center... und dann halt noch den tag finden, der valign macht... hab leider keine zeit zum schauen

[nEox]

Hallo,

da gibts doch diese Methode wo man von oben und links 50% Abstand angibt und dann die Hälfte der Höhe und der Breite des Layers wieder abzieht.

Beispiel:

#container {
position:absolute;
height:482px;
width:741px;
top:50%;
left:50%;
margin-top:-241px;
margin-left:-370px;
z-index:2;}


Gruß

nEox

[Pingu]

Stimmt. Total vergessen. Dabei habe ich doch erst letztens den Artikel mit der Verwendung von negative Margins bei A List A Part gelesen. *kopfaufdentischschlag*

Pingu

[Lin728]

Hab vor kurzem etwas mehr Html/CSS/JavaScript gemacht, und da war der IE6 ein graus! Opera, Konqueror, Firefox haben alles 100% so dargestellt wie ich wollte, extra für den IE hab ich meinen Code wieder anpassen müssen.
Früher war der IE lange das Maß aller Dinge, aber wenn ich mir heute anschaue ist der IE6 so ziemlich schlecht, spieziell was die Features angeht.

Das einzige wo er wirklich glänzt ist Geschwindigkeit, wenn ich mir ansehen wie schnell der CSS-Attribut-Veränderungen in JavaScript ausführt oder selbst komplexe Html-dokumente (falsch) rendered, da bin ich echt baff. Opera-8b3 ist das einzige, was einigermaßen mithalten kann.

[Joghurt]

kann ich nicht irgendwie eine Tabelle um das ganze herummachen und diese dann vertikal zentrieren?Klar:

<TABLE COLS=1 WIDTH="100%" HEIGHT="100%">
<TR><TD ALIGN=CENTER>Zentriert.
</TD></TR>
</TABLE>

[Reaper]

der html code ist aber alles andre als valid.... (sieht aus wie aus Frontpage oder so nem Müll)


<div style="position: absolute; top:0px; left:0px; width: 100%; height: 100%; vertical-align: middle; text-align:center">blabla</div>

Damit müßte es gehen....

[Joghurt]

der html code ist aber alles andre als valid.... (sieht aus wie aus Frontpage oder so nem Müll) :mad: Der ist Handgeschrieben. Mit Frontpage wurde ich noch nie verwechselt ;)

Was ist daran nicht valid? (war jetzt zu faul, nachzuschauen, ist schon etwas älter, der Code)
Dein Beispiel nutzt wieder CSS.

[Reaper]

Was soll an dem CSS falsch/schlecht sein?

Der W3C Validator sagt zu dem Code


there is no attribute "COLS"
there is no attribute "HEIGHT"

Bei XHTML zusätzlich:
an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified
there is no attribute "ALIGN"

Das sieht vom Aufbau her echt aus wie Frontpage... alles groß (sollte glaub auch nach w3c alles klein sein) und wild mit Attributen rumgeschmissen.

[Glow]

<table width="100%" height="100%">
<tr>
<td align="center" valign="center">Zentriert.</td>
</tr>
</table>


Das ist valide, hab valign="center" mal ganz frech hinzugefügt :)