Liebe Forengemeinde
Auf folgender Seite habe einmal den Validator benützt: <!-- m --><a class="postlink" href="http://web-technik.org/css_a_5.php">http://web-technik.org/css_a_5.php</a><!-- m -->
Vor kurzem habe ich einen neuen Syntax-Highlighter implentiert und seitdem kommen diese Fehlermeldungen: <!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fweb-technik.org%2Fcss_a_5.php">http://validator.w3.org/check?verbose=1 ... ss_a_5.php</a><!-- m -->
Ich bin gerade ein bisschen ratlos und möchte wissen was der Fehler ist. Hier noch der Code:
PHP
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><?php include "_php/inc.php"; echo "$title"; ?></title>
<meta name="content-language" content="de" />
<link rel="stylesheet" type="text/css" href="_css/core.css" />
<link rel="shortcut icon" type="image/x-icon" href="fav/favicon.ico" />
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<script type="text/javascript" src="scripts/shBrushCss.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>
<body >
<div id="pageWrapper">
<div id="branding">
<div class="branding">
<?php include "_php/inc.php"; echo "$branding"; ?>
</div>
</div>
<div id="topNav">
<div class="topNav">
<?php include "_php/inc.php"; echo "$topNav"; ?>
</div>
</div>
<div id="content">
<div id="mainContent">
<div class="mainContent">
<h2>Footer Stick</h2>
<p>Footer Stick heisst eine Technik bei der die Fusszeile einer Seite bis ans untere Ende des Bildschirmes gelangt, unabhängig davon
wie lang der Inhalt ist. Die Technik wird sehr gerne mit JavaScript angewendet, was aber nicht nötig ist. Mit wenigen Zeilen ist dies auch mit CSS möglich.</p>
<p>Wir fangen mit folgender Grundstruktur an:</p>
<pre class="brush: xhtml;">
<div id="wrapper">
<p>Inhalt #wrapper</p>
<div class="push"><!-- --></div>
</div>
<div id="footer">
<p>#footer</p>
</div></pre>
<p>Dem Container <span class="code">push</span> wird kein Inhalt hinzugefügt. Als erstes setzen wir alle Aussen- und
Innenabstände auf 0. Als nächstes vergeben wir den beiden Elementen <span class="code">html</span> und <span class="code">body</span>
eine 100-prozentige Höhe.</p>
<pre class="brush: css;">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}</pre>
<p>Der <span class="code">wrapper</span>-Bereich wird mit folgenden CSS-Zeilen versehen:</p>
<pre class="brush: css;">
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}</pre>
<p>Nun fehlt lediglich noch das CSS für die beiden letzten Elementen <span class="code">footer</span> und <span class="code">push</span>.
Hier muss man dringend beachten, dass die Höhe des <span class="code">footer</span>-Elements gleich ist wie der negative Wert für das
<span class="code">margin</span> des <span class="code">wrapper</span>-Elements:</p>
<pre class="brush: css;">
#footer, .push {
height: 4em;
}</pre>
<p>Als letztes wird der Inhalt der beiden Elementen noch gecleart:</p>
<pre class="brush: css;">
#footer, .push {
clear: both;
}</pre>
<p>So haben wir eine Footer Stick-Technik die valid ist und zugleich, ausschliesslich mit CSS, in praktisch allen Browsern funktioniert.</p>
<?php include "_php/inc.php"; echo "$top_button"; ?>
</div>
</div>
<div id="secondaryContent">
<div class="secondaryContent">
<!-- no content -->
</div>
</div>
</div>
<div id="mainNav">
<div class="mainNav">
<?php include "_php/inc.php"; echo "$cssNavlay"; ?>
</div>
</div>
<div id="footer">
<div class="footer">
<?php include "_php/inc.php"; echo "$footer"; ?>
</div>
</div>
</div>
</body>
</html>Hoffe mir kann jemand helfen!
