Wann Welche Einheit

[Lukas T.]

Hallöchen zusammen,

ich beschäftige mich jetzt schon ein Weilchen mit HTML & CSS und bin gerade ziemlich ratlos. Mich beschäftigen da einige Fragen:

Wenn ich eine Seite aufbaue, dann unterteile ich die Seite doch in bestimmte Sinnabschnitte. Oberstes Gebot ist es keine horizontalen Scrollbars zu erzeugen. D.h. ich muss eine flexieble Breite der Abschnitte vorgeben (wenn es bei 1024 gut aussieht sollte das für 800 auch so sein). Auch muss ich, wenn ich einen Abschnitt mit position: absolute an eine bestimmte Stelle setzen will, dafür sorgen, dass es bei unterschiedlichen Bildschirmbreiten / -höhen gleich aussieht. Welche Einheit sollte ich nun für top, bottom, left, right, width nehmen? Alles in %? Wobei dann noch die Frage ist, ob jedes top, bottom, left, right, width in % sein sollte. Also auch die Kindelemente der Abschnitte und deren Kindelemente usw..

Welche Einheit sollte bei font-size und line-height benutzt werden? px, em oder rem?

Welche bei margin / padding? px oder %?

In welchen Situationen sollte man vw und vh nutzen?

Ich hoffe da findet sich jemand, der mir durch diesen Einheiten-Dschungel hilft.

L.G.
Lukas

[Der Martin]

Hallo,

Wenn ich eine Seite aufbaue, dann unterteile ich die Seite doch in bestimmte Sinnabschnitte.

du hast da gerade ein ganz entscheidendes Wort benutzt: _Sinn_abschnitte.

Das bedeutet, dass die Gliederung des Dokuments sich in erster Linie am Sinn, also am Inhalt orientieren sollte.

Oberstes Gebot ist es keine horizontalen Scrollbars zu erzeugen.

Nein. Das ist zwar ein lobenswerter, guter Vorsatz, aber es mag Fälle geben, wo auch horizontales Scrollen nicht nur unvermeidbar, sondern vielleicht auch das kleinste Übel ist. Das sollte man also von Fall zu Fall beurteilen.

D.h. ich muss eine flexieble Breite der Abschnitte vorgeben

Und "eine flexible Breite vorgeben" heißt im Idealfall, gar keine Breite vorgeben. Dann ergibt sie sich aus dem Inhalt und der Wechselwirkung verschiedener Blöcke. Aber auch das ist so nicht immer möglich; manchmal muss man einfach Angaben zur Breite machen. Oder man will es, um wenigstens einen Bereich einzugrenzen, innerhalb dessen die Anordnung flexibel sein kann.

Auch muss ich, wenn ich einen Abschnitt mit position: absolute an eine bestimmte Stelle setzen will, dafür sorgen, dass es bei unterschiedlichen Bildschirmbreiten / -höhen gleich aussieht.

Nein. Je nach Display-Größe können auch unterschiedliche Anordnungen am besten geeignet sein. Und absolute Positionierung würde ich nur als allerletztes Mittel einsetzen, normalerweise aber meiden. Die Probleme und Nachteile, die man sich damit einhandelt, möchte man oft gar nicht haben.

Welche Einheit sollte ich nun für top, bottom, left, right, width nehmen?

Je nachdem. ;-)

Welche Einheit sollte bei font-size und line-height benutzt werden? px, em oder rem?

Welche bei margin / padding? px oder %?

Kommt immer drauf an, was man erreichen möchte.

In welchen Situationen sollte man vw und vh nutzen?

Wenn man bestimmte Maße proportional an die Breite oder Höhe des Browserfensters koppeln möchte.

Ich hoffe da findet sich jemand, der mir durch diesen Einheiten-Dschungel hilft.

Der erste Schritt wäre, zu lernen, welche Einheit was bedeutet und wie sie definiert ist. Bei relativen Einheiten ist auch immer ganz wichtig, worauf sie sich beziehen.

Der zweite Schritt ist, das Gesamtkonzept zu betrachten - also das gewünschte Layout, und daran festzulegen, welche Maße wie skalieren sollen (und ob überhaupt), und dann die dazu passenden Einheiten zu wählen.

So long,
 Martin

[TS]

Hallo und guten Abend,

Und "eine flexible Breite vorgeben" heißt im Idealfall, gar keine Breite vorgeben.

Ich lese auch am liebsten 400 Zeichen lange Zeilen. Da hat man dann wenigstens hinten schon veergessen, worum es vorne ging.

Grüße
TS

[Der Martin]

Hi,

Und "eine flexible Breite vorgeben" heißt im Idealfall, gar keine Breite vorgeben.

Ich lese auch am liebsten 400 Zeichen lange Zeilen.

ich auch, wenn das ohne Querscrollen noch passt.

Da hat man dann wenigstens hinten schon veergessen, worum es vorne ging.

Ist das bei dir von der Zeilenlänge abhängig? Bei mir nicht, das kann bei ausreichend komplexen oder konfusen Formulierungen mit kurzen Zeilen ebenso passieren. Aber bei langen Zeilen habe ich immerhin eine größere Chance, dass ein Satz nicht über mehrere Zeilen geht, so dass ich nicht mitten im Satz ab- und am Anfang der nächsten Zeile wieder aufsetzen muss.

So long,
 Martin

[encoder]

Aber bei langen Zeilen habe ich immerhin eine größere Chance, dass ein Satz nicht über mehrere Zeilen geht, so dass ich nicht mitten im Satz ab- und am Anfang der nächsten Zeile wieder aufsetzen muss.

Dafür hat man das Problem, am Ende einer langen Zeile nicht mehr sofort den Sprung zum Anfang der nächsten Zeile zu finden. Deswegen sind Zeitungsartikel mehrspaltig. Das ist ein Effekt auf den man seine Seite auch testen sollte.

[Sascha Suschu]

Aber bei langen Zeilen habe ich immerhin eine größere Chance, dass ein Satz nicht über mehrere Zeilen geht, so dass ich nicht mitten im Satz ab- und am Anfang der nächsten Zeile wieder aufsetzen muss. Dafür hat man das Problem, am Ende einer langen Zeile nicht mehr sofort den Sprung zum Anfang der nächsten Zeile zu finden. Deswegen sind Zeitungsartikel mehrspaltig.

Verstehe ich nicht. In meiner Zeitung besteht jeder Artikel aus einem großen Bild und einer Zeile Text darunter.

Das ist schon ganz schön aufwendig.

[Tabellenkalk]

Hallo,

Verstehe ich nicht. In meiner Zeitung besteht jeder Artikel aus einem großen Bild und einer Zeile Text darunter.

Du besitzt eine eigene Zeitung???

Gruß
Kalk

[Der Martin]

Hi,

Verstehe ich nicht. In meiner Zeitung besteht jeder Artikel aus einem großen Bild und einer Zeile Text darunter.

Du besitzt eine eigene Zeitung???

mit großen Bildern und großen Buchstaben. Und jeden Tag eine neue! ;-)

So long,
 Martin

[Gunnar Bittersmann]

@@Lukas T.

wenn es bei 1024 gut aussieht sollte das für 800 auch so sein

Du sagst es. Und bei 400. Und bei 399. Und vergiss Pixel.

dafür sorgen, dass es bei unterschiedlichen Bildschirmbreiten / -höhen gleich aussieht.

Nein. Gut, nicht gleich.

Welche Einheit sollte bei font-size und line-height benutzt werden? px, em oder rem?

Für font-size em oder rem – je nachdem, was man erreichen will. Und vergiss Pixel.

Für line-height gar keine oder %. 1.42 sollte dasselbe sein wie 1.42em sollte dasselbe sein wie `142%``.

Welche bei margin / padding? px oder %?

Eher nicht %, sondern em oder rem – je nachdem, was man erreichen will. Und vergiss Pixel.

Für die Breite von Boxen ist % brauchbar. Für Textboxen eine Maximalbreite in em.

In welchen Situationen sollte man vw und vh nutzen?

Viewport vs Percentage Units

Ich hoffe da findet sich jemand, der mir durch diesen Einheiten-Dschungel hilft.

Bitteschön, gerngeschehn.

LLAP 🖖