Jede Seite eigenen Header

  • 10 Antworten
  • 308 Aufrufe
*

Offline Rasmus

  • Mitglied
  • 34
Jede Seite eigenen Header
« am: 22. Mai 2018, 09:12:42 »
Hallo...

ich such nach dem besten Weg, jede Seite ihr eigenes Headerbild zu geben. Gibts da ein Plugin, hab nix gefunden, oder wie müsste der code aussehen?
Danke
Rasmus

*

Offline marusti

  • Administrator
  • Mitglied
  • 211
Re: Jede Seite eigenen Header
« Antwort #1 am: 22. Mai 2018, 10:22:07 »
Versuch es mal damit http://www.mozilo.de/forum/index.php/topic,4072.msg20853.html#msg20853 Download Link für eine Vielzahl an Plugins ist aktuell hier https://mozilo.thorstn.com/plugins.html

*

Offline Rasmus

  • Mitglied
  • 34
Re: Jede Seite eigenen Header
« Antwort #2 am: 22. Mai 2018, 18:15:40 »
cool... Danke

Rasmus

*

Offline Rasmus

  • Mitglied
  • 34
Re: Jede Seite eigenen Header
« Antwort #3 am: 14. Juni 2018, 11:16:15 »
Hallo,
das Headimg ist super interessant.
Ich hab es installiertin dem StandardLayout mozilocms.
Im Head-Bereich war noch enthalten header-inner und sb-titel (Logo...)
Das hab ich entfernt (in css ebenso) und die template.html sieht in dem Bereich nun so aus:

</head>
<body id="a0">
    <!-- hier kann ein zusaetzliches Hintergrundbild ueber dem body eingefuegt und positioniert werden -->
    <div id="sb-main">
        <!-- Logo, Slogan, Suche -->
        <div id="sb-header">
         {Headimg}
           
         <!-- Suche -->
                <div class="sb-search">{SEARCH}</div>
            </div>
      </div>

Das Header-Bild hat 1600x400px jedoch auf der Seite ist es viel zu groß, wie mir scheint und in der css bei ´sb-header´ ist kaum was auszurichten.
Bei tippelsberg.de ist mir aufgefallen, dass dort unter ´header img´ in der css noch Einstellungen möglich sind und nicht nur unter ´header´.
???

Gruß
Rasmus

*

Offline marusti

  • Administrator
  • Mitglied
  • 211
Re: Jede Seite eigenen Header
« Antwort #4 am: 15. Juni 2018, 11:25:22 »
Wenn ich es richtig gesehen habe, hast du keine css Anweisung für die Bilder.
Versuche es mal mit:
img {max-width: 100%;    height: auto;}

*

Offline Rasmus

  • Mitglied
  • 34
Re: Jede Seite eigenen Header
« Antwort #5 am: 15. Juni 2018, 12:59:18 »
Verzeih die amateurhafte Frage:
Wo kommt das
img {max-width: 100%;    height: auto;}
rein?
In die style.css? Woher weiß die css, welches Bild ich meine?

Gruß
Rasmus

*

Offline Rasmus

  • Mitglied
  • 34
Re: Jede Seite eigenen Header
« Antwort #6 am: 15. Juni 2018, 13:15:46 »
Nachtrag:

Hab mal etwas rumprobiertund etwas mitgedacht  8) und es in die style.css unter sb-header eingetragen und siehe da, alles supi.
Oder hattest Du ne andere Idee?

#sb-header {
    background-color : #ffffff;
    border-top       : 0px solid #000;
    border-bottom    : 10px solid #f0eaca;
    width            : 100%;
    margin           : 0 auto;
    max-height       : 400px;
}

img {
    max-width: 100%;   
    height: auto;
}

So´n Forum ist super!
Danke

*

Offline marusti

  • Administrator
  • Mitglied
  • 211
Re: Jede Seite eigenen Header
« Antwort #7 am: 15. Juni 2018, 13:39:04 »
Die Anweisung ist für jedes Bild auf der Seite, von daher ist es egal an welcher Stelle du es einfügst. Wenn du es nur für den header Bereich haben möchtest, müsstest du

#sb-header img {
    max-width: 100%;   
    height: auto;
}

angeben.
Wenn es nur für ein einzelnes Bild gelten soll, musst du dem Bild eine eigene CSS Klasse zuordnen.

PS: dein Hauptmenü überdeckt aktuell auf mobilen Geräten dein header Bild. Das liegt an der "position: absolute" Anweisung hier:

@media (max-width: 768px)
#sb-nav {
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}
« Letzte Änderung: 15. Juni 2018, 13:42:42 von marusti »

*

Offline Rasmus

  • Mitglied
  • 34
Re: Jede Seite eigenen Header
« Antwort #8 am: 17. Juni 2018, 17:44:18 »
Hallo,
ich hab aus ´absolut´ relative gemacht und vorher mit auskommentieren probiert. Beides hat selben Effekt.
Komisch ist, im VIA-Browser auf meinem Android-Handy sieht alles gut aus. Headerbild oben, dann kommt Hauptmenü, dann Inhalt usw.
Im Standard Google-Browser fehlt das Headerbild.
Schiebe ich am Rechner das Firefox-Fenster zusammen, bis die responsive.css einspringt, sieht alles ok aus, wie im VIA-Browser.
Hmm...?! Naja

Danke für den Hinweis.
Gruß
Rasmus

*

Offline marusti

  • Administrator
  • Mitglied
  • 211
Re: Jede Seite eigenen Header
« Antwort #9 am: 18. Juni 2018, 09:35:27 »
Hallo Rasmus,
mit relative wird es bei mir jetzt korrekt angezeigt.

*

Offline Rasmus

  • Mitglied
  • 34
Re: Jede Seite eigenen Header
« Antwort #10 am: 18. Juni 2018, 10:08:54 »
Super!
-----------
So, nun zur nächsten Idee: Ne Sidebar links unter dem Hauptmenü mit Flexsidebar.
Auf gehts  ;D

Rasmus