✔ Wie bekomme ich ein Layout zentral in die Mitte ? Bei mir kommt eine Verschiebung....

Status
Nicht offen für weitere Antworten.
W

Wasserbaendiger

Mitglied
Hi !

Ich habe folgendes Problem:

In meinem Browser sieht die Seite ganz normal aus.
Jedoch auf einem anderem Pc ist das komplette Layout nach rechts verschoben.
Gibt es da ein Befehl, dass es nicht geht ?

Hier meine CSS-Datei:

HTML: 
<style type="text/css" media="screen">
        body
        {
                margin: 0;
                padding: 0;
                font: 85% arial, hevetica, sans-serif;
                text-align: center;
                color: #FFFFFF;
                background-color: #02156c;
                width: 800px;
                float: center;
        }

      
        
        #header
        {
                height: 200px;
                background-color: white;
                width: 800px;
                position: absolute;         
                left: 200px;
                right: 200px;  


}
        
      
        

#navi
{
background-color: #BBC2CD;
color: #ffffff;
padding: 2px 0;
margin-bottom: 2px;
width: 800px;
text-align: center;
position: absolute;         
left: 200px;
right: 200px; 
top: 200px;
}

#navi ul
{
margin: 0 0 0 20px;
padding: 0;
list-style-type: none;
border-left: 1px solid #FFFFFF;
}

#navi li
{
display: inline;
padding: 0 10px;
border-right: 1px solid #FFFFFF;
}

#navi li a
{
text-decoration: none;
color: #000000;
}

#navi li a:hover
{
text-decoration: none;
color: #fff;
background-color: #FFFFFF;
}
        #contents
        {
                height: 357px;
                background-color: yellow;
                width: 400px;
                position: absolute;         
                left: 400px;
                right: 200px;
                top: 220px;  
              
        }

#links
  {
                height: 357px;
                background-color: red;
                width: 200px;
                position: absolute;         
                left: 200px;
                right: 200px;
                top: 220px;  
                
        }

#rechts
  {
                height: 357px;
                background-color: green;
                width: 200px;
                position: absolute;         
                left: 800px;
                right: 200px; 
                top: 220px;
        }
</style>


Danke im voraus

Gruß
Simon
 
Hi,

die einzigen Angaben, die mir da derzeit auffallen, sind die width- und float-Deklaration für das body-Element, wobei darauf hingewiesen sei, dass es keinen Wert center für die float-Eigenschaft gibt.

In welchem Browser wird denn die Seite richtig dargestellt, und auf welchem PC (OS, Browser) wird sie nach rechts verschoben?

Gibt es evtl. einen Link zur Seite, um dort mal einen Blick drauf werfen zu können?
 
Maik hat gesagt.:
Hi,

die einzigen Angaben, die mir da derzeit auffallen, sind die width- und float-Deklaration für das body-Element, wobei darauf hingewiesen sei, dass es keinen Wert center für die float-Eigenschaft gibt.

In welchem Browser wird denn die Seite richtig dargestellt, und auf welchem PC (OS, Browser) wird sie nach rechts verschoben?

Gibt es evtl. einen Link zur Seite, um dort mal einen Blick drauf werfen zu können?
Zum Vergrößern anklicken....

danke !
Also meiner Ansicht nach liegt es an der Auflösung.....
 
Zuletzt bearbeitet:
Soll das Layout eine fixe Breite von 800px besitzen, oder sich jeweils 200px bis zum linken und rechten Fensterrand erstrecken?
 
Okay, dann wäre dies mein Vorschlag:

Code: 
<!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">
<head>
<title>seite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #FFFFFF;
background-color: #02156c;
}

#wrapper {
width: 800px;
margin: 0 auto;
}

#header {
height: 200px;
background-color: white;
}

#navi {
background-color: #BBC2CD;
color: #ffffff;
padding: 2px 0;
margin-bottom: 2px;
text-align: center;
}

#navi ul {
margin: 0 0 0 20px;
padding: 0;
list-style-type: none;
border-left: 1px solid #FFFFFF;
}

#navi li {
display: inline;
padding: 0 10px;
border-right: 1px solid #FFFFFF;
}

#navi li a {
text-decoration: none;
color: #000000;
}

#navi li a:hover {
text-decoration: none;
color: #fff;
background-color: #FFFFFF;
}

#contents {
height: 357px;
background-color: yellow;
margin: 0 200px !important;
margin: 0 197px;
}

#links {
height: 357px;
background-color: red;
width: 200px;
float:left;
margin-right: 0 !important;
margin-right: -3px;
}

#rechts {
height: 357px;
background-color: green;
width: 200px;
float:right;
margin-left: 0 !important;
margin-left: -3px;
}
</style>

</head>
<body>

<div id="wrapper">
        <div id="header"><img src="http://www.eurogastro.net/EuroGastro1.jpg"></div>
        <div id="navi">
                <ul>
                        <li><a href="http://www.eurogastro.net/index.php">Home</a></li>
                        <li><a href="http://www.eurogastro.net/suchen.php">Suchen</a></li>
                        <li><a href="http://www.eurogastro.net/anmeldung.php">Registrieren</a></li>
                        <li><a href="http://www.eurogastro.net/kontaktformular.php">Kontakt</a></li>
                        <li><a href="http://www.eurogastro.net/impressum.php">Impressum</a></li>
                </ul>
        </div>
        <div id="links"></div>
        <div id="rechts"></div>
        <div id="contents"></div>
</div> <!-- /wrapper -->

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück