Seite auf Fenstergröße begrenzen

Sundream

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

AnyKey

Ä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.

modem-kind

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

Arne Drews

Hallo,

Ich hab' noch nicht so ganz verstanden, wo das Problem liegt, aber ich vermisse bspw. margin:0; padding:0;

Gruß Arne

AnyKey

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)

modem-kind

es geht nicht allein um die Gesamt Zeichen der Zeilen..
sonder nur um das letzte Wort bzw. Inhalt der Zeile
irgendwie sind die Browser da n bisschen doof..:)

- - - Aktualisiert - - -

http://www.w3schools.com/cssref/tryit.a…ycss3_word-wrap

AnyKey

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.

djheke

Link zur Seite ist immer hilfreich. Ich gehe auch davon aus, dass das Problem irgendwo im Dokument liegt.

modem-kind

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 ?

Tags