Uff, also da sind einige Probleme drin.
Erstmal zu dem Rahmen um den Table,
deine ID inhalt hat du mit großem I geschrieben, dann muss die css ANweisung #Inhalt table auch mit großem I geschrieben werden. Wenn du das machst, hast du einen Rahmen um die Tabellen.
z.B.
#Inhalt table {
border-bottom: 1px dashed silver;
padding-bottom:2em;
margin-bottom:2em;
}
macht nur eine Linie drunter, mit Abstand in der Tabelle und zum nächsten Element.
Aber Achtung:
Bitte prüfe dein ganzes Dokument noch einmal in Ruhe durch, von wegen Verschachtelungsfehlern und nicht geschlossenen Elementen, ist net so schick.
Du öffnest z.B. einen tag span (Zeile 182) mit <span style="font-size:0.8em"> schließt ihn dann aber nicht, sondern schließt in Zeile 183 einen font tag </font> der nicht existierte. Gleiches gilt dafür ein Tabellenfeld mit td zu öffnen und mit /th zu schließen, passt einfach nicht.
Oder du schließt einen <span> gar nicht, das sollte auch nicht passieren.
Oder der Link "http://www.“ zerschießt dir das Dokument, da du mit dem " als Anführungszeichen beginnst, aber mit “ schließen willst, was aber nicht klappt, da du mit eben demselben " schließen musst, mit dem du es geöffnet hast.
Du hast einen <span> </span> Bereich in dem du einen <p></p> Bereich hast. Das geht leider auch nicht. p ist in span nicht erlaubt.
Falsch also:
<span style="xxx">text bla bla<p>Teil mit span im p</p></span>text bla bla</span>
richtig wäre:
<span style="xxx">text bla bla</span><p><span style="xxx">Teil mit span im p</span></p><span style="xxx">Teil ohne den Span</span>
Dann solltest du versuchen die sich immer wiederholenden gleichen style angaben durch eine class angabe zu ersetzen, glaub mir, es wird übersichtlicher und wesentlich einfach zu warten/ändern.
Also beispielsweise alle <span style="font-size:0.9em"> durch <span class="kleinertext"> ersetzen und dann oben im style Bereich die class dazu definieren: .kleinertext{ font-size:0.9em; }
Und bitte verwechsle nicht div und id miteinander.
div ist ein element, id ist nur der eindeutige Bezeichner eines Elements.
So kann zum Beispiel ein div Tag die id="erstesDiv" (<div id="erstesDiv">xxx</div>)haben, aber auch jedes andere Element, wie z.B. <img id="erstesBild" /> oder ein <p id="ersterAbsatz">skdfhs</p> ABER: jede id darf in dem Dokument nur einmal vergeben sein, sonst wäre es ja keine id mehr
In dem style Bereich im header kannst du id mit dem #hierDieIdDesElements ansprechen, eine Klasse (beliebig oft anwendbar) mit .hierDieKlasseDesElements und ein jedes Element einfach mit element ansprechen.
So passiert in dem Header:
#Inhalt table {
border-bottom: 1px dashed silver;
padding-bottom:2em;
margin-bottom:2em;
}
Spricht also alle elemente vom Typ table innerhalb des Elements mit der id Inhalt an.
Ich weiß, ist ein bisschen verwirrend am Anfang, aber kommt mir der Zeit.
Lass dich nur nicht abschrecken
Guck einfach mal im Netz, da gibt es jede Menge Infomaterial,
http://de.selfhtml.org/ ist ein guter Anfang,
http://www.csszengarden.com/tr/deutsch/ hilft dir weiter, wenn du die Grundlagen mal überschaut hast.
Als Übung: leg dir mal die oben genannte class an und tausche die style Anweisungen gegen die class Anweisung aus.
Hinweis, wenn du die Formatierung auf die Ganze Zelle anwenden willst, brauchst du im td nicht extra noch einen span anzulegen, weise die Klasse auf die td an, also: <td class="xxx">
Viele Grüße und viel Erfolg!
Hier dein Quellcode mit korrigierten Verschachtelungen:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel - Hallo und Willkommen</title>
<style type="text/css">
body {
color: black;
background-color: white;
font-size: 100.01%;
font-family: Courier;
margin: 0;
padding: 1em 0;
text-align: center;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: grey;
}
div#Seite {
text-align:left;
margin: 0 auto;
width: 1000px;
padding: 0.5em;
border: 0px;
}
#Inhalt table {
border-bottom: 1px dashed silver;
padding-bottom:2em;
margin-bottom:2em;
}
h1 {
font-size: 1.5em;
margin: 0 0 0.7em;
padding: 0.2em;
text-align: center;
background-color: white;
border: 0px;
}
ul#Navigation {
font-size: 0.83em;
float: left;
width: 10em;
margin: 0 0 1.2em;
padding: 0;
border: 1px dashed silver;
}
ul#Navigation li {
list-style: none;
margin: 0;
padding: 0.5em;
}
ul#Navigation a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#Navigation a:link {
color: black;
background-color: #eee;
}
ul#Navigation a:visited {
color: #666;
background-color: #eee;
}
ul#Navigation a:hover {
color: black;
background-color: white;
}
ul#Navigation a:active {
color: white;
background-color: gray;
}
ul#Navigation a {
text-decoration: none;
}
div#Info {
font-size: 0.9em;
float: right;
width: 12em;
margin: 0 0 1.1em;
padding: 0;
background-color: #eee;
border: 1px dashed silver;
}
div#Info h2 {
font-size: 1.33em;
margin: 0.4em 0.7em;
}
div#Info p {
font-size: 10pt;
margin: 1em;
}
div#Inhalt {
font-size: 1em;
font-family: Courier;
margin: 0 12em 1em 9.5em;
padding: 0 0.5em;
border: 1px dashed silver;
}
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
p#Fusszeile {
clear: both;
font-size: 10px;
font-family: Courier;
margin: 0;
padding: 0.1em;
text-align: center;
background-color: #dashed silver;
border: 0px;
}
</style>
</head>
<body>
<div id="Seite">
<h1><img src="/grafiken/header.gif"></h1>
<ul id="Navigation">
<li><a href="/home.html">Startseite</a></li>
<li><a href="/profil.html">Profil</a></li>
<li><a href="/titel.html">Titel</a></li>
<li><a href="/links.html">Links</a></li>
<li><a href="/impressum.html">Kontakt</a></li>
</ul>
<div id="Info">
<h2>Meldungen</h2>
<p><span style="font-size:0.9em">Nachricht 1.</span></p>
<p><span style="font-size:0.9em">Nachricht 2</span></p>
</div>
<div id="Inhalt">
<TABLE>
<TR>
<TD></TD>
<TD><span style="font-size:1em"><br>
<b>Überschrift 1</b></span><br>
<span style="font-size:1.4em"><b>Überschrift 2</b><br>
</span> </TD>
<TD><span style="font-size:0.8em"><b>Hinweis:</b><br>
Bemerkung</span></TD>
</TR>
<TR>
<TD><IMG SRC="/grafiken/bild06.jpg" width="165" height="165"></TD>
<TD><span style="font-size:0.8em">Inhaltstext </span></TD>
<TD><span style="font-size:0.8em"><b>Verlinkungsbereich 1:</b><br>
<a href="http://www.">Link 1</a><br>
<a href="http://www.">Link 2</a><br>
</span></TD>
</TR>
<TR>
<TD><span style="font-size:0.8em">Hinweis:<br>
<b>Name</b><br>
</span>
<p><span style="font-size:0.8em">Bemerkung<br>
Land Jahr<br>
Laufzeit: 000 Min.</span></p></TD>
<TD><span style="font-size:0.8em">Inhaltstext 2a</i> <b>Quelle</b></span>
<p><span style="font-size:0.8em"><i>Inhaltstext 2b</i> <b>Quelle</b></span></p></TD>
<TD><span style="font-size:0.8em"><b>Verlinkungsbereich 2:</b><br>
<a href="http://www.">Link 3</a><br>
</span></TD>
</TR>
</TABLE>
<TABLE BORDER="0">
<TR>
<TD></TD>
<TD><span style="font-size:1em"><br>
<b>Überschrift 1</b></span><br>
<span style="font-size:1.4em"><b>Überschrift 2</b><br>
</span> </TD>
<TD><span style="font-size:0.8em"><b>Hinweis:</b><br>
Bemerkung</span></TD>
</TR>
<TR>
<TD><IMG SRC="bilder/bild04.jpg" width="165" height="165"></TD>
<TD><span style="font-size:0.8em">Inhaltstext </span></TD>
<TD><span style="font-size:0.8em"><b>Verlinkungsbereich 1:</b><br>
</span> <a href="http://www.">Link 1</a><br>
<a href="http://www.">Link 2</a><br>
</TD>
</TR>
<TR>
<TD><span style="font-size:0.8em">Hinweis:<br>
<b>Name</b><br>
</span>
<p><span style="font-size:0.8em">Bemerkung<br>
Land Jahr<br>
Laufzeit: 000 Min.</span></p></TD>
<TD><span style="font-size:0.8em">Inhaltstext 2a</i> <b>Quelle</b></span>
<p><span style="font-size:0.8em"><i>Inhaltstext 2b</i> <b>Quelle</b></span></p></TD>
<TD><span style="font-size:0.8em"><b>Verlinkungsbereich 2:</b><br>
<a href="http://www.">Link 3</a><br>
</span></TD>
</TR>
</TABLE>
</div>
<div>
<p id="Fusszeile"><a href="/impressum.html">Impressum</a></p>
</div>
</div>
</body>
</html>
