CSS: header mittig setzen

zoom · 21.06.07

Moin!

Ich beschäftige mich seit kurzer Zeit mit dem Thema CSS. Ich habe mich selbstständig in das Thema hineingefuchst - dank zahlreicher Internetseiten. Nun stehe ich aber vor einem Problem, das ich bisher nicht lösen konnte:
Ich möchte eine header-Grafik mittig (unabhängig von der Bildschirmauflösung) auf der Seite darstellen. Mein CSS-Codeschnipsel:

Code:

header {
	position: relative;
	top: 0px;
	left: 50%;
	width: 784px;
	height: 156px;
}

Das Problem ist nun, dass als Referenzpunkt der Grafik die obere linke Ecke verwendet wird. Das heißt, die Grafik beginnt in der waagrechten bei 50% des Bildschirm. Wie kann ich das Problem beheben? Einfach wäre es, wenn als Referenzpunkt die Mitte der Grafik verwendet würde. Oder muss ich auf html zurückgreifen? Könnt ihr mir weiterhelfen?

Gruß zoom

Nordapfel · 21.06.07

Für Mozilla & Co musst du dem header ein margin-left: auto; und ein margin-right: auto; geben.
Damit der IE auch klar kommt, muss du am besten um den header noch ein div o.ä. rumwerkeln, das ein text-align: center; hat.

zoom · 21.06.07

Ok, den header konnte ich jetzt zentrieren mit einer div-Anweisung. Nun möchte ich das darunter liegende Textfeld auch noch zentrieren.

Code:

#center {
	text-align: center;
}
#main {
	z-index: 10;
	position: absolute;
	top: 156px;
	width: 730px;
	background-color: #ffffff;
	font-family: verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
	line-height: 1.5;
}

Wenn ich das Textfeld main mit center zentriere, dann passiert gar nichts. Liegt vermutlich am #. Nehme ich das bei main weg, dann ist natürlich der Text in main zentriert. Das soll nicht so sein. Wie sieht da die Lösung aus?

Nordapfel · 21.06.07

Die Raute (#) zeigt nur, dass es sich dabei um eine ID handelt, sprich im ganzen Dokument nur ein einziges Mal verwendet werden darf.

Das Textfeld muss auch die margin-left und margin-right Werte von oben bekommen. Und wie gesagt für den IE ein div um das Textfeld herumsetzen, dass eben id="center" bekommt. Dann musst du nur aufpassen, dass du im #main nochmal text-align: left; schreibst, da sonst der Text im Textfeld (denke ich) zentriert wird.

zoom · 21.06.07

CSS:

Code:

#main {
	z-index: 10;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	top: 156px;
	width: 730px;
	background-color: #ffffff;
	font-family: verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
	line-height: 1.5;
}

html:

Code:

<body>
<center><header><img src="http://www.apfeltalk.de/forum/images/header.jpg"></header></center>
  <center><div id="main"> 
    <H1>Herzlich Willkommen</H1>
    lorem ipsum </div></center>
</body>

Der Header ist, wie gesagt zentriert. Aber warum nicht das Textfeld? Die center-Umgebung über alles funktioniert auch nicht...

Nathea · 21.06.07

Mir scheint, als sei das alles noch nicht so ganz "gar"

und als habest Du das mit den "Boxen" und der Aufteilung mittels divider noch nicht so recht verstanden.

Guck mal hier: http://css.fractatulum.net/csseditor/index.php oder allgemein bei fractatulum oder bei Stichpunkt, da ist das alles auch prima erklärt.

zoom · 21.06.07

Nathea schrieb:
Mir scheint, als sei das alles noch nicht so ganz "gar" und als habest Du das mit den "Boxen" und der Aufteilung mittels divider noch nicht so recht verstanden.

Guck mal hier: http://css.fractatulum.net/csseditor/index.php oder allgemein bei fractatulum oder bei Stichpunkt, da ist das alles auch prima erklärt.

Oh, sehr gut. Sowas habe ich in der Tat noch gesucht/gebraucht. Dann mache ich mich nochmal schlau... und frage dann nochmal nach

.

MrNase · 21.06.07

Guck mal ob dir dieses Beispiel hilft: www.mrnase.de/stuff/apfeltalk.html

Wenn Fragen sind... Dann frag'.

Benijamino · 21.06.07

Kleiner Tipp, setz und das ganze Gerüst nen #wrapper oder so.

Also z.B.

html Datei:
<div id="wrapper">
<div id="header">inhalt</div>
<div id="inhalt">inhalt</div>
<div id="footer">inhalt</div>
</div

und in der CSS
#wrapper {
width:deine max Grafik breite;
margin: 0 auto;
}

zoom · 25.06.07

erneut Hilfe bitte

Moin!

Ich habe jetzt ein wenig mehr Erkentnisse gewonnen, was CSS angeht. Ich danke für eure Tipps! Nun steht das Layout der Seite auch schon recht gut da. Allerdings habe ich dennoch ein Problem. Ich hoffe, ihr habt Ansätze zur Lösung des Problems. :-*
Das CSS-Gerüst sieht nun folgendermaßen aus:

Code:

body {
	background-color: #cccccc;
	text-align: center;
	margin: 0px;
}
#header {
	margin: 0px;
	height: 156px;
}
#main {
	margin: 0px auto;
	padding: 5px 30px;
	width: 724px;
	background-image: url(bild.jpg);
	background-color: #ffffff;
	font-family: verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
	line-height: 1.5;
}

Als angehängtes Bild seht ihr den groben Aufbau der Seite. Folgendes fehlt nun noch: Der Bereich in Orange (s. Grafik) soll den Header nach rechts und links vervollständigen - und zwar so, dass der Bildschirm (unabhängig der Auflösung) aufgefüllt wird. Weiteres Problem dabei: Die Hintergrundgrafiken sollen an der linken bzw. rechten Headerseite beginnen und dann nach rechts bzw. links bis zum Rand des Browsers aufgefüllt werden. Ich hoffe ihr konntet mir folgen und habt eine Idee. Vielleicht gibt es da ja einen standardmäßigen Tipp?

Gruß zoom

EDIT: Hat sich erledigt! Ich habe das Problem auf eine elegante Weise geändert

Suche

Suche

CSS: header mittig setzen

zoom

Antonowka

Nordapfel

Osnabrücker Reinette

zoom

Antonowka

Nordapfel

Osnabrücker Reinette

zoom

Antonowka

Nathea

Admin

zoom

Antonowka

MrNase

Champagner Reinette

Benijamino

Zuccalmaglios Renette

zoom

Antonowka

Anhänge

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)