Beiträge von Elly

    Der Text soll natürlich nicht verschwinden. Das float richtet das Icon nur schön links aus, was mit margin hier nicht geht, weil sonst die zweizeiligen Items nicht schön ausgerichtet sind.

    Mit Grid meinst du Icon und Text in 2 getrennte DIVs packen? Das wäre ja semantisch nicht passend.

    Normalerweise sollte das eine Liste bleiben, aber halt nix verschwinden. Am float liegt es aber wohl doch nicht, denn auch wenn ichs rausnehm, verschwindet die ganze Liste.

    Mann, was würd ich ohne dich tun!

    In den Docs war ich sogar schon. Aber dass ich die font-weight extra angeben muss, hab ich nicht gerafft. Nachdem das ja beim Einbinden über i auch nicht der Fall ist.

    Danke!


    Und wieder dasselbe Spiel: Eine Lösung produziert ein neues Problem.

    Wohl durch das float:left ist es jetzt so, dass das ganze nicht mehr responsive ist. Ein clearfix kann ich ja an eine Pseudoklasse nicht dranhängen? Und ohne float geht's nicht, weil dann die zweizeiligen Items nicht schön eine Linie bilden.


    *grübel*

    Ach, das ist ja interessant! Was heute nicht doch schon alles geht. Ich hab eben auch nur gefunden, dass Firefox Nightly das kann - und wer hat den schon als Otto Normalverbraucher.


    Erinnerst du dich an das Grid, das du mir anfangs dafür vorgestellt hast? Das konnte das ja auch nicht. Das hatten wir damals thematisiert und dann ist das Stichwort Masonry gefallen und so bin ich beim JS gelandet. Was du da jetzt zeigst mit dem box und dem wide drinnen, das ist ja noch cooler!

    Mir war bis jetzt auch neu, dass man Grids eig auf alles anwenden kann, also auch UL, nicht nur DIV. Jetzt wird mir auch klar, warum diese Animations-Tutorials-Seite das ganze Masonry JS in Listen verpackt hatte... Aber gut, dafür hab ich einiges dazugelernt zum Thema JS. Nichts ist umsonst.


    So, jetzt mal dazu.

    Das klingt erstmal ziemlich kompliziert. Es ist schon nachvollziehbar, letzten Endes auch logisch. Aber dass es so umständlich gehen muss, ist schon doof. Tatsächlich ist das ganze Masonry JS ja schon eine sehr ausgeklügelte Sache, es sollte dafür echt auch was eingebaut sein oder eine Anleitung in den FAQ geschrieben stehen.

    Vielen Dank! Es funktioniert wunderbar!


    Mir kam es übrigens beim Testen immer so vor als gingen Prozente immer nur auf 1 Kommastelle.



    Hier nochmal eine Spielerei: https://www.w3schools.com/cssr…id-auto-flow&preval=dense

    Das sieht jetzt für mich so aus als müssten die Bilder alle dasselbe Format oder entsprechend proportional sein. Also zB alle 4:3 und die Panoramabilder dann 8:3 plus die Gap dazu, damit sich dann alles schön ausgeht, denn sonst würden sie ja verzerrt werden.

    Im Masonry JS sind die Panoramabilder zwar klein (nämlich gleich breit wie die normalen), aber dafür können alle Bilder unterschiedliche Formate haben.

    Seh ich das richtig so?

    Hallo,


    ich schon wieder mit einem neuen Problem. Diesmal was Kleineres.

    Ich versuche gerade, ein Font Awesome Icon als list-style-type zu verwenden mit ::before wie hier beschrieben.

    Diese Seite verwendet als font "Font Awesome 5 Free", ein anderes Tutorial nimmt "FontAwesome". Beides funktioniert bei mir nicht.

    Wie finde ich denn heraus, wie ich die Font benennen muss? In der all.css finde ich dazu nichts.

    Das Icon zig mal einzeln manuell einbinden find ich nicht so elegant. Ich hab's eben mal zum Schauen eingefügt.


    Link zur Seite

    Habt ihr eine Idee, wie man das Raster richtig schön responsive macht?

    Das Komische ist nämlich, wenn ich da Prozent angebe, passt das zwar erstmal, sobald ich aber das Browserfenster verkleiner, kann sein, dass dann statt 4 nur noch 3 Bilder nebeneinanderpassen, obwohl es eig noch passen sollte. Da muss ich ein paar Pixel abziehen, was dann später passt, aber erstmal diese paar Pixel fehlen und somit am rechten Rand nicht schön in einer Linie mit dem obigen Header, Menü etc. ist.




    Mit mehr Breakpoints sieht das besser aus.


    Warum ich da erstmal 8px abziehen muss, erschließt sich mir nicht ganz. Meine gaps sind nämlich 10px breit und die Bilder haben auch keine border. Die 960px sind mein Wrapper.


    Man kann das zwar durchaus so lassen, aber ich dachte, es gibt vl eine schlauere Lösung.

    Aaaalso, nun nochmal dazu.


    Ist ja interessant, dass das bei Sempervivum geklappt hat. Scheint ja mein Code zu sein. Ich lade meine Seiten meistens komplett neu, da da öfter mal was aus dem Cache geladen wird und dann nicht aktualisiert ist. Und beim URL einbinden hatte ich sicher auch keinen Drehen drin. Ich kann mir vorstellen, dass ich aber mit dem SVG-Code (nicht URL) zu viel rumgewurschtelt habe. Ganz sicher hab ich schon mal die viewBox nicht geändert, sondern nur den data-Teil.


    Das mit dem %23 muss mal auch erstmal raffen. Der mag tatsächlich kein #. Aus URLs mit Leerzeichen kennt man ja %20, aber dass das so und nur so und nicht anders geht...


    Das ist, was ich vorhatte:

    Code
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M97.138,225.919c0-8.095,3.085-16.186,9.262-22.365L300.687,9.269c12.359-12.359,32.396-12.359,44.75,0 c12.354,12.354,12.354,32.389,0,44.748L173.528,225.92l171.914,171.909c12.354,12.354,12.354,32.391,0,44.744 c-12.354,12.365-32.392,12.365-44.75,0L106.404,248.292C100.229,242.115,97.138,234.018,97.138,225.919z");

    Da habe ich aber nur Data geändert und nicht die viewBox.


    Was hat Sempervivum denn da noch großartig getan? Mit dem Code hier wird mir jedenfalls nichts angezeigt. Auch in Schwarz nicht, denn dazu muss ich ja nur %23000 ändern.


    Was Mr Murphy und Basti gemacht haben, funktioniert bei mir beides. Ob das nun an der viewBox liegt oder an noch was Zusätzlichem, lass ich mal offen.


    Eine Frage hätte ich nun noch. Warum important? Ohne geht's auch. Ich lade das CSS ja nach dem Bootstrap, daher wird das ja eh überschrieben.


    Danke jedenfalls, es klappt jetzt!

    Schau an!

    Allerdings, da wäre ich im Leben nicht draufgekommen. Es gibt so einiges das muss man einfach wissen.


    Das mit der Schrift, ich Trottel hab tatsächlich einen anderen Fonteintrag übersehen und am PC war die andere Schrift natürlich installiert. Da sie auf den ersten Blick auch recht ähnlich sind, ist mir das zuerst nicht aufgefallen. Aber da weiß man zumindest, wo man suchen muss. Deswegen hab ich den Absatz im Post auch wieder rausgelöscht.

    Es fuchst mich mal wieder...


    Ich hab zwei quasi identische Masonrys auf 2 verschiedenen Webseiten.

    Bei der einen, die ich zum Testen verwendet hab, passt alles. Bei der neuen sieht man beim grid-item die graue Hintergrundfarbe (die ist auch nur zum Testen da). Das bewirkt dann, dass das Overlay um einen Bruchteil unter das Bild hinausragt, das stört natürlich.

    Ich dachte zuerst, es liegt an der line-height. Die ist bei * auf 1 gestellt. Wenn ich die auf 0.5 stelle, ist der Hintergrund weg. Ich kann beim grid-item nicht die line-height verkleinern, da man anscheinend den bei * eingestellten Wert nicht unterschreiten kann. Es nützt auch nichts, in der CSS für die Galerie, die ja später eingebunden wird, das neu zu definieren, der Wert wird nicht überschrieben.

    Auf meiner anderen Seite habe ich allerdings auch eine line-height drin (von 1.3 sogar) und der Hintergrund ist trotzdem nicht sichtbar.


    Das Overlay ist ja so groß wie das grid-item. Das grid-item ist aber größer als das darin enthaltene Bild. Wenn's nicht die line-height ist, was dann? Padding ist es auch keins...


    Weiß da einer einen Rat?


    Hier ohne Hintergrund

    Hier mit Hintergrund

    Das hab ich jetzt tatsächlich auch gefunden. Wenn man weiß, wonach man suchen muss...dass man clearen muss.

    Ich hab das clearfix tatsächlich auch schon mal verwendet, bei der Galerie glaub ich.


    Im Grunde ist es jetzt egal, ob ich den Code zur Card füge oder als eigene Klasse mache. Letztere kann man halt dann da einsetzen, wo man sie grad braucht. Kann ja öfter sein.


    Und mit P geht das deswegen nicht, weil der auch gefloatet ist? Denn P wäre ja nach dem IMG. Klar, wenn ich mir dieses optische Beispiel auf der Seite anschau, muss es das umgebende Element sein und nicht das daneben.

    Unsere Texte werden tatsächlich so lang nicht werden, das ist es ja. Und das Bild so schmal zu machen schaut dann auch wieder nicht gut aus. Dann eben doch ein br am Ende. Hab nur überlegt, ob das mit dem p nicht auch gehen müsste?

    Ah, danke! Dass man da immer clearen muss danach, hab ich tatsächlich nicht gewusst. Du kennst ja meine anderen Cards, da hatte ich das Problem nicht. Aber ich glaub, da hab ich auch nicht gefloatet, wenn ich mich recht erinner.


    Das mit den child-Pseudoelementen kenn ich, danke.

    Du meinst, ich schmeiß mit br-Elementen um mich? Ich hab da eig nur ein Bild und einen Absatz und beim ersten einen Link drin. In der Card, mein ich. Die Zig BRs unterhalb kommen natürlich wieder weg. ;)

    Ich überleg grad, wem ich das clear dann zuweisen muss. mit img after arbeiten? oder card after?