Positionsverrückung der Mitte

Simon H. · 21. März 2012

Hi Leute,
ich hab folgendes Problem:
Meine Website hat eine Mitte und links und rechts einen Hintergrund .
Allerdings hab ich das Problem, dass sich diese Mitte etwas verschiebt, wenn ich von einer bestimmten Teilseite auf eine andere wechsel. Woran könnte das liegen ?

unkown-6363 · 21. März 2012

zeich ma bitte deinen code her

Simon H. · 21. März 2012

hier ist der html code von der ersten seite:

HTML

<!DOCTYPE html><html>
<head>    <title>Startseite</title>
    <meta charset="UTF-8"/>    <meta name="description" content=""/>    <meta name="author" content=""/>    <meta name="keywords" content=""/>
    <link href="physik.css" type="text/css" rel="stylesheet"/>
<script>document.createElement ("header");document.createElement ("nav");document.createElement ("section");document.createElement ("footer");</script>




</head>
<body>
<div id="mitte">
<header><p></p></header>
<nav>  <ul>    <li id="list-anfang"><a href="index.htm">Startseit</a></li>    <li><a href="physik.htm">Physik</a></li>    <li><a href="chemie.htm">Chemie</a></li>    <li><a href="mathematik.htm">Mathematik</a></li>    <li id="list-ende"><a href="technik.htm">Technik</a></li>  </ul></nav>
<section>
<h1>Physik</h1>
<p></p>




<img class="bild" src="bilder/physik.jpg" height="200px" width="300px" alt="physikbild" title="physik" />
<div id="auswahl">  <ul>    <div id="listenpunkte">      <li><a href="physik-seiten.htm">Seiten</a></li>      <li><a href="physik-videos.htm">Videos</a></li>    </div>  </ul></div>




</section>
<footer>Copyright-2012-www.ScienceLife.de</footer>
</div>




</body></html>

Alles anzeigen

von der ersten seite der css-code:

CSS

* {    padding: 0;    margin: 0;}




header, nav, section, footer {    display: block;}
body {    font-family: Arial, serif;    background: url(bilder/see.jpg.PNG) ;}
#mitte {    margin: 0px auto;    width: 1000px;}
header {
    background: url(bilder/frisches-gras.jpg.PNG);    height: 150px;    background-position: center;    text-align: center;    margin-top: 3px;    color: white;    border-radius: 9px;    -moz-border-radius: 9px;    -webkit-border-radius:9px;    border: 2px solid #A5A5A5;
}
header p {    font-size: 3em;    margin: 0px auto;    padding: 40px 0px;}




nav {    border: 2px solid #A5A5A5;    background-color: #E1E1E1;    margin: 3px 0px;    padding: 10px;    border-radius: 9px;    -moz-border-radius: 9px;    -webkit-border-radius:9px;}
nav ul {    list-style-type: none;}
nav li {    display: inline;    margin: 10px 35px;    padding: 5px 10px ;
}
nav a {    border:2px solid #A5A5A5;    border-spacing: 50px;    padding: 5px 10px;    background-image: url(bilder/hintergrund-blau.JPG);    text-decoration: none;    color: white;    border-radius: 9px;    -moz-border-radius: 9px;    -webkit-border-radius:9px;
}
nav a:visited {    color: white;}
nav a:focus {    color: ;}
nav a:hover {    background-image: url(bilder/hintergrund-grau.JPG);}




#list-anfang {    margin-left: 85px;}
section {         font-size: 1.1em;         margin: 3px 0px;         border: 2px solid #A5A5A5;         background-color: white;         border-radius: 9px;         -moz-border-radius: 9px;         -webkit-border-radius: 9px;  `}
section h1 {    text-align: center;    padding: 20px;    font-size: 1.7em;}
section p {    padding: 10px 120px;}
.bild {    margin: 20px 350px;    padding: 10px;    border: 1px solid #A5A5A5;    border-radius: 9px;    -moz-border-radius: 9px;    -webkit-border-radius:9px;
}




#auswahl {    padding: 10px;    margin: 10px 70px;    border: 1px solid #A5A5A5;    border-radius: 9px;    -moz-border-radius: 9px;    -webkit-border-radius:9px;




}
section ul {    list-style-type: none;}




section li {    display: inline;    margin: 10px 35px;}
#listenpunkte {   margin: 0px 0px 0px 282px;}







section a {    border: 2px solid silver;    padding: 5px 10px;    background-image: url(bilder/hintergrund-blau.JPG);    text-decoration: none;    color: white;    border-radius: 9px;    -moz-border-radius: 9px;    -webkit-border-radius:9px;




}
section a:visited {    color: white;}
section a:focus {    color: ;}
section a:hover {    background-image: url(bilder/hintergrund-grau.JPG);}







footer {
    text-align: center;    border: 2px solid #A5A5A5;    background-color: white;    margin-bottom: 3px;    border-radius: 9px;    -moz-border-radius: 9px;    -webkit-border-radius:9px;}

Alles anzeigen

von der zweiten seite der html-code:

HTML

<!DOCTYPE html><html>
<head>    <title>Startseite</title>
    <meta charset="UTF-8"/>    <meta name="description" content=""/>    <meta name="author" content=""/>    <meta name="keywords" content=""/>
    <link href="style.css" type="text/css" rel="stylesheet"/>
<script>document.createElement ("header");document.createElement ("nav");document.createElement ("section");document.createElement ("footer");</script>




</head>
<body>
<div id="mitte">
<header><p>/p></header>
<nav>  <ul>    <li id="list-anfang"><a href="index.htm" >Startseit</a></li>    <li><a href="physik.htm" >Physik</a></li>    <li><a href="chemie.htm">Chemie</a></li>    <li><a href="mathematik.htm" >Mathematik</a></li>    <li><a href="technik.htm">Technik</a></li>  </ul></nav>
<section>
<h1></h1>
<p></p><img class="bild" src="bilder/Blätter.jpg" height="200px" width="300px" alt="polarlichter" title="Polarlichter" />
</section>




<footer>Copyright-2012-www.ScienceLife.de</footer>
</div>
</body></html>

Alles anzeigen

von der zweiten seite der css-code:

CSS

* {    padding: 0;    margin: 0;}




header, nav, section, footer {    display: block;}
body {    font-family: Arial, serif;    background: url(bilder/see.jpg.PNG);}
#mitte {    margin: 0px auto;    width: 1000px;}
header {
    background-image: url(bilder/frisches-gras.jpg.PNG);    height: 150px;    background-position: center;    text-align: center;    margin-top: 3px;    border: 2px solid #A5A5A5;    border-radius: 9px;    -moz-border-radius: 9px;    -webkit-border-radius:9px;    color: white;}
header p {    font-size: 3em;    margin: 0px auto;    padding: 40px 0px;}




nav {    border: 2px solid #A5A5A5;    background-color: #E1E1E1;    margin: 3px 0px;    padding: 10px;    border-radius: 9px;    -moz-border-radius: 9px;    -webkit-border-radius:9px;
}
nav ul {    list-style-type: none;}
nav li {    display: inline;    margin: 10px 35px;    padding: 5px 10px ;
}
nav a, nav strong {    border:2px solid #A5A5A5 ;    padding: 5px 10px;    background-image: url(bilder/hintergrund-blau.JPG);    text-decoration: none;    color: white;    border-radius: 9px;    -moz-border-radius: 9px;    -webkit-border-radius:9px;
}
nav a:visited {    color: white;}
nav a:focus {    color: ;}
nav a:hover {    background-image: url(bilder/hintergrund-grau.JPG);}




#list-anfang {    margin-left: 85px;}
section {         font-size: 1.1em;         margin: 3px 0px;         border: 2px solid #A5A5A5;         background-color: white;         border-radius: 9px;         -moz-border-radius: 9px;         -webkit-border-radius:9px;         padding: 10px;
}
section h1 {    text-align: center;    padding: 20px;    font-size: 1.7em;}
section p {    padding: 10px 120px;    margin: 10px;}
.bild {    margin: 20px 350px;    padding: 10px;    border: 1px solid silver;    border-radius: 9px;    -moz-border-radius: 9px;    -webkit-border-radius:9px;
}
section a {    border:2px solid #A5A5A5 ;    padding: 5px 10px;    background-image: url(bilder/hintergrund-blau.JPG);    text-decoration: none;    color: white;    border-radius: 9px;    -moz-border-radius: 9px;    -webkit-border-radius:9px;    margin: 20px 20px 5px 450px;




}
section a:visited {    color: white;}
section a:focus {    color: ;}
section a:hover {    background-image: url(bilder/hintergrund-grau.JPG);}










footer {
    text-align: center;    border: 2px solid #A5A5A5;    background-color: white;    margin-bottom: 3px;    border-radius: 9px;    -moz-border-radius: 9px;    -webkit-border-radius:9px;    padding: 3px;
}
footer p {    margin: 10px;}

Alles anzeigen

wenn ich zwischen den beiden seiten wechsel, verrückt immer die mitte

Positionsverrückung der Mitte

Jetzt mitmachen!

Teilen