nicht angemeldet
Mein erster Versuch mit Breakpoints
2 0 0 Zusatzfrage
0 Eine Interessante Beobachtung
0 nth-child (3n)
0 0 0 
Auge
0 Noch ein Problem
0
Mein erster Versuch mit Breakpoints
Gunnar BittersmannSchaut euch diesen Code mal bitte an, ein Online Beispiel gibt es hier http://jsfiddle.net/Kp5LQ/1/
Ist mein Ansatz richtig oder mache ich jetzt schon etwas falsch?
Mein HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vorlage</title>
<link href="media/design/css/screen.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container cf">
<div class="kopf"><h1>Kopfbereich</h1></div>
<div class="navigation">
<ul>
<li><a href="#">Über uns</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<div class="inhalt">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p><img src="http://placehold.it/525x350" alt="Demo Grafik"></p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</body>
</html>
Mein CSS Code:
* {
mox-box-sizing: border-box;
webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
body {
margin: 0;
padding: 0;
background-color: #43373F;
color: #634C5C;
line-height: 1.3;
font-family: sans-serif;
font-size: 1em;
}
img {
max-width: 100%;
height: auto;
}
.container {
background: #efefef;
width: 95%;
margin: 0 auto;
max-width: 980px;
}
.kopf {
background-color: #48d1cc;
color: #fff;
padding: 1.875em;
}
.kopf h1 {
font-weight: normal;
text-align: center;
}
.navigation {
width: 37.5%;
float: left;
padding: 3.125%;
}
.inhalt {
background-color: #fff;
float: left;
width: 62.5%;
padding: 3.125%
}
a:link, a:visited {
color: ce6634;
text-decoration: none;
}
@media screen and (max-width: 400px) {
.container {
width: 100%;
}
.inhalt {
text-align: justify;
padding: 5.5%
}
.navigation, .inhalt {
float: none;
width: auto;
}
.navigation ul {
padding-left: 0;
}
.navigation li {
display: inline-block;
list-style-type: none;
padding: 0 3%;
}
}
Frage zwei, wie müsste ich meinen Breakpoint anpassen, dass ich von „max-width: 400px“ auf max-width: xxxem“ komme? Muss ich hier auch von 16px ausgehen? Dann wäre dieses „max-width: 25em“
Berechnung: (400/16)
Frage drei, in meinem CSS Code stehen derzeit noch % Werte, müssten diese ebenfalls auf „em“ umgeschrieben werden, oder können diese auf % bleiben?
Wenn ich dieses soweit richtig verstanden habe, dann verstehe ich so langsam wo der Weg hin geht. Man passt sich das ganze NICHT auf eine starre Größe an wie z.B. 320px sondern schaut, ab welchem Zeitpunkt der Content nicht mehr gut aussieht, richtig?
Bevor jetzt einige sagen, warum verwendest du kein <nav> <footer> usw. das kommt noch, ich will es erstmal richtig verstehen bevor ich mich an die anderen Sachen wage.
-
Meine Herren!
Du hast aktuell 11 offene Threads, die mal mehr mal weniger zu diesem Thema passen… Just saying.
--
“All right, then, I'll go to hell.” – Huck Finn-
Du hast aktuell 11 offene Threads, die mal mehr mal weniger zu diesem Thema passen… Just saying.
Deine Aussage ist schlicht weg gelogen. Zeig mir bitte alle 11 Threads die von MIR sind und wo ICH ein fertiges Beispiel zeige, wie ich es verstanden habe.
-
Meine Herren!
Du hast aktuell 11 offene Threads, die mal mehr mal weniger zu diesem Thema passen… Just saying.
Deine Aussage ist schlicht weg gelogen. Zeig mir bitte alle 11 Threads die von MIR sind
http://forum.de.selfhtml.org/my/?t=217599&m=1495165
http://forum.de.selfhtml.org/my/?t=217588&m=1495050
http://forum.de.selfhtml.org/my/?t=217567&m=1494869
http://forum.de.selfhtml.org/my/?t=217552&m=1494694
http://forum.de.selfhtml.org/my/?t=217502&m=1494186
http://forum.de.selfhtml.org/my/?t=217481&m=1494040
http://forum.de.selfhtml.org/my/?t=217461&m=1493838
http://forum.de.selfhtml.org/my/?t=217444&m=1493721
http://forum.de.selfhtml.org/my/?t=217437&m=1493663
http://forum.de.selfhtml.org/my/?t=217432&m=1493596
http://forum.de.selfhtml.org/my/?t=217410&m=1493364und wo ICH ein fertiges Beispiel zeige, wie ich es verstanden habe.
Und weil genau diese Suche über die verstreuten Threads mich nervt, hab ich keine Lust hier zu helfen.
--
“All right, then, I'll go to hell.” – Huck Finn-
Und weil genau diese Suche über die verstreuten Threads mich nervt, hab ich keine Lust hier zu helfen.
Keiner zwingt dich hier zu helfen! Diese Anmerkung hättest du dir auch sparen können. Eher kommt es rüber wie du einfach etwas schreiben willst aber 0 Ahnung von dem hast, was ich gefragt habe.
-
Meine Herren!
Keiner zwingt dich hier zu helfen! Diese Anmerkung hättest du dir auch sparen können.
Bleib ma' locker. Ich bin eigentlich gerne hilfsbereit und habe auch dir schon einige Male geholfen und das werde ich auch in Zukunft, weil ich kein nachtragender Mensch bin. Diesmal möchte ich dir nicht helfen, und ich habe dir erklärt warum. Ich denke das ist fair. Weitere Gründe findest du auch in der Charta.
Eher kommt es rüber wie du einfach etwas schreiben willst aber 0 Ahnung von dem hast, was ich gefragt habe.
Responsive Design ist nicht unbedingt mein Fachgebiet, das kann man schon daran ausmachen, wie häufig ich hier im Forum auf dieses Thema eingehe. Daraus mache ich kein Geheimnis, meine Stärken liegen in anderen Bereichen. 0 Ahnung trifft aber auch nicht ganz zu.
--
“All right, then, I'll go to hell.” – Huck Finn
-
-
Du hast aktuell 11 offene Threads, die mal mehr mal weniger zu diesem Thema passen… Just saying.
F430
http://forum.de.selfhtml.org/my/?t=217437&m=1493663
Was hat eine eMail zu versendenmit meinem Breakpoints zu tun? NICHTS!http://forum.de.selfhtml.org/?t=217599&m=1495165
In diesem habe ich meine Frage zum ersten mal gestellthttp://forum.de.selfhtml.org/?t=217588&m=1495050
Da gebe ich dir recht, könnte man zusammen fassen, ist aber nicht genau das gleiche wie in meinem aktuellen Beitraghttp://forum.de.selfhtml.org/?t=217567&m=1494869
WAS HAT DAS BITTE MIT Breakpoints zu tun?http://forum.de.selfhtml.org/?t=217552&m=1494694
Hier geht es wohl um PHP und wie man Felder prüft aber NICHT um CSShttp://forum.de.selfhtml.org/?t=217502&m=1494186
Hier geht es wohl im Meta angaben aber NICHT um CSShttp://forum.de.selfhtml.org/?t=217461&m=1493838
Hier geht es darum, wie man Daten aus einer MySQL Datenbank liest, es hat NICHTS mit CSS zu tunhttp://forum.de.selfhtml.org/?t=217437&m=1493663
Hier habe ich gefragt ich eine Class nehmen soll oder die PHP FunktionSO und jetzt nochmals die Frage, wo geht es in diesen von dir genannten Einträge 11 mal um das gleiche Thema? Kann es sein, dass du einfach einen schlechten Tag hast? Für was ist sonst ein Forum da, wenn man nicht fragen darf?
-
-
-
-
Ich hab mein Code etwas verändert
<div class="kopf"> <div id="logo">Hier kommt das Logo rein</div> <div id="topNav"> <ul> <li>Favoriten</li> <li>Anmelden</li> <li>Kontakt</li> <li>Melden</li> </ul> </div> </div> <div class="headline">Hier kommt die Headline rein</div>.kopf { background-color: #48d1cc; color: #fff; padding: 1.875em; } .kopf h1 { font-weight: normal; text-align: center; } .headline { height: 2%; background-color: #fff; }Ich kann meiner "headline" auch 50% Abstand geben es ändert sich rein gar nichts. Gebe ich dieser allerdings einen Abstand von 50px wie ich es früher gemacht habe, sehe ich meinen Abstand? Warum geht es nicht mit % nicht?
-
Hallo
Nix verstehn.
Wo gibt du deiner Klasse headline einen Abstand? Bei Abstand erwarte ich padding- oder, besser noch, margin-Angaben.
Und in welche Richtung soll der Abstand gehen?
Gruss
MrMurphy
-
Und in welche Richtung soll der Abstand gehen?
Sorry, falsch geschrieben, ich möchte dem DIV "headline" eine Höhe geben wie ich es früher z.B. mit 50px gemacht habe.
-
Hallo,
du möchtest also Prozent verwenden. Da klingeln bei Statistikern die Alarmglocken! Wichtigste Frage immer: Wovon?
Du hast bei dem Element nix angegeben, worauf auf sich deine % beziehen. 2% von Nix ist das Gleiche wie 50% von Nix. Was sollte sich also ändern?Gruß
Kalk-
Was sollte sich also ändern?
Wenn man es so sieht, macht es natürlich sinn. Wie kann ich dann mein Problem beheben? PX sind laut einigen Aussagen verboten. % geht nicht, was bleibt mir dann noch? Ich muss meine Struktur umbauen?
-
Was sollte sich also ändern?
Wenn man es so sieht, macht es natürlich sinn. Wie kann ich dann mein Problem beheben? PX sind laut einigen Aussagen verboten. % geht nicht, was bleibt mir dann noch? Ich muss meine Struktur umbauen?
Hilft's wenn du der line-height 7em verpasst?
Gruß
Kalk-
@@Tabellenkalk:
nuqneH
Hilft's wenn du der line-height 7em verpasst?
Nein!! Wenn’s mehrzeilig wird, wäre ein riesiger Abstand zwischen den Zeilen. Und wenn nicht
{ white-space: nowrap; overflow: hidden }angegeben ist, kann Text prinzipiell immer mehrzeilig werden.Also niemals[tm] line-height für etwas anderes verwenden als für den Zeilenabstand!
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
-
-
Hallo,
das Problem kann ich jetzt nachvollziehen.
Das ist mir noch nicht untergekommen, weil height-Angaben beim Responsive Design nur in Ausnahmefällen notwendig sind. Die Höhe von Containern richtet sich nach dem Inhalt. Abstände werden mit padding und margin erstellt.
Zur Erklärung:
Wenn bei height (und wahrscheinlich auch einigen anderen CSS-Angaben) Prozentangaben genutzt werden sollen wird ein umgebendes Element benötigt, das eine fest definierte Höhe hat. Da es kein entsprechendes umgebendes Element gibt kann der Browser mit der Prozent-Angabe nichts anfangen.
Gruss
MrMurphy
-
Das ist mir noch nicht untergekommen, weil height-Angaben beim Responsive Design nur in Ausnahmefällen notwendig sind. Die Höhe von Containern richtet sich nach dem Inhalt. Abstände werden mit padding und margin erstellt.
Also füge ich meinen Inhalt ein und gebe diesem ein z.B. padding: 2% 0 damit erreiche ich dann das gleiche wie wenn ich height nehmen würde. Richtig?
-
Hallo
» Also füge ich meinen Inhalt ein und gebe diesem ein z.B. padding: 2% 0
Ja.
» damit erreiche ich dann das gleiche wie wenn ich height nehmen würde. Richtig?
Wenn du das so schreibst - eher nein. Obwohl du wahrscheinlich das richtige meinst.
Die Prozent-Angabe bezieht sich auf das h1 (oder p oder li oder...) Element. Deshalb funktioniert das auch. Aber 2% padding ist ein anderer Wert als 2% height.
(Text sollte nie direkt in Containern stehen, sondern immer in "passenden" Elementen wie halt p, li, h1 bis h6, dt, dd u.s.w.)
Aber es ist ja kein Problem die Prozent-Werte des paddings so anzupassen, das sie deinen Vorstellungen entsprechen.
Gruss
MrMurphy
-
-
-
-
-
-
Kann ich eine andere include Datei laden, wenn ich in einen Bereich komme, wo ich bestimmte Suchfelder z.B. nicht mehr anzeigen möchte?
Klar, ich könnte es auch mit CSS einfach ausblenden, aber im Quelltext stehen diese weiterhin und dadurch ist unnötiger Code vorhanden, oder spielt das keine Rolle?
-
Hallo
Kann ich eine andere include Datei laden, wenn ich in einen Bereich komme, wo ich bestimmte Suchfelder z.B. nicht mehr anzeigen möchte?
Das geht mit einer serverseitigen Sprache (z.B. PHP, Perl, Python) vor dem Ausliefern der Seite oder nach dem Laden der Seite vom Browser aus mit Ajax.
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3-
Hallo,
Das geht mit einer serverseitigen Sprache (z.B. PHP, Perl, Python) vor dem Ausliefern der Seite oder nach dem Laden der Seite vom Browser aus mit Ajax.
Danke für deine Antwort, hast du mir vielleicht ein kleines Beispiel wie ich dieses mit PHP noch besser natürlich mit Ajax umsetzten könnte? Wenn ich es über Ajax realisiere, dann reagiert das Script auch darauf, wenn ich das Fenster kleiner ziehe ohne die Seite neu zu laden, richtig?
-
Hallo
Das geht mit einer serverseitigen Sprache (z.B. PHP, Perl, Python) vor dem Ausliefern der Seite oder nach dem Laden der Seite vom Browser aus mit Ajax.
Danke für deine Antwort, hast du mir vielleicht ein kleines Beispiel wie ich dieses mit PHP noch besser natürlich mit Ajax umsetzten könnte?
Grundsätzlich kommt es darauf an, unter welchen Bedingungen du welche Elemente anzeigen lassen willst oder nicht. Wurden bestimmte Felder bereits ausgefüllt? Sollen, z.B. bei eingeloggten Benutzern, unterschiedliche Benutzer unterschiedliche Felder angezeigt bekommen? Soll der strukturelle Aufbau des Formulars von der Viewportgröße abhängig sein? …
Wenn ich es über Ajax realisiere, dann reagiert das Script auch darauf, wenn ich das Fenster kleiner ziehe ohne die Seite neu zu laden, richtig?
… Diese Frage lässt darauf schließen, dass es nur darum geht, je nach Viewportgröße unterschiedlich viele Formularfelder anzuzeigen. Die notwendigen Infos kannst du mit JavaScript auslesen und bei serverseitiger Lösung z.B. als GET-Parameter übergeben oder als Cookie speichern und beim nächsten Request an den Server schicken. So könnte ein PHP-Skript auf die Infos reagieren und die Ausgabe unterschiedlich zusammenbauen.
Mit Ajax würdest du die gewonnenen Infos im Browser auswerten und, je nach der festgestellten Größe, unterschiedlich große HTML-Brocken anfordern und in das Dokument einfügen. Das ist die elegantere Lösung, da sie sofort greift. Nur im Fall, dass JavaScript – warum auch immer – nicht zur Verfügung steht, müssen andere Maßnahmen her.
Zuletzt zum Punkt „Fenster kleiner ziehen“. Im Falle von Fenster wird kleiner würde ich bei Bedarf Elemente aus dem DOM nehmen. Dazu brauche ich noch nicht einmal zwingend Ajax/die Verbindung zum Server. Allerdings muss bekannt sein, welche Elemente noch da sind, damit beim wieder größer machen die richtigen Elemente geladen werden. Das letztere gilt natürlich auch für das Vergrößern an sich.
Ob sich dieser Aufwand lohnt, wage ich allerdings zu bezweifeln. Scrollen/wischen ist ja nicht böse. Ich persönlich bevorzuge es, alle notwendigen Bestandteile auf einmal zu bekommen anstatt X-Schritt-Formulare ausfüllen zu müssen. Das mag manchmal von vorteilhafter Programmlogik sein (von den vorherigen Eingaben abhängige Formularabläufe). Oft wird es aber mMn unnötig eingesetzt.
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3
-
-
-
-
Seit ein paar Tagen schau ich mir alle Seiten im Netz an, auf denen ich unterwegs bin, ob diese sich der Browserbreite anpassen. Leider muss ich feststellen, dass dieses absolut nicht der Fall ist. Auch neue Webseiten, die erst ein paar Wochen online sind (Infos über Deutsche Startups) werden daraufhin nicht angepasst. Jetzt frage ich mich warum? Hier im Forum wird geschrieben dass sich alles anpassen sollte, aber in der Realität sieht es doch ganz anderes aus.
Weiter ist mir aufgefallen, dass wiederrum viele Seiten z.B. ksta.de wenn man mit dem Handy diese Seite besucht ein m.ksta.de haben, das bedeutet diese Seite wurde nur für das Mobile Gerät erstellt. Finde ich auch eine gute Lösung, aber auch hier stelle ich mir die Frage, es kann nicht sein, dass die für ALLE Verschiedenen Größen eine Mobile CSS Datei erstellen, wenn ich mir dieses http://bradfrost.github.io/this-is-responsive/ Beispiel ansehe, ist dieses überhaupt nicht möglich.
Warum wird so wenig Rücksichtig auf die Mobilen Geräte genommen, wenn schon über 50% der User mit einem solchen Gerät unterwegs sind?
Mein Fazit aus den letzten drei Tagen, ein Design zu gestallten, das überall gut aussieht, ist meiner Meinung nach sehr schwer um zu setzten. Vor allem weil man mit % arbeitet, ich bekomme einfach nichts schönes hin. Mein Problem fängt schon an, oben ein Header, darunter zwei Spalten mit Content und Sidebar und darunter ein Footer. Wenn es kleiner wird, aber Handy soll die Navigation zu einer Klapnavigation werden.
-
@@Martin_Online:
nuqneH
Weiter ist mir aufgefallen, dass wiederrum viele Seiten z.B. ksta.de wenn man mit dem Handy diese Seite besucht ein m.ksta.de haben, das bedeutet diese Seite wurde nur für das Mobile Gerät erstellt. Finde ich auch eine gute Lösung
Ich nicht. Das macht das Web kaputt.
“Remaining on m dot is not was responsive is about.” —Andy Hume (Tweet)
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Gunnar Bittersmann:
nuqneH
Oops, das sollte heißen:
“Remaining on m dot is not _what_ responsive is about.” —Andy Hume
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
Hallo,
Seit ein paar Tagen schau ich mir alle Seiten im Netz an, auf denen ich unterwegs bin, ob diese sich der Browserbreite anpassen. Leider muss ich feststellen, dass dieses absolut nicht der Fall ist.
Im Allgemeinen teile ich diese Beobachtung nicht, das müsste man sich im Einzelfall ansehen.
Es ist nicht so, als wären Websites mit 980px Standardbreite nicht auf kleinen Viewports lesbar, nur nicht optimal. Browser beherrschen intelligentes Zooming (z.B. Double-Tap auf eine Spalte) oder sogar Linearisierung. Beim heutigen Trend zu großer Typographie und großen Buttons ist ein 980px-Design relativ gut mobil bedienbar.
Was nicht heißt, dass das eine saubere Lösung ist. Mobile First ist langfristig sinnvoller. siehe auch http://bradfrostweb.com/blog/post/responsive-strategy/.
Auch neue Webseiten, die erst ein paar Wochen online sind (Infos über Deutsche Startups) werden daraufhin nicht angepasst.
http://www.deutsche-startups.de/ und http://www.gruenderszene.de/ kannst du schon mal nicht meinen…
Jetzt frage ich mich warum? Hier im Forum wird geschrieben dass sich alles anpassen sollte, aber in der Realität sieht es doch ganz anderes aus.
Nein. Wer heute ein ambitioniertes Produkt online bringt, kommt um Responsive Design nicht herum. Die Realität ist faktisch »Mobile First«, es ist nur die Frage, wie sich die Site-Betreiber dazu verhalten.
Weiter ist mir aufgefallen, dass wiederrum viele Seiten z.B. ksta.de wenn man mit dem Handy diese Seite besucht ein m.ksta.de haben, das bedeutet diese Seite wurde nur für das Mobile Gerät erstellt.
Die Möglichkeit, manchen Geräten andere (i.d.R. weniger) Inhalte auszuliefern, ist ein sinnvoller Teil von Responsive Design. Es ist eine Techniken unter vielen, manchmal ist sie angebracht und meistens nicht.
Mancher Onlinemedien schaufeln sich mit ihren überfüllten und ellenlangen Magazinseiten ihr eigenes Grab. Anstatt aufzuräumen bauen sie eine Browsererkennung ein, um für Smartphones nur 20 anstatt 200 Artikel auf der Startseite zu verlinken.
Warum wird so wenig Rücksichtig auf die Mobilen Geräte genommen, wenn schon über 50% der User mit einem solchen Gerät unterwegs sind?
Weil die Webindustrie konservativ und träge ist.
Weil Responsive Design tiefgreifende Veränderungen bringt, auf die Agenturen nicht schnell reagieren können, weil sie ihre Teams und Workflows auf alte Abläufe ausgerichtet haben.
Weil Responsive Design eine Zusammenarbeit und ein gemeinsames Verständnis zwischen Design und Development erfordert. Das war vorher im Grunde auch nötig, aber das Problem wurde 10 Jahre lang ignoriert (siehe ein alter Artikel von 2006).
Und es kommt hinzu: »One cannot do responsive design with an unresponsive client.« (@tcaspers)
Mathias
-
-
Hallo,
ich gestallte derzeit meine Bilder und wollte jedes dritte Bild ansprechen, hier habe ich gelesen, dass es so geht
nth-child (3n)leider reagiert mein Browser (FF) nicht drauf. Wenn ich:last-childverwende geht es.Mein Code sieht derzeit so aus:
section.small-features img { width:32%; height:auto; padding-right:1.3%; margin-top:2%; box-sizing: border-box; -mox-box-sizing: border-box; } section.small-features img:nth-child (3n) { padding-right:0%; }<section class="small-features"> <h3>Small Features</h3> <img src="http://placehold.it/292x155" alt="Werbung 1"> <img src="http://placehold.it/292x155" alt="Werbung 2"> <img src="http://placehold.it/292x155" alt="Werbung 3"> <img src="http://placehold.it/292x155" alt="Werbung 4"> <img src="http://placehold.it/292x155" alt="Werbung 5"> <img src="http://placehold.it/292x155" alt="Werbung 6"> </section>Was mache ich falsch?
-
Hallo,
der Artikel ist leider eher Schrott, der Autor hat nth-child selbst nicht so recht verstanden. Auch der nth-child-Tester, auf dem in dem Text verwiesen wird, funktioniert meiner Ansicht nicht wie im richtigen Leben.
Wenn du nach dem Artikel vorgehst wirst du wahrscheinlich noch einige Verständnisprobleme mit nth-child bekommen.
Im Moment gibt es aber schlicht ein sachliches Problem: Zwischen nth-child und der Öffnenen Klammer darf es kein Leerzeichen geben.
Das so ein Fehler in einem Text aus 2011 noch nicht korrigiert wurde sagt schon einiges über die Qualität aus. Zum Verständnis von nth-child solltest du also noch andere Texte lesen, da selbst viele "Fachautoren" die Auswirkungen nicht richtig erkannt haben.
Gruss
MrMurphy
-
Im Moment gibt es aber schlicht ein sachliches Problem: Zwischen nth-child und der Öffnenen Klammer darf es kein Leerzeichen geben.
Ich hab es nun wie folgt abgeändert:
section.small-features img { width:auto; height:auto; padding-right:0.4%; margin-top:2%; } section.small-features img:nth-child(3n) { padding-right:0px; }Leerzeichen ist nun weg, bringt leider keine Änderung, anbei ein Screenshot
hier sieht man genau, dass der Abstand nach dem zweiten Bild weg ist, aber nicht wie von mir gewünscht hinter deme dritten.
-
Hallo
Im Moment gibt es aber schlicht ein sachliches Problem: Zwischen nth-child und der Öffnenen Klammer darf es kein Leerzeichen geben.
Ich hab es nun wie folgt abgeändert:
section.small-features img {
width:auto;
height:auto;
padding-right:0.4%;
margin-top:2%;
}section.small-features img:nth-child(3n) {
padding-right:0px;
}> > Leerzeichen ist nun weg, bringt leider keine Änderung, anbei ein Screenshot > >  Dann prüfe mal, wo die Zählung beginnt. Das mittlere Bild folgt der Regel `padding-right: 0;`{:.language-css}. Somit ist klar, dass die Regel grundsätzlich greift. Die Zählung beginnt nur an der für dich falschen Stelle. Wenn wir davon ausgehen, dass der Browser das richtig macht – denn sonst schlügst nicht nur du hier mit dem Problem auf –, steht dir ein Verständnisproblem mit der Zählung im Weg. Tschö, Auge -- Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, "Wachen! Wachen!" ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:} [Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)-
Dann prüfe mal, wo die Zählung beginnt. Das mittlere Bild folgt der Regel
padding-right: 0;. Somit ist klar, dass die Regel grundsätzlich greift. Die Zählung beginnt nur an der für dich falschen Stelle. Wenn wir davon ausgehen, dass der Browser das richtig macht – denn sonst schlügst nicht nur du hier mit dem Problem auf –, steht dir ein Verständnisproblem mit der Zählung im Weg.Wenn ich mir das genau ansehe, dann beginnt der Browser mit dem großen Titel Bild. Das ist aber falsch bzw. ich verstehe es falsch. Mein HTML Code sieht derzeit so aus
<section class="feature-rotator"> <h3>Feature Rotator</h3> <img src="http://placehold.it/900x300" alt="Slider"> </section> <section class="small-features"> <h3>Small Features</h3> <img src="http://placehold.it/292x263" alt="Werbung 1"> <img src="http://placehold.it/292x263" alt="Werbung 2"> <img src="http://placehold.it/292x263" alt="Werbung 3"> <img src="http://placehold.it/292x263" alt="Werbung 1"> <img src="http://placehold.it/292x263" alt="Werbung 2"> <img src="http://placehold.it/292x263" alt="Werbung 3"> </section>mein CSS so:
section.feature-rotator img { max-width:100%; height:auto; } section.small-features img { width:auto; height:auto; padding-right:0.4%; margin-top:2%; } section.small-features img:nth-child(3n) { padding-right:0px; }Mein
:nth-child(3n)soll nur innerhalb von "small-features" zählen, so wie es aussieht, zählt:nth-child(3n)ab dem großen Bild, sprich dem Bild darüber, die Frage ist warum?-
@@Martin_Online:
nuqneH
<section class="small-features">
<h3>Small Features</h3>
<img src="http://placehold.it/292x263" alt="Werbung 1">
<img src="http://placehold.it/292x263" alt="Werbung 2">
<img src="http://placehold.it/292x263" alt="Werbung 3">
<img src="http://placehold.it/292x263" alt="Werbung 1">
<img src="http://placehold.it/292x263" alt="Werbung 2">
<img src="http://placehold.it/292x263" alt="Werbung 3">
</section>Die alt-Texte sind eher sinnlos. Oder findest du sie für Screenreader-Nutzer hilfreich? > Mein `:nth-child(3n)`{:.language-css} soll nur innerhalb von "small-features" zählen, so wie es aussieht, zählt `:nth-child(3n)`{:.language-css} ab dem großen Bild, sprich dem Bild darüber, die Frage ist warum? Nein, so zählt `:nth-child()`{:.language-css} nicht. Es zählt die Geschwisterelemente innerhalb von section.small-features, und zwar unabhängig von deren Typ! Das erste dieser Elemente ist also das h3-Element (was du aber nicht selektierst, wenn du `img:nth-child()`{:.language-css} angibst. Wenn du nur die img-Geschwisterelemente durchzählen lassen willst, ist `img:nth-of-type()`{:.language-css} dein Freund. BTW, `section.small-features img`{:.language-css} ist überspezifiziert, `.small-features img`{:.language-css} sollte genügen. Qapla' -- „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Hallo
<section class="small-features">
<h3>Small Features</h3>
<img src="http://placehold.it/292x263" alt="Werbung 1">
<img src="http://placehold.it/292x263" alt="Werbung 2">
<img src="http://placehold.it/292x263" alt="Werbung 3">
<img src="http://placehold.it/292x263" alt="Werbung 1">
<img src="http://placehold.it/292x263" alt="Werbung 2">
<img src="http://placehold.it/292x263" alt="Werbung 3">
</section>> > Die alt-Texte sind eher sinnlos. Oder findest du sie für Screenreader-Nutzer hilfreich? Stimmt, es müsste „Werbung 1“, „Werbung 2“, „Werbung 3“, „Werbung 4“, „Werbung 5“ und „Werbung 6“ heißen. Jeweils zweimal „Werbung 1“, „2“ und „3“ sieht komisch aus. Oder meintest du, dass die Fremdnutzung dieses Attributs während der Entwicklungsphase als Kommentarersatz sei verwerflich? Er wird, so vermute ich ganz dolle, nicht bei diesen URLs in den src-Attributen bleiben, warum sollte es also bei den Alt-Texten bleiben? Tschö, Auge -- Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, "Wachen! Wachen!" ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:} [Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/) -
Die alt-Texte sind eher sinnlos. Oder findest du sie für Screenreader-Nutzer hilfreich?
Natürlich sind die alt-Texte sinnlos, das gleiche gilt auch für die Bilder. Aber zum Entwickeln ist es doch ganz egal was dort steht.
Wenn du nur die img-Geschwisterelemente durchzählen lassen willst, ist
img:nth-of-type()dein Freund.Vielen Dank , jetzt hat es geklappt. Ich hätte da noch eine ganz andere Frage, ich binde meine Bilder wie folgt ein
<section class="small-features"> <h3>Small Features</h3> <img src="http://placehold.it/292x263" alt="Werbung 1"> <img src="http://placehold.it/292x263" alt="Werbung 2"> <img src="http://placehold.it/292x263" alt="Werbung 3"> <img src="http://placehold.it/292x263" alt="Werbung 1"> <img src="http://placehold.it/292x263" alt="Werbung 2"> <img src="http://placehold.it/292x263" alt="Werbung 3"> </section>Ich dachte immer, ein Bild, kann ich über CSS Formatieren, also
section.small-features img { width:auto; height:auto; }Wenn ich dem Bild ein width:100% gebe, geht es über die ganze Spalte, warum? Das Bild hat eine Organalgröße von 292x263, wird aber auf 100% Box Breite ausgedehnt.
Ist das normal?
-
Hallo
Vielen Dank , jetzt hat es geklappt. Ich hätte da noch eine ganz andere Frage, ich binde meine Bilder wie folgt ein
<section class="small-features">
<h3>Small Features</h3>
<img src="http://placehold.it/292x263" alt="Werbung 1">
<img src="http://placehold.it/292x263" alt="Werbung 2">
<img src="http://placehold.it/292x263" alt="Werbung 3">
<img src="http://placehold.it/292x263" alt="Werbung 1">
<img src="http://placehold.it/292x263" alt="Werbung 2">
<img src="http://placehold.it/292x263" alt="Werbung 3">
</section>> > Ich dachte immer, ein Bild, kann ich über CSS Formatieren, also Natürlich kannst du das. > Wenn ich dem Bild ein width:100% gebe, geht es über die ganze Spalte, warum? Weil du es mit `width: 100%;`{:.language-css} so angewiesen hast. > Das Bild hat eine Organalgröße von 292x263, wird aber auf 100% Box Breite ausgedehnt. > > Ist das normal? Es soll 100% der verfügbaren Breite einnehmen. „100% wovon?“ fragst du (im übertragenen Sinn)? Na 100% der Breite des Elternelements. Tschö, Auge -- Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, "Wachen! Wachen!" ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:} [Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)
-
-
-
-
-
-
-
Es gibt schon wieder ein Problem, wo ich nicht weiter komme, ich arbeite jetzt mit verschiedenen Größen, diese sehen derzeit so aus:
@media screen and (max-width: 1000px) { section.small-features img { width:32.2%; height:auto; padding-right:1%; margin-top:2%; } section.small-features img:nth-of-type(3n) { padding-right:0px; } } @media screen and (max-width: 720px) { section.small-features img { width:49%; height:auto; padding-right:1%; margin-top:2%; } section.small-features img:nth-of-type(2n) { padding-right:0%; } } @media screen and (max-width: 430px) { section.small-features img { width:100%; height:auto; margin-top:2%; } section.small-features img:nth-of-type(2n) { padding-right:0px; } }Bis zu
@media screen and (max-width: 720px)läuft alles schön flüssig. Jetzt kommen wir in den großen Bereich, dort habe ich eine Angabeimg:nth-of-type(3n)Sobald ich jetzt wieder auf die nächst kleinere Auflösung gehe, wird diese Einstellung beibehalten und ich kann in dieser Auflösung nicht das zwei Bild ansprechen. Versteht ihr was ich meine?Ich hab heute lange mit einem Grafiker gesprochen und er meinte, Martin wenn du das wirklich durchziehst, wirst du Monate für dein Design brauchen und keiner deiner User wird dir das danken. Eigentlich die User es gewohnt, dass es eine App für eine Seite gibt, oder eben dass man Scrollen muss.
Weiter meinte er, was glaubst du warum wir in der Argentur solche Seiten kaum umsetzten, weil es vom Kunden schlicht weg nicht bezahlt wird, die Arbeit rechnet sich nicht.
Ganz ehrlich ich bin auch bald an einem Punkt angekommen wo ich sage, scheiß auf Handy, wer unbedingt von Unterwegs sich das ansehen will muss damit leben, dass er Scrollen muss. Ich sitze seit 3 Tagen nur an 6 verdammten Bilder + eine Navigation, dass ich diese schön flüssig bekomme. NICHTS klappt, wie ihr seht.
-
Ok, ich hab es jetzt so gemacht und es geht, keine Ahnung ob es richtig ist
section.small-features img { width:32.2%; height:auto; padding-right:1%; margin-top:2%; } section.small-features img:nth-of-type(3n) { padding-right:0px; } @media screen and (max-width: 720px) { section.small-features img { width:49%; height:auto; padding-right:1%; margin-top:2%; } section.small-features img:nth-of-type(3n) { padding-right:1%; } section.small-features img:nth-of-type(2n) { padding-right:0; } } @media screen and (max-width: 430px) { section.small-features img { width:100%; height:auto; margin-top:2%; } }-
@@Martin_Online:
nuqneH
Ok, ich hab es jetzt so gemacht und es geht, keine Ahnung ob es richtig ist
Besser bist du üblicherweise mit dem Mobile-first-Ansatz dran, d.h. ohne Mediaquery für kleine Geräte, Mediaqueries mit min-width für größere.
Und die Breitenangabe nicht in px, sondern in em. Aber das hatten wir ja schon.
Und für jedes n-te Bid padding-right auf 0 zu setzen kannst du dir sparen, wenn du dem Containerelement
.small-featuresentsprechenden negativen margin-right gibst.Dass es
.small-featuresund nichtsection.small-featuresheißen sollte, hatten wir auch schon.Mache Selektoren so spezifisch wie nötig, so unspezifisch wie möglich.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Gunnar:
nuqneH
Besser bist du üblicherweise mit dem Mobile-first-Ansatz dran, d.h. ohne Mediaquery für kleine Geräte, Mediaqueries mit min-width für größere.
Das halte ich zumindest für fragwürdig, bzw. würde das hinterfragen wollen.
Fakt ist doch, dass es heutzutage eigentlich keine (zu unterstützenden) Browser mehr gibt, die keine Media Queries verstehen.
Und selbst wenn man den IE 8 noch unterstützen möchte und HTML 5 verwendet, dann braucht es eh zwingend Javascript, womit dann auch die Verwendung eines entsprechenden Polyfills kein Problem darstellt.
Der von dir vorgeschlagene Weg ist auch aus Performance-Sicht äußerst nachteilig. Denn so muss der Browser für größere Viewports die Seite jeweils x-fach rendern.
Persönlich halte ich es auch für "übersichtlicher" jeweils mit min- und max-width Angaben zu arbeiten. Denn bei einem Responsive Design kommen schnell mal bis zu 8 Breakpoints zusammen.
Gruß Gunther
-
@@Gunther:
nuqneH
Besser bist du üblicherweise mit dem Mobile-first-Ansatz dran, d.h. ohne Mediaquery für kleine Geräte, Mediaqueries mit min-width für größere.
Das halte ich zumindest für fragwürdig, bzw. würde das hinterfragen wollen.
Beispiel: Bei kleinen Viewports hat man üblicherweise Boxen untereinander; das normale Verhalten von Blockelementen. Für größere Viewports kann man dies ändern und die Boxen nebeneinander darstellen.
Nimmt man „desktop first“ die Nebeneinanderdarstellung als Basis, müsste man für kleine Viewports erst dafür sorgen, dass die Boxen untereinander dargestellt werden – Mehraufwand.
Und selbst wenn man den IE 8 noch unterstützen möchte und HTML 5 verwendet, dann braucht es eh zwingend Javascript
Nö. Man kann den IE 8 auch mit einem speziellen Stylesheet versorgen (per Präprozessor aus derselben Quelle wie das Standard-Stylesheet generiert).
Der von dir vorgeschlagene Weg ist auch aus Performance-Sicht äußerst nachteilig. Denn so muss der Browser für größere Viewports die Seite jeweils x-fach rendern.
?? Nö, wieso?
Persönlich halte ich es auch für "übersichtlicher" jeweils mit min- und max-width Angaben zu arbeiten.
Was dagegen spricht siehe https://forum.selfhtml.org/?t=217643&m=1495570.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@Gunnar:
nuqneH
Besser bist du üblicherweise mit dem Mobile-first-Ansatz dran, d.h. ohne Mediaquery für kleine Geräte, Mediaqueries mit min-width für größere.
Das halte ich zumindest für fragwürdig, bzw. würde das hinterfragen wollen.
Beispiel: Bei kleinen Viewports hat man üblicherweise Boxen untereinander; das normale Verhalten von Blockelementen. Für größere Viewports kann man dies ändern und die Boxen nebeneinander darstellen.
Nimmt man „desktop first“ die Nebeneinanderdarstellung als Basis, müsste man für kleine Viewports erst dafür sorgen, dass die Boxen untereinander dargestellt werden – Mehraufwand.
Die Frage ist doch nicht, ob "mobile first" oder "desktop first", sondern warum heutzutage überhaupt noch_ohne_Media Queries!
Und selbst wenn man den IE 8 noch unterstützen möchte und HTML 5 verwendet, dann braucht es eh zwingend Javascript
Nö. Man kann den IE 8 auch mit einem speziellen Stylesheet versorgen (per Präprozessor aus derselben Quelle wie das Standard-Stylesheet generiert).
Erstens arbeitet weitlang (noch) nicht jeder mit CSS Präprozessor, und zweitens hilft auch der dem IE 8 nicht, dass er Media Queries "verstehen" würde.
Der von dir vorgeschlagene Weg ist auch aus Performance-Sicht äußerst nachteilig. Denn so muss der Browser für größere Viewports die Seite jeweils x-fach rendern.
?? Nö, wieso?
Weil es dann eine Frage der exakten Reihenfolge ist ...!
Wobei man die natürlich sehr leicht einhalten kann.Persönlich halte ich es auch für "übersichtlicher" jeweils mit min- und max-width Angaben zu arbeiten.
Was dagegen spricht siehe https://forum.selfhtml.org/?t=217643&m=1495570.
Das hatten wir schon vor über einem Jahr ...! :-P
Vereinfacht ausgedrückt hat man sehr häufig mehr als nur zwei verschiedene Darstellungsvarianten, bspw. "kleine, mittlere und große Viewports".
Es ist also selten alleine eine Frage von entweder oder ...!
Ich sehe heutzutage aber den Ansatz von "mobile first"_ohne_Media Queries als Default Layout als "überholt" an.
Da macht es imho mehr Sinn, quasi das Print Layout als Default (bezogen auf DIN A4 Größe mit entsprechenden Rändern) zu setzen und alles andere braucht dank Media Queries keinen "Default" (mehr).
Wer möchte, kann das natürlich auch noch (zusätzlich) per Media Type ganz voneinander trennen.
Gruß Gunther
-
-
-
-
-
-