nicht angemeldet
line height - IE bei responsive Layout
0 0
line height - IE bei responsive Layout
Gunnar BittersmannIch habe ein horizontales Menü (row) in einem responsiven Layout. Bei der Darstellung im Smartphone-Modus werden die Menüpunkte gestapelt (column). Bei Firefox, Chrome, etc. ist der Zeilenabstand in Ordnung, aber beim IE 11 rutschen die Menüzeilen komplett übereinander. Berichtige ich dies durch z.B. einen größeren Außenabstand oder größere Zeilenhöhe schaut es bei den anderen Browsern schlimm aus, weil zu große Abstände. Wer weiß Rat?
-
Hallo
Wer weiß Rat?
Niemand. Ohne Link zu deiner Seite können wir nur raten.
Gruss
MrMurphy
-
Hallo
Wer weiß Rat? Niemand. Ohne Link zu deiner Seite können wir nur raten. Gruss MrMurphy
Dem kann ich gerne abhelfen: Linkbeschreibung
-
@@Orhaniye
Dem kann ich gerne abhelfen: Linkbeschreibung
Das Problem kann ich nachvollziehen, hab aber noch keine Lösung.
Aber:
<block1>? Was soll das denn?Custom elements müssen einen
-enthalten,<x-block1>oder<block-1>wären möglich. Aber wozu? Ich sehe keinen Mehrwert, dafür gibt es bereits ein HTML-Element:div.Und zwei
aside-Elemente als Inhalt? Gibt es auf der Seite keinen Hauptinhalt? Möchte eins davon<main role="main">sein? Außerdem haben Klassenbezeichner"links"und"rechts"im Markup nichts zu suchen; besonders nicht, wenn sie übereinander dargestellt werden.Vielleicht möchtest du auch erst den Hauptinhalt im Markup haben?
Und am Ende nicht vergessen, die Sprache anzugeben.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Das Problem kann ich nachvollziehen, hab aber noch keine Lösung.
Danke, dass du mir helfen willst, meine schnell geschusterte Seite konform zu gestalten, aber ...
-
@@Orhaniye
Danke, dass du mir helfen willst, meine schnell geschusterte Seite konform zu gestalten, aber ...
Nichts aber. Dein Markup geht so sehr in die richtige Richtung, dass ich es schade fände, wenn du doch noch irgendwo falsch abbiegst. ;-)
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
-
@@Orhaniye
Dem kann ich gerne abhelfen: Linkbeschreibung
Ich jetzt möglicherweise auch: In meinem nachgestellten Beispiel hat
nav li { flex: 1 0 0% }geholfen. Gefunden bei Philip WaltonLLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein. -
Hallo,
ich habe mal ein Beispiel mit aktuellem HTML / CSS und unter Beachtung der Best Practices erstellt:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt --> <title>Flexbox Layout02</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> @media all { /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-size: 120%; line-height: 1.3; } body { max-width: 50rem; padding: 0; margin: 1rem auto; } body>* { background-color: #F1F3F4; padding: 0.5rem; margin: 0.5rem; } a { text-decoration: none; color: blue; background-color: #FFFBF0; } nav { display: flex; flex-wrap: wrap; } nav>* { text-align: center; padding: 0.3rem; margin: 0.5rem; flex: 1 0 51%; } main { display: flex; flex-wrap: wrap; } main>* { background-color: #EBF5D7; padding: 0.3rem 1rem; margin: 0.5rem; flex: 1 0 51%; } } @media only screen and (min-width: 580px) { nav { justify-content: space-around; flex-wrap: nowrap; } nav>*, main>* { flex: 1 0 1%; } } /* Vorlage zum Kopieren für Media-Query */ @media only screen and (max-width: 0px) { } </style> </head> <body> <header> <nav> <a href="#link.html">Link 1</a> <a href="#link.html">Link 2</a> <a href="#link.html">Link 3</a> <a href="#link.html">Link 4</a> <a href="#link.html">Link 5</a> </nav> </header> <main> <aside> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p> </aside> <aside> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p> </aside> </main> <footer> <nav> <a href="#link_2.html">Kontakt</a> <a href="#link_2.html">Links</a> <a href="#link_2.html">Sitemap</a> <a href="#link_2.html">Impressum</a> <a href="#link_2.html">AGB</a> </nav> </footer> </body> </html>Die Abstände, Hintergrundfarben u.s.w. können natürlich noch angepasst werden.
Gruss
MrMurphy
-
Vielen Dank. So wie es aussieht funktionieren beide Optionen. Spezieller Dank an MrMurphy für die sehr ausführliche Dokumentation. Jetzt muss ich nur noch alles verinnerlichen und korrekt umsetzen. Mit herzlichem Gruß
-
@@MrMurphy1
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>Vielleicht nicht die beste Idee.
html { font-size: 120%;Warum das denn?
100%oder1emsollte passen. Also gar keine Angabe nötig.line-height: 1.3;Das könnte für Fließtext etwas wenig sein.
body { max-width: 50rem;Die Maximalbreite für Fließtext sollte sich auf die Schriftgröße beziehen. Und zwar nicht irgendeines Elements, sondern des betreffenden. Also Angabe in
em, nichtrem.body>* {Bloß gut, dass Selektor-Performanz kein Ding ist. ;-)
@media only screen and (min-width: 580px) {Media-Queries in
pxsind nun auch nichts, was unter „Best practices“ stehen sollte.<main> <aside>Dass
asideinmainziemlich sinnfrei ist, hatte ich ja schon erwähnt.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Danke Gunnar, auch deine Vorschläge werde ich verinnerlichen :-)
-
-
-
-