[tobile81]

Hallo zusammen,
grade steh ich voll auf dem Schlauch. Ich glaub mein Problem ist so einfach, dass es gar nirgends hier aufgeführt wird. Folgendes:
Ich hab ne Div-Box in der meine Seiteninhalte dargestellt werden. Ich fände es jetzt toll, wenn diese Div-Schachtel immer in der Bildschirmmitte angezeigt werden würde, egal wie groß der Bildschirm ist und egal welche Bildschirmauflösung verwendet wird.

Weiß mir jemand Rat oder ne Seite wo ich die Infos finde?

Hier mein html-template

<!--###DOKUMENT### start-->

<table id="centertable" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" align="center">
<div id="box"><img src="fileadmin/tobi/Images/box.jpg" border="0">
</div>
</td>
</tr>
</table>

<!--###DOKUMENT###stop-->

und hier das css:

#centertable{height:100%;width:100%;}

#box
{
position:absolute;
top:38px;
left:12px;
}

Hier die URL der Page: ::Willkommen::
vielen Dank
Tobi

[Cybersmog]

Tabellen sind böse! Sie sind ein Struktur-, kein Layoutmittel!

Das geht nur mit CSS:

#container {
	position: absolute;
	left: 50%;
	width: 800px;
	margin-left: -400px;
}


<div id="container">

</div>

Bei margin-left muss die die Hälfte der Breite rein und ein Minus davor.

Gruß
Peter

[wolfMan]

Zitat von Cybersmog

Tabellen sind böse! Sie sind ein Struktur-, kein Layoutmittel!

Das geht nur mit CSS:

#container {
	position: absolute;
	left: 50%;
	width: 800px;
	margin-left: -400px;
}


<div id="container">

</div>

Bei margin-left muss die die Hälfte der Breite rein und ein Minus davor.

Gruß
Peter

Yep, kann ich nur zustimmen!
der Code kann für eine vertikale Zentrierung noch ergänzt werden um:

#container {
	...
	margin-top: -400px;
        ...
}


<div id="container">

</div>

Gruß - wofMan

[tobile81]

Super cool! Vielen Dank für eure Hilfe! Die Tabelle hab ich komplett aus meinem Template entfernt und so sieht jetzt mein fertiges CSS aus!

#box
{
position: absolute;
left: 50%;
width: 1020px;
margin-left: -510px;
top: 50%;
height: 500px;
margin-top: -250px;
}

LG Tobi

[tobile81]

Hi nochmal...
jetzt sehe ich, dass es auf meinem Bildschirm mit ner Auflösung von 1280:1024 wunderbar funktioniert, auf nem kleineren mit 1024:768 wird das Bild welches zu groß für diesen Bildschirm ist aber nicht automatisch verkleinert.
Toll wäre es, wenn sich die Seite automatisch an die Auflösung anpassen würde.
Geht sowas?

Gruß Tobi

::Test::

[ttb]

Moin,

zuerst einmal: position:absolute; ist genauso "böse", wenn man nicht weiß, was was bewirkt...

Verzichte daher lieber auf absolute Positionierung und nutze lieber die Möglichkeiten, die CSS bietet, sprich float, margin, padding und clear.

Bei 800x600 gibts übrigens zwei unschöne Scrollbalken...

Zu deinem Problem: verkleinere das Bild entsprechend (sodass es auf den kleinsten Nenner, sprich 800x600 passt), positioniere es mittels background-positon: bottom right; unten rechts und gib zusätzlich eine passende Hintergrundfarbe an.

Mehr zu background-position findest du u.a. bei selfhtml: SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder.

[tobile81]

Aber durch die background Positionierung kann ich die Seite doch nur für eine bestimmte Auflösung positionieren oder? Wenn ich die Seite aber von nem anderen Rechner mit ner größeren Auflösung anschaue, soll das Bild immernoch in der Mitte erscheinen!
(Oder ich habs so einfach noch nicht kapiert, wie dus gemeint hast)

Für ne Auflösung von 1064x768 passt das Bild grade rein. Findest du es echt nötig das Bild zu verkleinern? Ich mein dann erkenne ichs auf meinem Rechner mit 1280x1064 ja fast nicht mehr. Oder lässt sich die Größe dann für verschiedene Auflösungen automatisch anpassen??

LG Tobi