Seite auf Fenstergröße begrenzen

  • Hallo,

    ich habe folgendes Problem und zwar geht meine Seite die ich grade responsiv mache immer wieder nach rechts über den rand raus.. Ich habe html und den header schon auf max-width :100% gesetzt, aber das background-image geht trotzdem immernoch drüber hinaus... Der Code dafür im css ist :

    Code
    html { background: url(Bilder/Hintergrund.gif) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
    max-width:100%;
    
            }

    Hat jemand eine Idee was ich machen könnte damit das am Rand wirklich gesperrt ist und egal bei welcher Fenstergröße nicht drüber raus kann?
    Danke schonmal :)

    Liebe Grüße

    Sundream

  • Ähh...

    ...ich kenne das so gar nicht, dass man das für den Tag "html" so festlegt.

    Hast Du es schon mal im "body" anstelle von "html" probiert?

    Ansonsten sehe ich da nichts, weswegen der über den Bildschirmrand hinausgehen soll.

    Es kann höchstens sein, dass Du im "body" eine 'konkrete Basis' angeben musst, als "width:" anstelle von "max-width:", da CSS ja eine Basis benötigt, nachdem es alle weiteren Breiten richtig festlegen kann.

    Sinnvollerweise mache ich es immer so, dass ich im "body" 'width:' und 'min-width:' definiere, damit CSS weiß, dass eine gewisse Grundordnung der Blöcke und Objekte beibehalten werden soll, damit das Design nicht zerflückt und zerschoben aussieht.

    Bei weiteren Angaben für 'width:' musst Du auch immer darauf achten, dass diese Breite schon für den Block-Inhalt gilt. Abstände wie 'margin:' und 'padding:' musst Du noch immer oben drauf rechnen.

    Im Klartext:
    Wenn ein Block insgesamt 100% breit sein soll und die Abstände jeweils 5%, dann musst Du 'width:' mit 90% angeben und 'margin:' bzw. 'padding:' mit 5%, da der Abstand sowohl links als auch rechts (also 2 mal) angelegt wird.

    Kann sein, dass Du das schon weißt. Ich schreibe es nur mal vorsichtshalber dazu, weil das oft beim responsiven Design falsch gemacht wird.

    Drücken Sie die Any-Taste um fortzufahren!

  • sowas liegt eigentlich oft am INHALT

    zb wird so ein langes Wort wie zb. Dampfschiff
    am Ende ...nicht einfach umgebrochen
    schau da ma nach..
    mit <br /> davor testen.. aber bei ALLEN die überhängen..

    LG aus Hamburg u. Good luck

  • Gut, solange kein riesiger Schriftgrad verwendet wird, müssten die Wörter selbst auf nem kleinen Display mindestens 25 Zeichen lang sein, dass sie nicht mehr in eine Zeile passen.
    Und so viele extrem lange Wörter gibt es ja auch wieder nicht. ;)

    Ansonsten kann man sich gut an WhatsApp oder dem SMS-Programm halten, um zu sehen, wie viel Text in eine Zeile passt.

    Getrennte Wörter werden ja ohnehin automatisch in die nächste Zeile verschoben, sobald die Zeile voll ist.


    Aufpassen musst Du auch mit Bildern.

    Wenn diese größer sind als der Viewport, müssen die Bildgrößen gesondert definiert werden. (bspw. auch mit max-width)

    Drücken Sie die Any-Taste um fortzufahren!

    Einmal editiert, zuletzt von AnyKey (2. März 2016 um 18:34) aus folgendem Grund: Ergänzung

  • Hmm,

    also bei mir wird auch das letzte Wort in die nächste Zeile verschoben. Bei mir sogar immer.

    Die gängigen Browser wie MF, IE, GC, Op und Sf machen das eigentlich alle.

    Ich weiß ja nicht, welche Browser Ihr sonst noch verwendet.

    Drücken Sie die Any-Taste um fortzufahren!

  • hast ja Alle aufgezählt hihi ..
    einen davon benutzen wir sicher.. :)

    das ist recht "kompliziert"
    beginnt das Wort noch zu einem bestimmten Abstand zum Ende des Elements
    in dem es sich befindet, wird die Zeile umgebrochen
    beginnt es zu früh (also davor ) wird es über den body
    wrapper oder div ..zusammenhängend noch dargestellt..
    dann hattest entweder bisher Glück..
    oder andere Mechanismen haben eingegriffen damit es nicht passiert..

    es gibt ja IMMER das user.style.css
    das auch mit redet..

    ich denke mal auch ein zusammenhängendes InlineElement
    wie ein Wort zerreist man (Browser) ja
    nicht einfach .. sondern stellt die Gesamt dar.. -erstmal

    wär ja bei Bildern zb. sonst fatal .. oder ?

    Einmal editiert, zuletzt von modem-kind (2. März 2016 um 23:57)