nicht angemeldet
Layoutproblem bei IE11 mit fixed header
Gunnar Bittersmann
Matthias Apsel
Matthias Scharwies
TabellenkalkWerte 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>
-
Hallo Detlef,
auf codePen habe ich ein simples Beispiel eingestellt, welches auch der IE 11 akzeptiert.
gr qx
-
Hallo quincunx,
eine interessante Variante, die ich genauer analysieren muss, da sie einige mir nicht vertraute Elemente enthält. Ein erster Test entspricht meinen Erwartungen. Soweit meinen Dank für die Bemühungen.
Mit freundlichem Gruß Detlef
Hallo Detlef,
auf codePen habe ich ein simples Beispiel eingestellt, welches auch der IE 11 akzeptiert.
gr qx
-
@@quincunx
auf codePen habe ich ein simples Beispiel eingestellt, welches auch der IE 11 akzeptiert.
Die Vergabe einer fixen Höhe für den Header ist eher nicht akzeptabel, da man nicht wissen kann, ob dessen Inhalt da wirklich reinpasst.
Solange
position: stickynicht browserübergreifend implementiert ist, hilft wohl nur JavaScript.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Solange
position: stickynicht browserübergreifend implementiert ist, hilft wohl nur JavaScript.oder welche position:sticky noch nicht implementiert haben scrollt der header eben weg.
-
-
-
Hallo Detlef Mietke,
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
Was meinst du genau? Unter edge im IE11-Modus kann ich zum aktuellen Firefox keine Unterschiede feststellen.
Den Quelltext meiner Testseite füge ich bei (Verlinkungen und Suchfunktion sind nicht aktiviert).
Besser wäre ein Link zu deiner Testseite.
Ich habe trotz vieler Versuche keine Lösung für den aktuellen IE-Browser gefunden.
D.h. auch im edge funktioniert es nicht wie gewünscht?
Es kann doch nicht angehen auf der Startseite von der Nutzung des IE abzuraten.
In der Tat.
<meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />eine charset-Angabe (die erste) reicht.
<link rel="icon" href="bilder/favicon.ico" type="image/vnd.microsoft.icon" />Die type-Angabe sieht irgendwie komisch aus.
<!-- <link rel="stylesheet" type="text/css" href="layout.css" title="Webprojekt" /> -->Diese type-Angabe ist nicht notwendig
<style type="text/css"> <!--Diese auch nicht, ebenso wie das Auskommentieren der css-Deklarationen.
margin: 0px auto;Eine Angabe von 0 benötigt keine Einheit.
<hr />Der schließende Slash ist nicht erforderlich. Das hr-Element ist hier falsch. (http://wiki.selfhtml.org/wiki/Hr) Der thematische Bruch ist durch main bzw. aside ausreichend dokumentiert.
<li>© 2002 - 2015 Detlef Mietke</li>schreib ©. Sei dir aber bewusst, dass es ein copyright in dem Sinne nicht gibt
<input type="text" name="schlagwort" value="" size="30" /> <input type="submit" name="senden" value="suchen" />Die slashes sind nicht notwendig. type=text ist der default-Wert für input. Ein leeres value-Attribut sollte auch nicht notwendig sein. Verwende ein button-Element. http://blog.selfhtml.org/2015/02/09/input-oder-button-fuer-submit-elemente/
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Hallo Matthias Apsel,
Wenn die SelfHtml-Tutoriumsseite (Seitenlink / Adresse) im IE11 geöffnet wird, werden einzelne Bereiche falsch positioniert und überlappend dargestellt. Die anderen genannten Browser führen das Layout korrekt aus. Habe die Darstellung als montierten Screenshot:
'edge' was das denn? Ich schaue mir meine Versuche immer im entsprechenden Browser direkt an, da Dreamweaver und/oder HtmlPad 2015 teilweise eingene 'Vorstellungen' haben.Die Doppelnennung bei charset="utf-8" ist mir bewußt, war bislang nur zur Sicherheit gedacht.
Die type-Angabe zum Favicon ist im Validator als gültig und wurde bislang auch immer korrekt ausgeführt. Derzeit ignoriert der IE11 das Favicon.
Die redundante type-Angabe bei stylesheet ist mir auch bekannt, ein Relikt aus meine bestehenden Webprojekt nach XHTML 1 strict (doch danke auch für diesen Hinweis)
Stimmt, bei Wertangabe 0 ist die Maßangabe unnötig, würde aber auch nicht stören. Die <hr> ist aus dem XHTML 1 strict übernommen, daher mit /> abgeschlossen. Auch die übrigen Slashes stammen aus dem XHTML 1 Code. Stimmt, ein 'echtes' Copyright gibt es natürlich nicht, nur ein Hinweis, es ist 'meins' und für alle da. Wer nett ist, gibt die Quelle an.
Sofern erst mal meinen Dank, nur haben Deine Vorschläge auf meine bemerktes Layoutproblem keinen Einfluss.
Mit freundlichem Gruß Detlef
Hallo Detlef Mietke,
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
Was meinst du genau? Unter edge im IE11-Modus kann ich zum aktuellen Firefox keine Unterschiede feststellen.
Den Quelltext meiner Testseite füge ich bei (Verlinkungen und Suchfunktion sind nicht aktiviert).
Besser wäre ein Link zu deiner Testseite.
Ich habe trotz vieler Versuche keine Lösung für den aktuellen IE-Browser gefunden.
D.h. auch im edge funktioniert es nicht wie gewünscht?
Es kann doch nicht angehen auf der Startseite von der Nutzung des IE abzuraten.
In der Tat.
<meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />eine charset-Angabe (die erste) reicht.
<link rel="icon" href="bilder/favicon.ico" type="image/vnd.microsoft.icon" />Die type-Angabe sieht irgendwie komisch aus.
<!-- <link rel="stylesheet" type="text/css" href="layout.css" title="Webprojekt" /> -->Diese type-Angabe ist nicht notwendig
<style type="text/css"> <!--Diese auch nicht, ebenso wie das Auskommentieren der css-Deklarationen.
margin: 0px auto;Eine Angabe von 0 benötigt keine Einheit.
<hr />Der schließende Slash ist nicht erforderlich. Das hr-Element ist hier falsch. (http://wiki.selfhtml.org/wiki/Hr) Der thematische Bruch ist durch main bzw. aside ausreichend dokumentiert.
<li>© 2002 - 2015 Detlef Mietke</li>schreib ©. Sei dir aber bewusst, dass es ein copyright in dem Sinne nicht gibt
<input type="text" name="schlagwort" value="" size="30" /> <input type="submit" name="senden" value="suchen" />Die slashes sind nicht notwendig. type=text ist der default-Wert für input. Ein leeres value-Attribut sollte auch nicht notwendig sein. Verwende ein button-Element. http://blog.selfhtml.org/2015/02/09/input-oder-button-fuer-submit-elemente/
Bis demnächst
MatthiasSignaturen sind bloed (Steel) und Markdown ist mächtig.
-
Hallo Detlef Mietke,
bitte vermeide Vollzitate, zitiere nur das, worauf du dich konkret beziehst. Vollzitate stören nur den Lesefluss.
Wenn die SelfHtml-Tutoriumsseite (Seitenlink / Adresse) im IE11 geöffnet wird, werden einzelne Bereiche falsch positioniert und überlappend dargestellt. Die anderen genannten Browser führen das Layout korrekt aus. Habe die Darstellung als montierten Screenshot:
Danke. Es besteht also Handlungsbedarf. Mal schauen, woran das liegen könnte. @Matthias Scharwies - vielleicht könntest du mal schauen.
'edge' was das denn?
Der Nachfolger des Internetexplorers. Dessen Einführung mit großem Tamtam ist an mir aber auch vorbei gegangen.
Sofern erst mal meinen Dank, nur haben Deine Vorschläge auf meine bemerktes Layoutproblem keinen Einfluss.
Das war mir bewusst. In diesem Forum gibt es aber auch immer™ Tipps und Hinweise, die mit dem eigentlichen Problem nichts zu tun haben, weil
- der Thread für alle ist, die ähnliche Probleme haben
- du sie befolgen kannst oder eben auch nicht
Das ist für mich der Mehrwert dieses Forums, auch wenn ich selbst manches Mal genervt von unerwünschten Hinweisen war, die sich aber im Endeffekt meist als hilfreich und wertvoll herausgestellt haben.
Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Hallo Matthias Apsel,
den Hinweis mit 'Vollzitaten' habe ich nicht verstanden, aber vielleicht muss ich den Rest im Editorfenster nur löschen. Der IE-Nachfolger gehört scheinbar nicht zur Betriebssystemausstattung am heimischen PC. Deine anderen Hinweise finde ich richtig und habe sie nicht als Kritik empfunden. Die Umgestaltung meines Webprojekts ist noch reine Baustelle, daher sind auch keine Dateien auf einem Server abrufbereit.
Der Vorschlag von quincunx zum Layout ist sehr vielversprechend, auch nach Erweiterung mit meinen Inhalten werden sie in den 4 genannten Browsern gleichartig dargestellt.
Mit Dank und freundlichen Grüßen Detlef
-
Servus!
Danke. Es besteht also Handlungsbedarf. Mal schauen, woran das liegen könnte. @Matthias Scharwies - vielleicht könntest du mal schauen.
Vielen Dank für die Rückmeldung!
Im genannten Beispiel fehlt:
main { display: block; }Dies benötigt der Internet Explorer, da er das main-Element ja auch in neuen Versionen noch nicht kennt. Das Beispiel habe ich korrigiert.
Matthias Scharwies
-
-
@@Matthias Apsel
<meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />eine charset-Angabe (die erste) reicht.
Es kann nur eine geben. [HTML5]
<li>© 2002 - 2015 Detlef Mietke</li>schreib ©.
Vor allem: Schreib
2002–2015(Halbgeviertstrich, laut Duden ohne Leerzeichen drumrum, laut DIN 5008 mit).Oder
2002–2015. In dem Falle ist das Escapen aber gar nicht so dumm, weil man in für Code meist verwendeten dicktengleichen Schriften (monospace)–U+2013 EN DASH kaum vom Strichjungen-U+002D HYPHEN-MINUS unterscheiden kann.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo Gunnar Bittersmann,
danke, den redundanten meta charset habe ich entfernt. Der Tipp mit dem Halbgeviertstrich erscheint mit umgebenden Leerzeichen übersichtlicher und wird auch vom Duden-Korrekturprogramm nicht beanstandet.
Die feste Höhenangabe im header-Vorschlag von quincunx verhindert bei kleinerer Viewportbreite einen Zeilenumbruch in der Titelzeile. Das gibt Probleme, wenn ich nach meinen Vorstellungen unter dem Titel eine Horizontalnavigation vorsehe. Ohne Höhenangabe erfolgt ein Zeilenumbruch.
Noch eine Frage, ist es besser mit @charset "UTF-8" in der CSS-Datei oder mit dem entsprechendem <meta - Tag> im HTML- head zu arbeiten?
mit freundlichem Gruß Detlef
-
@@Detlef Mietke
Noch eine Frage, ist es besser mit @charset "UTF-8" in der CSS-Datei oder mit dem entsprechendem <meta - Tag> im HTML- head zu arbeiten?
„Sie sollten immer UTF-8 als Zeichencodierung für Ihre Stylesheets und HTML-Seiten verwenden und diese Zeichencodierung in HTML angeben. Wenn Sie das tun, ist es nicht notwendig, die Zeichencodierung des Stylesheets anzugeben.“ [qa-css-charset]
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
Hallo,
Oder
2002–2015.Sprache html? Wie jetzt? Ich geh davon aus, dass die Sprache Deutsch sein soll. Und im Deutschen steht der Strich (welchen auch immer man verwendet) für das Wort "bis". 2002bis2015 ist definitiv falsch.
Gruß
Kalk
-
-