Text fix setzen

[Christian Huml]

Hallo wieder mal 😀

gibt es Möglichkeiten einen Text so fix zu setzen also einzurücken wie Beispielsweise text-align oder text-indent nur dass der Abstand selbst bestimmt wird und dies bei Größenänderungen gleich bleibt?

Mit freundlichen Grüßen

Christian

[Maetzzen]

Hi Christian,

was genau meinst du damit:

nur dass der Abstand selbst bestimmt wird und dies bei Größenänderungen gleich bleibt?

Sagt dir das Boxen-Modell was? Mit Padding und Margin kannst du sowohl den äußeren als auch den inneren Abstand des HTML-Elements, gemessen an seinem Rahmen (Border) festlegen.

Gruß Maetzzen

Edit: Link geändert

[Christian Huml]

Sagt dir das Boxen-Modell was? Mit Padding und Margin kannst du sowohl den äußeren als auch den inneren Abstand des HTML-Elements, gemessen an seinem Rahmen (Border) festlegen.

@Maetzzen

Vielen Dank für deine Rückmeldung. Habe mal ein Beispiel gemacht Codepen der Text sollte immer an gleicher Stelle bleiben. Beim Browser (Zoom) 100% kein Problem, so größer der Zoomfaktor um so weiter verschiebt sich der Text nach rechts. Hat dies überhaupt noch etwas mit box-sizing zutun?

Mit freundlichen Grüßen

Christian

[Auge]

Hallo

Vielen Dank für deine Rückmeldung. Habe mal ein Beispiel gemacht Codepen der Text sollte immer an gleicher Stelle bleiben. Beim Browser (Zoom) 100% kein Problem, so größer der Zoomfaktor um so weiter verschiebt sich der Text nach rechts. Hat dies überhaupt noch etwas mit box-sizing zutun?

In deinem Beispiel hat es nichts mit Box-Sizing zu tun. Das könnte es aber, wenn du andere Eigenschaften als text-indent manipulieren würdest, z.B. margin oder padding.

Du legst für div.inhalt einen Wert von 15em für text-indent fest. Wird nun die Schriftgröße skaliert, ändert sich mit ihr auch der von ihr abhängige Wert der Einrückung. Das liegt daran, dass du eine Maßeinheit (em) benutzt, die direkt von der konkreten Schriftgröße abhängig ist. Die Einrückung wächst oder schrumpft also proportional zur aktuellen Schriftgröße.

Wenn du eine von der Schriftgröße unabhängige, immer gleiche Einrückung benutzen willst, musst du eine passende Einheit verwenden. Tatsächlich kannst du hier px verwenden, es ginge auch rem, eine Einheit, die zwar von der im Browser festgelegten Schriftgröße abhängig ist, also in verschiedenen Browsern einen verschiedenen Wert haben kann, die sich aber beim zoomen einer Seite in einem Browser nicht verändert.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Tatsächlich kannst du hier px verwenden

Nein. Abgesehen davon, dass px so gut wie immer eine schlechte Wahl ist, ändert sich beim Zoomen die dargestellte Größe von 1px …

es ginge auch rem

… und natürlich auch die von 1rem.

LLAP 🖖

[Christian Huml]

@Auge @Gunnar Bittersmann

Das einzige was mir gerade noch eingefallen ist Codepen dadurch würde der Text immer gleich bleiben.

Mit freundlichen Grüßen

Christian

[Christian Huml]

@Auge @Gunnar Bittersmann

Nachtrag:

Oder habt Ihr vielleicht noch andere Vorschläge? Hab auch schon bezüglich Tabelle spekuliert… Mir ist aufgefallen dass bei einem Zoom ob em, rem immer eine Verschiebung gibt.

[Maetzzen]

Hallo Christian,

wenn ich dich richtig verstanden habe, soll der Text trotz Zoom immer denselben Abstand zum Rand behalten. Mit text-indent: 10vw; passt sich der Abstand an die Breite des Viewports an, was das "Zoom-Problem" behebt, jedoch bei verschieden "breiten" Ausgabefenstern wieder anders aussieht.

Es gibt soweit ich hier gelernt habe auch keine Möglichkeit, dass Webseiten auf allen Geräten und Browsern exakt identisch dargestellt werden. Das soll aber auch nicht dein Ziel sein. Bei kleineren Viewports ist es oft hilfreich auf weniger wichtige Grafiken zu verzichten und Texte beispielsweise größer / lesbar darzustellen.

Mit @media kannst du dabei dein Stylesheet auf verschiedene Endgeräte mit unterschiedlichen Viewports anpassen. Siehe hier.

Also: Webseite soll/muss nicht überall exakt gleich aussehen.

Aber: Webseite soll/muss für verschiedene Endgeräte, Browser etc. getestet werden.

Gruß Maetzzen

[Christian Huml]

Hallo @Maetzzen

dies sollte nur für Desktop gelten jedoch nicht für Mobilgeräte.

Mit freundlichen Grüßen

Christian

[Matthias Apsel]

Hallo Christian Huml,

dies sollte nur für Desktop gelten jedoch nicht für Mobilgeräte.

Wenn sich diese Aussage auf das Vorposting bezieht, ist sie schlicht falsch.

Bis demnächst
Matthias

[Christian Huml]

dies sollte nur für Desktop gelten jedoch nicht für Mobilgeräte. Wenn sich diese Aussage auf das Vorposting bezieht, ist sie schlicht falsch.

Wie meinst du das genau?

Mit freundlichen Grüßen

Christian

[Matthias Apsel]

Hallo Christian Huml,

dies sollte nur für Desktop gelten jedoch nicht für Mobilgeräte. Wenn sich diese Aussage auf das Vorposting bezieht, ist sie schlicht falsch.

Wie meinst du das genau?

Du zuerst: Was meinst du mit „dies sollte nur für Desktop gelten jedoch nicht für Mobilgeräte“?

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

Du zuerst:

Ne, du!

Ne, du!

bis einer weint!

Gruß
Kalk

[Matthias Apsel]

Hallo Tabellenkalk,

bis einer weint!

Genau.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

bis einer weint!

Genau.

Ich geh mal Popcorn holen. Werden noch Wetten angenommen?

LLAP 🖖

[Tabellenkalk]

Hallo,

Ich geh mal Popcorn holen. Werden noch Wetten angenommen?

holst du nummeriertes Popcorn?

Gruß
Kalk

[Christian Huml]

dies sollte nur für Desktop gelten jedoch nicht für Mobilgeräte. Wenn sich diese Aussage auf das Vorposting bezieht, ist sie schlicht falsch.

Wie meinst du das genau?

Du zuerst: Was meinst du mit „dies sollte nur für Desktop gelten jedoch nicht für Mobilgeräte“?

Ich meinte damit wie in meinem Beispiel: Codepen dass der Text immer an gleicher Stelle bleibt. Ich beziehe mich hierbei nur auf PC Bildschirme, da es mir einfach linksbündig nicht gefällt. Hierfür wieder ein weiteres Beispiel: Codepen.

Der Text: "Text Beispiel" soll genau bündig mit der roten Box sein. Am besten wäre es wenn es alle PC Bildschirme abdecken würde. Bei Handys, Tablets nicht relevant da linksbündig per Media Queries.

Auf dieses hin komme ich wieder dass bei Änderung des Zoomfaktors oder Breite des Bildschirms der Text nicht bündig wie in Beispiel rote Box dargestellt wird. In diesem Fall schon da Text-align jedoch nicht bei text-indent.

Mit freundlichen Grüßen

Christian

[Gunnar Bittersmann]

@@Christian Huml

Der Text: "Text Beispiel" soll genau bündig mit der roten Box sein.

Da du die Breite der roten Box und ihren Abstand von der Mittellinie kennst, kannst du doch deren Abstand vom linken Rand berechnen (calc(50% - 11em)) und dem Text entsprechendes padding-left geben.

Oder du machst es mit Grid.

LLAP 🖖

[Christian Huml]

@Gunnar Bittersmann

Hört sich gut an. 😀

[Christian Huml]

@Gunnar Bittersmann

Ist Grid auch möglich auf Grafiken?

Mit freundlichen Grüßen

Christian

[Matthias Apsel]

Hallo Christian Huml,

Ist Grid auch möglich auf Grafiken?

Was möchtest du erreichen?

Bis demnächst
Matthias

[Christian Huml]

@Matthias Apsel

Was möchtest du erreichen?

Ich möchte die SVG bündig mit der Box setzen.

Mit freundlichen Grüßen

Christian

[Christian Huml]

@Matthias Apsel

Leider habe ich von dir noch keine Antwort erhalten 😉 Was wäre deiner Meinung sinnvoller Grid oder Calc?

Mit freundlichen Grüßen

Christian

[Matthias Apsel]

Hallo Christian Huml,

Leider habe ich von dir noch keine Antwort erhalten 😉 Was wäre deiner Meinung sinnvoller Grid oder Calc?

Wo kann man sich das anschauen?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Christian Huml

Leider habe ich von dir noch keine Antwort erhalten

Das könnte an deiner Frage liegen. In diesem Posting hattest du zwei Pens verlinkt, die was ziemlich Unterschiedliches zeigen. Was genau willst du?

LLAP 🖖

[Christian Huml]

@Gunnar Bittersmann

Das könnte an deiner Frage liegen. In diesem Posting hattest du zwei Pens verlinkt, die was ziemlich Unterschiedliches zeigen. Was genau willst du?

Die Ausrichtung auf die Box soll einmal für eine Grafik gelten und einen Text. Nun besteht die Frage ob dies alles entweder über Calc oder Grid möglich ist oder ob beides verwendet werden muss um dies realisieren zu können.

Mit freundlichen Grüßen

Christian

[Gunnar Bittersmann]

@@Christian Huml

Das könnte an deiner Frage liegen. In diesem Posting hattest du zwei Pens verlinkt, die was ziemlich Unterschiedliches zeigen. Was genau willst du?

Die Ausrichtung auf die Box soll einmal für eine Grafik gelten und einen Text. Nun besteht die Frage ob dies alles entweder über Calc oder Grid möglich ist oder ob beides verwendet werden muss um dies realisieren zu können.

Deine Frage nach dem Mittel (calc() oder Grid) hatte ich schon verstanden. Nur dein Ziel nicht. Was genau willst du?

LLAP 🖖

[Gunnar Bittersmann]

@@Christian Huml

Vielen Dank für deine Rückmeldung. Habe mal ein Beispiel gemacht Codepen der Text sollte immer an gleicher Stelle bleiben. Beim Browser (Zoom) 100% kein Problem, so größer der Zoomfaktor um so weiter verschiebt sich der Text nach rechts. Hat dies überhaupt noch etwas mit box-sizing zutun?

Das hat damit zu tun, dass sich beim Zoomen die dargestellte Größe von 1(r)em ändert. Und das ist auch gut so.™

LLAP 🖖

[Christian Huml]

@Maetzzen

Durch die verschiedenen Bildschirme wird die Texteinrückung anders dargestellt die sollte immer gleich bleiben.

[Gunnar Bittersmann]

@@Christian Huml

Durch die verschiedenen Bildschirme wird die Texteinrückung anders dargestellt die sollte immer gleich bleiben.

Du hast das in % angebeben, willst aber em oder rem verwenden?

LLAP 🖖

[Christian Huml]

@Gunnar Bittersmann

Du hast das in % angebeben, willst aber em oder rem verwenden?

Ich habe überall em verwendet, wäre rem deiner Meinung nach sinvoller?

Mit freundlichen Grüßen

Christian

[Gunnar Bittersmann]

@@Christian Huml

Ich habe überall em verwendet, wäre rem deiner Meinung nach sinvoller?

Das kommt darauf an, was du erreichen möchtest.

LLAP 🖖