nicht angemeldet
Hallo
Ich bin gerade dabei, den Umgang
mit CSS-Layouts zu erlernen.
Dabei bin ich nun auf eine Sache gestossen,
die ich nicht verstehe.
Schaut mal auf folgenden Link: http://www.spaceart.de/_WC3_Test-2.shtml
Da ist das Bild <img> im Vergleich zum darüber liegeneden
Absazu <p> etwas nach rechts eingerückt.
Leider verstehe ich überhaupt nicht, warum.
Wenn mir jemand von Euch den entscheideneden Tipp geben könnte,
wo ich da den Fehler versteckt habe, würde ich mich sehr freuen.
Unten habe ich mal den Quelltext und die CSS gepostet.
Gruß
Ingo
HTML
-------------------------------------------------------------------
<!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" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="css-screen.css" />
<title>SPACEart</title>
</head>
<ul id="Navigation">
<li><a href="XXX">Neuheiten</a></li>
<li><a href="XXX">SciFi + Fantasy Modelle</a></li>
<li><a href="XXX">Action + Horror Modelle</a></li>
<li><a href="XXX">Manga + Anime Modelle</a></li>
<li><a href="XXX">Erotische Modelle</a></li>
<li><a href="XXX">Zubehör</a></li>
<li><a href="XXX">Fantasy + Film Schwerter</a></li>
<li><a href="XXX">Historische Schwerter</a></li>
<li><a href="XXX">Samurai Schwerter</a></li>
<li><a href="XXX">Warenkorb</a></li>
<li><a href="XXX">AGB + Info</a></li>
<li><a href="XXX">Impressum</a></li>
<li><a href="XXX">F.A.Q.</a></li>
</ul>
<div id="Inhalt">
<p>Es handelt sich um den Original Modell-Bausatz der Firma mpc/ERTL aus dem Jahr 1989. Die vorderen Beine und das Kontroll-Modul ("Kopf") sind beweglich. Die Base und der Snow Speeder sind nicht enthalten. -- ACHTUNG: wir haben nur ein einziges Exemplar !</p>
<img src="Artikel/2001007-b.jpg" alt="XXXXX" />
</div>
</body>
</html>]
-------------------------------------------------------------------
CSS
-------------------------------------------------------------------
body {
background-color: #235f70;
font: 100.1% Helvetica, Arial, sans-serif;
color: #ffffff;
}
h2, h3, p {
background-color: #004559;
padding: 0.3em;
border: 1px solid #ffffff;
margin: 0 0 10px;
}
h2,h3 {
font-weight: bold;
color: #fff000;
}
img {
border: 1px solid #ffffff;
margin: 0 0 10px;
display: block;
}
a:link, a:visited {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
a:hover, a:active, a:focus {
color: #fff000;
}
ul#Navigation {
font-size: 0.90em;
width: 13.5em;
float: left;
margin: 0; padding: 0.2em;
border: 1px solid #ffffff;
background-color: #004559;
text-align: right;
}
ul#Navigation li {
list-style: none;
margin: 0; padding: 0.2em;
}
div#Inhalt {
margin-left: 13.5em;
}
-------------------------------------------------------------------
Der Martin
MudGuard