Ich schon wieder......
Ich bastle an einer HP rum, hab mir einige Fragmente zusammengestellt.
In der Datei ist HTML und Css zusammen (für die Übungsseite reichte es erstmal).
Aber da es mit Webocton so Klasse zu arbeiten ist, wollte ich nun die beiden Dateien gleich trennen.
Es klappte auch soweit ganz gut, aber die Hintergrundfarbe in der neuen Datei geht nur bis zum ende der Schrift, nicht so, wie in der ursprünglichen Datei, über den ganzen Bildschirm.
Achtet jetzt nicht auf die Logos usw, das paßt alles noch nicht, auch nicht die Farben.
Hier die komplette Datei:
<html>
<head>
<title>Konstruktionen, Formenbau,Werkzeugbau</title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
ul#Navigation {
font-size: 0.83em;
float: left; width: 18em;
margin: 0; 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;
}
div#Info {
font-size: 0.9em;
float: right; width: 12em;
margin: 0; padding: 0;
border: 1px dashed silver; background-color: #eee;
}
div#Info strong {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#Info p {
font-size: 1em;
margin: 0.5em;
}
div#Inhalt {
margin: 0 12em 0 16em;
padding: 0 1em;
border: 1px silver;
}
div#Inhalt h1 {
font-size: 1.5em;
margin: 0 0 0.5em;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
</style>
</head>
<body style="background-color: rgb(128, 128, 128);">
<div style="text-align: center;"><img
src="file:///C:/HP-Harald/Logo.jpg"><br>
</div>
<br>
<br>
<br>
<ul id="Navigation">
<li><a href="Home.htm">Home</a></li>
<li><a href="Beispiele.htm">Beispiele</a></li>
<li><a href="Kontakt.htm">Kontakt</a></li>
<li><a href="Impressum.htm">Impressum</a></li>
<img style="width: 206px; height: 231px;" alt="c"
src="file:///C:/HP-Harald/Logo2.jpg"> <br>
</ul>
<div id="Info"> <strong>Info-Box</strong>
<p>Weitere Infos</p>
<br>
<br>
<br>
<br>
<br>
<br>
<img style="width: 206px; height: 231px;" alt="c"
src="file:///C:/HP-Harald/Logo2.jpg"> <br>
</div>
<div id="Inhalt">
<h1>Konstruktionsbüro Röhle</h1>
<h2>Ihr Partner für Formen- und Werkzeugbau</h2>
</div>
</body>
</html>
Hier die getrennten:
<head>
<title>Konstruktionen, Formenbau,Werkzeugbau</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="generator" content="Webocton - Scriptly (<!-- w --><a class="postlink" href="http://www.scriptly.de">http://www.scriptly.de</a><!-- w -->)" />
<link href="Muster1.css" type="text/css" rel="stylesheet" />
</head>
<body>
<body style="background-color: rgb(128, 128, 128);">
<div style="text-align: center;"><img
src="file:///C:/HP-Harald/Logo.jpg"><br>
</div>
<ul id="Navigation">
<li><a href="Home.htm">Home</a></li>
<li><a href="Beispiele.htm">Beispiele</a></li>
<li><a href="Kontakt.htm">Kontakt</a></li>
<li><a href="Impressum.htm">Impressum</a></li>
<img style="width: 206px; height: 231px;" alt="c"
src="file:///C:/HP-Harald/Logo2.jpg"> <br>
</ul>
<div id="Info"> <strong>Info-Box</strong>
<p>Weitere Infos</p>
<img style="width: 206px; height: 231px;" alt="c"
src="file:///C:/HP-Harald/Logo2.jpg"> <br>
</div>
<div id="Inhalt">
<h1>Konstruktionsbüro Röhle</h1>
<h2>Ihr Partner für Formen- und Werkzeugbau</h2>
</div>
</body>
</html>
html, body
{
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
ul#Navigation {
font-size: 0.83em;
float: left; width: 18em;
margin: 0; 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;
}
div#Info {
font-size: 0.9em;
float: right; width: 12em;
margin: 0; padding: 0;
border: 1px dashed silver; background-color: #eee;
}
div#Info strong {
font-size: 1.33em;
margin: 0.2em 0.5em;
}
div#Info p {
font-size: 1em;
margin: 0.5em;
}
div#Inhalt {
margin: 0 12em 0 16em;
padding: 0 1em;
border: 1px silver;
}
div#Inhalt h1 {
font-size: 1.5em;
margin: 0 0 0.5em;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0.2em 0;
}
div#Inhalt p {
font-size: 1em;
margin: 1em 0;
