nicht angemeldet
Hallo zusammen,
ich bin noch ein Frischling und habe mich an einem mehrspaltigem CSS-basiertem Layout versucht. Dazu habe ich die tollen Erklärungen hier auf der Seite (Mehrspaltige CSS-basierte Layouts) durchgearbeitet und ein eigenes Layout erstellt. Das meiste funktioniert auch ganz gut, allerdings überschreibt der Text des "Inhalts" die Fußzeile, wenn ich eine andere Auflösung wähle. In der Vorlage passiert das nicht und ich finde meinen Fehler nicht. Vielleicht könnt ihr mir helfen?
----------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Home</title>
<style type="text/css">
body {
color: #FF8C00;
background-color: #4c2601;
font-size: 100.01%;
font-family: Papyrus;
margin: 0; padding: 1em;
min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
h1 {
color: #FF8C00;
font-size: 3.5em;
margin: 0 0 0.7em;
padding: 0.3em;
text-align: center;
background-color: #4c2601;
border-bottom-style:solid;
border-bottom-width:0.01em;
border-bottom-color:#FF8C00;
font-weight:bolder;
font-style:italic;
text-shadow:#FAFAD2 2px -1px;
letter-spacing:0.3em;
}
ul#Navigation {
background-color: #FF8C00;
font-size: 1em;
float: left;
width: 15em;
margin: -1em 0 1.2em;
padding: 0;
}
ul#Navigation li {
list-style: none;
margin: 0;
padding: 0.5em;
}
ul#Navigation a {
display:block;
padding: 0.2em;
font-weight: bold;
text-decoration:none;
}
ul#Navigation a:link {
color: #4C2601;
}
ul#Navigation a:visited {
color: #4C2601;
}
ul#Navigation a:hover {
color: #4C2601; background-color: FAFAD2;
}
ul#Navigation a:active {
color: #4C2601; background-color: FAFAD2;
}
div#Info {
color: #FAFAD2;
float: right;
width: 20em;
margin: -1em 0 1.1em 0 ;
padding: 0;
background-color: #ff8c00;
}
div#Inhalt {
margin: -1em 20em 1em 16em;
padding: 0 1em;
width: 38em;
height: 30em;
background-color: #4c2601;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
}
div#Inhalt h2 {
font-size: 1.1em;
font-weight: bold;
color: #FAFAD2;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1.1em;
font-weight: bold;
line-height: 2em;
color: #FAFAD2;
margin: 1em 0;
}
p#Fusszeile {
clear: both;
font-size: 1em;
color: #FAFAD2;
margin: 2em 0 0 0 ;
padding: 0.1em;
text-align: center;
background-color: #4c2601;
border-top-style:solid;
border-top-width:0.01em;
border-top-color:#FF8C00;
letter-spacing:0.1em;
}
</style>
</head>
<body>
<h1>Malik-Thaimassage</h1>
<ul id="Navigation">
<li><a href="index.html">Home</a></li>
<li><a href="klassisch.html">Klassische Thaimassage</a></li>
<li><a href="oel.html">Öl-Massage</a></li>
<li><a href="preise.html">Preise</a></li>
<li><a href="gutschein.html">Bonus/Gutscheine</a></li>
<li><a href="kontakt.html">Termine/Hinweise</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
<div id="Info">
<img src="Lid.png" width="100%" height="70%" vertical-align="middle" padding="5em" alt="Lid" />
</div>
<div id="Inhalt">
<h2>Herzlich Willkommen</h2>
<p> </p>
<p>Ich heiße Lid, komme aus Thailand und lebe seit 1997 in Neuss.</p>
<p> </p>
<p>Ich praktiziere thailändische Massage, die seit über 2.500 Jahren
für ihre wohltuende und entspannende Wirkung bekannt ist.</p>
<p> </p>
<p>Als mobiler Massagedienst komme ich zu Ihnen nach Hause, so dass
für Sie die An- und Abfahrt sowie die Parkplatzsuche entfällt
und Sie die wohltuende Massage entspannt in Ihrem Heim ausklingen
lassen können.</p>
</div>
<p id="Fusszeile">Malik-Thaimassage - Inhaber Theerasak (Lid) Khaekphong - Vereinsstr. 30 - 41472 Neuss - E-Mail: lid@malik-thaimassage.de</p>
</body>
</html>
----------------------------------------------------------------------------
Vielen Dank im voraus
Ivy