✔ 3 Ebenen Zentriert ineinander...

Status
Nicht offen für weitere Antworten.
M

Malaxo

Erfahrenes Mitglied
Wie gesagt bin CSS tester;) (neuling)

HTML: 
body {
	background-color: black;
  	font-size: 16px;
  	font-family: Verdana, Arial, Helvetica, sans-serif;
  	color: #FFFFFF;
	text-align: center;
	}

#container{
	border: 1px solid #CCCCCC;
	width: 650px;
	text-align: left;
	z-index: 1;
}

#header{
	height: 150px;
	width: 100%;
	border: 0px;
	background-color: #FFFFFF;
	background-image:url(headerbg.jpg);
	text-align: left;
	z-index: 2;
}

#logo{
	height: 150px;
	width: auto;
	border: 0px;
	z-index: 3;
	}

Der Container ist so zusagen der ganze Inhalt (eine art Tabelle). Dieser soll immer zentriert sein im Browserfenster. Der Header ist im Container drin (somit auch gleich zentriert) das Logo sollte auf dem Header sein wie eine Ebene. Doch wen ich Position: absolute mache und einen Index lege, bleiben die Header- & die Logoebene NICHT im Container. Wie bring ich die da rein? Zentriert und dann noch übereinander;) ?
 
Probier mal Folgendes:

Code: 
body {
        background-color: black;
        font-size: 16px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #FFFFFF;
        }

#container {
        margin: 0 auto;
        border: 1px solid #CCCCCC;
        width: 650px;
}

#header {
        height: 150px;
        width: 100%;
        border: 0px;
        background-color: #FFFFFF;
        background-image:url(headerbg.jpg);
}

#logo {
        height: 150px;
        width: auto;
        border: 0px;
        color: #000;
}
HTML: 
<div id="container">
     <div id="header">
          <div id="logo">logo</div>
     </div>
</div>
 
OMG hab echt nicht daran gedacht das Logo auch noch in den Header zu legen.

Thx... hat geklappt bzw. das zentrieren hab ich selbst noch hinzugefügt ging vergessen nehm ich an.

thx:D
 
Malaxo hat gesagt.:
das zentrieren hab ich selbst noch hinzugefügt ging vergessen nehm ich an.
Zum Vergrößern anklicken....
Das horizontale Zentrieren habe ich nicht vergessen und ist eigentlich mit margin:0 auto für das DIV #container eingerichtet.

Vermutlich verwendest du aber für deine Seite keinen Dokumenttyp, oder du hast einen gewählt, der den IE in den Quirksmodus versetzt, weshalb er die margin-Eigenschaft nicht auf das Element anwendet.
 
Benutze den hier:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

Weiss nicht... habs aber anders gemacht so gehts. Mit text-align: center; ist das nicht gut?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück