nicht angemeldet
Hallo Engin,
danke, danke, hab' ich gemacht und hat ja auch geklappt. Was ich z.B. nicht verstanden hatte war, dass die Aufzählungssymbole nach links gerutscht werden. Ich interpretiere in diesem Fall die margin-Angabe so, dass mit der margin-Angabe der Rand des eigentlichen Textes gemeint ist ;-).
Übrigens: auf Deinen wohlgemeinten Rat habe ich mich nochmals mit dem Beispiel aus SelfHTML (danke auch für diesen Link, ich kannte das Beispiel schon) beschäftigt und versucht, es meinen Anforderungen anzupassen (man kommt eben ohne absolute Positionierung aus), auch hier macht der IE wieder was er will. Ich habe mich mit box-Modell u.ä. beschäftigt, verstanden habe ich das Verhalten des IE nicht. Obwohl ich margin und padding - wie ich meine - überall gesetzt habe, erscheint doch immer wieder im IE ein zusätzlicher Rand, den ich nicht kapiere. ich hänge die Datei unten an, vielleicht kannst Du mir auch hier auf die Sprünge helfen, irgend etwas habe ich total noch nicht verstanden.
Gruß
Bronimus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dreispaltiges Layout mit Kopf- und Fußzeile</title>
<style type="text/css">
body {
margin:0px;
border:1px solid #000000;
padding:0px;
min-width:41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
background-color:#d3dbe6;
color:#9c0000;
font-family:verdana, arial, helvetica, sans-serif;
font-size:100.01%;
}
div#Info {
width:200px;
margin:0px;
border:1px dashed silver;
padding:0px;
background-color:#eeeeee;
font-size:10pt;
float:right;
}
div#Info h2 {
margin:10px 10px 0px 10px;
font-size:12pt;
}
div#Info p {
margin:0px;
padding:10px;
font-size:10pt;
}
ul#Navigation {
width:200px;
height:500px;
margin:228px 15px 0px 30px;
border:1px solid #000000;
padding:0;
color:#9c0000;
font-style:italic;
font-weight:normal;
font-size:21px;
font-family:"Times New Roman", Times, serif;
text-align:right;
line-height:47px;
float:left;
}
ul#Navigation li {
list-style:none;
}
ul#Navigation a {
color:#9c0000;
font-weight:normal;
text-decoration:none;
}
ul#Navigation a:link {
color:9c0000;
text-decoration:none;
}
ul#Navigation a:visited {
color:#9c0000;
text-decoration:none;
}
ul#Navigation a:hover {
color:black;
}
h1 {
margin:135px 215px 20px 245px;
padding:0px;
border:1px solid #000000;
font-size:30pt;
text-align:center;
}
div#Inhalt {
margin:0px 215px 0px 245px;
border:1px dashed silver;
padding:0px;
}
div#Inhalt h2 {
margin:0px;
padding:0px;
font-size:14pt;
}
div#Inhalt p {
margin:0px;
padding:0px;
font-size:12px;
}
div#inhalt ul {
list-style:disc outside;
}
div#inhalt ul li {
margin-left:20px;
}
p#Fusszeile {
background-color:#9c0000;
margin:0px;
border:1px solid silver;
padding:0px;
color:#d3dbe6;
font-size:10pt;
text-align:center;
clear:both;
}
</style>
</head>
<body>
<div id="Info">
<h2>Info-Box</h2>
<p>Hatten Sie sich im letzten Beispiel gewundert,
warum die Überschrift dieser Box nicht als solche ausgezeichnet war?
Da diese Info-Box im Quelltext vor dem Inhaltsbereich steht
und erst in diesem die Hauptüberschrift notiert war,
wäre hier eine Überschrift zweiten Grades noch nicht sinnvoll gewesen.</p>
<p>Im Quelltext dieses Beispiels ist nun zuerst die Seitenüberschrift notiert,
wodurch auch dieses semantische Problem gelöst ist.</p>
</div>
<ul id="Navigation">
<li><a href="#">Navigator 1 </a></li>
<li><a href="#">Navigator 2 </a></li>
<li><a href="#">Navigator 3 </a></li>
Platzhalter 1 </li>
Platzhalter 2 </li>
<li><a href="#">Navigator 4 </a></li>
<li><a href="#">Navigator 5 </a></li>
<li><a href="#">Navigator 6 </a></li>
</ul>
<h1>CSS-basierte Layouts</h1>
<div id="Inhalt">
<h2>3-spaltiges Layout mit Kopf- und Fußzeile</h2>
<p>Dieses Beispiel ist um eine Kopf- und Fußzeile erweitert.</p>
<p>Die Kopfzeile ist als Seitenüberschrift mit <h1> ausgezeichnet
und kann genauso gut wie ein <div> über CSS formatiert
- hier mit einem Rahmen und einer Hintergrundfarbe versehen - werden.
Auch eine Grafik könnte in <h1> als Hintergrundbild definiert
oder über <img> eingebunden werden.</p>
<p>Betrachten Sie dieses Beispiel nicht als fertige Layout-Vorlage.
Nutzen Sie das HTML-Grundgerüst für die Inhalte Ihrer Seite
und passen Sie das CSS nach Belieben Ihren Vorstellungen an:
experimentieren Sie mit den Größenangaben, Farben und Rändern
und fügen Sie z.B. individuelle grafische Elemente ein.</p>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
</div>
<p id="Fusszeile">Diese Fußzeile stellt über die CSS-Eigenschaft 'clear'
den Elementenfluss wieder her.</p>
<p><a style="color:black" href="../mehrspaltige.htm#kopf_fuss">zurück</a></p>
</body>
</html>