Guten Abend
Ich habe HTML und CSS mit dem Seminar gelernt und eine Web-Seite nur mit dem Webocton scriptly geschrieben. Eigentlich bin ich recht zufrieden, aber wenn ich die Seite auf verschiedenen Bildschirmgrössen teste, verschiebt und verszerrt sich die Steuerleiste, die ich mit Hilfe einer Tabelle erstellt habe, total. Dies, obwohl ich alle Angaben in % gemacht habe. Ich weiss einfach nicht mehr, was ich ändern soll. Auch den Rand zieht es nicht ganz heraus.
Die Seite ist www.meggiana11.it . der Code sieht so aus:
<!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" xml:lang="de" lang="de">
<head>
<title>Italien, Meggiana 11, Familie Thalmann,</title>
<meta http-equiv="content-type" content="text/html; charset=us-ascii" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
<link href="styles/style_index.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="steuerung">
<table border="2em" width="100%" summary="Steuerelement" cellpadding="10%" style="background-color: rgb(163, 9, 9);"
>
<tr>
<td class="weite">Startseite</td>
<td class="weite"><a href="lageplan.html">Lageplan</a></td>
<td class="weite"><a href="grundriss.html">Grundriss Haus</a></td>
<td class="weite"><a href="fotos.html">Photos</a></td>
<td class="weite"><a href="ziele.html">Ziele in der Umgebung</a></td>
<td class="weite"><a href="termine.html">Termine</a></td>
<td class="weite"><a href="kontakt.html">Kontakt</a></td>
</tr>
</table>
</div>
<div id="inhalt">
<img src="images/IMG_0522.jpg" border="0" alt="Haus" width="100%" /> <br /> <br /> <br /> <br />
<h1>Willkommen in Meggiana!</h1>
</div>
</body>
</html>
und das ausgelagerte Css-Element:
body {
background-color:#E3AEE3;
margin-left:3%;
width:92%;
}
#steuerung {
background-color:#A30909;
height:10%;
margin-top:2%;
padding:1%;
width:auto
}
.weite {
background-color:#A30909;
border-color:#A30909;
color:#E1E1E1;
font:Verdana serif;
font-size:x-large;
font-variant:small-caps;
margin:20% 5% 20% 10%;
text-align:center;
width:15%
}
p {
color:#000;
font:verdana serif;
margin:0 5% 1% 3%;
text-align:center
}
h1 {
color:#600;
font:bolder;
font-size:300%;
left:25%;
position:absolute;
text-align:center;
top:50%
}
a:link {
color:#F8E7EE
}
a:visited {
color:#ACB5F1
}
a:focus {
color:green
}
a:hover {
color:#FFF
}
a:active {
color:orange
}
#inhalt {
margin:5% 0% 20% 0%;
position:absolute;
text-align:center;
height: 100%;
width: 92%;
}
Was mache ich falsch????