CSS Listenpunkt soll responsive umbrechen

felsi · 19. Mai 2017

Hallo,

welche Funktion in CSS kann man dafür nutzen, dass ein Listenpunkt (Navigation) bzw. ein Wort/Satz bei entsprechender Seitenbreite umbricht? Beispiel: Die Navigation von redcoon.de. Wenn man die Seite kleiner macht, bricht die Navigation schön um, z.B. "Haushalt & Wohnen" steht dann in zwei Zeilen anstatt in einer.

Vielen Dank im Voraus.

Lawnmower · 19. Mai 2017

Wenn Du das in einem der Browser F12 Tools anschaust, siehst Du das display:table und display:table-cell dafür verwendet wird. Im 2017 könnte es auch recht gut mit Flexboxen klappen je nachdem welche uralten IEs man noch unterstützen will (siehe https://css-tricks.com/snippets/css/a-guide-to-flexbox/); für die IE's gibts auch einen relativ einfachen Hack um daselbe Ergebnis zu erhalten.

savuti · 19. Mai 2017

Mit MediaQueries kannst du das steuern.

felsi · 19. Mai 2017

Danke. Hatte das display: table-cell gesehen, dachte jedoch nicht, dass sich das so einfach lösen lässt. Hatte auch erst an MediaQueries mit einem besonderen CSS Tag gedacht.

Madman1209 · 19. Mai 2017

Hi,

ich sehe gerade nicht so ganz, was ein Textumbruch mit "Repsonsive" zu tun hat. "Responsive" ist es z.B., wenn sich das Menü komplett in das Burger-Menü abändert.

Hier sind drei Worte bzw. Sonderzeichen in einem Element. Das Element wird kleiner, es ist nicht genug Platz in einer Zeile. Ergo: Umbruch. Dafür brauche ich weder flex noch media queries noch responsive, das ist doch absolutes Standardverhalten, jede Tabelle kann sowas ohne jegliches CSS oder Media Queries.

Code:

<!DOCTYPE html>
<html>
<body>

<table border="1">
  <tr>
    <th>Haushalt & Wohnen</th>
    <th>Haushalt & Testeingabe</th>
    <th>Haushalt & Testeingabe</th>
    <th>Haushalt & Testeingabe</th>
    <th>Haushalt & Testeingabe</th>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test2</td>
    <td>Test2</td>
    <td>Test2</td>
    <td>Test2</td>
    <td>Test2</td>
  </tr>
</table>


<div style="border: 1px solid black; font-size:58px; text-align:center;">Haushalt & Wohnen</div>
<div style="border: 1px solid black; font-size:58px; text-align:center;">Haushalt & Wohnen</div>
<div style="border: 1px solid black; font-size:58px; text-align:center;">Haushalt & Wohnen</div>


</body>
</html>

Macht genau das: Umbrechen, wenn zu wenig Platz ist. Sowohl die Tabelle als auch die divs. CSS ist hier lediglich, um die Größe bildlich darzustellen.

Oder habe ich die ursprüngliche Frage falsch verstanden?

Wenn man die Seite kleiner macht, bricht die Navigation schön um, z.B. "Haushalt & Wohnen" steht dann in zwei Zeilen anstatt in einer.

VG,
Mad

WhiteShark · 19. Mai 2017

Nein eine Tablette bricht nicht um, wenn der Platz nicht reicht. Wenn sie 4 spalten hat, bleibt es auch bei 4 spalten.

Responsive heißt nicht, das sich bspw ein Menü komplett ändern muss. Wenn sich die Website an den Bildschirm anpasst, ist sie responsive.
Wenn man nur mit Prozentwerten oder vh, vw arbeitet, braucht man nicht unbedingt mediaqueries.
In der Regel kommt man aber ohne mediaqueries nicht aus.

Madman1209 · 19. Mai 2017

Hi,

Nein eine Tablette bricht nicht um, wenn der Platz nicht reicht. Wenn sie 4 spalten hat, bleibt es auch bei 4 spalten.

es ging hier aber nicht um die Anzahl an Spalten, sondern die Anordnung innerhalb einer Zelle. Siehe redcoon und siehe auch mein Beispiel. Bei mir werden es nicht weniger oder mehr Spalten, aber innerhalb der Spalte wird der Text mehrzeilig. Darum ging es in dem Beispiel, das der TE gepostet hat!

Responsive heißt nicht, das sich bspw ein Menü komplett ändern muss. Wenn sich die Website an den Bildschirm anpasst, ist sie responsive.

habe ich auch nicht behauptet, daher das "z.B."

In der Regel kommt man aber ohne mediaqueries nicht aus.

bei RWD nicht, nein. Aber für den Fall den der TE hier beschreibt und als Beispiel verlinkt hat definitiv. Siehe mein gepostetes Beispiel.

Daher ja auch meine Frage, ob hier die Bezeichnung "Responsive" nicht die Falsche ist

VG,
Mad

Suche

CSS Listenpunkt soll responsive umbrechen

felsi

Banned

Lawnmower

Maître de cuisine

savuti

Lt. Commander

felsi

Banned

Madman1209

Fleet Admiral

WhiteShark

Admiral

Madman1209

Fleet Admiral

Ähnliche Themen