Beiträge von Elly

    Das führt nur dazu, dass Deppen, wie ich, den armen Sempervivum belästigen, damit er sich nicht langweilt.


    Ich verspreche Dir, dass ich mich in naher Zeit endlich einmal mit scss befasse und lerne das Zeug zu compilieren obwohl ich da nicht ganz begreife, was das bringen soll.... außer, dass es wahrscheinlich schwieriger ist einen compilierten Code abzuändern.

    Haha, das hast du toll geschrieben. Zu diesen Deppen gehör ich auch dazu, aber nach ein bisschen Pause bin ich auch wieder zurück. ;-)

    Hab mir mal den Thread durchgelesen, vl kann ich zum Thema SCSS was Vernünftiges beitragen.

    Man findet ja viele Tutorials, wie man das richtig kompiliert und watchen kann etc. Tut auch alles seinen Job, nur meistens muss man da selbst Hand anlegen. Ich hab herausgefunden, dass das mit Visual Studio Code und einer entsprechenden Erweiterung doch wie am Schnürchen läuft - praktisch von selbst. Watchen kann man dort auch einstellen. Dh ändern musst du dan nur deine SCSS-Datei und sie wird immer automatisch in CSS kompiliert.

    Halli hallo,


    ich hatte ein Problem, das ich zwar schon gelöst habe, aber nicht ganz verstehe.

    Hier mal die Seite, von der ich rede. Und einen Screenshot gibt's auch noch dazu.


    Ich habe in meiner main.css festgelegt, dass für alles * Grau als Schriftfarbe gilt (--var-nf-grey).

    In der Galerie habe ich Fancybox 3 drin, bei der man dann die Icons und den Bildzähler nicht richtig sieht, weil der dann diese Farbe übernimmt.

    Ich hab's mir dann einfach gemacht - anstatt rauszufinden, welche Klassen der Fancybox ich genau ansprechen muss, habe ich in der fancybox_adds.css für alles Schriftfarbe weiß eingestellt.

    Das hat zur Folge, dass der Menübutton (der bei kleineren Browsergrößen erscheint), auch weiß wurde. Interessanterweise aber nur der, beim Text hat sich nichts verändert.

    Dieser Button ist in der nav.css mit nav .icon angegeben. Ich dachte, ok, dann mach ich ein internes Stylesheet extra für den und gib ihm nochmal die graue Farbe. Da dieses Stylesheet ja dann als letztes eingelesen wird, da unter den anderen .css-Dateien eingebunden, müsste das ja klappen. Wie ihr im Screenshot aber sehen könnt, wird dieser Klasse aber die Farbe wieder gestrichen.

    Es funktioniert nur, wenn ich das span mit der ID oder der Klasse .fa ganz direkt anspreche (siehe Screenshot in Rot).


    Offensichtlich wird das * von der Fancybox (da nach main.css drin) an das span weitervererbt und nicht das, was ich für nav .icon deklariert habe.
    Warum?

    link ist nicht dazu gedacht, Seiten oder Videos etc zu verlinken, sondern um CSS einzubinden.

    Für Weblinks brauchst du a. Schau mal hier.

    Wenn du ein Video nur verlinken möchtest, kannst du das ebenfalls so machen. Ansonsten kann man Videos auch direkt einbinden, das geht dann mit video.

    So, da bin ich wieder. Hab mir nun auch ein paar Youtube-Tutorials angesehen - natürlich keine alten, sondern aus den letzten 1-2 Jahren. Die sind auch total einfach und verständlich, das könnt ich glatt selber.

    Was ich aber nicht verstehe - eben weil ich's einfach nicht besser weiß - wenn die so einfach sind, gibt's da Nachteile in Sachen Sicherheit oder so? Es gibt ja nicht umsonst Formulare, wo jede Menge komplexer Code dahintersteckt.

    Und vielleicht kann mir auch jmd sagen, was an meinem alten Formular falsch ist. Einfach nur, weil das nicht PHP7 ist oder gibt's da noch andere Mängel? Mal abgesehen davon, dass da kein Spamschutz drin war.


    Dann hab ich noch eine allgemeine Formular-Frage, die eher HTML betrifft. Man sollte ja zwecks Barrierefreiheit immer einen Label-Tag angeben. Ich will aber kein Label dastehen haben, finde es nur mit Platzhalter einfach auch schöner. Wenn ich das über CSS mit display:none formatiere, ist es ja im HTML vorhanden. Reicht das für Screenreader öÄ aus oder muss das Label tatsächlich sichtbar vorhanden sein? Man sieht es ja wirklich oft nur mit Platzhaltern.


    Danke.

    Zeit ist immer die gleiche, Ort auch. Von daher erübrigen sich zusätzliche Infos. Event in dem Sinn ist auch das falsche Wort dafür.


    Es ist eh fertig online jetzt, inkl. PDF. Da hat sich die DL ganz gut angeboten.

    Mit mehr Infos bräuchte man wohl eine Tabelle. Aber da sich die klassische table nicht responsive gestalten lässt, wäre das dann wohl ein Grid.

    Mit mehreren Infos wäre es mMn eh schwierig, das optisch ansprechend responsive zu gestalten. Man könnte dann mit display none und einer zweiten Version, die dann erscheint, arbeiten.

    Meinst du mich oder den Shop? Wobei, eine dl würde für uns beide passen.


    Ich hab jetzt zum Probieren mal ein bisschen mit table und grid gespielt.

    Optisch stell ich mir das so vor wie's jetzt aussieht und dann muss ich das noch responsive machen. Das geht ja bei beiden mit Media Queries gut, es müssen ja auch die Zellen dann umformatiert werden. Das Datum wird dann hellgrün und der Inhalt weiß. Als Tabellenüberschrift kommt dann nur noch Programm.

    Table und Grid.


    Die DIVs kann man ja dann immer noch in eine DL ändern, dafür würde sich dann wohl das Grid besser eignen. Die table-rows sind wieder zum Formatieren (even, odd) sehr praktisch.

    Ah, das ist interessant! Wieder was gelernt. Wusste nicht, dass das so auch gehen könnte. Bis jetzt kenn ich Flexbox mit unterschiedlichen Elementen. Aber LI ist ja ein Element, wobei hier wohl das :before als eigenes Element angesehen wird.

    Man lernt eben nur durch Ausprobieren und Fragen...und die Fuchsereien. ;-)


    Noch was.

    Dass die ganze Liste verschwindet, liegt tatsächlich an der Nav. Offensichtlich, nur hab ich das gestern im müden Zustand nicht mehr gerafft.

    Das Komische daran ist aber, dass in der nav.css wirlich alle ul li als nav ul li definiert sind und in der main.css .content ul li. Dennoch tut der Browser so als wäre da nur ein allgemeines ul livorhanden, das für alle gilt.

    Das ist mir schon aufgefallen, als ich die Sticky-Variante der Navigation erstellt hab - ich hab überall erstmal zusätzlich nav.sticky hinzufügen müssen. Obwohl ja, wenn dann durch JS im HTML class="sticky" hinzugefügt wurde, es ja immer noch eine nav ist. Meiner Logik nach müsste doch ein CSS-Style, der für NAV definiert ist, auch für alle seine Unterklassen (nämlich nav.sticky) zutreffen, wenn in .sticky nichts anderes definiert wurde.

    Warum?

    nav ul sind ja alle UL, die sich innerhal von NAV befinden. nav>ul wären alle UL, die NAV als direktes Elternelement haben.


    Nachtrag: Ein einziges ul in der nav.css hatte kein nav ul

    Code
    1. .show + a, nav ul{
    2. display: none;
    3. }



    Die Konsole behautpet auch, ich hätte auf Zeile 182 in der main.css folgendes stehen:


    Das stimmt aber überhaupt nicht. Tatsächlich hab ich hier nur

    Code
    1. .content li {
    2. display:flex;
    3. gap:1rem;
    4. margin-left:3rem;
    5. }


    Den Rest hier habe ich in der .card stehen und meine Liste steht ja nicht einmal innerhalb einer Card.


    Warum behauptet der Browser dann so komische Sachen?

    Wenn der Text nicht in einem DIV stehen soll, dann vl in einem Article?


    Ich war eben bis jetzt immer der Ansicht, Box und Grid geht nur mit Divs. Dass dem nicht so ist, hab ich erst gestern gecheckt (siehe Masonry). Dh UL kann eine Flexbox sein. Aber dann bräuchte man immer noch 2 Sachen. Die LI und die Punkte extra.

    Darf ich mich hier mal fragens einklinken?

    Früher, vor responsive Webdesign, hat man ja mit Tabellen gelayoutet und daher Tabellen für alles Mögliche und Unmögliche verwendet.

    Heute muss alles semantisch korrekt ausgezeichnet sein.


    Eine Tabelle enthält also tatsächlich njr Tabellendaten. Was SWSlate hier hat, ist in meinen Augen schon eine Tabelle im klassischen Sinne. Ich würde das sonst auch zB in Excel oder schlimmstenfalls einer Word-Tabelle darstellen. Daher finde ich HTML table hier durchaus angemessen.


    Meine Frage nun. Es gibt ja auch noch display:table oder die Möglichkeit mit einem Grid. Wenn man jetzt zB (wie ich später) eine Tabelle erstellen will, in der ein Datum und ein Event steht, wäre das ja im Grunde auch eine table. Aber angesichts des RWD würde ich da dann ws ein Grid wählen, da sonst Datum und Event immer nebeneinander stünden und sich das dann auf Handys nicht mehr ausgeht.


    Bin ich da auf dem richtigen Weg?

    Mir ist später noch eingefallen, dass das womöglich an der Navigation liegt. Da werd ich mal später mit einer Klasse nachhelfen.



    Was meintest du dann? Solang ich nur ein einfaches DIV hab (content), brauch ich doch eig weder eine Flexbox noch ein Grid. Mein DIV ist daher ein normales Blockelement. Das sollte für einen Absatz und eine Liste doch eigentlich reichen.

    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