hover bei Touch-Devices

  • @ JR:


    Ich habe nicht gesagt, dass ich das für falsch halte. Ganz im Gegenteil: Ich bin begeistert, dass das so einfach funktioniert. Nur wollte ich wissen, wieso das ohne Deklaration von ul und li funktioniert.


    Das habe ich auch nicht so verstanden. Wollte es nur sicherheitshalber erwähnen.


    Es funktioniert ohne ul und li, weil es eben keine Regel gibt, die besagt, dass eine Nav immer mit einer ul ausgezeichnet werden muss. Du könntest genauso gut einen p-Tag statt dem Div nutzen und dort die Links reinpacken oder so. Das wäre dann zwar alles andere als valides bzw. sauberes HTML, aber es würde theoretisch gehen.


    HTML-Elemente haben eigentlich so gut wie gar nichts mit der Darstellung am Hut. Das passiert alles über CSS. Daher gibt es halt auch tausende Möglichkeiten, etwas mit HTML umzusetzen, da man mit CSS das Verhalten der Elemente in den meisten Fällen relativ einfach verändern kann und schon sieht deine Navigation bei unterschiedlichem HTML letztendlich trotzdem genau gleich aus.


    HTML ist nur dafür da, damit z.B. Google weiß, was es da vor sich hat. Ein Artikel, ein Bild, eine Überschrift usw..

  • Kann ich das so verstehen: Wenn ich bei einer nav ul und li nicht gesondert stylen möchte, dann ist es völlig egal, von welcher Art von Tag die Links eingeschlossen werden. Ich muss dann nur noch mit dem umschließenden Div , p-Tag oder was auch immer umschließt - alle eingeschlossenen Links global (bezogen auf das umschließende Tag) gemeinsam stylen. Richtig? Gilt das allgemein oder nur für die Flexbox?:?:

  • Das gilt allgemein.


    Es ist mehr oder weniger egal, ja. Du musst natürlich, da alle Elemente bestimmte Styles vom Browser mitbekommen, das Ganze ein wenig anpassen. Nicht jeder Tag wird gleich vom Browser behandelt. Trotzdem: Mit ein wenig CSS kannst du das alles gleich gestalten, egal welcher Tag.

  • Danke frür die Rückmeldung. Ab heute habe ich Schulferien. Jetzt kann ich mich erst mal richtig in die Problematik einlesen.

    Unabhängig davon: Falls Du etwas Zeit und Lust hast, ich zitiere mich mal selbst:

    Ich bin mir aber nicht sicher, ob ich die themenbezogene Dekoration (Perforation des Schmalfilms) "flexboxgerecht" implementiert habe.

    Zumindest funktioniert es rechts und links (gekacheltes Hintergrundbild in 2 zusätzlichen Divs), aber unten habe ich das einfach nicht hinbekommen, dass die Proportionen bei flexiblen viewports stimmen. Deswegen vorerst nur eine einfache Border.

    Vielleicht hat jemand eine Idee, wie man das besser machen könnte. Das Perforationsbild liegt im Image-Ordner. ( test.schmalfilm-überspielen.de falls ihr die "Baustelle" mal runter laden wollt) Oder vielleicht gibt es eine noch bessere (themenbezogene) Style-Idee.


    Evtl. was ganz ausgefallenes. Ist ja schließlich keine kommerzielle Site.

    Das gilt übrigens für Jeden im Forum, der ne gute Idee hat.:)


    Ich muss das mit dem Flex-container und den darin eigeschlossenen Flex-items noch mal genau nachlesen., insbesondere deren Interaktionen und Verhalten bei den verschiedenen Media-Queries. Möglicherweise liegt dort der Fehler in der "Baustelle".

    Und vorallem: Wie baue ich ein Fallback für die Flexbox?


    Übrigens: Wie ist Deine Meinung zu meiner Idee mit der doppelten Nav (siehe Beitrag #18). Sinnvoll:) oder Schnapsidee?:cursing:


    Gruß Tommy

  • Übrigens: Wie ist Deine Meinung zu meiner Idee mit der doppelten Nav (siehe Beitrag #18). Sinnvoll:) oder Schnapsidee?:cursing:


    Kommt auf die Umsetzung an. Eine komplette Schnapsidee ist das sicherlich nicht. Es ist gar nicht so unüblich, im Footer auch nochmal eine Navigation zu haben.


    Für mobile Geräte ist aber sicher ein "nach oben"-Button besser.


    Auf den Rest gehe ich vielleicht morgen oder so mal ein...

  • Danke, JR Cologne.


    Durch die Ferien hatte ich nun endlich mal Zeit, mich ernsthaft und intensiv mit aktuellem HTML und CSS zu beschäftigen.:) Die oben beschriebenen Probleme konnte ich dadurch fast alle selbst lösen.:):) Danke noch mal an MrMurphy, durch ihn habe ich mich erst einmal in die Flexbox eingearbeitet. :thumbup:Hab mal das Ergebnis hochgeladen. Das einzige Problem, was ich noch nicht lösen konnte, ist das Fallback für ältere Browser. :(Es wäre schön, wenn ein Profi ein paar Hinweise geben könnte, wie das speziell bei dieser Seite (test.schmalfilm-überspielen.de) am wirksamsten umzusetzten geht. Bitte nicht wundern über die Anmerkungen im Quellcode, das ist eine Übungsseite.


    Gruß Tommy

  • Ach, sorry. Habe das hier nicht mehr im Blick gehabt.


    Beim Thema Fallback wäre halt auch die Frage, was du haben möchtest:

    - Ein Hinweis für die Nutzer von alten Browsern (hilft dem Nutzer meist nicht so viel weiter),

    - Ein Hinweis für die Nutzer von alten Browsern inkl. Verweis auf eine Seite, die extra für sehr alte Browser erstellt würde (deutlicher Mehraufwand)

    - Fallback im Sinne davon, dass bestimmte Features bei alten Browsern einfach etwas anders umgesetzt werden (hat seine Grenze und ist manchmal etwas "hacky")

  • Hi JR Cologne,


    Nr.2 erzeugt double content, (außer nofollow, noindex-will ich aber nicht) also nicht praktikabel.


    Mir schwebt eine Lösung nach Nr.3 vor, beispielweise

    -Sternchen-Hack (z.B. * { padding: 0; margin: 0; } ), was aber nicht bei Flexbox hilft, oder

    -@ import-styles , oder

    -hasLayout oder die

    - if It Varianten


    Ich denke z.B. an Conditional Comments für IE unter 10 und eine spezielle css für IE unter 10.


    Etwa so: HTML

    1.<!-- Kommentar: CSS für alle Browser ausser Internet Explorer unter 10 -->

    2. <link rel="stylesheet" type="text/css" href="test.schmalfilm-überspielen.de/main.css">



    3. <!-- Kommentar: CSS für Internet Explorer unter10-->

    4. <!--[if IE]>

    5. <link rel="stylesheet" type="text/css" href="test.schmalfilm-überspielen.de/ie_style.css"><![endif]-->


    Zeile 3 bis 5 müsste Zeile 2 für IE unter 10 überschreiben, da Conditional Comments nur bis maximal IE 9 beachtet werden, so meine ersten Überlegungen. Natürlich müsste der jetzt noch vorhandene Inline-style voher noch in die main.css verlagert werden.


    Ist das eine praktikable Möglichkeit?


    Eine andere theoretische Idee wäre - keine Ahnung - ob das funktioniert, habe ich noch nie gemacht:


    Ich generiere eine Klasse "old", die ich dann ins css bei Bedarf einbaue. Das erspart mir eine zweite CSS.


    <!--[if lt IE 7]> <html class="old"> <![endif]-->


    <!--[if IE 7]> <html class="old"> <![endif]-->


    <!--[if IE 8]> <html class="old"> <![endif]-->


    <!--[if gt IE 9]><!--> <html class=""> <!--<![endif]-->



    Diese habe ich gleich auf die oberste Ebene (html) bezogen, in der Hoffnung, diese Klasse dann auch tiefer im CSS chirugisch präzise einsetzten zu können.


    Beispiel:


    HTML:


    <footer class="pagefooter">


    <nav>


    <div>


    <a href="">#1</a>


    <a href="">#2</a>


    </div>


    </nav>


    </footer>



    CSS:



    .pagefooter { aktuelle Deklaration }


    .old, pagefooter { alte Deklaration }



    .pagefooter nav { aktuelle Deklaration }


    .old, pagefooter nav { alte Deklaration }



    .pagefooter nav div { aktuelle Deklaration }


    .old, pagefooter nav div { alte Deklaration }



    .pagefooter nav a { aktuelle Deklaration }


    .old, pagefooter nav a { alte Deklaration }



    .pagefooter nav div:nth-child(1n+2) { aktuelle Deklaration }


    .old, pagefooter nav div:nth-child(1n+2) { alte Deklaration }





    Da ab IE10 keine Klasse "old" erzeugt wird, müsste doch (so meine Idee) ab IE10 nur der "neue Style" zur Anwendung kommen,


    und bis IE9 der old-Style.


    Oder ist das falsch gedacht?


    Frage: Funktioniert das? Ist der Synthax richtig?


    Könnte ich auch diese Kurzform verwenden:

    <!--[IF IE]><html class="old"> <![endif]-->


    Gibt es vielleicht so eine Art media querie für Internetbrowser? (Hab noch nie was von browser queries gelesen)


    Vielleicht gibt es noch eine andere, praktikable Lösung.


    Bin dankbar für jeden für DIESE Seite durchführbare Lösung. Hauptsächlich geht es mir um ein Fallback für die Flexbox.


    Bitte nicht wieder "Rentner-User-Schelte". :(

    Warum ich diese Fallbacks einbauen möchte, habe ich weiter oben beschrieben.


    Danke für Eure Lösungen.


    Gruß Tommy

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!