Frage von xReflexionx, 69

HTML/CSS - Text passend auf ein Hintergrund machen?

Ich habe das Problem, dass sich mein Text wenn ich das Fenster kleiner mache nicht mehr in den dafür vorgesehenen Hintergrund rein passt. hier ein paar Bilder:

http://prnt.sc/afa71i

habe das alles in CSS gemacht. der Code der 2 Div sachen:

#inhalt {width:900px; margin-left: auto; margin-right: auto;font-family:"Trebuchet MS", Helvetica, sans-serif; letter-spacing: 4px}

#body {background-image:url(Hintergrund.png); background-size: contain; background-repeat: no-repeat; background-size: 100% 100%}

Iinhalt ist der Text und Body ist der Hintergrund.

Antwort
von aurata, 17

Hallo, habe versucht den kompletten Code-Beispiel hier einzufügen, doch das funktioniert nicht (*grummel#?§1"~!!!).
Habe den Code aus pastebin abgelegt.

Jedenfalls ist es nicht notwendig eine weiße Grafik einzufügen. Das kannst du auch ganz leicht mit etwas box-shadow (CSS) schaffen.

Hier ein Codebeispiel, so in etwa könnte das funktionieren:

http://pastebin.com/6meqAygc

Antwort
von Minilexikon, 22

Statt eines Bildes würde ich bei den einfachen beiden Farben einfach CSS nehmen: http://codepen.io/Minilexikon/pen/wGoeOp

Antwort
von Steffile, 51

Klar, weil der Inhalt auf 900px definiert ist, versuchs mit Prozenten, oder lies dich in @media queries ein.

Kommentar von xReflexionx ,

das mit 50% anstatt 900px ist besser, kann ich machen das es aber in der form bleibt ? also in dem weißen hintergrund?

weil jetzt der text sich nach oben verschiebt über den rand

ich möchte das ca so, wie bei gutefrage.net das wenn ich das fenster verschiebe sich alles anpasst :/

danke aber für die schnelle antwort :)

Kommentar von Sarkophator ,

Gehört der weiße Hintergrund zum Hintergrund der Seite? Falls ja, dann mach den aus dem Hintergrund raus und setze das komplett mittels CSS um falls dich davon nichts abhält. (Und wenn dich was davon abhält, dann was genau?) Dann bleibt der Text auch garantiert in der Box drin.

Kommentar von xReflexionx ,

nein, das war ein bild.

habe es jetzt versucht zu machen mit einem blauen hintergrund und einem 2 bild was weiß ist aber irgendwie will das nicht gehen 

Antwort
von FloPinguin, 22

Dein Background sollte nicht dazu dienen, Boxen anzuzeigen, mach das lieber mit divs welche einen weißen Hintergrund haben

Antwort
von PeterKremsner, 49

Leider gibt es bei CSS noch keine Textgröße die sich mit der Fenstergröße ändert (ist aber in CSS3 vorgesehen)

Du kannst nur mit Mediaquerrys den Text kleiner machen wenn das Fenster unter eine gewisse größe fällt.

Oder du gibst dem div mit dem Text drinnen mit css die overflow: scroll eigenschaft.

Das Problem ist aber dass du dann eine scrollbar bekommst.

Du kannst auch setzten dass ein Automatischer Zeilenumbruch gemacht wir damit der Text immer passt.

Schau dir dazu am besten die overflow direktive von css an.

Kommentar von FloPinguin ,

Du bist ein wenig outdated - vw, vh, vmin, vmax - Mit diesen Einheiten lässt sich Text dynamisch an die Browsergröße anpassen :)

Kommentar von PeterKremsner ,

Ich kenne diese Einheiten, die sind aber Bestandteil von CSS3 so wie ich in meiner Antwort geschrieben habe.

Diese Einheiten werden aber noch nicht in allen Browsern unterstützt und es gibt auch noch einige Bugs die mit diesen Einheiten zusammenhängen daher würde ich sie persönlich noch nicht verwenden.

Kommentar von tWeuster ,

http://caniuse.com/#search=vw,%20vh,%20vmin

Generell kann man diskutieren wann man diese Einheiten benutzen sollte. Sollte es aber einen guten Grund geben sie zu verwenden würde ich nicht zögern.

Kommentar von PeterKremsner ,

Es kommt drauf an welche Leute man erreichen will, grundsätzlich würde ich aber nichts verwenden dass bei manchen browsern nur teilweise funktioniert und bei einigen verbuggt ist.

Es ist ebenso ratsam auch abwärtskompatibel zu sein, mindestens 1-2 Browser generationen zurück.

Mit den Bugs beziehe ich mich übrigens auf die Seite caniuse.

Ebenso missfällt mir auch der Einsatz von Singlepage Application, weil ich denke dass man auch Nutzern die Javascript deaktiviert haben, eine gute Seite bieten sollte.

Ich bin selbst Webdeveloper bei einem Unternehmen und man glaubt nicht wie viele Bugs gemeldet werden wenn man so experimentelle Sachen wie die neuen CSS Einheiten verwendet und damit alle Nutzer die Seite ähnlich sehen ist man dann entweder gezwungen die Seite umzugestallten oder workarounds zu implementieren.

Und aufgrund solcher Erfahrungen rate ich von der Verwenung dieser Einheiten ab.

Es ist besser derzeit noch em zu verwenden, passt sich zwar nicht an die Containergröße an, aber mehr oder weniger an die Bildschirmgröße der Anzeigegeräte

Kommentar von aurata ,

So, wie das der Fragesteller gemacht hat, ist es klar, dass der Inhalt hinausragt. Aber wieso gibt es die Font-Größe nicht? Wie wäre es mit 100%, oder 1em, das skaliert, je nach Ausgabemedium...

Kommentar von PeterKremsner ,

1em und auch die Angabe in % skaliert nach dem Ausgabemedium nicht aber nach der Containergröße, wenn du das Browserfenster kleiner machst dann wird da nichts skaliert und das war auch die Frage vom Fragesteller.


Keine passende Antwort gefunden?

Fragen Sie die Community