1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

CSS: header mittig setzen

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von zoom, 21.06.07.

  1. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    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
     
  2. Nordapfel

    Nordapfel Welscher Taubenapfel

    Dabei seit:
    03.09.06
    Beiträge:
    756
    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.
     
  3. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    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?
     
  4. Nordapfel

    Nordapfel Welscher Taubenapfel

    Dabei seit:
    03.09.06
    Beiträge:
    756
    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 gefällt das.
  5. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    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... :(
     
  6. Nathea

    Nathea Admin
    AT Administration

    Dabei seit:
    29.08.04
    Beiträge:
    13.550
  7. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    Oh, sehr gut. Sowas habe ich in der Tat noch gesucht/gebraucht. Dann mache ich mich nochmal schlau... und frage dann nochmal nach ;).
     
  8. MrNase

    MrNase Champagner Reinette

    Dabei seit:
    11.01.05
    Beiträge:
    2.643
    zoom gefällt das.
  9. Benijamino

    Benijamino Zuccalmaglios Renette

    Dabei seit:
    18.12.06
    Beiträge:
    263
    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;
    }
     
  10. zoom

    zoom Antonowka

    Dabei seit:
    06.03.06
    Beiträge:
    356
    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 ;)
     

    Anhänge:

    #10 zoom, 25.06.07
    Zuletzt bearbeitet: 25.06.07

Diese Seite empfehlen