Inhalt läuft über div hinaus

[Seppalot]

Hallo zusammen!

Bin ganz neu hier und hab gleich mal ne (wahrscheinlich) blöde Frage.
Woran liegt es, wenn ich ein div positioniert habe und darin Text platziere, dass der Inhalt über die angegebene größe hinausläuft?

Hier mal das Problem dargestellt: Einfach auf Über uns klicken

Bike-Sport-Schauer

Kann mir vorstellen, dass es am absolute liegt, wenn ja, wie kann ich es umgehen, dass die Box trotzdem horizontal und vertikal ausgemittelt wird.

Danke schonmal und Grüße

 

[bodil]

Hallo Seppalot, willkommen bei html.de!

Zum Einen verwendst du 2 × feste Höhen (500px) zum anderen gestattest du deiner Hitergrundgrafik in #section2 keine Wiederholungen.
Für das was du vorhast (halbtransparenter einfarbiger Hintergrund) reicht eigentlich eine Hintergrundgrafik von 1×1 Pixel Größe, wenn sie nur mit repeat eingebaut wird. Generell sind solche Effekte inzwischen auch mit css möglich.

Bodil

 

[Seppalot]

Das werd ich morgen sofort mal checken, danke dir schonmal für die schnelle Antwort :)

 

[Seppalot]

Das Problem ist ja, ich habs mit css probiert, einfach nen weißen Hintergrund und dem einen alpha-Wert gegeben. Dann ist der Inhalt auch transparent geworden :(

 

[ChillerT]

Hallo Seppalot,

Höhen- und Breitenangaben stehen in .selection und in .selection2. Einmal sollte ausreichen.

Zudem sehe ich leider nicht, welcher Text bei dir über den Rand hinaus schießt.
Allerdings zeigt er mir aufgrund des overflow-y wertes "scroll" immernoch einen scrollbalken an.
Diesen würde ich ggf. ganz herausnehmen.

Zum Thema transparenter Hintergrund mit CSS:
Transparente Hintergründe mit CSS (crossbrowser) - High Resolution Weblog

Und auch die Ein- und Ausblendung der verschiedenen Inhalte ist dank CSS3 ohne Javascript kein Problem mehr, Stichwort: transition:
CSS 3 im Praxistest: Transition | Webkrauts

Generell ist es immer empfehlenswert auf so viel Javascript wie möglich zu verzichten.
Zum Einen ist es eine Virenschleuder und zum anderen, größtenteils Punkt 1 bedingt, nutzen viele Internetnutzer Addons wie noScript, welche Javascripte auf Websites blockieren.

Liebe Grüße, ChillerT

 

[Tronjer]

Das Attribut Opacity vererbt sich auf alle Kindelemente. Besser ist da rgba().

 

[MrMurphy]

Hallo,

ich denke, du entwickelst die Seite in die falsche Richtung. Die muss dem Hund (den möglichen Kunden) gefallen und weder dem Website-Ersteller noch dem Fahrradhändler.

Text über Hintergrundbildern erschwert das Lesen ungemein, wirkt amatuerhaft verspielt und veranlasst viele Leute dazu solche Seiten gleich wieder u verlassen.

Ein absolutes No-Go ist der nervige ständige Wechsel der Hintergrundgrafik.

Eine Website muss auch bei blockiertem Java-Script funktionieren, das ist nicht der Fall.

Das ohne aktiviertes Java-Script der Link zum Impressum nicht angezeigt wird erfreut zudem jeden Abmahnanwalt, da kann der Auftraggeber gleich mal ein paar tausend Euro für den zur Seite legen.

Was hingegen fehlt ist eine vernünftige Ausgabe auf Smartphones und Tablett-PCs.

Die Seite entspricht gedanklich ungefähr dem Stand aus dem Jahr 2000 und hat mit aktuellen Erfordernissen (bislang jedenfalls) so gut wie nichts zu tun.

Gruss

MrMurphy

 

[Tronjer]

So auf den ersten Blick finde ich die Seite gar nicht mal schlecht.

DIe Hintergrundbilder würde ich im Photoshop in ihrer Opazität heruntersetzen. Dann wirken sie nicht so dominant unter den Texten.