nicht angemeldet
Friedel
Der Martin
Friedel
Matthias Apsel
Gunnar Bittersmann
Gunnar Bittersmann
Friedel
Hallo
In einer Seite verwende ich im Text Links, die wie Buttons aussehen.
MudGuard.aButton {
-moz-appearance: button; -ms-appearance: button; -o-appearance: button; -webkit-appearance: button; appearance: button;
text-decoration: none;
color: #000;
padding: 0.2em 0.4em;
margin: 0 0.5em;
display: inline-block;
}
Soweit ist alles OK. Aber wenn ein Link zufällig nach einem Zeilenumbruch ist, sollte er besser links keinen margin haben. Wie kann ich das erreichen?
Hi,
.aButton { -moz-appearance: button; -ms-appearance: button; -o-appearance: button; -webkit-appearance: button; appearance: button; text-decoration: none; color: #000; padding: 0.2em 0.4em; margin: 0 0.5em; display: inline-block; }Soweit ist alles OK. Aber wenn ein Link zufällig nach einem Zeilenumbruch ist, sollte er besser links keinen margin haben. Wie kann ich das erreichen?
wie wär's, wenn du für den Abstand nur margin-right nutzt?
Live long and pros healthy,
Martin
??? Und wie erzeuge ich dann den Abstand auf der linken Seite? Solange der Button nicht am Zeilenanfang oder Zeilenende ist, soll er rechts und links den gleichen Abstand von 0,5em haben. Da ich keinen Blocksatz verwende, stört der rechte Abstand nicht, wenn der Button am Zeilenende ist. Aber wenn der Button am Zeilenfang ist, sorgt der linke Anstand für eine ungewollte Einrückung.
n'Abend,
??? Und wie erzeuge ich dann den Abstand auf der linken Seite?
ich dachte, den willst du nicht?
Solange der Button nicht am Zeilenanfang oder Zeilenende ist, soll er rechts und links den gleichen Abstand von 0,5em haben. Da ich keinen Blocksatz verwende, stört der rechte Abstand nicht, wenn der Button am Zeilenende ist.
Genau. Also wäre ein margin-right das Mittel der Wahl, während margin-left auf 0 stehen bleibt.
Aber wenn der Button am Zeilenfang ist, sorgt der linke Anstand für eine ungewollte Einrückung.
Ja, deswegen nur margin-right.
Live long and pros healthy,
Martin
Warum brauchst Du überhaupt einen margin? Innerhalb des Textes tut doch das Leerzeichen sein Werk.
Lorem <a href="" class="aButton">ipsum</a> dolor
Hallo Friedel,
Soweit ist alles OK. Aber wenn ein Link zufällig nach einem Zeilenumbruch ist, sollte er besser links keinen margin haben. Wie kann ich das erreichen?
imho gar nicht, denn weder CSS noch HTML wissen, ob ein Zeilenumbruch stattgefunden hat. Du könntest höchstens JavaScript einsetzen und prüfen, ob aButton.offsetLeft ungefähr dem vorgegebenen margin entspricht.
Bis demnächst
Matthias
Endlich eine Antwort, die zur Frage passt. Danke.
Kann man mit CSS irgendwie das Leerzeichen vor dem Button auf die doppelte Breite vergrößern? Dann brauche ich links keinen zusätzlichen Abstand. Das würde auch die gewünschte Darstellung erzeugen.
Hallo Friedel,
Kann man mit CSS irgendwie das Leerzeichen vor dem Button auf die doppelte Breite vergrößern?
Irgendwie sicher.
Dann brauche ich links keinen zusätzlichen Abstand. Das würde auch die gewünschte Darstellung erzeugen.
Aber in deinem problematischen Fall ist das Leerzeichen auf der vorhergehenden Zeile.
Bis demnächst
Matthias
Eben. Und dadurch ist es kein problematischer Fall. So soll es doch sein.
Inzwischen habe ich übrigens erkannt, dass die Formatierung als inline-block noch weitere Probleme bringt. Sie sorgt nämlich dafür, dass zwischen einem Link und einem folgenden Satzzeichen ein Zeilenumbruch gemacht werden kann…
https://jsfiddle.net/Friedel/ft9y4cLq/6/
Das Problem mit den Einrückungen würde sich durch die Verbreiterung des Leerzeichens vor dem Link lösen. Aber das Problem mit den Zeilenumbrüchen nach den Links nicht.
@@Friedel
Eben. Und dadurch ist es kein problematischer Fall. So soll es doch sein.
Inzwischen habe ich übrigens erkannt, dass die Formatierung als inline-block noch weitere Probleme bringt. Sie sorgt nämlich dafür, dass zwischen einem Link und einem folgenden Satzzeichen ein Zeilenumbruch gemacht werden kann…
Wozu sollte das denn gut sein? Ich hab das in meinem Pen mal rausgenommen und white-space: nowrap gesetzt.
😷 LLAP
@@Friedel
Kann man mit CSS irgendwie das Leerzeichen vor dem Button auf die doppelte Breite vergrößern?
Klar. In ein Element packen (span mit Klasse oder custom element), Schriftgröße verdoppeln, Zeilenhöhe verkleinern (da’s sich um Leerzeichen handelt, geht auf 0).
Ich hab das mal clientseitig gemacht – auch für die Leerzeichen danach.
Das sollte man aber wohl besser serverseitig tun.
😷 LLAP
Super. Danke. Das gefällt mir deutlich besser, als das was ich inzwischen gebastelt hatte.
Mist, zu früh gefreut. Das ganze soll natürlich nur bei Links der Klasse aButton wirken.
Für die Leerzeichen davor kann ich deine Methode natürlich leicht anpassen. Aber bei den Leerzeichen danach wird es schwieriger. Aber jetzt habe ich keine Zeit mehr. Vielleicht heute abend.
Hi,
Kann man mit CSS irgendwie das Leerzeichen vor dem Button auf die doppelte Breite vergrößern?
Gibt es kein word-spacing?
cu,
Andreas a/k/a MudGuard
@@MudGuard
Kann man mit CSS irgendwie das Leerzeichen vor dem Button auf die doppelte Breite vergrößern?
Gibt es kein word-spacing?
Gibt es. Ich sehe nur nicht, wie das hier helfen sollte.
Auf die Links angewandt verändert es den Abstand zwischen den Wörten innerhalb des Linktexts (in meinem Beispiel zwischen „keine“ und „Selbstregierung“), aber nicht zwischen dem ersten Wort des Linktexts und dem Wort davor bzw. dem letzten Wort des Linktexts und dem Wort danach.
Weiter oben angewandt verändert es den Abstand zwischen allen Wörten – ganz und gar nicht das, was man will.
😷 LLAP
Hallo,
Endlich eine Antwort, die zur Frage passt. Danke.
beklage dich bitte nicht über Antworten, die nicht zu deiner Idee passen, wenn die Frage ungenau ist.
Nach deiner Beschreibung im Startposting bin ich davon ausgegangen, dass du mehrere Buttons (oder etwas, das so aussieht) mit Abstand aneinanderreihen, den Abstand aber am Zeilenanfang unterdrücken willst. Daher mein Vorschlag, margin-right zu verwenden (und margin-left auf 0 zu lassen).
Dass das Ganze mitten im Fließtext stehen soll, konnte ich nicht ahnen, das finde ich auch sehr ungewöhnlich. Insofern: Vorwurf zurück an dich. Beschreibung nicht ausrerichend klar.
Live long and pros healthy,
Martin
@@Der Martin
Dass das Ganze mitten im Fließtext stehen soll, konnte ich nicht ahnen
Hm, „verwende ich im Text Links“ im Startposting ließ das für mich schon erahnen.
Deshalb auch mein Einwand, das nicht zu tun.
😷 LLAP
Hi,
Dass das Ganze mitten im Fließtext stehen soll, konnte ich nicht ahnen
Hm, „verwende ich im Text Links“ im Startposting ließ das für mich schon erahnen.
hmm ... da ist was dran. Das habe ich wohl übersehen. Mehrmals.
Aber dann verstehe ich den Wunsch nach zusätzlichem Abstand (also mehr als ein Leerzeichen ohnehin bewirkt), erst recht nicht: Das Leerzeichen sorgt für angemessenen Abstand zum vorhergehenden und nachfolgenden Wort; das padding sorgt für Abstand zwischen der Beschriftung des "Buttons" und dessen Rahmen.
Deshalb auch mein Einwand, das nicht zu tun.
Das war kein Einwand gegen die Verwendung von Links, sondern gegen deren drastisch veränderte Erscheinungsform.
Live long and pros healthy,
Martin
Nach deiner Beschreibung im Startposting bin ich davon ausgegangen, dass du mehrere Buttons (oder etwas, das so aussieht) mit Abstand aneinanderreihen, den Abstand aber am Zeilenanfang unterdrücken willst.
Das erklärt, wie du auf die Idee gekommen bist. Aber wenn ich "mehrere Buttons (oder etwas, das so aussieht) mit Abstand aneinanderreihen" gewollte hätte, hätte ich das geschrieben. Das ist doch ein spezieller Fall.
Dass das Ganze mitten im Fließtext stehen soll, konnte ich nicht ahnen, das finde ich auch sehr ungewöhnlich. Insofern: Vorwurf zurück an dich. Beschreibung nicht ausrerichend klar.
Wörtliches Zitat aus meiner Beschreibung:
In einer Seite verwende ich im Text Links, die wie Buttons aussehen.
@@Friedel
In einer Seite verwende ich im Text Links, die wie Buttons aussehen.
Es hat schon seinen Sinn, warum unterschiedliche UI-Elemente verschieden – d.h. voneinander unterscheidbar – aussehen.
Links und Buttons haben verschiedene Funktionen. Sie gleich aussehen zu lassen, deutet auf einen Designfehler hin.
😷 LLAP
@@Friedel
-ms-appearance: button
Diese Angabe ist unsinnig.
-o-appearance: button
Diese auch.
-moz-appearance: button
Und die seit kurzem nicht mehr notwendig.
😷 LLAP
Danke. Aber wie kommst du darauf, dass -moz-appearance: button seit kurzem nicht mehr nötig sein soll? Die verlinkte Can I use sogt doch das Gegenteil.
Die ersten beiden Angaben sind nicht unsinnig, sondern unnötig. Das ist nicht das gleiche. Sowas entferne ich normalerweise erst, wenn die Site funktioniert beim Feintuning. Bis dahin halte ich mich nicht damit auf, zu überprüfen welcher Browser von welchem exotischen Handy welche Angabe braucht. Aber jetzt kann ich das schon abhaken. Aber -moz-appearance: button lasse ich drin.
@@Friedel
Danke. Aber wie kommst du darauf, dass -moz-appearance: button seit kurzem nicht mehr nötig sein soll? Die verlinkte Can I use sogt doch das Gegenteil.
Der aktuelle Firefox unterstützt appearance ohne Präfix.
Die ersten beiden Angaben sind nicht unsinnig, sondern unnötig. Das ist nicht das gleiche.
Das ist mir bewusst. Deshalb sagte ich bei -moz-appearance ja auch „unnötig“.
Und bei diesen beiden sagte ich „unsinnig“, denn das sind sie. Sie hatten noch nie irgendeinen Sinn.
Edge (EdgeHTML) unterstützte die Eigenschaft mit -webkit-Präfix, nicht mit -ms.
Der Presto-Opera hat -o-appearance nie unterstützt. Außerdem ist Presto seit Jahren tot, -o also generell nicht mehr sinnvoll.
😷 LLAP
Der aktuelle Firefox ist nicht unbedingt der neuste Firefox. Auf diesem Rechner hier habe ich z.B. den aktuellen Firefox für dieses (aktuelle) Betriebssystem. Das ist Version 68.9.0esr (32-Bit). Firefox braucht die Erweiterung weiterhin auf vielen Plattformen und wird das auch noch eine Weile brauchen, weil die meisten User nicht die aktuellen Versionen der Browser haben. Wenn die Zielgruppe der Site Freaks für neuste Browser wären, bräuchte ich das nicht. Aber die Zielgruppe sind Personen jeden Alters, die reisen oder reisen wollen. Selbst wenn diese Leute zuhause einen neuen Rechner mit dem neusten Browser haben, haben sie das unterwegs oft nicht.
Natürlich braucht die Darstellung bei diesen Dinos nicht unbedingt optimal zu sein. Aber das Verwenden von Präfixen kostet nichts.