Support » Allgemeine Fragen » Kompatibilität verschiedener Browser

  • Gelöst trommelmops

    (@trommelmops)


    Hallo liebe Forengemeinde,

    ich bin neu im Bereich der Worpressnutzer und Anwender. In meinem Verein betreue
    ich nun unsere Präsenz und musste mir WordPress selbst beibringen. Ich übernahm quasi die Arbeit an einer bereits existierenden Seite. Ich musste von null auf 100 durchstarten
    und dem verstaubten Image mal mein Gesicht aufzwingen.
    Soweit glaube ich zu verstehen wie ich was zu tun habe. Ich arbeite vorwiegend mit dem visuellen Editor und bin auch in der Lage ein Backup der Seite über den FTP Zugang zu
    machen. Inklusive Datenbank. Dazu nutze ich das Plugin WordPress Backup.
    Ich verwende das Theme Roseta in der ersten Version.
    Mein Problem stellt sich wie folgt dar: Ich habe die Seite auf verschiedenen Browsern getestet und bin mit dem Firefox, Opera und dem Google Chrome unterwegs.
    Der Internet Explorer selbst ist nicht gut auf die Seite zu sprechen.
    Der will nicht korrekt arbeiten. Er lässt im Navigationsmenü auf der Startseite die Links einfach liegen.

    Im Mobilen Bereich habe ich mit Chrome und Opera durchaus gute Erfahrungen gemacht,
    doch auch hier ergibt sich etwas kurioses: Im Header erscheint nur in der mobilen Variante immer on Top ein weißes oder ausgegrautes Quadrat???? Mittig im Header.

    Ich weiß leider nichts über die Programmiersprache, doch ich kann mich einarbeiten.
    Bitte bedenkt ich bin ein Beginner, ohne praktische Anwendungserfahrung und mache das erst seit 4 wochen. Die Kompatibilität und das Quadrat wäre meine Fragen an euch.

    Vielleicht kann eurer geballten Kompetenz unsere Seite nicht standhalten 😉
    Ich freue mich auf Ideen oder Verbesserungen oder Lösungsansätze.
    Gruß der Trommelmops

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 19)
  • Das, was dafür zuständig ist, wie die Seite ausschaut, ist das Theme. Ich schlage vor, versuche es mal mit einem Anderen.

    Der Internet Explorer selbst ist nicht gut auf die Seite zu sprechen.

    ja, das beruht auf Gegenseitigkeit. Ich mag den Explorer auch nicht, genau so wenig wie Windoof und Bill. Der Explorer tanzt einfach aus der Reihe und es braucht teilweise im CCs für ihn zusätzlich eigene Anweisungen. Ich finde, jeder der damit im Internet unterwgs ist hat es verdient nur weisse leere Seiten zu sehen. Aber das ist ja nicht in Deinem Interesse, deshalb, andere Themes Testen.

    • Diese Antwort wurde geändert vor 2 Monate, 1 Woche von  radarin.

    Das Demo des Themes zeigt, wofür der Platz vorgesehen ist. LINK
    In deinem Theme ist im Dashboard unter Design – Customizer ein Menüpunkt Zusätzliche CSS. Dort fügst du nachfolgende Anweisung ein. Die färbt diesen Bereich mit deiner Hintergrundfarbe:

    #top-section-menu::before,
    #top-section-menu::after {
    background: #d8d8d8;
    }

    Ja Super, das ist ein guter Tip! Beide Daumen hoch. Ich habe nämlich gedacht,
    wenn ich das Top Menü einfach mit ’nem Navigationslink versehe, dann erledigt sich das.
    Doch auch dann stellt sich ja die Frage nach dem Hintergrund. Muss ja irgendwie in einer Box angelegt sein. Oder in einem Bereich halt.
    Die Idee mit dem Hintergrund in meiner gewählten Farbe ist super, darauf wäre ich im Leben nicht gekommen. Das werde ich mal probieren.

    Die Kompatibilität ist erst einmal nur zweitrangig gedacht. Persönlich mochte ich den IE
    nie. Aber die Idee mit dem StyleSheet ist gut. Ich habe da versucht mein Primary Menu
    mit einem Schatten zu versehen. Das Einzige was mir gelang, war die Überschriften von
    h1 bis h6 mit einem zusätzlichen CSS mit einem Schatten darstellen zu können.
    Das war aber nicht mein Ansatz. Ich bedanke mich erst einmal für die Zeit die Ihr euch genommen habt. Nichts macht sich bekanntlich von allein.

    Vielen lieben Dank und wenn Ihr vielleicht einen Tipp habt wie ich es vielleicht doch schaffe mein Primary Menu sprich die Fonts zu schattieren…..Ich würde mich sehr freuen, wenn es auch hier ein CSS gäbe. Sofern das geht. Ich weiß nämlich leider keine Synthax für die Fonts in meinem Menü…..

    Für den Text im Main-Menü einen Schatten – bitte 😉

    #access > div > ul > li {
    text-shadow: 2px 2px 15px black;
    }

    Ggf das Menü 2-zeilig:

    .site-header-bottom {
    height: 100px;
    }

    • Diese Antwort wurde geändert vor 2 Monate, 1 Woche von  jostu55.

    Mensch, vielen lieben Dank……Die verlinkte Seite erklärt mir gut was
    man machen kann. Das hilft mir bestimmt zu experimentieren. Ist ein toller Tip
    für jemanden wie mich. Und gute Beispiele. Das Schöne….man sieht gleich ein Ergebnis
    und kann durch Parametrierung die Wirkung sofort nachvollziehbar sehen und verstehen.

    Both Thums Up ;))

    Big THX von mir…

    Hallo,
    um verschiedene Effekte mit CSS zu testen, ist auch diese Webseite wunderbar geeignet.

    Hallo Gemeinde 🙂

    habe mir Zeit genommen und die Seiten angesehen. Das macht Spaß zu beobachten was passiert. Mir ist auch schon Einiges gelungen, bei einem Problem komme ich nur nicht weiter.

    Ich habe einen Text den ich mit dem Befehl „padding“ umranden lassen.
    Diesen Bereich kann ich mit einem Verlauf versehen und mit einer Umrandung.
    Quasi der Hintergrund des Textes. Ich weiß nur nicht wie ich den Hintergund („padding“)
    etwas durchscheinend bekommen kann. Mit dem Befehl „opacity“ wird der Text und der Hintergrund gemeinsam transparenter. Ich mag gern nur den Hintergrund etwas durchscheinen lassen. Der Text muss wegen der Lesbarkeit so bleiben. Und deshalb der Bereich hinter dem Text, den benötige ich um den Text vom eigentlichen Bildhintergrund
    abzusetzen und lesbar zu bekommen.
    Für einen Schubs in die richtige Richtung wäre ich dankbar. Die anderen Tipps und vor Allem Links von euch haben mich schon viel weiter gebracht.

    habe mir Zeit genommen und die Seiten angesehen. Das macht NICHT wirklich Spaß zu beobachten, was passiert ist. Mir ist auch schon Einiges gelungen, ??¿¿

    Ja, ich habe mir die Bilder von Neujahrsfliegen ansehen wollen …… Das ist ja ein Sch…..marren.
    1) Sind die Bilder viel zu groß! – Z.B.: 20190101_135544.jpg (JPEG-Grafik, 3264 × 1836 Pixel) – Skaliert (44%) das ist unnötige Ladezeit!
    Ich habe keine 4K Monitor mit Retina-Auflösung! Von Mobilen Geräten zu schweigen. Da kannst du Grashalme zählen, oder auch nicht, denn sooo scharf sind die Bilder auch wieder nicht. Wie auch immer, da wartet noch einiges an Arbeit für dich.
    Wie komme ich darauf – beim durchklicken ob ich zu deiner letzte Frage ggf. ein Beispiel finde und ich auch einige Jahre geflogen bin, schaut man sich die Bilder an, oder was man davon sehen kann.

    den Hintergund („padding“)
    etwas durchscheinend bekommen kann.

    – dazu ein LINK!
    Der Hintergrund, bzw. die Hintergrundfarbe kann ohne weiteres (teil)transparent dargestellt werden.
    Z.B.: background-color: rgba(216, 216, 216, 0.7);
    Meinst du vielleicht mit deinen Anfrage das Menü??

    Hallo und erst einmal danke 🙂 in der Zwischenzeit bin ich nach dem aufmerksamen Lesen der verlinkten Seite auch schon darauf gekommen wie das mit der opacity funktioniert 😉 Danke für den Tipp. Vieles an Synthax ist mir aber noch fremd….Macht aber nix….
    Man lernt eben.

    Ja die Ladezeit…..Ich bin seit Tagen bereits im Hintergrund dabei Vieles zu verändern. Das Ding mit der Ladezeit: Ich sollte also am Besten die Bilder auf eine festgelegte Größe skalieren, bevor ich diese auf den Server hochlade? Gibt es denn grundsätzlich Empfehlungen was sinnig ist? Mir fehlt noch das Verständnis. Welches Format und bei welcher Kompressionseinstellung. Jpeg denke ich für Bilder. Headerlogo ist ja png.
    SVG wäre mir lieber, doch da kenne ich keine Kompatibilität der verschiedenen Browser.
    Geht nur um die Darstellung. Denn eine Vektorgrafik sollte immer unabhängig der Größe gleich gut dargestellt werden.

    Nächste Sache: Ich werde eine statische Seite als Startseite haben. Die Blogseite findet man später unter einem Link.

    Auf der Startseite habe ich später im Headerbereich einen Slider. Der wird pro Bild
    mit einem Text ergänzt, das heißt der Text wird über das Bild gelegt. Dafür war der
    transparente Hintergrund gedacht. Ich habe da auch alles was ich wollte umsetzen können. Mit der Hilfe von hier und dem Tipp zur verlinkten Seite.

    Was mich brennend interessiert: Im Theme Roseta sieht man in der Demo auf der startseite unter dem Slider 3 quadratische Boxen, ich glaube im Customizer nennen die das Block_1 bis Block_3 oder so……….

    Diese sind allerdings quadratisch gestaltet und lassen sich nicht über den Customizer
    in ihrem Aussehen verändern. Ich hätte hier gern abgerundete Ecken. Ich kenne nicht
    das Element was ich ansprechen muss. Absolut keine Ahnung. Was muss man da ansprechen?

    Ihr habt auch geschrieben:
    #top-section-menu::before,
    #top-section-menu::after {
    background: #d8d8d8;
    }

    Wisst Ihr wie das angesprochen werden kann? Ich habe keine blasse Ahnung. Ich habe zwar eine Funktion „element untersuchen“ in Opera, doch das hilft mir nicht. Da habe ich das
    top-section-menü auch nicht gefunden……

    Für Ideen bin ich sehr dankbar, und für Verbesserungen sowieso 😉

    LG der Trommelmops

    Beginnen wir mit den „runden Ecken“ 🙂
    Also Herr Go..le hilft wirklich mit den runden Ecken!
    Das ganze heißt dann:
    .lp-block {border-radius: 25px; }
    geht auch mit z.B 25%
    Wie findet man das Element, das angesprochen werden will – LINK! Das Video wird im Paralleluniversum immer wieder verlinkt.
    Bilder – so Groß als Notwendig und auch die Kompression so, dass sie dir gefällt.
    Ich verwende IrfanView zur Bildbearbeitung, das hat mir schon einige Jahre gute Dienste geleistet.
    Womit legst du den Text über das Bild, gibts da eine Einstellung für den Hintergrund?? Wenn nicht CSS wie oben geschrieben…

    Super, das habe ich eben selbst gefunden im „Opera Kontextmenü“ das Element. Und das ohne
    das Netz zu bemühen ;)…..Aufmerksam sein und eben schauen was passiert…..
    Das tolle im Opera Browser: Ich habe den Code stehen und kann live alle Einstellungen
    verändern am Code. Ich habe das nie gebraucht und gewusst. Nun ist es ein geniales Hilfsmittel für mich. So nun zum Thema:

    .lp-block {border-radius: 25px; } Leider ist es für alle 3 Blöcke gleichermaßen zuständig.

    Wenn ich nur den Block nummer eins also: .lp-block block1 ansprechen will, geht das irgendwie nicht. Liegt an meiner keine Ahnung 🙁 Wie könnte man das machen?

    Ja da gibt es im Plugin „Serious Slider“, der die direkte Schnittstelle zum Theme darstellt, nur wenig bis keine Möglichkeit den Hintergrund zu verändern. Ich habe es wie oben beschrieben gelöst. Das Bild des Sliders ist der Hintergrund, und der Text der auf dem Bild erscheinen soll, den editiere ich im Backend, in der Textansicht…..das funktioniert gut.

    Aber hier hört es auch schon auf….. jeden Block getrennt ansprechen gelingt mir nicht. Dazu fehlt mir noch was……

    Ich schau mir gleich mal das Video an…Vielen lieben Dank für den Hinweis.

    Zum Bilder verkleinern nehme ich entweder Tinypic oder Photoshop „Stapelbearbeitung“
    oder worauf ich gerade Lust habe 😉

    • Diese Antwort wurde geändert vor 2 Monate, 1 Woche von  trommelmops.

    für die Blöcke:

    .lp-block:nth-child(3n+1) {
    	border-radius: 50%;
    	border-color: blueviolet;
    }
    .lp-block:nth-child(3n+2) {
    	border-radius: 25%;
    	border-color: red;
    }
    .lp-block:nth-child(3n+3) {
    	border-radius: 5%;
    	border-color: green;
    }

    Na iss ja n Ding 🙂 wo findet man denn diese Syntax? Da habe ich ja
    keinen Schimmer. Aber damit kann man experimentieren. Das ist super von dir
    und vielen Dank!!!

    Ich habe zwar aufmerksam die verlinkten Seiten studiert, aber ich bin am Überlegen,
    wie ich Elemente auf einer Seite einfach ausblenden oder nicht erscheinen lassen kann.
    Konkret bedeutet das: Wenn mir auf meiner zukünftigen Seite zuviele Dinge angezeigt werden, und ich beispielsweise unter den 3 Blöcken Schluss machen möchte, wie
    hindere ich den Rest der Elemente daran die Seite zu füllen? Das erschließt sich mir nach dem Experimentieren noch nicht. Kann mich jemand vielleicht anschubsen?

    Liebe Grüße und Danke für die genommene Zeit und die kompetenten Antworten 🙂

    Aahhhhh……CSS Selectoren?

    • Diese Antwort wurde geändert vor 2 Monate, 1 Woche von  trommelmops.

    Konkret bedeutet das: Wenn mir auf meiner zukünftigen Seite zuviele Dinge angezeigt werden,

    – Das du das falsche Theme gekauft hast!
    Nach den 3 Blöcken kommt bei diesem Theme der Rest von ca. 90%! Vielleicht kann das Theme den Rest elegant weglassen, das mußt du selbst herausfinden. Da es ein Bezahltheme ist werden sich die Helfer, die das haben, in Grenzen halten.
    Man kann natürlich mit .lp-boxes-1 { display: none; } beginnen die Blöcke auszublenden, aber das sich schon einig Blöcke bis zum Footer. Wobei die dann mit der Startseite geladen werden und eben nur nicht angezeigt werden.

    Na iss ja n Ding 🙂 wo findet man denn diese Syntax?

    Dazu gibts auch schon einen Link von mir – dazu noch üben, üben und üben.

    Ja, Danke für die Tipps,

    das Theme ist ja nicht bezahlt worden. Und es hat schon viel geholfen hier mal
    was an kompetenten Antworten zu bekommen. Mir hat es bisher eine Menge gebracht.
    Ich weiß, dass ich üben muss und im Hintergrund ging das bisher auch recht gut.
    Man probiert es eben aus. Und das ist auch ok. Ich muss aber dennoch sagen,
    dass die Antworten sehr kompetent sind und man sich motiviert fühlt.

    Vielen lieben Dank….. 🙂

    • Diese Antwort wurde geändert vor 2 Monate, 1 Woche von  trommelmops.
Ansicht von 15 Antworten - 1 bis 15 (von insgesamt 19)