Header responsiv

    Hallo,


    weil ich den Beitrag versehentlich in der falschen Rubrik gespeichert hatte, hier noch mal in der richtigen:


    Ich arbeite gerade daran, meine Homepage responsiv zu machen: www.robert-runkel.de.


    Ich benutze ein selbst erstelltes Template, das bis dato nicht responsivist. Ich habe, wie in den diversen Anleitungen zu finden ist, Bootstrap eingebunden und die Klassen angepasst. Das funktioniert auch leidlich, aber ein Detail kriege ich gar nicht in den Griff und ich verstehe nicht, warum das so ist.


    Wenn ich versuche, den Header responsiv zu machen, wird er überhaupt nicht mehr angezeigt.


    CSS der nicht responsiven Version:


    Code
    #header {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
    height: 242px;
    background: transparent; 
    background-image: url('../../../templates/robert/images/header_oben.png');
    position:relative;
  }


    Druch die fest angegebene Breite und Höhe wird der Header auf Geräten mit kleinerem Bildschirm nicht angepasst. Sobald ich aber als Breite "100%" und als Höhe "auto" angebe, verschwindet er völlig. Ich habe es auch mit "background-size: auto" oder "background-size: contain" probiert. Immer wird der Header komplett ausgeblendet.


    Ist das eventuell ein joomla-spezifisches Problem? Oder hängt es schlichtweg an fehlerhaften Styles?


    Ich bin dankbar für Tipps.

    Zitat von Djavan

    Oder hängt es schlichtweg an fehlerhaften Styles?


    Ja, leider.
    Es reicht nicht mit prozentualen Breiten zu hantieren. Es fehlen Dir auch die passenden Viewports.
    Schau Dir mal das an:
    http://www.dieproduktmacher.co…te-zum-responsive-design/
    https://www.bjoerne.com/eine-b…ebseite-responsiv-machen/


    Dein Bestreben in allen Ehren, aber Deinem Design würde ein Relaunch gut tun. Du könntest gleich ein neues responsives Template bauen, bzw, ein fertiges (joomleigene Protostar) anpassen.

    Hallo Tom,


    danke für die Antwort.


    Im Template ist der Viewport eingebunden:


    Code
    <head>
  <jdoc:include type="head" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


    Die Anpassung der Spalten funktioniert auch auf mobilen Geräten, nur die Anzeige des Headers nicht.


    Nichtsdestotrotz sollte ich vielleicht die Anregung mit dem Relaunch übernehmen. Ich habe selbst schon darüber nachgedacht, aber in diesem (veralteten) Design steckt viel Arbeit und ich habe mich bisher gescheut, das alles wegzuwerfen. Ich weiß, dass vor allem die Navigation mit den Schaltern für mobile Geräte nicht sehr effektiv ist. Und die Optik der Seite ist längst nicht mehr zeitgemäß.



    Gruß
    Robert

    Zitat von Djavan

    Im Template ist der Viewport eingebunden:


    Aber nicht in der CSS.
    Das Web ist extrem schnellebig und da schmerzt es sehr, Arbeit in die viel Zeit und Herzblut geflossen ist, in die Tonne zu treten. Ein Trost ist es leider auch auch nicht, dass Du viel dazu lernst, es neu zu machen. Spätestens in 2 Jahren ist das wieder überholt.

    Hallo,


    ich habe die Lösung des Problems jetzt selbst gefunden. Falls jemand anderes mal auf die gleichen Schwierigkeiten stoßen sollte, hier ist eine mögliche Ursache:
    Im <body>-Tag meines Templates stand 960px als vorgegebene Breite. Offensichtlich wird bei einer festgelegten Breite das Headerbild nicht skaliert, auch wenn die Anpassungen in den anderen Spalten und Modulen funktioniert haben.


    Danke Tom für deine Tipps. Ich arbeite gerade an einem neuen Template auf Protostar-Basis!


    Gruß
    Robert