Text-Überlappung bei kleineren Bildschirmen vermeiden

[K.Beutler]

Hallo,

ich versuche mich gerade an einem css-Layout für meine Website. Jedoch habe ich da noch das ein oder andere Problem mit der Dynamik, was die Bildschirmgröße angeht.

Mein Layout besteht aus 5 DIV-Containern (1 Header über die gesamte Breite, 3 Spalten die gefloatet werden, 1 Footer über die gesamte Breite).

Im DIV-Container der linken Spalte ist die Navigation. Auf meinem 19-Zoll-Bildschirm werden dort die mit <p> <a></a></p>eingefügten Kategorien, die teilweise aus 2 längeren Wörtern bestehen, schön nebeneinander angezeigt.

Das Problem ergibt sich bei kleineren Bildschirmen, denn dort werden diese Wörter dann getrennt und untereinander dargestellt, was als zusammenhängender Link ganz schön doof aussieht.

Wie löse ich denn primär so ein Problem?

LG

 

[Yastynu]

Du kannst die menü-spalte mit einer festen breite von bspw 200px festelegen und die anderen beiden spalten dann ganz normal in prozent angaben lassen... dann wird das menü nicht verschmälert und die wörter nicht in unterschiedliche zeilen gepackt...

.links {width: 200px;}
.mitte{min-width: 560px; max-width: 1280px;}
.rechts{width: 200px;}

die klassen, die ich hier anspreche sollten dann den 3 divs gegeben werdem, die dann die 3 spalten darstellen. die breiten kannst du und solltest du ggf. anpassen. in dem code fehlen jetzt natürlich noch die anderen informationen wie float und margin, aber es soll verdeutlichen, was ich mein

 

[K.Beutler]

Hallo,

vielen Dank für die schnelle Antwort!
Diesen Gedanken hatte ich natürlich auch schon, jedoch weiß ich nicht, wie ich dann die Breiten-Flexibilität noch gewährleisten kann..
Bisher habe ich den äußeren zwei Spalten eine prozentuale Breite von je 20% gegeben, die mittlere Hauptspalte hat 60% --> gesamt: 100%.

Wenn ich nun feste Pixel-Angaben nehme, wie gewährleiste ich dann noch die Ausbreitung auf die gesamte Breite bei großen Bildschirmen bzw. die volle Übersicht bei kleinen Bildschirmen wie z.B. Smartphones?

Lg

 

[Tronjer]

Wenn ich nun feste Pixel-Angaben nehme, wie gewährleiste ich dann noch die Ausbreitung auf die gesamte Breite bei großen Bildschirmen bzw. die volle Übersicht bei kleinen Bildschirmen wie z.B. Smartphones?

Gar nicht, und aus dem Grunde solte man auch ein fluides Layout verwenden.

Um Zeilenumbrüche zu verhindern, gibt es die CSS-Eigenschaft whitespace: nowrap.