Hallo zusammen,

bin neu hier, habe jahrelang mit Tabellen designt und möchte nun davon wegkommen. Habe mir also von Kai Laborenz "CSS in der Praxis" geholt und versuche nun mein erstes Layout in CSS.

Und hier fängt auch schon mein Problem an. Schaut Euch doch bitte mal diese Seite (7kb inkl. Grafiken) an

http://www.psycho-house.com/xhtml/

Wie Ihr sehen könnt habe ich einen Rahmen aus Grafiken in verschiedenen <div> gebaut. In der Mitte ist nun ein Kasten
der einen grauen gestirchelten Rand hat. Nun ist es so das ich gerne
hätte das dieser Mittig im Container ist, das hab ich ja auch schon geschafft - allerdings sollten oben und unten noch 15px Luft bis zum Rand der Grafiken sein (ich hoffe jemand versteht mich)?

Wie kann ich den <div> nun so positionieren das am oberen Rand wirklich 15px Luft sind? Hab das leider bis dato noch nicht geschafft

Das Buch ist zwar gut, aber Ihr wisst ja wie das ist ... aller Anfang ist schwer.

Desweiteren würde ich mich darüber freuen wenn sich jemand mal anschauen könnte ob das was ich mit CSS bisher gemacht habe sinnvoll ist oder nicht ... wie gesagt seit gestern mit CSS und XHTML dabei.

Danke und Grüsse
Robse

Hallo Robse,

hab mir das eben mal angeguckt - mittig und drin sitzt der Container bei Dir sowieso nur so halbwegs im IE - beim Firefox ist er links ausgerichtet.

Erstmal zum zentrieren: Du musst Deinem seitenContainer ein
mitgeben, dann hält er sich immer in der Mitte auf (gilt für alle außer IE 5 - dieser braucht dann noch das text-align:center; das der IE6 aber ebenfalls interpretiert - natürlich falsch, denn es bezieht sich normalerweise nur auf einen text innerhalb eines Containers, nicht auf diesen selber - das text-align:center aber bitte ebenfalls dem seitenContainer zuordnen, nicht dem body).

O.k. - dann weiter:

Wenn Du mit margin arbeitest, zerpflückt es hier leider das Design - daher fallen mir zwei Lösungen ein:
1. Du machst nur eine Hintergrundgrafik und hast dann nur zwei Container statt vier - bei der geringen Dateigröße der Grafik ist das sicher in Ordnung - dann kannst Du den inneren auch mit margin und/oder padding positionieren - ist einfacher.
2. Wenn es so bleiben soll wie hier, dann musst Du den äußeren Container #seitenContainer mit position:relative; versehen und dann den #rahmenInhalt mit position: absolute; - dieser richtet sich dann am äußeren, relativ positionierten Elternelement aus - bei mir liegt es dann mit top:30px; und left:15px; in der Mitte. (top30 deshalb, weil Du ja den oberen Rahmen mitzählen musst).

Sollte so in allen gängigen Browsern klappen (getestet mit Firefox, IE6 und Opera 7.23)

Grüße, Terry

Hallo teriikay,

danke für Deinen Tip werde ich nachher gleich mal probieren!

Jau das habe ich inzwischen auch gemerkt das mein Layout in Safari, Camino nicht zentriert ist. Leider ....

Ich melde mich nochmals!

Grüsse
Robse