• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Seite zentrieren

Robd

Neues Mitglied
Hallo ich würde gern die meine Webseite zentieren.
Das Problem ist das ich die Webseite auf meinem Monitor mit 1680x1050
einger massen mit .body zentiert bekomme. Ändere ich die Auflösung 1024x768
sieht es wieder total bescheuert aus. Ich will einfach das er nur mit dem möglichen Platz zentiert.
Ich habe es wie folgt versucht.

Index.html:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/Style.css">
</head>

<body>
<div id="header"><img src="images/Logo.png" id="Logo"><img src="images/Logo2.png" id="Logo2"></div>

<div class="orand"><img src="images/rand.png" class="rand"></div>

<div id="left">left</div>

<div id="content">content</div>

<div id="right"><img src="images/slogan.PNG" id="slogan"></div>

<div class="orand"><img src="images/rand.png" class="rand"></div>

<div id="footer">footer</div>
</body>
</html>

Style.css
Code:
body
{
    background-color:red;
    margin-left:25%;
}
#header
{
  width:1000px;
  height:100px;
  background-color:rgb(29,30,58);
}

#left
{
  float:left;
  width:200px;
  height:70%;
  background-color:rgb(29,30,58);
}

#content
{
  float:left;
  background-color:rgb(29,30,58);
  width:590px;
  height:70%;

}
#right
{
  float:left;
  width:200px;
  height:70%;
  background-color:rgb(29,30,58);
}
#footer
{
  clear:both;
  width:1000px;
  height:10%;
  background-color:rgb(29,30,58);
}
...unwichtige Sachen wurden weg gelassen
 
Pack doch deine ganze Seite nochmal in ein DIV (nennst du z.B. "container") mit fester Breite (ich nehme z.B. 750px) und nimm dann den Code:

Code:
div.container {
width: 750px;
position: absolute;
left: 50%; // die Hälfte des Bildschirms
margin-left: -508px; // die Hälfte der Hälfte für die Mitte - muss die Hälfte der DIV-Breite beinhalten
}
Das war's eigentlich.

Viel Glück,
Em.Ef.Be
 
@ Em.Ef.Be:
Gerade das ist ein äußerst schlechter Tipp, um Seiten zu zentrieren.
Durch die absolute Positionierung können je nach Fenstergröße Inhalte "verloren gehen" bzw. sind dann für den Besucher nicht sichtbar.
 
Zurück
Oben