wechselndes Logo im Kopf über die ganze Seite

    Hallo Leute,


    ich kämpfe gerade mit dem Layout meiner Webseite pardon


    Hat jemand von Euch eine Idee wie man man ein wechselndes Bild als Kopfzeile einfügt, das über die ganze Seite in der Weite geht.


    Aktuell habe ich für jede Seite ein eigenes Template und dort das jeweilige Bild als Logo eingefügt. Das Problem daran ist jedoch, dass das Bild bei größeren Monitoren linksbündig und kleiner als der Rest unterhalb dargestellt wird:



    Wenn ich jetzt ein breiteres Logo nehmen würde, würde es umgekehrt Probleme auf mobilen Geräten geben, da dann die Schrift auf den Bild sehr klein dargestellt wird. Wenn ich static-Layout wähle wird das Ganze sehr schmal angezeigt. Ich hab gerade kein Plan mehr und bisher kaum Erfahrung mit html und Webseiten-Erstellung. Daher wäre ein klein wenig Hilfe echt super :)



    LG NukeFromOrbit

    Wenn es ein Bild sein muss, würde das über ein Modul (evtl. neue Modulposition anlegen und MediaQueries machen.
    Da Du das Protostar einsetzt, kannst Du es über Klassen steuern: https://getbootstrap.com/2.3.2/scaffolding.html#responsive

    Zitat von NukeFromOrbit

    mobilen Geräten geben, da dann die Schrift auf den Bild sehr klein dargestellt wird.

    Hatte ich nicht den Eindruck.


    Im Großen und Ganzen, würde ich bezüglich der Benutzbarkeit, statt individuellen Headerbilder, lieber mit Hintergrundfarbe und Text arbeiten der per CSS entsprechend formatiert wird. (text-shadow / transform)
    https://www.html-seminar.de/css-text-shadow.htm
    https://www.html-seminar.de/css3-transform-skew.htm


    BTW: Mir ist aufgefallen, dass Deine Impressumsdaten ein Bild ist. Meines Wissens ist das Abmahnfähig.

    Zitat von NukeFromOrbit

    Wenn ich jetzt ein breiteres Logo nehmen würde, würde es umgekehrt Probleme auf mobilen Geräten geben, da dann die Schrift auf den Bild sehr klein dargestellt wird. Wenn ich static-Layout wähle wird das Ganze sehr schmal angezeigt.

    Im Prinzip ist es sehr einfach ;).

    Du kannst alles so lassen, wie es gerade ist. Du musst nur eine neue CSS-Datei mit dem Namen "user.css" erstellen. Darin musst du Folgendes eintragen und die Datei anschliessend im Verzeichnis /templates/ownprotostar/css/ speichern:


    Code
    .container-fluid {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

    Ich habe jetzt bei der maximalen Breite 1400px genommen, aber das kannst du nach eigenem Geschmack einstellen ;). Mach es einfach nicht allzu breit, sonst holt man sich beim Lesen der langen Zeilen einen "Tennisnacken" :D.