Verschiedene Header Breiten für responsive Darstellung einbinden!

  • Da es in der V12 beim responsiven Teil so ist, dass der Header ab dem ersten Breakpoint automatisch ausgeblendet wird, kann man den Header für 480px gleich im Programm unter "1" Template-Stil --> Struktur der Vorlage für mobile Geräte -->Seitenbereich "Header" ein Grafik einbinden mit max. 480px Breite. Allerdings was macht es beim ersten Breakpoint z.B. 1000px, dann nimmt es den 480px Header als Vorlage! Um dieses zu vermeiden kann man weitere Grafiken einbinden um hässliche Ränder zu vermeiden. Dazu darf man aber den mobilen Header nicht einbinden.


    Dazu ist etwas CSS notwendig den man unter "4" Seo&Code Reiter "Erweitert" vor dem </Head> Tag einfügt ! Da die GRafik immer beim Breakpoint die niedrigste Auflösung anzeigt muss man die "max-width" auf die Breite des normalen Headers anpassen (minus 1px). Also wenn du den Header bei 1000px stehen hast dann gibt du 999px ein. Nimmst aber den (selbst erstellten) Header für 720px. Unten der Code ...


    CSS: Breakpoint 1
    1. @media screen and (max-width: 999px) {
    2. #imHeader {
    3. background-image:url('img/dein720pxHeader.png');
    4. }
    5. }


    Den Header beim nächsten Breakpoint stellt man bei "max-width: 719px" ein, und nimmt die (selbst erstellte) Headergrafik mit 480px Breite! Es schaltet dann beim letzten Breakpoint um auf 100% Breite und deshalb kann man für kleinere Auflösungen es besser anpassen ! Der Code dafür ...

    Code
    1. @media screen and (max-width: 719px) {
    2. #imHeader {
    3. background-image:url('img/headergrafik480px.png');
    4. background-size: 100%;
    5. }
    6. }


    Die eingebundenen Headergrafiken muss man dann nur unter "4" Seo&Code Reiter "Erweitert" bei "hinzufügen" z.B. in den ORdner "img" (wie in meinem Beispiel) dazugeben.


    Ein Beispiel ist hier http://www.catv.at


    Viel Spass beim werken !

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

    2 Mal editiert, zuletzt von andy67 ()

  • Danke für den Hinweis.
    Leider klappt es bei mir nicht so ganz.


    http://www.lindachtaler.com


    Habe jetzt bei 1; Templatestil; Mobilgeräte


    den Header unter Grafische Eigenschaften als Bilddatei png mit Header_720 angegeben.


    Welchen Code muss ich jetzt bitte genau unter 4, erweiterte Einstellungen, Erweiter angeben.
    Unter der verlinkten Datei unten habe ich jetzt dort Header:720 und Header_480 stehen.


    Danke schonmal für die Hilfe.

  • Nein, lese dir meine Beitrag genau durch ! Du darfst bei den mobilen Struktur "KEINE" Grafik einbinden, das wird von den zwei Grafiken erledigt die du extra einbinden musst ! Auf deiner Seite sehe ich jedenfalls nichts, außer die Millionen unnötigen META Daten und das auch noch doppelt !

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

  • Ok.
    Also ich kopiere beide Codes (css und den unteren) ein. Füge es zwischen <Style>....</Style> und ändere die Namen img... in meine Namen.


    Meinst Du die?


    <meta name="description" content="Die Partymusik, Stimmungsmusik, Hochzeitsmusik aus Bad Kohlgrub. Original Bayrische Stimmung aus Garmisch-Partenkirchen Oberbayern, Profis für Hochzeiten, Firmenevents, Betriebsfeiern. 25 Jahre Bühnenerfahrung zeichnen uns aus.">
    <meta name="keywords" content="Livemusik, Stimmungsmusik, Oberkrainer, Gruppe, Hochzeitsmusik, Musik, für, Hochzeiten, Hintergrundmusik, Unterhaltung, für, Events, DJ, Liveband, Schlagerband, Trio, Liveband, Eventplanung, Firmenfeier, Livemusik, ">

  • JA, wobei du beim ersten Code die Pixelwerte auf 1279px ändern solltest und beim 2. Code auf 839px


    Nein ich meine den Google Analytik Code !

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

  • Ich habe jetzt alles geändert.


    Sehe aber leider im Responsive am Handy oder Tablett keinen Header.


    Ich glaube, da habe ich was falsch gemacht. Kannst du mir nochmal helfen?


    Bild anbei.

    Dateien

    • Dok2.pdf

      (253,65 kB, 17 Mal heruntergeladen, zuletzt: )
    • Dok2.pdf

      (253,65 kB, 7 Mal heruntergeladen, zuletzt: )
  • JA du hast die GRafiken nicht im "img" Ordner gespeichert sondern unter "files" ! Entweder du passt den Pfad an oder den Ordner !



    Noch was, die Breite deiner Grafik solltest du anpassen und den 480px breiten auch in der Höhe oder umgekehrt !

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

    Einmal editiert, zuletzt von andy67 ()

  • Jetzt hat es endlich geklappt dank Deiner Hilfe. Super !!!!!!!!!!!!!!!!!!!!!!!


    Beim Tablet ist das Bild allerdings deutlich kleiner als der Bildschirm und passt sich nicht an. Wie kann ich das noch ändern.
    Muss ich da nochmal eine zusätzliche Datei in anderer Größe anbinden?

  • Hochformat oder Quer ? Natürlich kannst du noch eine Grafik einbinden wenn du willst, aber dazu musst du noch einen Sprungpunkt generieren ! Dazu müsstest du aber die Pixelbreite des Tablets kennen.

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

  • Du musst selber wissen wo du ihn eingebunden hast !
    Es gibt nur 2 STellen wo er ist.... unter "4" Seo&Code Reiter ERweitert vor dem </head> Tag ... oder unter "2" Eigenschaften der SEite(Startseite) Reiter Erweitert </head>

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

  • Ich bins nochmal ;)


    Ich habe bezüglich der Meta-Description gesucht, aber ich habe nur Einträge unter Punkt vier. Trotzdem wird angemahnt, ich habe mehrere ??


    Werde noch Waaaaaaaaaaaaahnsinnig !!!!


    Tausend Dank, dass Du mir hilfst...

  • Lösche unter Punkt 4 Zeile 1 - 9 raus ! Wird von WSX5 sowieso automatisch erzeugt und ist noch eine Übernahme von V8 !


    Bei Punkt 2 Eigenschaften lösche Zeile 19 raus !

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