nicht angemeldet
Henry
Matthias Apsel
Henry
Henry
Gunnar Bittersmann
Matthias Apsel
Henry
Matthias Apsel
Hallo,
Innerhalb eines Flexcontainers befinden sich verschiedene Elemente. Auch ein Bild, welches sich responsive verhalten soll.
Wo kommt der Abstand her, wenn die Größenangabe unter 100% und gleichzeitig <a href… drum herum ist? Macht das Sinn oder ist das ein BUG?
Gruss
Henry
Hallo Henry,
Wo kommt der Abstand her, wenn die Größenangabe unter 100% und gleichzeitig <a href… drum herum ist? Macht das Sinn oder ist das ein BUG?
Flex hat Einfluss auf die Kinder eines Elements. Du formatierst aber in beiden Fällen .flex img. Im zweiten Fall ist das Kind des Flexcontainers aber das a-Element, nicht das Bild.
Bis demnächst
Matthias
Hallo Matthias,
Flex hat Einfluss auf die Kinder eines Elements. Du formatierst aber in beiden Fällen
.flex img. Im zweiten Fall ist das Kind des Flexcontainers aber das a-Element, nicht das Bild.
Komme nicht dahinter. Der Selektor referenziert doch auch das Bild. Hab jetzt mal erfolglos hin und her probiert und bin schon fast soweit das komplett umzustricken. Aber muss doch gehen.
Gruss
Henry
Hallo
Aber muss doch gehen.
Klar. Mit korrektem, aktuellem HTML und CSS.
Wobei du langsam mal erkennen solltest das deine Testseiten dich nicht weiterbringen. Zudem willst du per CSS noch zu viel bestimmen und bastelst dir dadurch Stolperfallen über die dann dann selbst fällst.
Einige CSS-Angaben erscheinen zudem sinnfrei. Zum Beispiel die Bildbreite auf 50 % minimieren. Mit der Praxis hat das nix zu tun.
Das Problem hat Matthias Apsel bereits vollkommen richtig beschrieben. Vielleicht hilft dir ja ein praktisches Beispiel.
Ich sehe zum Beispiel aus deinen sinnfreien Angaben eher das folgende HTML
<h2>Ohne Link</h2>
<div class="flexy2">
<p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/DE-Wikipedia-2-Millionen-Artikel.svg/209px-DE-Wikipedia-2-Millionen-Artikel.svg.png" alt="Beispielbild">
<p>Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
</div>
<h2>Mit Link</h2>
<div class="flexy3">
<p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
<a href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/DE-Wikipedia-2-Millionen-Artikel.svg/209px-DE-Wikipedia-2-Millionen-Artikel.svg.png" alt="Beispielbild">
</a>
<p>Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
</div>
mit diesem CSS
img {
display: block;
max-width: 100%;
border: 0;
}
.flexy2,
.flexy3 {
border: 3px solid blue;
width: 80%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
Beispiel zum Testen:
Gruss
MrMurphy
Hallo MrMurphy1,
Zunächst mal vielen Dank für deine Mühe. Die Art und Weise deiner Antwort allerdings, wie auch der faktische Inhalt, finde ich, ich sag es mal höflich, merkwürdig.
Klar. Mit korrektem, aktuellem HTML und CSS.
Was daran falsch ist, kannst du auch erklären?
Wobei du langsam mal erkennen solltest das deine Testseiten dich nicht weiterbringen.
Weil?
Zudem willst du per CSS noch zu viel bestimmen und bastelst dir dadurch Stolperfallen über die dann dann selbst fällst.
Zuviel bestimmen?
Einige CSS-Angaben erscheinen zudem sinnfrei.
Sinnfrei? Im Sinne von nutzlos. Ja, das scheint wohl dein Lieblingswort zu sein.
Zum Beispiel die Bildbreite auf 50 % minimieren. Mit der Praxis hat das nix zu tun.
Wer redet denn von Praxis? Hat mal rein gar nichts mit meiner Frage zu tun und mache ich nur deshalb um das Beispiel optisch angenehmer darzustellen ohne den, der Frage betreffenden, Code durch unnütze Angaben, zu verkomplizieren. Also hättest du dir sparen können.
Das Problem hat Matthias Apsel bereits vollkommen richtig beschrieben. Vielleicht hilft dir ja ein praktisches Beispiel.
Vielleicht. Nur dein Beispiel leider nicht. Dass es nicht, wie erwartet, in jedem Browser funktioniert brauche ich wohl nicht zu erklären, damit meine ich nicht nur IE. Hinzu kommt, dass in allen Browsern justify-content: center; nicht mehr greift, alles linksbündig.
Ich sehe zum Beispiel aus deinen sinnfreien Angaben eher das folgende HTML
<h2>Ohne Link</h2>
…
Ja sags ruhig wieder, also nutzlos. Aber warum?
Beispiel zum Testen:
Tja, bringt mich leider nur nicht weiter.
Nebenbei bemerkt, Du kritisierst einen Body auf 50%, was nicht mal für realen Betrieb gedacht ist, postest hier in einer arroganten von oben herab Manier und nötigst aber deine Besucher, denn deine Beispiel sieht schon sehr öffentlich aus, zu Google(Connection)Schriften.
/*Icon-Font - font-family: 'FontAwesome';*/ @import url(http://fontawesome.io/assets/font-awesome/css/font-awesome.css); /*Überschriften - font-family: 'Roboto Slab', Serif;*/ @import url(https://fonts.googleapis.com/css?family=Roboto+Slab); /*Fließtext - font-family: 'Roboto', Sans-Serif";*/ @import url(https://fonts.googleapis.com/css?family=Roboto); /*Zahlen* - font-family: 'Merriweather';*/ @import url(https://fonts.googleapis.com/css?family=Merriweather);
Auch ist viel nutzloser Code-Ballast vorhanden, der manchen Leuten "sinnfrei" erscheinen könnte.
/*Listen dl*/ @media all { dl { margin: 0.5rem 0rem 0.5rem 0rem; } dt, dd { } dt { font-weight: bold; margin: 0rem 0rem 0rem 0rem; } dd { margin: 0rem 0rem 1rem 0rem; } dd p { margin: 0rem 0rem 0rem 0rem; } }
Ich wundere mich auch darüber, warum man Blockelemente nochmal so deklarieren muss
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; }
Aber du wirst wahrscheinlich deine Gründe habe, die ich daher auch nicht als "sinnfrei" bezeichnen möchte, denn diese Sachen betreffen ja auch sowieso nicht die Thematik und anmaßen möchte ich mir auch nichts. Allerdings, wie man in den Wald hineinruft, so kommt es auch heraus.
Gruss
Henry
@@Henry
Dass es nicht, wie erwartet, in jedem Browser funktioniert brauche ich wohl nicht zu erklären
*gähn*
postest hier in einer arroganten von oben herab Manier
??
und nötigst aber deine Besucher […] zu Google(Connection)Schriften.
Wenn man die Privatsphäre seiner Seitenbesucher achtet, sollte man Webfonts wohl besser selbst hosten und nicht von Google einbinden, ja.
Übrigens liefert http://fontawesome.io/assets/font-awesome/css/font-awesome.css kein Stylesheet, sondern eine Fehlerseite.
Und man kann Font Awesome auch als SVG einbinden. Sollte man. Seriously, Don’t Use Icon Fonts. S.a. diesen Thread.
Auch ist viel nutzloser Code-Ballast vorhanden, der manchen Leuten "sinnfrei" erscheinen könnte.
Damit meinst du dt, dd { }?
Aber wo wir gerade dabei sind: Mit den Regeln
/*Listen dl*/ @media all { dl { margin: 0.5rem 0rem 0.5rem 0rem; } dt, dd { } dt { font-weight: bold; margin: 0rem 0rem 0rem 0rem; } dd { margin: 0rem 0rem 1rem 0rem; } dd p { margin: 0rem 0rem 0rem 0rem; } }
wird
<dl>
<dt>Punkt 1</dt>
<dd>Geschwafel</dd>
<dd>und noch was</dd>
<dt>Punkt 2</dt>
<dd>Was ist der Punkt?</dd>
</dl>
folgendermaßen gerendert:
Punkt1
Geschwafel
und noch was
Punkt 2
Was ist der Punkt?
Es sollte doch aber eher so aussehen:
Punkt1
Geschwafel
und noch was
Punkt 2
Was ist der Punkt?
D.h. der Abstand ist nicht als margin-bottom für dd, sondern als margin-top für dt zu realisieren.
Außerdem: Wenn man nun eine solche Liste mit dl { font-size: 3em } beonders hervorhebt, dann sind die Abstände viel zu klein. Die Abstände sollten sich auf die aktuelle Schriftgröße beziehen, nicht auf die Basisschriftgröße; also in em angegeben werden, nicht in rem.
Ich wundere mich auch darüber, warum man Blockelemente nochmal so deklarieren muss
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; }
Ernsthaft jetzt? Du bist doch derjenige, der immer noch für alte Browser optimieren will. Und da wundert es dich, dass man dann solch eine Regel im Stylesheet hat?
LLAP 🖖
Hallo Henry,
Das Problem hat Matthias Apsel bereits vollkommen richtig beschrieben. Vielleicht hilft dir ja ein praktisches Beispiel.
Vielleicht. Nur dein Beispiel leider nicht.
In deinem ersten Beispiel sind h3 und img flex-items. Im zweiten sind h3 und a flex-items. Die flex-items dehnen sich auf den entsprechenden Platz aus.
Mach eine outline um den Link, dann siehst du es. Überlege dir zudem, worauf sich die 50% Maximalbreite jeweils bezieht.
MrMurphys Kritik mag harsch klingen, beachte sie dennoch.
Bis demnächst
Matthias
Hallo Matthias,
Mach eine outline um den Link, dann siehst du es. Überlege dir zudem, worauf sich die 50% Maximalbreite jeweils bezieht.
ahh… jetzt verstehe ich, was ihr mit den 50% meint. Hatte was anderes im Kopf, weil ich manchmal den Body fürs Beispiel verkleinere, habe ich hier aber gar nicht gemacht. Dann ist das natürlich was anderes und ist sehr wohl ein Faktor. Aber genau der um den es hier geht. Die Sache sieht doch so aus, bei kleiner 100% oder keinen Link drum herum, ist alles gut, nur eben nicht in Kombi. Und das ist ja mein Problem. Was mich allerdings überrascht, und das macht diesen Thread dann doch wertvoll für mich und sicher auch andere, ist die automatische Skalierung ohne max- es reicht also auch width. Das ist insofern interessant, weil egal wo du im Netz suchst, knallt dir immer ein Must-Do entgegen für responsive Bilder das da lautet: max-width:100%;height:auto; was ja auch richtig ist, weil natürlich sonst das Bild grösser erscheinen kann als es eigentlich ist und damit nicht schön. Jetzt muss ich nur nopch rausfinden, wie ich es anstelle, dass ein Bild zb. maximal 70% seiner Originalgröße(nicht seines Elternelements) anzeigt und das Layout nicht zerstört.
Und das scheint doch offensichtlich gar nicht so einfach zu sein, auch das aktuelle Beispiel von McMurphy funktioniert nicht wie erwartet, werde aber gleich mit der neuen Erkenntnis weiter probieren, wollte nur schon mal antworten.
@Gunnar
Zur Browserkompatibilität sagst du:
*gähn
Bei anderen Sachen bist du oft ein Erbsenzähler 😉 vor dem Herrn aber wenn 10-20% der User hier das Ganze fehlerhaft angezeigt bekommen ist das nur "*gähn"? Seltsame Prioritäten.
Nur mal um zu zeigen wie es bereits mit Samsung Internet und IE (Exoten noch gar nicht berücksichtigt) aussieht und dieser Marktanteil ist schon hoch genug um dem Beachtung zu schenken.
Was die Codezeilen von Murphy betrifft, damit meinte ich gar nicht deren Richtigkeit, sondern dass sie fürs Beispiel, weil auch vieles inhaltsleer, keine Bedeutung haben, womit ich nur "sinnfrei" hinterfragen wollte. Egal, nicht wichtig.
Wichtiger ist aber dann wohl auch für dich, sofern du nicht auch noch FF als Browser ignorieren willst, dies (unterschiedliche Browser, unterschiedliches Verhalten, kein Browser wie gewünscht):
@McMurphy
Gleichzeitig habe ich den Text gekürzt, damit man auch direkt sehen kann, dass der Inhalt zentriert dargestellt wird. Also nichts mit linksbündig.
Tja, dann stimmt wohl irgendwas nicht mit meiner Perspektive, oder deiner? (Und das ist FF, kommt mir also nicht mit Browserproblem.)
MrMurphys Kritik mag harsch klingen, beachte sie dennoch.
Das tue ich immer. Es fällt allerdings schwer, wenn jemand sich ein wenig unfehlbar und besser als andere gibt (kommt zumindest für mich so rüber), sein überragendes Beispiel dann aber letztendlich auch versagt. Ich meine keiner von uns hier hat die absolute unumstößliche Weisheit mit Löffeln gegessen, und so soll jeder von jedem lernen, das geht auch ohne Selbsterhöhung.
Gruss
Henry
Hallo
dann stimmt wohl irgendwas nicht mit meiner Perspektive
Keine Ahnung, was du siehst. Der Inhalt des Flex-Containers ist zentriert.
Du willst offensichtlich etwas anderes: Die drei im Flex-Container enthaltenen Container (Flex-Items) sollen alle gleich breit sein. Das ist sachlich etwas anderes. Dazu sind entsprechende zusätzliche CSS-Anweisungen erforderlich.
Mit justify-content: center; wird der Inhalt des Flex-Containers zentriert, nicht aber gleichzeitig alle enthaltenden Container gleich breit dargestellt.
Bei Flexbox geht es in erster Linie um Leerraumverteilung. Deshalb ist das Verhalten vollkommen korrekt, auch bei deinen Beispielen.
Gruss
MrMurphy
Hallo Henry,
weil egal wo du im Netz suchst, knallt dir immer ein Must-Do entgegen für responsive Bilder das da lautet:
max-width:100%;height:auto;
Flexbox und Grid nehmen dir da schon etwas ab. Und wenn du dann mit anderen Abmessungswünschen dazwischenfunkst, kann das schon schief gehen.
dass ein Bild zb. maximal 70% seiner Originalgröße(nicht seines Elternelements) anzeigt und das Layout nicht zerstört.
Warum soll man ein Bild in 100% der Abmessungen übertragen, wenn man es dann immer(!) verkleinert??
@Gunnar
Zur Browserkompatibilität sagst du:
*gähn
Nein, nicht zur Browserkompatibilität, sondern zu deinem Wunsch, irrelevanten Browsern die neuesten Optionen verpassen zu wollen.
Bei anderen Sachen bist du oft ein Erbsenzähler 😉 vor dem Herrn aber wenn 10-20% der User hier das Ganze fehlerhaft angezeigt bekommen ist das nur "*gähn"? Seltsame Prioritäten.
Es ist wichtig, dass die Seite bedienbar ist.
Nur mal um zu zeigen wie es bereits mit Samsung Internet und IE (Exoten noch gar nicht berücksichtigt) aussieht und dieser Marktanteil ist schon hoch genug um dem Beachtung zu schenken.
Für ganz schmale Browser müsste man vielleicht noch was tun.
Für ein theoretisches Beispiel würde ich allerdings den Aufwand nicht treiben wollen.
Was die Codezeilen von Murphy betrifft, damit meinte ich gar nicht deren Richtigkeit, sondern dass sie fürs Beispiel, weil auch vieles inhaltsleer, keine Bedeutung haben, womit ich nur "sinnfrei" hinterfragen wollte. Egal, nicht wichtig.
Das ist ein Grundgerüst, das MrMurphy für jedes seiner Beispiele verwendet.
Wichtiger ist aber dann wohl auch für dich, sofern du nicht auch noch FF als Browser ignorieren willst, dies (unterschiedliche Browser, unterschiedliches Verhalten, kein Browser wie gewünscht):
aber alle Inhalte sind zugänglich.
Gleichzeitig habe ich den Text gekürzt, damit man auch direkt sehen kann, dass der Inhalt zentriert dargestellt wird. Also nichts mit linksbündig.
Tja, dann stimmt wohl irgendwas nicht mit meiner Perspektive, oder deiner? (Und das ist FF, kommt mir also nicht mit Browserproblem.)
text-align: center vergessen?
MrMurphys Kritik mag harsch klingen, beachte sie dennoch.
sein überragendes Beispiel dann aber letztendlich auch versagt.
Definiere versagen.
Bis demnächst
Matthias
Hallo
Da es offensichtlich einige User überfordert die entscheidenden HTML- und CSS-Angaben zu erkennen, obwohl ich sie extra in meinem Beitrag genannt habe, habe ich das Beispiel entsprechend angepasst. So können sich hoffentlich alle auf das eigentliche Problem konzentrieren.
Gleichzeitig habe ich den Text gekürzt, damit man auch direkt sehen kann, dass der Inhalt zentriert dargestellt wird. Also nichts mit linksbündig.
Gruss
MrMurphy
hallo
Flex hat Einfluss auf die Kinder eines Elements. Du formatierst aber in beiden Fällen
.flex img. Im zweiten Fall ist das Kind des Flexcontainers aber das a-Element, nicht das Bild.
na und?
Die Frage ist doch, warum werden flex-Children so angelegt, als ob auf derene eigene Children keine scaling-Regeln bestehen würden?
Der aktuelle Standard ist auf jeden Fall nicht explicit.
Die Neuerung flex-basis:content verweist ev. darauf, dass das kein Bug ist. Aber auch das ist eher Kaffeesatz lesen. Das demonstrierte Verhalten ist auf jeden Fall nicht verständlich und die Frage legitim.
hallo
hallo
Flex hat Einfluss auf die Kinder eines Elements. Du formatierst aber in beiden Fällen
.flex img. Im zweiten Fall ist das Kind des Flexcontainers aber das a-Element, nicht das Bild.na und?
Die Frage ist doch, warum werden flex-Children so angelegt, als ob auf derene eigene Children keine scaling-Regeln bestehen würden?
Der aktuelle Standard ist auf jeden Fall nicht explicit.
Die Neuerung flex-basis:content verweist ev. darauf, dass das kein Bug ist. Aber auch das ist eher Kaffeesatz lesen. Das demonstrierte Verhalten ist auf jeden Fall nicht verständlich und die Frage legitim.
Also, wir haben ein img, das im ersten Fall 50% max-width des flex-containers hat. Im zweiten Fall jedoch 50% max-width des Flex-child Ankerelements hat.
Wer nun annimmt, dass das a Element flex-shrink erleben sollte (tut es auch, aber eben nicht über den erhofften Bereich), verlangt nach der Inkonsistenz, dass dann das img nicht mehr max 50%-breit relativ zum Anker Element ist.
Das vom Browser gerenderte Verhalten erachte ich deshalb als korrekt.