Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

Jede Seite eigenen Header

Begonnen von Rasmus, 22. Mai 2018, 09:12:42

« vorheriges - nächstes »

Rasmus

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

marusti


Rasmus


Rasmus

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

marusti

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;}

Rasmus

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

Rasmus

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

marusti

#7
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;
}

Rasmus

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

marusti

Hallo Rasmus,
mit relative wird es bei mir jetzt korrekt angezeigt.

Rasmus

Super!
-----------
So, nun zur nächsten Idee: Ne Sidebar links unter dem Hauptmenü mit Flexsidebar.
Auf gehts  ;D

Rasmus