Beiträge von Gunni

    das „verschwindenlassen“ von containern ist eigentlich nicht der weg um inhalte auf mobile anders anzuzeigen als für desktop.


    normaler weise ändert man bestehende ansicht einfach.


    das mit der Tabelle ist ein Sonderfall, weil sich da die Darstellung komplett ändert. Einmal Tabelle wie gewohnt nebeneinander, einmal Tabelle untereinander.


    Zum Beispiel:


    meine Navi ist auf Mobile ein Block und auf Desktop eine Leiste. Das ist aber die gleiche Navi, lediglich die Anzeige ändert sich und der Hamburger kommt weg. Alles rein css


    Die Das mit der Tabelle ist bissi außergewöhnlich, denn die baut sich komplett um.

    ah :) ok, das verstehe ich :)


    Schade, kann ich wohl nichts dagegen tun.


    Höchstens den "steinigen weg" und aus Fontawesome die verwendeten Icons extrahieren und damit das benötigte css und die woff auf die benötigte Größe reduzieren und über den eigenen Server mit hochziehen oder wie vorgeschlagen auf svg´s umstellen und die direkt einbinden. Hmmm, gefällt mir beides nicht, da schlussendlich aufwändig wenn man "mal eben" ein anders Zeichen verwenden will.


    Ich gehe mal in mich.


    Vielen lieben Dank :)

    Tut mir leid, ich habe keine Lösung, aber bist Du Dir sicher, dass Du Unterforum für .css die richtigen Adressaten einer Frage findest? :)

    Auf Deiner Page zumidnest sieht das so aus:


    was finde ich wenig mit .css zu tun hat finde ich.

    Das passt so, ja. Da du FA per JS reinholst wird das natürlich erst ausgeführt nachdem die Seite schon geladen ist. Sehr schön zu sehen im Netzwerk-Reiter der Dev-Tools. Das sorgt für den leichten ruckler.

    Das ist was ich auch beobachte. Wie gesagt, es ist natürlich nur ein Schönheitsfehler, aber gibt es keine Möglichkeit dem Bowser zu sagen "nimm das javascript und wende es immer an bis dir jemand was anders sagt"?


    Bei css funktionierts ja auch, bzw. macht das der Browser von sich aus. Das läd er einmal in den cache und lässt es dann gut sein.


    Das beruhigt mich sempervivum. :)


    Vielen lieben Dank mal an der Stelle an alle, die hier mitlesen und sich bemühen mein Problem zu verstehen und bestenfalls zu beseitigen. :)

    Basti, er holt sich den Rand mit Transition. Meines Wissens verändert sich das Padding nicht, sondern das sieht nur so aus, weil der Rand immer dunkler wird. Aber ich sehe es mir nochmal an, danke :)

    Ja, die Seite läd schnell. Da hab ich inzwischen auch wirklich viel dafür getan. :) Mi "Zucken" meine ich, dass er wenn man eine weitere Seite aufruft, der Browser die Icons von Fontawesome nachläd, woduch das Menü erst nach links und dann wieder nach rechts ruckt.

    jonas, Ich habe eine Reihe von Dateien, die ich mit Include hole.


    sieht dann zum Beispiel so aus:


    PHP
    1. <footer>
    2. <?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/fussnavi.php'); ?>
    3. <?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php'); ?>
    4. <?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/script.php'); ?>
    5. </footer>

    die Script.php sieht dann so aus


    Code
    1.  <script async src="https://kit.fontawesome.com/5b34446141.js" crossorigin="anonymous"></script>
    2. <script async src="/css/cookieconsent.min.js"></script>
    3. <script async src="/css/cookieeinst.js"></script>
    4. <script async src="/css/highlight.js"></script>
    5. <script async src="/css/cookieoptout.js"></script>
    6. <script async src="https://www.googletagmanager.com/gtag/js?id=UA-29616531-1"></script>
    7. <script async src="/css/anonymiseip.js"></script>


    Ja, ich weiß, man sollte die scripts zu weniger Dateien zusammenfassen, kann ich aber nicht, da ich von java wirklich überhaupt keine Ahnung habe.


    Das mit dem Include mache ich, damit ich nicht auf allen Seiten alles ändern muss, sondern einmal in einer Datei, die dann für alle Seiten gilt.

    Da das über den Apacheserver zusammengebastelt wird, sieht das für den Browser so aus:


    dürfte denke ich aus Sicht des Browsers keinen Unterschied spielen oder?

    Öhm, ich glaube ich verstehe das Problem leider nicht ganz. Aber so oder so, ohne das dahinterstehende css wirds schwer zu antworten.


    Ich weiß daher nicht, was hinter "hideme" steckt, sonst könnte ich zumindest versuchen drüber nachzudenken.


    Die Seite an sich ist doch nett gemacht und responsive ist sie auch. Ich verstehe wie gesagt leider das Problem nicht.


    Wenn es um ein responisve css geht, denn aktuell hast du ja auf den einzelnen Seiten das hier:


    Dann musst Du umdenken.


    Man schreibt eine Seite von klein nach Groß.


    Heißt, du schreibst Dein css zunächst so, dass für die mobile-Ansicht alles exakt so passt wie Du das gerne hättest.


    Dann werden die Änderungen für größere Ansichten geschrieben. Die Regel ist: Der Browser liest von oben nach unten und die letzte Regel über den gleichen Wert gilt.

    Du kannst z.B. so im css oben zunächst die von der Seite genutzte Bildschirmbreite auf 98% setzen und dann weiter unten, wenn die Bildschirme größer werden den Wert verkleinern.


    Du kannst hinsichtlch der Breite so ziemlich alles definieren was es gibt, aber das macht nur Stress, denn ständig kommt irgend ein neues Gerät raus, das dann wieder beachtet werden will. Daher ist meine Empfehlung Dir ein paar Grenzen zu suchen und auf die abzustellen.


    Im "mobile-Bereich" des css machts Du einfach Definitionen wie Du sie schon kennst. Im Bereich der nur für eine bestimmte Größe gelten soll setzt Du einen Media-query und setzt die dann geltenden Definitionen auch in geschweifte Klammern.


    Beispiel:



    Heißt in dem Beispiel:


    in der Mobile-Ansicht: zeige die Tabelle nicht an

    ist der Screen mindestens 650px breit und wenn ein Mobilgerät quer gehalten wird: zeige die Tabelle an, Schriftgröße 1em, platz zwischen den Buchstaben .1em

    ist der Screen mindestens 825px breit und wenn ein Mobilgerät quer gehalten wird: erhöhe den Platz zwischen den Buchstaben auf .2em

    ist der Screen mindestens 1250px breit und wenn ein Mobilgerät quer gehalten wird: erhöhe die Schriftgröße auf 1.1em


    Ergebnis:

    in Mobile sieht man nichts,

    in 650 wird die Tabelle angezeigt, Schriftgröße 1em Letterspacing .1em

    in 825 wird die Tabelle angezeigt, Schriftgöße 1em, Letterscpaing .2 em

    in 1250 wird die Tabelle angezeigt, Schriftgröße 1.1em, Letterspacing .2 em


    Eine Vorgabe die gemacht wird bleibt so lange bestehen, bis sie durch eine andere Vorgabe ersetzt wird.


    Da Du bislang von Groß nach Klein gearbeitet hast musst Du ein wenig umdenken. Ein einfach "zusammenkopieren" deiner bestehenden css kann funktionieren, muss es aber nicht. Schließlich hast Du in den einzelnen css werte für alles gesetzt. Kopierst Du es nun zusammen werden einige überschrieben und damit korrekt sein, andere vermutlich jedoch nicht.


    So, ewig getippt. Ich hoffe, das war auch die Frage um die es ging.

    Danke schon mal für die Tipps :)


    Basti, das mit dem Cache ist ja das, was ich möchte. Wenn der Webseitenbesucher die Seite aufruft, soll er einmal das Script in den Cache laden und danach erkennen, "das habe ich schon, muss ich nicht noch mal laden". Tut es aber nicht. Theoretisch haben sicherlich viele in irgend einer Form Fontawesome im Browser cache, nur leider ist sowohl CDN als auch das Kit geprägt und mit einer Identitätsnummer versehen, zumindest, wenn du "Pro-Nutzer" von Fontawesome bist. Daher greift der Browser leider nicht auf vorhandene Daten zurück, sondern lädt neu.


    Lupus, das wäre die grundsätzliche Entscheidung nicht mehr mit Fontawesome arbeiten zu wollen. Hmm. Hab ich schon mal drüber nachgedacht und es wieder verworfen. Ich denk noch mal drüber nach. Das ist aber eher eine Umgehung als eine Lösung des Problems. ;)

    Hi,


    ich code nur für einen einzigen Webauftritt und der ist überschaubar (53 Seiten)


    Ich hab mir im Lauf der Jahre bissi Wissen um HTML und CSS angeeignet und darauf basiert auch die ganze Seite. Leider kommt man um Java nicht wirklich völlig herum, auch wenn man sich noch so viel Mühe gibt. Datenschutzhinweis und Google-Analytics waren bislang die einzigen Scripte, die gelaufen sind.


    Nun hatte ich es aber satt, dass die Ladezeit für die Seite wegen des aufgeblähten css von Fontawesome so lange ist und das CDN von Fontawesome ist "sunsettet", läuft also quasi aus.


    Daher habe ich Fontawesome nun mittels Script als Kit auf der Seite. Die aktuell präferierte Art von Fontawesome und ja, deutlich schneller als via .css.


    Schönheitsfehler: Da das auf jeder Seite der Fall ist wird es auf jeder Seite neu geladen, wenn diese aufgerufen wird. Der Effekt ist, dass dann das Menü kurz zuckt.


    Ja, klar, ein Schönheitsfehler, aber ich finds wirklich blöd.


    Leider kenne ich mich mit Java so überhauptgarkeinbisschen aus.


    Gibt es eine Möglichkeit, dass man das Script nur einmal laden lässt und danach "weiß der Browser das" und läd bei der nächsten Seite nicht nochmal? Also wie beim css?


    Sorry, vermutlich ne unglaublich blöde Frage die total pillepalle ist. Ich hab auch schon gegoogelt, aber da findet man immer nur, wie man die Seite dazu bekommt das Script nochmal zu laden...


    Danke schonmal :)

    Danke schonmal. :)


    Im Beispiel nicht, aber im Text :)


    Im dritten Listpunkt steht:


    Zitat

    Here is an example: <time itemprop="openingHours" datetime="Tu,Th 16:00-20:00">Tuesdays and Thursdays 4-8pm</time>.


    das habe ich verwendet. Mir ist schon klar, dass ich da keinen beliebigen Text reinschreiben kann und war eigentlich der Meinung, dass datetime ein Datum und ne Uhrzeit verlangt.. aber wenn "schema.org" das so vormacht, dachte ich, dass es stimmten... könnte... :)


    Wie gebe ich denn Öffnungszeiten korrekt an? Also insb. wenn die nicht an allen Tagen gleich sind?


    Ich finde dazu leider herzlich wenig. Vielleicht weißt Du oder jemand anders einen Link dazu?


    Danke :)


    Gunni

    Hi,


    der HTML-Validator meckert mir immer die Öffnungszeiten an.


    Die Meldung vom Validator ist folgende:




    das html sieht so aus:


    Code
    1. <time itemprop="openingHours" datetime="Mo,Th,We,Th,Fr 08:00-12:00">Öffnungszeiten: Montag bis Freitag von 08:00 bis 12:00 Uhr</time> und
    2. <time itemprop="openingHours" datetime="Mo,Th,We,Th 13:00-16:30">Montag bis Donnerstag von 13:00 bis 16:30</time>


    Ich hab selbstverständlich schon ziemlich viel gegooglet, da mir der Fehler schon die Ganze Zeit kam und war eigentlich der Meinung, dass ich nun mit datetime richtig liege... alleine der Validator meckert noch immer.


    Ich habe es denke ich aber genau so gemahct wie hier http://schema.org/openingHours beschrieben....


    Kann mir bitte jemand sagen wo der Fehler ist? :)


    Vielen lieben Dank :)


    Gruß


    Gunni

    Da ich selbst leider nicht halb so viel Ahnung hätte wie ich gerne hätte und selbst wenn ich diese im gewünschten Umfang hätte, ich nicht halb so viel Wissen würde wie Mr.Murphy oder JR traue ich mich nicht Vorschläge zum Code zu machen, aber einen Rat hätte ich. Es ist blöd, dass man keine "Fehlermeldungen" bekommt weil etwas nicht funktioniert, aber ich pers. finde die Helferlein die es gibt ganz gut und hilfreich.


    Z.b. Mal den Code validieren sowohl html als auch css.


    Dann z.B. Beim Firefox die Entwicklerwerkezuge vor allem auch wenn man sehen will welche Stilelemente sich auf bestimmte Abschnitte wirklich auswirken.


    Nichts desto trotz bin ich ständig an Punkten, wo ich nicht weiter komme.... leider, aber die validatoren und Entwicklerwerzeuge helfen viel, mir zumindest. :)

    Hi :)


    Danke für die Antwort. :)


    Ich muss da mal in mich gehen... Platz gibts freilich genug. :) Mir ist nur nichts eingefallen, wie man das "hübsch" gestalten kann... bzw. wenn ich jetzt noch Buttons mache wird das mit dem dreispaltigen Layout bissi eng bzw. sind die Bezeichnungen ja recht unterschiedlich lang... da ist dann mal alles in einer Zeile, mal wird nur ein Button umgebrochen, dann wieder beide usw. Oder, aber müsste ich erst wieder lange fummeln befürchte ich, man setzt die Buttons standardmäßig in jeder Spalte nach rechts, also immer. Aber dann müsste es, damits was aussieht auch so sein, dass die Buttons wenn der Text zweizeilig wird dann auch auf beide Zeilen verteilt werden.Geht bestimmt alles, aber da werd ich sicher wahnsinnig drüber...


    Mit den Hintergrundbildern wollt ich mirs halt einfach machen und z.B. Die Größe übers css regeln und soweit ich weiß kann ich nur hintergrundbilder via css einbinden und leider keine Bilder. Wobei, bissi ums Eck gedacht müsste es mit object oder content auch gehen oder?


    Ich habe die Icons für Den Download jetzt 16x16px und mit opacity bei hoover ausgestattet sowie das margin außenrum auf 0.5em. Machts zumindest bisssi leichter.


    Vielleicht mache ich doch noch buttons.. aber wie die dann rechts anpappen? Muss ich sehen. :)


    Danke erstmal


    Gruß:)


    Gunni

    Jetzt hab ich doch ein Problem, das, so befürchte ich in Gänze mein Unvermögen und mein mangelndes Verständnis offenbart.


    Ich hab die Spalten wie oben beschrieben gemacht. In den Spalten möchte ich gerne downloads zu Verfügung stellen. Da das sowohl als pdf als auch in office-Formaten der Fall sein soll hab ich mir kleine Icons gebastelt, die hinter dem Text erscheinen sollen und dann als Link funktionieren sollen.


    Blöder Weise kommen die nicht hinter dem Text, sondern darunter. Ich habe daher die Listpunkte auch als Flex-box definiert. Dann kommen die Icons hinter dem Text. Wenn allerdings der Text umbricht rutschen die Icons an den rechten Rand... und ich bekomme sie "ums verrecken" nicht dazu hinter dem Text zu bleiben.


    Hier mal ein Bild:

    Unbenannt.JPG


    es tut mir wirklich leid, dass ich schon wieder komme und um Hilfe bitte. Ich hab auch an zig Stellen gelesen und "alles mögliche" ausprobiert... aber ich schaffe es einfach nicht, die links hinter dem Text zu lassen... entweder sind sie "drunter" oder verschieben sich nach rechts wenn die Zeile umbricht.


    hier mal der Code dazu:


    html:



    und css




    inzwischen hab ich so viel rumprobiert und gemacht, dass ich irgendwie überhaupt nicht mehr durchblicke und ich verstehe leider überhaupt nicht, warum die Links nach rechts wandern... aber ich hab schon nicht verstanden, warum sie unterhalb des Textes angezeigt werden, wenn ich den li-Elementen nicht display:flex mitgebe....


    sorry. Tut mir wirklich leid, dass ich schon wieder darum bitte mir Zeit zu opfern, aber ich stehe wirklich auf dem Schlauch und komme und komme nicht zum Ergebnis.


    Danke schon mal für die Unterstützung :)


    Gruß


    Gunni


    p.s. Warum fügt er eigentlich im Code immer ne leerzeile zwischen den Zeilen ein? Ich bearbeite dann immer nach damits leichter lesbar wird...

    SUPER! :)


    Mann, ich da wäre ich nie drauf gekommen, dass der ie "main" nicht kennt... argl. Ich hab mir nen Wolf gesucht nach Besonderheiten hinsichtlich der css-Befehle... Stundenlang und völlig sinnlos.


    Ich hab in dem Sinn kein "Problem" mit Flexbox. Ich hab nur die Spalten optisch durch Striche getrennt, die dann natürlich wenn eines nach unten gerutscht ist "sinnlos" wurden und nicht so schön aussahen.


    daher nun



    Wobei zumindest Optisch die mittlere Spalte irgendwie schmäler aussieht als die links und rechts...


    Aber wie gesagt, "Problem" hab ich keines, nur durch die Striche Seitlich musste ich nen Zwischenschritt einfügen für "zwei nebeneinander", also bei Bildschirm zwischen 546 und 801 px


    Vielen vielen lieben Dank für Deine Hilfe! :)


    Gruß


    Gunni