Verschiedene Header Breiten für responsive Darstellung einbinden!

  • Ja sicher kannst du das. WEnn du eine andere haben willst, als die was man unter Struktur der vorlage für mobile Geräte einstellen kann.


    Mit dem Befehl "height: 200px!important;" was du beim Selektor #header dazuschreiben musst!

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Hallo,


    wie müsste der Code für Brakpoints in V12 aussehen, wenn ich dies für eine Unterseite machen möchte und wo müsste dieser eingefügt werden? Ich verwende auf den Unterseiten unterschiedliche Header.

  • Dann musst du es für jede Seite die du mit anderen HEadergrafiken willst, unter "2" Eigenschaften der Seite --> Reiter "Erweitert" vor dem </head> Tag einfügen. Nur dass ist ein ganz schöner Aufwand wenn du für jede Seite eine extra GRafik haben willst.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Hallo bernie,


    ist noch nicht online und liegt in einem gesicherten Verzeichnis des Kunden.


    Ich habe unter "2" Eigenschaften der Seite --> Reiter "Erweitert" vor dem </head> Tag den Code wie beschrieben eingefügt.


    <style>
    @media screen and (max-width: 719px) {
    #imHeader {
    background-image:url('files/Head_719.jpg');
    }
    }

    </style>


    Der Head wird jedoch nicht angezeigt. Angaben stimmen alle, habe ich bereits geprüft. Fehlt vielleicht noch irgendwas im Code da es eine Unterseite ist?

  • Guten Morgen,


    du hast das Bild Head_719.jpg auch in das Verzeichnis Files hochgeladen, bzw. bei Seiteneigenschaften/Erweitert unten mit angegeben?

  • Hallo erstmal,


    Ich habe ein ähnliches Problem der Header wird nicht angezeigt. Frage: Muss ich die Bilder noch entfernen aus der Einstellung für das Template? Und das gleiche wenn ich einen SEO Code habe für die Keewords? Da diese auch in dem SEO Code stehen.




    Hier der Code. Die Bilddateien habe ich auf den Server in dem imageordner hochgeladen. Bilder werden jedoch nicht angzeigt.




    @media screen and (max-width: 1920px) {



    #imHeader {



    background-image:url('img/headergrafik1920px.jpg');



    background-size: 100%;



    }



    }




    @media screen and (max-width: 719px) {



    #imHeader {



    background-image:url('img/headergrafik719px.jpg');



    background-size: 100%;



    }



    }

  • In der Grafik sehe ich nichts, die ist zu klein.


    Du darfst natürlich keine Grafik in den Header einfügen bei der "Struktur der Vorlage für mobile Geräte"

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • In der Grafik ist nichts anderes als der Code den ich eingesetzt habe. Habe es jetzt mal probiert und auf dem Handy erscheint kein Header. Ich habe zur Auswahl H1 und H2 gewählt einmal für Header H1 und H2 für die Seitenüberschrift. Die Seitenüberschrift wird auf dem Handy angezeigt aber der Header nicht. Das soll ja auch nur für die umbrüche sein wenn es zu den kleineren Auflösungen gehen soll.


    Hier nochmal der Code


    <h1>@media screen and (max-width: 999px) {



    #imHeader {



    background-image:url('img/headergrafik720px.jpg');



    background-size: 100%;



    }



    }




    @media screen and (max-width: 719px) {



    #imHeader {



    background-image:url('img/headergrafik480px.jpg');



    background-size: 100%;



    }



    }</h1>

  • Wieso hast du ein HTML Element (H1) in den CSS Code eingefügt ! Das hat dort nichts zu suchen ! Damit kann der Browser nicht umgehen.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Ich muss halt dazu sagen das ich nicht so gut bewandert bin, daher experimentiere und probiere ich ein bissel herum.


    Ich hatte das so gemacht weil ich "Erweiterte Einstellung / Allgemein" unter "Automatische Verwaltung ........." das 2 gewählt habe. Da steht H1 für Header und H2 für Seitenüberschrift. Deswegen dachte ich muss es so sein. Da unter H1 die Seitenüberschrift im oberen Bereich angezeigt wurde hatte ich den gedanken das so zu setzen. Was aber auch unschön aussieht aber nunmal erscheint die Seitenüberschrift. Frage zur Seitenüberschrift kann man diese Verdecken? Es geht mir ja nur darum das es hintergründlich ausgelesen wird um halt in der Suchmaschine optimiert zu werden. Oder brauch man das garnicht dafür?


    Ich habe es auch probiert unter


    <html>
    <head>


    dann den Headercode wie oben schon geschrieben


    dazwischen habe ich noch den <title>....... </title>
    und darunter habe ich noch die metatags eingefügt


    </head>


    Hat aber auch nicht geklappt. Warum auch immer.


    Dann habe ich noch den <body> bereich den ich noch offen gelassen habe. Was da hineinkommen könnte ist mir noch unklar.

  • Du gehst völlig falsch ran an die Sache ! Entweder du lässt WSX5 alles machen oder du verstehst etwas von HTML und CSS Programmierung und veränderst dort die Seiten. Aber wie du alles vermischt, da kann auch nichts funktionieren.


    Am besten liest du dir die Beschreibung mal durch. Du kannst auch direkt im Programm für den Abschnitt wo du gerade bist oben das Fragezeichen drücken und die Hilfe aufrufen.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Alles klar habe es jetzt gesehen das man über dem Feld die Auswahl zwischen Html, Head und body hat. Also brauch man das nicht einzuschreiben sondern nur Auswählen und dann den reinen Code einsetzen ohne html, head oder body mit einzuschreiben.


    Frage ist jetzt wo kommt dann der Headercode hin und dann sowas wie titel und metatags? Das konnte ich leider nicht in der Hilfe lesen.

  • Metatags benötigt man nicht mehr. Die wichtigsten werden von WSX5 sowieso reingestellt. GEnauso Titel braucht man auch nicht.


    Was willst du in den Header geben? Dazu gibt es die Templategestaltung !


    WEnn du Skripte oder CSS Code reinstellst dann entweder in den Head oder mit einer Datei unter "Hinzufügen"

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Das Problem was ich noch nicht gelöst habe ist ja immer noch das der Header sich anpasst auf Tablet und Handy usw. Vielleicht sollten wir das erstmal zuende bringen. Wo muss den der Code eingeschrieben werden?


    Vor oder nachdem Header?



    Dann habe ich noch den "Google Tag Manager" den habe ich auch eingefügt. Da das von Google vorgeschlagen wurde.



    Dann lasse ich title und metatags weck da man das ja schon in der Software einfügen kann und ich das dann da auch positioniere.

  • Schaue dir meinen ersten Post an. Da ist alles beschrieben wohin.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !