Responsive Webdesign - Headergrafik

Ich habe einen Blog Artikel verfasst - Wie benutze ich die Suche richtig - Bitte diesen beachten und auch umsetzen bevor Ihr ein Neues Thema eröffnet!

    Hallo zusammen,


    wenn ich das richtig verstanden habe, ist das responsive Webdesign in der Vers. 1.7 ja bereits enthalten.
    Leider wird der Header nicht mit angepasst (z.B. auf Smartphone).


    Ist das bei euch auch so?


    Gruß
    P@ulchen

    Wenn ich Du wäre, wäre ich lieber ich...

    Wo ist denn das Problem? :) Sieht doch gut aus auf dem Smartphone (Farbänderungen was den Header angehen könnte auch am mobilen Browser liegen, das hatte ich jetzt beispielsweise nicht (HTC One M7) )...
    Meinst Du eventuell, dass die Kopfgrafik ABGESHCNITTEN ist? Das wäre nämlich in der normalen Version normal und wenn Du es so haben willst, dass dort eine andere Kopfgrafik geladen wird, ist das etwas komplizierter, weil das pro Theme gemacht werden muss (vgl. zB mein Tippspiel). Hatte schon ein Tutorial angefangen zu schreiben hier im Forum, aber dann wieder alles gelöscht, weil ich es nicht allgemeingültig hinbekommen habe... :dance:

    Genau die Headergrafik meine ich...
    Habe mir dein Tippspiel mal auf dem Smartphone angesehen, da passt das alles.
    Heißt das, dass ich den Header auch als kleinere Datei im Ordner img ablegen muss und diese dann separat geladen werden muss?


    Gruß
    P@ulchen

    Wenn ich Du wäre, wäre ich lieber ich...

    Ja, also bei mir wird das so gemacht,... Es gibt natürlich auch Befehle mit denen man den Hintergrund dynamisch in der Größe anpassen kann (zum Beispiel auf dieser Seite hier, einfach mal das Browserfenster etwas verkleinern und wieder vergrößern: http://www.trendletter.info/), aber das geht bei der gegenwärtigen Programmierung des Kopfbereiches vom Tippspiel leider nicht so einfach... Also das führt zu gravierenden Darstellungsproblemen, sagen wir es so haha :-)


    Ich hatte das hier in meiner Style-CSS ergänzt (nutze nur ein Theme und habe alle anderen deaktiviert), allerdings musste man noch an anderen Stellen in den Styles Anpassungen vornehmen, weil das Menü ja auch nach oben rutscht etc...
    Aber nur mal so für Dich, den Hintergrund tauschst Du aus, indem Du erstmal den FESTEN hintergrund in der index.php weglöschst (Zeile kann ich nicht sagen leider, aber da wo der Container DIV halt steht [<div id="container"> muss draus werden]), und dann in deiner Theme-CSS sowas in der Art einfügst:


    @media screen { #container { background:#f0f0f0 url('img/colors/bodybg-blue.jpg') repeat-x; }}
    @media only screen and (max-width: 800px) { #container { background:#f0f0f0 url('img/colors/bodybg-blue_mini.jpg') repeat-x; } #mainmenu { margin-top: 75px; }}

    Hallo,


    ich habe es so hinbekommen, das die Grafik zumindest Zentriert angezeigt wird.


    in der Base.css disen Code unten anfügen (im @media only screen bereich)

    Code
    1. html body div#center div#container{
    2. background-repeat: no-repeat !important;
    3. background-position: center 0 !important;
    4. }

    Star mich nicht so an, ich bin auch nur eine Signatur.

    Einmal editiert, zuletzt von froggiton ()

    Klasse Beitrag 2Fast4UeXtrem
    Header Grafik austauschen war genau der richtige Tipp für mich, hats für mich denke ich perfekt gelöst!


    Ich habe eh schon einen kpl. losgelösten Header Banner in einer Höhe von nur 100px gehabt,
    Von daher mußte nur noch ein schmaler Banner erstellt werden und der Background Minibanner in den passenden @media only screen div tag hinzugefügt.

    Grundsätzlich funktioniert der Tipp von 2Fast4UeXtrem, aber wenn ich in der index.php die Zeile lösche, dann kommt folgende Fehlermeldung bei Aufruf des Menüpunktes "Gruppen":
    Output has already been sent to the browser at /is/htdocs/wpxxxxxxxxxxx/www/wmtipp/ff/index.php:1.
    Please make sure the command $xajax->processRequest() is placed before this.


    Jemand eine Idee?

Tags