nicht angemeldet
Werte Mitglieder,
Ich will mein existierendes Webprojekt elektroniktutor.de das derzeit mit festen Layoutbereichen (div's) erstellt ist auf HTML5 umbauen. Es sollte zumindest einen fixierten Header haben, damit eine Teilnavigation des aktuellen Bereichs und eine Schlagwortsuche (derzeit im footer) beim Scrollen des Seieninhalts dauerhaft erreichbar bleibt.
Eine erstellte Testseite funktioniert (für mich zufriedenstellend) in den aktuellen Browsern Firefox, Opera und Chrome aber nicht im IE11. Der fixierte Headerbereich fällt heraus. Wende ich die im SelfHtml-Tutorium gegebenen Vorschläge für festen Header und Footer an, würde mich die farbliche Hinterlegung über den gesamten Viewport stören. Auch werden andere CSS-Formatierungen im IE11 falsch interpretiert. Das gilt sogar für den im Tutorium erstellten Vorschlag: http://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS-fixer-footer-2.html
Den Quelltext meiner Testseite füge ich bei (Verlinkungen und Suchfunktion sind nicht aktiviert). Ich habe trotz vieler Versuche keine Lösung für den aktuellen IE-Browser gefunden. Es kann doch nicht angehen auf der Startseite von der Nutzung des IE abzuraten. Ich hoffe in diesem Forum Hilfe zu erhalten.
Mit freundlichem Gruß Detlef Mietke
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="icon" href="bilder/favicon.ico" type="image/vnd.microsoft.icon" />
<!-- <link rel="stylesheet" type="text/css" href="layout.css" title="Webprojekt" /> -->
<title>Testseite für Layoutdarstellung</title>
<style type="text/css">
<!--
body {
/* padding: 8em 0 3em; oben, r+l, unten */
background-image: url(bilder/niceblue.gif);
background-attachment: fixed;
border-left: 3px double #CCCCCC;
border-right: 3px double #CCCCCC;
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 0.875em;
}
body, .wrapper {
margin: 0px auto;
max-width: 60em;
}
main, article, section, aside {
margin: 0.5em;
}
header {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
/* margin: 0 auto; */
text-align: center;
background-color: #B97850 ; /* dunkelkupfer */
border-bottom: 1px solid #d5d5d5;
}
header img {
width: 100px;
height: 85px;
margin: 0px 5px 0px; /* oben, l+r, unten */
float: left;
}
header h1 {
color: #FFFFFF;
font-weight: normal;
font-size: 2em;
text-decoration: underline;
margin-left: 1.25em; /* 20 px */
padding-bottom: 0.5em;
}
nav {
font-size: 0.9375em; /* 15 px */
float: left;
width: 14em;
background-color: #E89E83 ; /* hellkupfer */
border: 1px solid #B97850;
border-radius: 0.5em;
}
nav ul {
list-style: none;
padding: 0.5em;
}
nav li, .aktiviert {
display: block;
padding: 6px;
color: black;
font-weight: bold;
border: 1px solid #808080;
border-radius: 10px;
box-shadow: 0 5px 10px white inset;
background-color: #C0C0C0;
}
nav a {
display: block;
text-decoration: none;
font-weight: normal;
color: #0000FF;
}
nav a:focus, nav a:hover {
font-weight: bold;
color: #ffffff;
background-color: #0066FF ;
}
main {
border: 1px solid #CCCCCC;
border-radius: 0.5em;
margin-left: 14em;
margin-top: 110px;
}
main h1 {
background-color: #A0D8EC; /* lightblue */
color: #000000;
font-size: 1.6em;
font-weight: normal;
line-height: 1.2em;
text-align: center;
}
main h2 {
font-size: 0.9em;
line-height: 1em;
}
section {
background-color: #D3D3D3;
font-size: 1.2em;
font-weight: normal;
line-height: 1.3em;
}
article {
background-color: #ADD8E6;
}
aside {
background-color: #FFFF00;
}
footer {
clear: both;
bottom: 0;
left: 0;
right: 0;
background-color:#B97850;
}
footer ul {
margin: 3px 0px 0px 0px;
font-weight: bold;
color: #FFFFFF;
}
footer li {
display: inline;
margin-left: 10px;
margin-right: 5px;
}
footer a {
color: #0066FF;
font-weight: bold;
text-decoration: none;
}
footer a:focus, footer a:hover {
color: #FFFFFF;
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<header class="wrapper">
<img src="" alt="Logo-GIF 100x85 px" />
<h1>Informations- und Kommunikationstechnik</h1>
</header>
<nav>
<ul>
<li class="aktiviert">Startmenü - Inhalte</li>
<li><a href="#">Text 1</a></li>
<li><a href="#">Text 2</a></li>
<li><a href="#">Text 3</a></li>
<li><a href="#">Text 4</a></li>
<li><a href="#">Text 5</a></li>
<li><a href="#">Text 6</a></li>
<li><a href="#">Text 7</a></li>
<li><a href="#">Text 8</a></li>
<li><a href="#">Text 9</a></li>
<li><a href="#">Text 10</a></li>
<li><a href="#">Text 11</a></li>
<li><a href="#">Text 12</a></li>
<li><a href="#">Text 13</a></li>
<li><a href="#">Text 14</a></li>
<li><a href="#">Text 15</a></li>
</ul>
</nav>
<main role="main">
<section>
<h1>Einleitender Titel</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae cum dixisset paulumque institisset, Quid est? Quae similitudo in genere etiam humano apparet. Heri, inquam, ludis commissis ex urbe profectus veni ad vesperum. Quae quidem sapientes sequuntur duce natura tamquam videntes; Sed venio ad inconstantiae crimen, ne saepius dicas me aberrare;
</p>
</section>
<article class="wechsel" id="infobereich">
<h2>Neue Fachartikel ...</h2>
<ul>
<li><a href="#">Link a</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><a href="#">Link b</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><a href="#">Link c</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li><a href="#">Link d</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
<p>
Hier ist dann Platz für weitere Links mit Kurzinhaltsangabe in der Listendarstellung
</p>
</article>
<hr />
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si longus, levis dictata sunt. Ut pulsi recurrant? At certe gravius. Nunc vides, quid faciat. Quorum sine causa fieri nihil putandum est.Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Tum, Quintus et Pomponius cum idem se velle dixissent, Piso exorsus est.
</p>
</aside>
</main>
<footer>
<form class="search" action="sucherg.html" method="get" id="suchen" onsubmit="return Pruefen();" >
<ul>
<li>© 2002 - 2015 Detlef Mietke</li>
<li>
<input type="text" name="schlagwort" value="" size="30" />
<input type="submit" name="senden" value="suchen" />
</li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</form>
</footer>
</body>
</html>
Gunnar Bittersmann
Matthias Apsel
Matthias Scharwies
Tabellenkalk