Valid?
0 0 0 
Beat
0 
suit
0 
Gunnar Bittersmann
0 Beat
Valid?
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;
}
-
Hello
Ich habe mich gefragt, ob mein Code valid genug ist, um ihn als Template zu verwenden für alle weiteren Seiten meiner Website.
Und wieso befragst du dann nicht den Validator, der extra dafür gedacht ist?
-
Und wieso befragst du dann nicht den Validator, der extra dafür gedacht ist?
:( Stimmt, war ne blöde Idee... Dann benutz ich einfach diesen Code und schreibe alles neu, wenn ich mich besser auskenne mit Div usw...
-
Ich habe mich gefragt, ob mein Code valid genug ist, um ihn als Template zu verwenden für alle weiteren Seiten meiner Website.
Und wieso befragst du dann nicht den Validator, der extra dafür gedacht ist?
Selbst Befragung eine Validators sagt im Erfolgsfall nichts weiter schlüssiges aus über den Sinn eines Templates. Es ist ganz einfach die erste Stufe, an welcher man nicht stehen bleiben sollte.
Ist ein Template valid im Sinne der Zugänglichkeit?
Ist es _gesund_ bezüglich der Schriftgrössen/Farben etc...
Wird es von stark verbreiteten Browser hinreichend unterstützt.mfg Beat
-
-
Ich habe mich gefragt, ob mein Code valid genug ist, [...]
deine antwort hast du ja schon bekommen, aber weils so schön passt: Zitat #5
-
@@Ikon the verbal hologram:
Ich habe mich gefragt, ob mein Code valid genug ist,
?? „Valid genug“? Es gibt nur entweder valid oder nicht valid, aber nicht ein bisschen valid.
<link href="css/style.css" rel="stylesheet" type="text/css" />
▲
Das ist nicht valid.Und warum ist das Extra-Stylesheet für IE < 7 nicht auch ausgelagert?
Live long and prosper,
Gunnar--
Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort. -
Ich habe mich gefragt, ob mein Code valid genug ist, um ihn als Template zu verwenden für alle weiteren Seiten meiner Website.
Wie in der Antwort an Mega geschrieben. Der Validator wird nicht komplett nach Norm validieren.
Die Frage ist: Ist dein Template gesund...Habt ihr Verbesserungsvorschläge für mich oder seht ihr Fehler oder Optimierungen?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Schon mal eine gute Entscheidung
<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" />Warum < /> nachdem du klar machst, dass dein Code nicht ein XHTML-HTML-Mischmasch-der-Browser-macht-es-schon sein soll?
</head>
<body class="body"><img src="images/Header2.png" top="500px" width="90%" align="center">
Warum ein deprecated HTML align Attribut? Was ist top="500px", was ist ... ...???
<div id="Scrollbereich"> <!-- erst fuer den folgenden Workaround benoetigt -->
<div id="Inhalt1">
Das ist so ziemlich eine Blöde ID bezeichnung. Welche Art Inhalt gehört hier hinein?
<h2>1</h2>
Du verwendest hier ein <h2> Element, ohne dass ein <h1> vorkam.
<p id="Fusszeile">Sie haben tatsächlich bis hierhin gescrollt? ;-)</p>
</div>
</div><div id="Inhalt2">
Nonsens zum Zweiten
<h2>2</h2>
<p id="Fusszeile2">Sie haben tatsächlich bis hierhin gescrollt? ;-)</p>
</div>
</div><div id="fixiert"> <!-- verhindert auch Anzeigefehler einer fixierten ul -->
wieder eine Blöde bezeichnung. NavigationWrapper wäre wohl angesagt.
<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>Blöde Frage: Welches ist die aktuelle Seite?
Du willst nicht etwas die aktuelle Seite verlinken?</body>
</html>> > Externe CSS-Datei: > [code lang=css] > .body { > font: normal 100.01% Helvetica, Arial, sans-serif; > color: black; background-color: white; > min-width: 60em; /\* Mindestbreite verhindert Anzeigefehler in modernen Browsern \*/ und wie wäre es mit max-width? Mit min-width:60em zeigst du, dass du keine komprommisse gegenüber den Viewport Grössen deiner Gäste eingehst. > #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; > } In einem fixierten Bereich allen Images zu sagen, sie sollen 22.8em hoch sein, ist auch Nonsense. etc... mfg Beat -- Woran ich arbeite: [X-Torah](http://www.elcappuccino.ch/cgi/tok.pl?extern=1-pub-com3306-1) <°)))o>< ><o(((°>o-
Warum < /> nachdem du klar machst, dass dein Code nicht ein XHTML-HTML-Mischmasch-der-Browser-macht-es-schon sein soll?
Wäre mit dem Validator zu beheben gewesen.
Warum ein deprecated HTML align Attribut? Was ist top="500px", was ist ... ...???
Hätte der Validator auch bemängelt.
Auch wenn der Validator sicher nicht die einzige Wahl zum Prüfen eines Templates ist, ist er doch die erste Anlaufstelle. Und dass ist mit diesem Template nicht passiert.
Somit ist deine Aussage erst in zweiter Linie sinnvoll, wenn die Validation erfolgreich war.
-