DIV per CSS zentrieren und andere Antworten

Da ich im Moment an einer neuen Version meines Templates arbeite und dafür sowohl alle HTML-Dateien als auch das CSS-Stylesheet komplett neu erstelle, kamen mal wieder ein paar Fragen auf, für die ich erst recherchieren musste. Deshalb hier die Antworten (in erster Linie für mich, damit ich das nächste Mal nicht wieder lange suchen muss).

Ich hatte das Problem, dass mein zentrierter Wrapper, also der Hauptcontainer, in dem sich der komplette Inhalt in anderen DIVs befindet, nicht immer zentriert war (entweder im IE oder im Firefox – mal so, mal so). Für die Lösung habe ich nun eine absolute Positionierung gewählt – 50% von links (was genau die Mitte sein sollte). Von dieser Position wird jetzt die Hälfte des Containers abgezogen, in meinem Fall die Hälfte von 770px, also 385px. Und siehe da: Es klappt tatsächlich!

#wrapper
{
background-color: #fff;
width: 770px;
text-align: center;
position: absolute;
left: 50%;
top: 0%;
margin-left: -385px;
}

Anschließend war das Problem, dass ich einen leichten Farbverlauf als Hintergrundbild bzw. Rahmen haben wollte. Da mir scheint, das Firefox und Internet Explorer grundsätzlich etwas anderes unter einem Rahmen und seiner Anzeige verstehen, sollte es per Grafik gelöst werden. Also flux eine Grafik erstellt, 1 Pixel hoch und *rechen* … das div ist 770px, plus 12px Rahmen auf jeder Seite … 794 Pixel breit. Auf den jeweils äusseren 12 Pixel den Farbverlauf rein und ab damit auf die Seite – zentrieren, fertig. Ja, im Firefox sieht das ganze toll aus, aber der IE verschiebt die Grafik zwei Pixel nach rechts… keine Ahnung warum.

Da ich ja aber vor ein paar Minuten mit den DIV-Positionierungen warm geworden bin, machen wir das doch genau so. Links und rechts von meinem Wrapper kommt nun fast der gleiche Code wie eben (im Bsp. die linke Seite):

#randlinks
{
width: 12px;
height: 100%;
position: absolute;
left: 50%;
top: 0%;
margin-left: -397px;
background-image: url('images/randlinks.gif');
}

Ein weiteres Thema, bei dem ich mir immer erst die alten CSS-Files anschauen muss. Um die Formatierungen innerhalb eines Div-Containers, der zum Beispiel die ID=“logo“ hat, zu ändern, ist folgender Code in der CSS-Datei nötig:

#logo
{
background-color: #aaa;
background-image: url('images/header.jpg');
background-repeat: no-repeat;
height: 270px;
}

Hier wird zunächst der Container an sich formatiert, also Größe, Hintergrundbild und so weiter. Anschließend werden die einzelnen Elemente beschrieben:

#logo h1
{
color: #ececec;
text-align: right;
padding-top: 225px;
padding-right: 10px;
margin: 0 0 0 0;
}

#logo a {...}
#logo img {...}
...