responsives web-design

  • Hallo,


    ich habe meine website endlich mal auf responsive umgestellt und bin damit auch soweit zufrieden... bis auf ein Problem, welches ich nicht in den Griff bekomme. vielleicht kann mir hier jemand die Lösung zu meinem Problem sagen. :/


    ich habe im header und im footer Bilder im format 150x120 als Hintergrund in der css abgelegt. wenn ich das Browserfenster jetzt zusammenschiebe, passen sich die Bilder auch der Fenstergröße an, allerdings bleibt die höhe des headers und auch des footers fix bei 120px, so dass sich ein unschöner rand unterhalb auftut, den ich nicht haben möchte.


    warum passt sich die höhe nicht automatisch mit an?


    meine Testseite seht ihr hier: Schlittenhunde ...da man über Entwickler in die css schauen kann, erspare ich mir mal den code hier aufzuschreiben ;)


    für eine Lösung wäre ich sehr dankbar 8)

  • Hier wirst Du mit einem Nachteil von Hintergrundbildern konfrontiert: Man muss die Größe des Containers vorgeben, damit die Grafik sichtbar ist und das macht es schwierig, das Ganze responsiv zu machen. Da Du ja nur die Bilder anzeigst, kannst Du genau so gut img-Tags verwenden, dann kannst Du das CSS so einrichten, dass sich die Höhe des Containers anpasst:

    https://jsfiddle.net/Sempervivum/8q7zkx51/12/

  • Möglich wäre auch mit 'calc' die Höhe jeweils passend zur Breite zu berechnen.

    Da du die (max-)Breite von Header und Footer jeweils mit 1022px angibts, muss die Berechnung auch nur bei Breite kleiner 1022px durchgeführt werden.

    Der Berechnungsfaktor ergibt sich aus dem Höhen-/Breitenverhältnis des Headers/Footers (120 / 1022).

    Code
    @media screen and (max-width: 1022px) {
      header {
        height: calc(100vw * 0.117);
        overflow: hidden;
      }  
     .footer {
        height: calc(100vw * 0.117);
        overflow: hidden;
      }    
    }

    Mir ist aufgefallen, dass sich auf deiner Seite teilweise ein horizontaler Scrollbar zeigt!

    Das liegt nach meiner Einschätzung an deiner Navmenü-Zeile. Das könnte man umgehen/beseitigen, wenn man die beinhalteten Elemente mit 'border-box' formatiert.

    Code
    #nav-menue, #steuerung, #steuerung a {
      box-sizing: border-box;
    }

    Aber das bitte ausgiebig testen - vielleicht liege ich mit meiner Einschätzung ja falsch!

  • ich habe eine allgemeine css für alle größen und dann @media... breakpoint max 320, @media... breakpoint 321-600 und @media... min 601

    bei der css für alle hab ich dem header und footer deine Anweisung dazu gegeben. im handy modus passt es jetzt, dafür hab ich den rand jetzt im großen Bildschirm :/

    im footer schneidet er mir jetzt zu viel ab :D

    Schlittenhunde

  • Neee... das hast du nicht richtig gemacht!

    Der Code soll nur wirken, wenn die Bildschirmbreite kleiner als 1022px ist - er muss also in eine eigene @media-Query und hat in allen anderen CSS Bereichen nichts zu suchen - so, wie ich es oben beschrieben habe.


    Zu deinem .footer! Da solltest du dir mal dein Setup genauer anschauen.

    Da ist ein div mit Hintergrundbild (jeweils links und rechts) und in der Mitte ein Konstrukt aus einem ol und einem ul (hääää?... hat das einen Grund?).

    Die Hintergrundbilder sollen sich anpassen - diese ol ul Geschichte passt sich aber von alleine an, denn das ist richtiger Inhalt und schafft sich den Platz, den er braucht... macht also das div .footer von alleine so hoch, wie es sein muss.

    Teste mal, ob im CSS für den .footer das min-height (statt height) das Abschneiden verhindert.

    Damit sollten dann bei allen Bildschirmbreiten zumindest die Bilder vollständig zu sehen sein - das größer werdende Mittelteil (ul ol) passt sich dann selber an und macht vielleicht den .footer wieder größer, damit diese Listen wieder zu sehen sind.

    Wenn dann noch Nachbesserungen notwendig sind, wovon ich ausgehe, kann man die angehen, wenn der Rest schon mal passt.

  • Super, das mit dem Rand bei header und footer haut jetzt hin... vielen dank dafür :)


    das mit dem ul und ol hat folgenden sinn - bei breiten Bildschirmen mit navigation oben hab ich im footer Menü 4 links. wenn ich das toggle Menü im handy-format habe, befinden sich 2 der links aus dem footer mit in der obigen navigation und im footer sind nur noch 2 links - hat also optische gründe ;)


    und das mit dem abschneiden... max-height war des Rätsels Lösung :D ...habt vielen lieben dank :thumbup:

  • und noch eine frage...

    der css-validator meckert folgendes an:


    9 Die Eigenschaft -webkit-background-size ist eine unbekannte Erweiterung des Herstellers
    10 Die Eigenschaft -moz-background-size ist eine unbekannte Erweiterung des Herstellers
    11 Die Eigenschaft -o-background-size ist eine unbekannte Erweiterung des Herstellers

    ...kann ich das einfach weglassen oder ist das wichtig? :/

  • Das sind Formate für unterschiedliche Browser, solange diese den Standard noch nicht umgesetzt haben. In der Regel werden die nach einiger Zeit, wenn dann der entsprechende Browser die Anweisung ohne diese Prefixes versteht, überflüssig und können weggelassen werden.

    Den aktuellen Stand. also welcher Browser welchen Prefix braucht, kannst du jeweils auf der Seite caniuse.com nachlesen.

    Im Falle von background-size sieht das dann so aus-

    https://caniuse.com/#search=background-size

    rot = unterstützt gar nicht

    hellgrün = unterstützt teilweise - mit der Maus drüberfahren, dann werden dir die Details angezeigt u.a. auch, ob ein Prefix benötigt wird

    dunkelgrün = wird vollständig unterstützt

    Im Falle von background-size würde ich den Prefix weglassen - die wenigen Browser (Altlasten), die dann diese Anweisung nicht verstehen, kann man vernachlässigen. (aber nur meine Meinung)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!