nicht angemeldet
Hello
Ich habe mich gefragt, ob mein Code valid genug ist, um ihn als Template zu verwenden für alle weiteren Seiten meiner Website.
Habt ihr Verbesserungsvorschläge für mich oder seht ihr Fehler oder Optimierungen?
Würde mich freuen.
Gruss
Ikon
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Fixierte Navigation nur für moderne Browser</title>
<!--[if lt IE 7]><style type="text/css">
@media screen {
html, body {
height: 100%; overflow-y: hidden;
}
#Scrollbereich {
height: 100%; width: 100%; overflow: auto;
}
#Inhalt {
position: static;
}
}
</style><![endif]-->
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body class="body">
<img src="images/Header2.png" top="500px" width="90%" align="center">
<div id="Scrollbereich"> <!-- erst fuer den folgenden Workaround benoetigt -->
<div id="Inhalt1">
<h2>1</h2>
<p>In diesem Beispiel ist die linke Navigation zunächst absolut positioniert
und wird anschließend über eine Browserweiche nur für moderne Browser fixiert.
Hierdurch kommt es in älteren Browsern zu keinen Fehldarstellungen und auch
diese setzen die erst am Ende des Quelltextes notierte Navigation nach oben.</p>
<p>Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird,
wenn die Höhe des Browserfensters sehr stark verringert
und/oder die Schriftgröße heraufgesetzt wird!</p>
<p id="Fusszeile">Sie haben tatsächlich bis hierhin gescrollt? ;-)</p>
</div>
</div>
<div id="Inhalt2">
<h2>2</h2>
<p>Für dieses Beispiel ist das "mehrspaltige Layout mit Kopf-
und Fußzeile" der vorherigen Seite etwas modifiziert worden.
Es passt sich der Fenster- und Schriftgröße an und sogar
das SELFHTML-Logo 'wächst' durch die Höhenangabe in <strong>em</strong>
mit einer Schriftvergrößerung.</p>
<p>Beachten Sie, dass der fixierte Bereich teilweise unzugänglich wird,
wenn die Höhe des Browserfensters sehr stark verringert
und/oder die Schriftgröße heraufgesetzt wird!</p>
<p id="Fusszeile2">Sie haben tatsächlich bis hierhin gescrollt? ;-)</p>
</div>
</div>
<div id="fixiert"> <!-- verhindert auch Anzeigefehler einer fixierten ul -->
<ul id="Navigation">
<li><a href="#">Home</a></li>
<li><a href="concept.html">Concept</a></li>
<li><a href="artists.html">Artists</a></li>
<li><a href="categories.html">Categories</a></li>
<li><a href="support.html">Support us</a></li>
</ul>
</div>
</body>
</html>
Externe CSS-Datei:
.body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: white;
min-width: 60em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
background-image: url(../images/bg.jpg);
background-repeat: repeat;
}
html {
padding: 0;
}
body {
margin: 0; padding: 0;
}
#fixiert {
background-image: url(../images/nav_bg.png);
background-repeat: repeat-x;
position: absolute;
top: 0em; left: 0em; width: 100.01%; height:10%;
}
html>body #fixiert { /* nur fuer moderne Browser! */
position: fixed;
}
#fixiert img {
height: 22.8em;
}
#Inhalt1 {
float: left;
background-color: white;
margin-left: 1%;
width: 45.1%;
padding: 0 1em;
border-top-width: thin;border-right-width: thin;border-bottom-width: thin;border-left-width: thin;
}
#Inhalt1 h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 1px solid silver;
}
#Inhalt1 p {
font-size: 1em;
margin: 1em 0;
}
#Inhalt1 #Fusszeile {
font-size: 0.9em;
padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}
#Inhalt2 {
float: right;
background-color: white;
margin-left: 1%;
width: 45.1%;
padding: 0 1em;
border-top-width: thin;border-right-width: thin;border-bottom-width: thin;border-left-width: thin;
}
#Inhalt2 h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 1px solid silver;
}
#Inhalt2 p {
font-size: 1em;
margin: 1em 0;
}
#Inhalt2 #Fusszeile2 {
font-size: 0.9em;
padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}
h1 {
padding: 0.1em;
font-size: 1.5em;
margin-top: 3em;
text-align: center;
background-color: #fed;
border: 2px ridge gray;
width: 99%;
color: #c60000;
text-decoration: none;
}
h2 {
color: #8a0000;
font-size: 1.2em;
}
#Navigation {
margin: 0; padding: 1.0em;
font-size: 0.83em;
text-align: center;
}
#Navigation li {
list-style: none;
margin: 0; padding: 0em;
display: inline;
}
ul#Navigation a {
display: block;
padding: 0em;
font-weight: bold;
float: left; width: 6em;
}
ul#Navigation a:link {
color: white;
}
ul#Navigation a:visited {
color: gray;
}
ul#Navigation a:hover {
color: #6c6c6c; background-color: red;
}
ul#Navigation a:active {
color: white; background-color: gray;
}
ul#Navigation div {
clear: left;
}
suit
Gunnar Bittersmann