nicht angemeldet
hallo
ich habe mir eine seite programmiert die ich zentriert ausgerichtet habe. dazu habe ich ich einen mittelpunkt gesetzt und alle anderen divs hineingelegt. das problem ist jetzt nur dass ich, wenn ich die seite z. b. im explorer öffne und den explorer verkleinere schiebt sich ein teil nach rechts ins nirvana so dass ich den teil nicht mehr nutzen kann. habt ihr vielleicht einen lösungsvorschlag?
hier der Quelltext zum rauskopieren und selber testen:
"und das ist nur eine probeseite zum ausprobieren: also keine kritik an dem layout usw."
danke im voraus
allen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Testseite, Schwarz Computersysteme</title>
<style>
body
{
background-color: white;
font-family: courier new;
font-size: 0.9em;
color: black;
}
a
{
text-decoration: none;
color: yellow;
}
a:hover
{
text-decoration: none;
color: orange;
}
#mitte
{
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
}
#kasten
{
position: absolute;
top: -180px;
height: 360px;
left: -350px;
width: 700px;
background: #0080FF;
}
#navi1
{
position: absolute;
top: -10px;
height: 15px;
left: -350px;
width: 700px;
}
#navi2
{
position: absolute;
top: 5px;
height: 15px;
left: -350px;
width: 700px;
}
.navi1
{
background: navy;
color: yellow;
}
.navi2
{
background: #0080C0;
color: yellow;
}
.n1
{
color: yellow;
padding: 4px 0px 4px 30px;
}
.n2
{
color: yellow;
padding: 4px 0px 4px 20px;
}
.n3
{
color: yellow;
padding: 4px 0px 4px 40px;
}
.n4
{
color: yellow;
padding: 4px 0px 4px 20px;
}
#banner
{
position: absolute;
top: -180px;
height: 170px;
left: -350px;
width: 700px;
}
</style>
</head>
<body>
<div id="mitte">
<div id="kasten">
</div>
<div id="navi1" class="navi1">
<a href="Home.html" class="n1" title="Homepage - Acceskey a" acceskey="a" tabindex="1">Home</a> <a href="Home.html" class="n2" title="Kontakt - Accesskey b" accesskey="b" tabindex="2">Kontakt</a> <a title="Impressum - Acceskey c" href="Impressum.html" class="n2" accesskey="c" tabindex="3">Impressum</a> <a href="Forum.html" class="n2" title="Forum - Accesskey d" accesskey="d" tabindex="4">Forum</a>
</div>
<div id="navi2" class="navi2">
<a href="News.html" class="n3" title="News - Accesskey z" accesskey="z" tabindex="6">News</a> <a href="Suche.html" class="n4" title="Suche - Accesskey y" accesskey="y" tabindex="7">Suche</a> <a href="ueberuns.html" class="n4" title="über uns - Accesskey - x" accesskey="x" tabindex="8">Über uns</a>
</div>
<div id="banner">
<img src="banner.jpg" height="170" alt="Ein Schneebedeckter Ast einer Winterlandschaft">
</div>
</div>
</body>
</html>