Guten Tag zusammen
Ich möchte meine Website mittig machen, dies habe ich nun mit Margin links und rechts auto gemacht.
Sobald ich jedoch so viel schreibe, dass ein Scrollbalken benötigt wird, verschiebt sich die Seite ganz wenig nach links, wie kann ich machen, dass dies nicht passiert?
css:
#container {
background-color: white;
width: 800px;
margin-top:0px;
margin-bottom:100px;
margin-left: 50%-400px;
position:static;
}
#header {
width: 550px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
}
#navigation{
color: white;
font-size: 20px;
}
#navigation table{
width: 800px;
background-color: #054B63;
border-color: black;
border-style: solid;
}
#navigation a{
text-decoration: none;
color: white;
}
#navigation a:hover{
color: #708090;
text-decoration: underline;
}
#center{
text-align: center;
}
#me{
float:right;
}html seite (zensiert)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>beispieltext</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<img width="550px" height="200px" src="./images/header.jpg" alt="Hier wäre das Bild vom Header" />
</div>
<div id="navigation">
<table>
<col width="355px" />
<col width="400px" />
<tr>
<td>
<a href="index.html"> adaf </a>
</td>
<td>
<a href="cv.html">erasdf</a>
</td>
<td>
<a href="contact.html"> test test </a>
</td>
</tr>
</table>
</div>
<h2>blabla</h2>
<div id="me">
<img width="192px" height="288px" src="./images/me.jpg" alt="Hier wäre ein Bild von mir" />
</div>
<table width="500px">
<col width="200px" />
<col width="300px" />
<tr>
<td>
asdf
</td>
<td>
asdf
</td>
</tr>
<tr>
<td>
adf </td>
<td>
asdf
</td>
</tr>
<tr>
<td>
asdfer
</td>
<td>
asdf ewf
</td>
</tr>
<tr>
<td>
adsffeww
<br />
</td>
<td>
asdf
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
asdf
</td>
<td>
dfawe
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
asdfea
</td>
<td>
naedsfaew
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
asdfae
<br />
<br />
<br />
<br />
<br />
</td>
<td>
asdfaeaf<br />
asdfae <br />
waerasdf<br />
aerafsd <br />
asdfea <br />
</td>
</tr>
<tr>
<td>
<p> asdfe </p>
</td>
</tr>
<tr>
<td>
asdfawef
</td>
<td>
asdfawe
</td>
</tr>
<tr>
<td>
asdfew
</td>
<td>
Gasdfasefch
</td>
</tr>
<tr>
<td>
asdfewatgg
</td>
<td>
adsgfeasdav ad afdae fa
</td>
</tr>
</table>
<br />
<h2> asdgas df</h2>
<p>asdf asdf </p>
Beispieltext, möchte Seite nicht online stellen und nicht öffentlich machen<br />
Beispieltext, möchte Seite nicht online stellen und nicht öffentlich machen.Beispieltext, möchte Seite nicht online stellen und nicht öffentlich machen<br />
Beispieltext, möchte Seite nicht online stellen und nicht öffentlich machenBeispieltext, möchte Seite nicht online stellen und nicht öffentlich machen.<br />
Beispieltext, möchte Seite nicht online stellen und nicht öffentlich machen.<br />
<br />
<p>asdfaew</p>
Beispieltext, möchte Seite nicht online stellen und nicht öffentlich machen blablablabla <br />
blablablablablablablabla blablablabla blablablabla blablablablablablablablablablablablablablablabla<br />
blablablablablablablablablablabla blablablablabla<br />
-blablablabla blablablabla blablablabla blablablabla r<br />
-blablablabla vblablablabla blablablabla blablablabla blablablabla blablablabla<br />
<br />
blablablabla blablablabla blablablabla blablablabla blablablabla blablablabla blablablabla <br />
blablablablablablablabla blablablabla blablablabla blablablabla blablablabla blablablablablablablablablablablablablablablablablablablablablablablablablablablabla blablablabla blablablabla blablablabla blablablabla blablablabla<br />
blablablabla blablablablablablablablablablablablablablablablablablablabla blablablabla blablablabla blablablabla blablablabla blablablabla blablablabla blablablabla blablablabla.<br />
blablablabla blablablabla blablablablablablablablablablablablablablablablablablablabla blablablabla .<br />
blablablabla blablablabla blablablabla blablablablablablablablablablablablablablablablablablablablablablablabla blablablabla blablablabla<br />
</div>
</body>
</html>ähm, gar nicht, soweit ich weiss.
Gib html einen height-Wert von 101%, siehe http://www.ohne-css.gehts-gar.net/0052.php.
Dann ist der Scrollbalken permanent vorhanden und die Seite verschiebt sich nicht mehr.
genau so habe ich es nun gemacht 
Ich verwende dafür
html { overflow-y: scroll; }Das Problem betrifft ohnehin nur einige Browser die nicht von Microsoft stammen. Daher kann man das ruhig so schreiben statt height zu missbrauchen.