Brauche unbedingt einen CSS Spezialisten

[Maa]

Guten Tag,

ich habe folgendes Problem. Unsere Produkte sind alle registriert also mit einrem ® Zeichen versehen. Das ® Zeichen kommt unmittelbar hinter einem Wort und ist höhergestellt mit ^®.

Das Problem ist nun, dass es _zu hoch_ ist. Wenn die Produkte nun in einem längeren, mehrzeiligen Text vorkommen, dann haben manche Zeilen einen anderen Abstand zu der nächst höheren Zeile.

Wie bekommt man das Registered Zeichen weiter runter. Sagen wir ein Produkt heißt: gummibär2000®

Dann soll die "Oberkante" des Registered Zeichens bis zur oberen Endes des "b"'s gehen.

Ist verständlich was ich meine? Tut mir leid für die komische Umschreibung.

[Cheatah]

Hi,

^®.
Das Problem ist nun, dass es _zu hoch_ ist.

gib dem Element einen günstigen Wert für die vertical-align-Eigenschaft. Ggf. vergib selbsttätig Werte für font-size, line-height, padding usw.

Cheatah

[Maa]

Hallo,

gib dem Element einen günstigen Wert für die vertical-align-Eigenschaft. Ggf. vergib selbsttätig Werte für font-size, line-height, padding usw.

Aus euren Antworten schließe ich, dass man das <sup> nicht mit css formatieren kann.

Also ich habe für die body-Schriftgröße 1em notiert. Ich weiß doch nicht vieviel höher ein <sup> ein reg-Zeichen stellt. Wie soll ich da die line-height angeben können ?

[Cheatah]

Hi,

gib dem Element [...]
Aus euren Antworten schließe ich, dass man das <sup> nicht mit css formatieren kann.

ich habe Dich aufgefordert, genau dies zu tun. Mit CSS kann _jedes_ Element auf _jede_ Weise formatiert werden.

Ich weiß doch nicht vieviel höher ein <sup> ein reg-Zeichen stellt.

Dann setze Werte fest, die Du kennst.

Cheatah

[Alexander Brock]

Hallo,

gib dem Element einen günstigen Wert für die vertical-align-Eigenschaft. Ggf. vergib selbsttätig Werte für font-size, line-height, padding usw.

Aus euren Antworten schließe ich, dass man das <sup> nicht mit css formatieren kann.

Völlig falsch. Man kann mit CSS _alle_ HTML Elemente formatieren.

probiers doch einfach mal:

sup {
font-size: x;
line-height: x;
padding: x:
}
(erstetze x durch sinnvolle Werte)

Gruß
Alexander Brock

[parkbanksitzer]

Hi Maa! <img src="http://parkbanksitzer.milten.lima-city.de/smilies/smile.gif" border="0" alt="">

Sagen wir ein Produkt heißt: gummibär2000&reg; Dann soll die "Oberkante" des Registered Zeichens bis zur oberen Endes des "b"'s gehen.

Wenn die Höhe von " Wort + höhergestelltes Wort " insgesamt größer ist als der eingestellte Zeilenabstand, dann ist klar, daß eine Zeile, in der ein höhergestelltes Wort ( oder Zeichen ) vorjkommt, einen größeren Abstand zur darüberliegenden Zeile hat als eine Textzeile ohne Höherstellung.

Lösung : Schrift verkleinern mit "font-size" oder Zeilenabstand vergrößern mit "line-height" !

Grüße

parkbanksitzer <img src="http://parkbanksitzer.milten.lima-city.de/smilies/pbs02.gif" border="0" alt="">

[Maa]

Oder könnte man das <sup> ganz weglassen und stattdessen ein margin-bottom: 0.2em angeben ?

Würde das dann 0.2em von der Unterseite der line sein oder vom <div> Element ?

[parkbanksitzer]

Hi!

Oder könnte man das <sup> ganz weglassen und stattdessen ein margin-bottom: 0.2em angeben ? Würde das dann 0.2em von der Unterseite der line sein oder vom <div> Element ?

Natürlich vom Elternelement! Also von p oder div..... - ganz sicher nicht von der Zeile. Die ist ja kein "Element".

Und zu Deiner Frage, welches line-height Du nehmen sollst - probiers halt aus. Schreib einen Absatz, in dem es Zeilen mit und Zeilen ohne Höherstellungen gibt. Und dann verändere die CSS-Angaben für line-height und font-size mit "em" so lange, bis es so aussieht, daß Du zufrieden bist und alle Zeilen den gleichen Abstand zueinander haben.

Grüße

parkbanksitzer <img src="http://parkbanksitzer.milten.lima-city.de/smilies/pbs02.gif" border="0" alt="">

[Cheatah]

Hi,

Oder könnte man das <sup> ganz weglassen und stattdessen ein margin-bottom: 0.2em angeben ?

http://www.w3.org/TR/CSS21/box.html#margin-properties
"These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements."

Cheatah

[Maa]

http://www.w3.org/TR/CSS21/box.html#margin-properties
"These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements."

Habe es mit vertical-align: 0.15em; hinbekommen.

Vielen Dank.

[MudGuard]

Hi,

Oder könnte man das <sup> ganz weglassen und stattdessen ein margin-bottom: 0.2em angeben ?

Wenn Du das sup wegläßt, worauf würdest Du dann den margin-bottom (bzw. das vertical-align) überhaupt anwenden wollen?
(abgesehen davon von dem, was Cheatah ja schon gesagt hat)

cu,
Andreas

[Elya]

Hallo Maa,

^&reg;.
Das Problem ist nun, dass es _zu hoch_ ist. Wenn die Produkte nun in einem längeren, mehrzeiligen Text vorkommen, dann haben manche Zeilen einen anderen Abstand zu der nächst höheren Zeile.

Du kannst <sup> selbstverständlich mit CSS formatieren. Ich habe das für mich mal mit

sup {  font-size:75%;
       line-height:100%;
    }

gelöst, da mir das Zeichen auch immer noch zu groß war. Sah eigentlich ganz OK aus.

Gruß aus Köln-Ehrenfeld,

Elya

[parkbanksitzer]

Hi Elya! <img src="http://parkbanksitzer.milten.lima-city.de/smilies/smile.gif" border="0" alt="">

Nachdem die Proportion von höhergestellten Zeichen oder Wörtern zu ihren "Elternwörtern" eigentlich so eingestellt ist, daß dies optisch gut aussieht und angenehm zu lesen ist, würd ich da nicht rumbasteln sondern nur die Gesamtgröße ändern. Ist aber nur meine kleine bescheidene Meinung. <img src="http://parkbanksitzer.milten.lima-city.de/smilies/rotwerd.gif" border="0" alt="">

Liebe Grüße

parkbanksitzer <img src="http://parkbanksitzer.milten.lima-city.de/smilies/pbs02.gif" border="0" alt="">

[at]

Hallo.

Nachdem die Proportion von höhergestellten Zeichen oder Wörtern zu ihren "Elternwörtern" eigentlich so eingestellt ist, daß dies optisch gut aussieht und angenehm zu lesen ist, würd ich da nicht rumbasteln sondern nur die Gesamtgröße ändern.

Du kennst also alle zum Einsatz kommenden Schriftarten?
MfG, at