Dirk: Mehrspaltigey Layout: CSS-Befehle nicht in der html-Seite

Beitrag lesen

Hallo,

also daß das solche Debatten auslöst... So ein Problem ist das doch nun nicht wirklich, den Link mittels C+P zu übernehmen und in einem neuen Fenster einzusetzen. Hm.

Zurück: Der Quellcode ist erstmal nur ganz einfach aus der Seite von selfhtml (vgl. Link oben) übernommen. Es geht erstmal nur um das grundsätzliche, daß nämlich die Vorgabe anscheinend nicht in eine separate css-Datei eingestellt werden können, sondern immer in der jeweiligen html-Datei erstellt sein müssen.
Ich möchte aber die Vorgaben (unten) in die css-Datei übernehmen, damit ich nur einmal in der css-Datei ggf. was ändern muß und eben nicht die gesamten Datei durchsehen und in diesen es ändern muß.

Gruß
Dirk

PS: nachmehrmaligem Neuladen der Seite ist mein vorheriger Beitrag nicht erschienen. Ich hoffe, man reißt hier keinem den Kopf ab, wenn mal sowas passiert.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Testseite mit drei Spalten</title>
<style type="text/css">
body {color: black; background-color: white; font-size: 100.01%; font-family: Tahoma, Helvetica,Arial,sans-serif; margin: 0; padding: 12pt; }

h1 { font-size: 12pt; font-weight: bold; margin: 0 0 0.7em; padding: 2pt; text-align: center; background-color: #aeaeae; border: 1pt solid black; }
  html>body h1 { border-color: gray;  /* Farbangleichung an den Internet Explorer  */ }

ul#Navigation { font-size: 10pt; float: left; width: 150pt; margin: 0 0 1.2em; padding: 0; border: 1px solid silver; }
ul#Navigation li { list-style: none; margin: 0; padding: 3pt; }
ul#Navigation a { display: block; padding: 0.2em; font-weight: bold; }
ul#Navigation a:link {color: black; background-color: #bebebe; }
ul#Navigation a:visited { color: #666; background-color: #eee; }
ul#Navigation a:hover { color: black; background-color: #afafaf; }

div#Info { font-size: 10pt; float: right; text-align: justify; width: 135pt; margin: 0 0 5pt; padding: 0;  background-color: #dfdfdf; border: 1px solid black; }
div#Info h2 { font-size: 12pt; margin: 3pt 5pt; }
div#Info p { font-size: 10pt; margin: 3pt; }

div#Inhalt { margin: 0 145pt 5pt 160pt; padding: 0 5pt; border: 1px solid silver; }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */ }
div#Inhalt h2 { font-size: 11pt; margin: 5pt 0; }
div#Inhalt p { font-size: 11pt; margin: 5pt 0; }

p#FZ { clear: both; font-size: 10pt; margin: 0; padding: 0 5pt 1pt 1pt; text-align: right; background-color: #cfcfcf; border: 1px solid black; }
</style>
</head>
<link rel="stylesheet" href="test.css" type="text/css">

<body>

<h1>Test</h1>

<ul id="Navigation">
    <li><a href="hinweis.htm">Testseite 1</a></li>
    <li><a href="hinweis.htm">Testseite 2</a></li>
    <li><a href="hinweis.htm">Testseite 3</a></li>
    <li><a href="hinweis.htm">Testseite 4</a></li>
    <li><a href="hinweis.htm">Testseite 5</a></li>

</ul>

<div id="Info">
    <h2>Info-Box</h2>
    <p>Hier steht ein Testtext. Dabei soll &uuml;berlegt werden, ob es wirklich dreispaltig sein soll.</p>
    <p>Hier geht es weiter.</p>
  </div>

<div id="Inhalt">
    <h2>Testseiteninhalt</h2>
    <p>Es steht ein kleiner Text.</p>
    <p>Hier geht es weiter.
    <br>Und hier auch.</p>
  </div>

<p id="FZ">Hier steht dann irgend etwas.</p>

</body>
</html>