Zur Navigation

Layout zentrieren

1 Nicky

Ich spiele grad nen bisschen mit css rum und habe einfahc mal ein klienes sehr einfaches Layout erstellt.

http://www.freepler.de/userdaten/22548028/bilder/home.jpg

Wie kriege ich es nun hin, dass das Layout in der mitte des Fensters angezeigt wird?
html, body {
  background-color:gray;
  width:800px; 
  margin:0px;
  padding:0px;
}

#header {
  background-color:rgb(190,215,235);
  width:100%;
  height:100px;
  margin:0px;
  padding:0px;
}

#navigation {
  background-color:rgb(210,235,255);
  left:0px;
  width:180px;
  margin:0px;
  padding:0px;
}

#content {
  position:absolute;
  top:100px;
  margin-top:0px;
  margin-left:180px;
  margin-right:180px;
}

#features {
  position:absolute;
  background-color:rgb(210,235,255);
  top:100px;
  right:0px;
  width:180px;
  margin:0px;
  padding:0px;
}

Lg
Nicky

29.07.2007 17:41

2 Rudy

Hi Nicky,

ich würde alle divs in body in ein übergeordnetes div packen. z.B. 
....
<body>
  <div id="all">
     <div id="header">...</div>
     <div id="content">...</div>
     <div id="footer">...</div>
  </div>
</body>

Das macht vieles einfacher, würde ich generell empfehlen.

Zentrieren kannst Du div#all und dessen Inhalt dann so:

body { text-align:center; //für IE } 
div#all { margin:0 auto; text-align:left; //für IE }

Prinzipiell würde ein auto-margin links und rechts reichen, aber der IE braucht noch das eigentlich für inline-Elemente bestimmte text-align als Angabe. (margin:0 auto; heißt margin:0 auto 0 auto; oder margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;) Da text-align sich dann aber auch auf untergeordnete Elemente auswirkt und dort die Textausrichtung beeinflusst, muss man es wieder mit der Angabe text-align:left auf die Standard-Einstellung zurücksetzen. Das wirkt sich dann wiederum automatisch auf die div#all untergeordneten Elemente aus und der Text wird wie gewohnt links ausgerichtet.

29.07.2007 18:11 | geändert: 29.07.2007 18:13

3 Nicky

Ich habe jetzt ein übergeordnetes div mit der id=all gemacht.
Dann habe ich bei body und all deine inhalte reingefügt, aber es klappt immer noch nicht egal mit welchem browser

habe den code so verändert
html, body {
  background-color:gray;
  width:800px; 
  margin:0px;
  padding:0px;
  text-align:center;
}

#all {
  margin:0 auto;
  text-align:left;
}

30.07.2007 10:38

4 Jörg Kruse

Hallo Nicky,

die Breite musst du nicht "html, body" zuweisen, sondern "#all":

html, body {
 background-color:gray; 
 margin:0px;
 padding:0px;
 text-align:center;
}

#all {
 margin:0 auto;
 width:800px;
 text-align:left;
}

30.07.2007 11:10

5 Nicky

Super danke das klappt jetzt, allerdings tut sich da grade das näcshte Problem auf;)

Die Spalte "Features" steht jetzt nicht mehr unter dem Header, sondern steht immer ganz rechts egal wie breit man das Fenster zieht. Wäre nett, wenn ihr mir damit auch noch behilflich sein könntet;)

30.07.2007 11:39

6 Jörg Kruse

Wenn du #features absolut positionierst, richtest du dieses Element an den Anzeigebereich des Browsers aus - es ist dann losgelöst von anderen übergeordneten Elementen wie #all. Wenn #features mit den anderen Elementen innerhalb von #all angezeigt werden soll, musst du es normal positionieren.

PS: wenn du Blockelemente nebeneinander positionieren möchtest, so kannst du dies anstelle von position:absolute mithilfe von float realisieren

30.07.2007 14:38 | geändert: 30.07.2007 14:39

7 Rudy

Kleine Anmerkung:

 margin:0px;
padding:0px;
0 Pixel sind 0 Äpfel sind 0 Autos sind 0.

  margin:0;
  padding:0;

30.07.2007 19:58

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]