Frage stellen
ich befasse mich erst seit einigen Tagen mit der Erstellung von Homepages und mache dazu einen Kurs an der Volkshochschule. Nun habe ich auf meinen Recher angefangen eine HP zu erstellen und habe auf Monitoren mir anderen Auflösungen dieses Problem:
Das ist mein Bildschirm:
Und so siehts auf anderen Auflösungen aus:
Leider konnte mir die Kursleitung des VHS-Kurses hier auch nicht weiter helfen.
Hier noch meine Codes - sorry sie sind schon sehr lang und ich weiß nicht wie man sie hier anders darstellen kann.
Danke in Voraus
Onkel
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Melanie´s Wild River Reitstall</title>
<meta name="description" content="Meine Pferde">
<meta name="keywords" content="Perde">
<meta name="author" content="Norbert">
<meta name="editor" content="html-editor phase 5">
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="Hauptcontainer">
<div id="Kopfbild">
<img src="../Bilder/Kopfbild-neu.png" alt="Kopfbild"/>
</div>
<div id="Navigation">
<ul>
<li><a href="Impressum">» <img src="../Bilder/Navi-Impressum.png" alt="Impressum" border="0" width="121" height="63"></a></li>
<li><a href="Kontakt">» <img src="../Bilder/Navi-Kontakt.png" alt="Kontakt" border="0" width="121" height="63"></a></li>
<li><a href="Fotogalerie">» <img src="../Bilder/Navi-Fotogalerie.png" alt="Fotogalerie" border="0" width="121" height="63"></a></li>
<li><a href="Wissenswertes.html">» <img src="../Bilder/Navi-Wissen.png" alt="Wissenswertes" border="0" width="124" height="63"></a></li>
<li><a href="Meine Pferde.html">» <img src="../Bilder/Navi-Meine-Pferde.png" alt="Meine Pferde" border="0" width="121" height="63"></a></li>
<li><a href="index.html">» <img src="../Bilder/Navi-Über-mich.png" alt="Über mich" border="0" width="121" height="63"></a></li>
</ul>
</div>
<div id="Einzugcontainer">
<div id="Teaserbild">
<img src="../Bilder/Pferdeweide.jpg" alt="Teaserbild"/>
</div>
<div id="Inhalt">
<div id="Inhalt-Haupt">
<h1>Meine Pferde</h1>
</div> <!--raus aus dem Inhalt-Haupt -->
<div id="Inhalt-Neben">
<h3>In meinem Stall</h3>
<img src="../Bilder/Kleinkünkel.jpg" alt="Kleinkünkel"/>
<div id="Inhalt-Neben-zwei">
<ul>
<h3>In meinem Stall</h3>
<li><a href="http://www.galileo-press.de">www.gallileo-press.de</a><li>
<li class="keinlistenelement"lass=() ><a href="http://www.galileodesign.de/katalog/buecher/titel/gp/titelID-2271?GalileoSession=81273534A4-sW1-nV8g"><img src="../Bilder/Navi-Über-mich-eins.png" alt="Test"</a><li>
<li><img src="" alt=""/></li>
</ul>
</div><!--raus aus dem Inhalt Neben-zwei -->
</div>
</div> <!--raus aus dem Inhalt -->
<div id="Copyright">
<p class="link-rechts" ><a href="#">Impressum</a></p>
<p>Copyright © 2010 Norbert Peters</p>
</div> <!--raus aus dem Copyright Container -->
</div> <!--raus aus dem Einzugcontainer Container -->
<div id="Fusszeile">
<img src="../Bilder/Fussbild.png" alt="Fussbild"/>
</div> <!--raus aus dem Fusszeile Container -->
</div> <!--raus aus dem Hauptontainer -->
</body>
</html>
css:
*{
margin:0px:
padding: 0px;
}
body {
font-family: "Trebuchet MS", "Bitstream Vera Sans", "Helvetica", sans-serif
font-size: 10pt;
background-color: #ffdca6;
background-image: url(../Bilder/Blattneu.jpg);
background-repeat: repeat-y;
background-position: center;
}
p {
line-heiht:140%;
text-align: justify;
}
h1,h2,h3,h4,h5,h6 {
color: #f3ffbf;
border-bottom: 1px solid #f3ffbf;
font-family: "Western" sarif;
}
#Kopfbild {
margin: 20px 0px 0px 46px;
}
#Navigation ul li a {
text-decoration: none;
}
#Navigation ul li{
float: right;
padding-right: 8px;
display: inline;
margin: 0px 0px 20px 0px;
}
#Hauptcontainer {
width: 980px;
margin: 0px 0px 0px 387px;
}
#Einzugcontainer {
margin: 0px 0px 0px 127px;
}
#Teaserbild {
margin: 30px 0px 0px 0px;
}
#Inhalt-Haupt {
width: 550px;
float: left;
padding-right: 18px;
margin-bottom: 30px;
}
#Inhalt-Haupt .portrait-foto {
float: left;
margin: 0px 10px 10px 0px;
border: 1px solid #f3ffbf;
}
#Inhalt-Neben {
width: 265px;
float: right;
padding-top: 15px;
margin: 1px 0px 0px 0px;
border-left: 1px solid #f3ffbf;
padding-left: 17px;
}
#Copyright {
clear: both;
border-top: 1px solid #f3ffbf;
padding-top: 10px;
text-decoration: none;
}
#Copyright p.link-rechts {
;
float: right;
}
