Konradin Breyer: underline dotted

Hallo!

Ich möchte, dass eine underline (<u>) dotted ist.
Also habe ich folgenden Code geschrieben:

u {
border-bottom: 1px dotted;
}

Als Ergebnis bekam ich ein unterstrichenes Wort, dass nochmal mit einer dotted Linie unterstrichen war.
Wie kann ich die Unterstréichung selber dotted machen?

Freue mich auf Antwort!

  1. Hallo,

    »

    Ich möchte, dass eine underline (<u>) dotted ist.
    Also habe ich folgenden Code geschrieben:

    u {
    border-bottom: 1px dotted;
    }
    Wie kann ich die Unterstréichung selber dotted machen?

    Freue mich auf Antwort!

    Hallo,

    .dotborder { border-bottom: 1px dotted; }

    <span class="dotborder> ... </span>

    Grüße
    Thomas

    1. Hallo,

      .dotborder { border-bottom: 1px dotted; }

      <span class="dotborder> ... </span>

      Nee, dann erscheint die linie UNTER dem Text, also auch unter den g p j y q verstehst du? Eine normale underline geht durch die g p j y q...

      Da gibts hoffentlich was besseres!

      Gruß Konradin

      1. Hallo,

        .dotborder { border-bottom: 1px dotted; }
        <span class="dotborder> ... </span>
        Nee, dann erscheint die linie UNTER dem Text, also auch unter den g p j y q verstehst du?

        Ja :-)

        Eine normale underline geht durch die g p j y q...

        Normalerweise, ja.

        Da gibts hoffentlich was besseres!

        Nein, du kannst den Stil der Unterstreichung selber nicht beeinflussen, entweder mit, dann durchgängig, oder ohne. Ansonsten nur mit border-bottom.

        Grüße
        Torsten

        1. Danke für eure Antworten!

          Es ist zwar schade, aber daran könnt Ihr ja nichts ändern.

          Also denn, danke!

      2. Hallo,

        .dotborder { border-bottom: 1px dotted; }

        <span class="dotborder> ... </span>

        Nee, dann erscheint die linie UNTER dem Text, also auch unter den g p j y q verstehst du?

        Ich nix verstehen. Du verstehen?

        Eine normale underline geht durch die g p j y q...

        Nein! Eine normale "underline" wird _unter_ dem Text dargestellt und geht nicht durch den Text. Das wäre <strike> oder <del>

        Und jetzt sage mit bitte wo du einen Unterschied sichst (mal vom border-style abgesehen)

        <body>
          <u>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt.<br>
           Nulla sit amet urna in est gravida interdum. Aenean suscipit. <br>
           Vestibulum non augue. Vivamus luctus enim ac nunc adipiscing dictum. <br>
           Nunc ac lorem eget dolor aliquam laoreet. Suspendisse potenti. Fusce urna.
          </u>
          <br>
          <br>
          <span style="border-bottom:dotted 1px;">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt.<br>
           Nulla sit amet urna in est gravida interdum. Aenean suscipit. <br>
           Vestibulum non augue. Vivamus luctus enim ac nunc adipiscing dictum. <br>
           Nunc ac lorem eget dolor aliquam laoreet. Suspendisse potenti. Fusce urna.
          </span>
         </body>

        Grüße
        Thomas

        1. Hallo, Du unglaeubiger Thomas,

          Nee, dann erscheint die linie UNTER dem Text, also auch unter den g p j y q verstehst du?
          Ich nix verstehen. Du verstehen?
          Eine normale underline geht durch die g p j y q...

          Ich verstehe sehr gut, was er meint.
          Bei normaler Unterstreichung (<u> oder text-decoration:underline)
          geht der Strich unmittelbar unter den meisten Buchstaben (z.B. m, n, o) durch,
          die Unterlaengen (z.B. von g, p, j, y) durchschneiden den Strich.
          Bei border-bottom liegt der Strich _unter_ allen Buchstaben, denn er
          stellt ja die Grenze der Box dar.

          Und jetzt sage mit bitte wo du einen Unterschied sichst (mal vom border-style abgesehen)

          <div style="font-family:'times new roman',times,sans-serif;">
            <p><u>Unterstrichen. FfJj Yy</u></p>
            <p><span style="border-bottom:dotted 1px;">Border-Bottom: FfJj Yy</span></p>
            <p><span style="border-bottom:dotted 1px red;"><u>Unterstrichen und Border-Bottom: FfJj Yy</u></span></p>
          </div>

          Wenn Du keinen Unterschied siehst

          • hast Du eine Schriftart ohne Unterlaengen eingestellt
          • hast Du eine winzige Schriftart eingestellt.
          • hast Du einen komischen Browser
          • ...

          Testseite:
          http://www.tiptom.ch/tests/css/underline.html
          Screenshot Mozilla 1.2.1 Linux, Times New Roman (25kB)
          http://www.tiptom.ch/tests/css/underline_moz121linux.png

          Wenn es bei Dir anders aussieht, d.h. wenn wirklich
          beide Linien auf genau der selben Hoehe liegen, schick
          mir einen Screenshot mit Angaben zu OS, Browser, Font...

          @Konradin: Es gibt AFAIK keine Moeglichkeit, das Aussehen
          der Unterstreichungslinie zu aendern.
          Aber: Unterstreichung wuerde ich sowieso nur bei Links einsetzen.
          An allen anderen Orten ist es nur verwirrlich, weil die
          Benutzer dann draufklicken, und nichts passiert.

          Gruesse,

          Thomas

          1. Hallo,

            @Konradin: Es gibt AFAIK keine Moeglichkeit, das Aussehen
            der Unterstreichungslinie zu aendern.

            In CSS 3 wird es das geben. Aber das dauert noch.
            http://www.w3.org/TR/css3-text/#text-decoration-style

            Tim

            --
            [x] Für die Einführung des Themenbereiches »Python«
          2. Hallo Thomas ;-)

            Ich verstehe sehr gut, was er meint.
            die Unterlaengen (z.B. von g, p, j, y)

            Ah! Dann muss er halt sagen was er meint, "durch bei Buchstaben" heisst eben durch.

            Wenn Du keinen Unterschied siehst

            • hast Du eine Schriftart ohne Unterlaengen eingestellt
            • hast Du eine winzige Schriftart eingestellt.
            • hast Du einen komischen Browser
            • ...

            Alle drei: ich hatte eine kleine Schriftgröße und eine serifenlose Schrift, so dass das nciht auffiel. Und ich kenne keinen Browser der nicht komisch wäre. ;-)

            @Konradin: Es gibt AFAIK keine Moeglichkeit, das Aussehen
            der Unterstreichungslinie zu aendern.

            Na ja ... beim dem ganz komischen Browser IE geht es schon:
            (die minus margin muss man an die Schriftgröße anpassen (z.B. 18px font-size, -4px margin)

            <span style="border-bottom:dotted 1px;">
                <span style="margin-bottom:-4px;">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt.<br />
                   Nulla sit amet urna in est gravida interdum. Aenean suscipit.<br />
                   Vestibulum non augue. Vivamus luctus enim ac nunc adipiscing dictum. <br />
                   Nunc ac lorem eget dolor aliquam laoreet. Suspendisse potenti. Fusce urna.
                </span>
                </span>

            Grüße
            Thomas

            1. hi,

              @Konradin: Es gibt AFAIK keine Moeglichkeit, das Aussehen
              der Unterstreichungslinie zu aendern.

              Na ja ... beim dem ganz komischen Browser IE geht es schon:
              (die minus margin muss man an die Schriftgröße anpassen (z.B. 18px font-size, -4px margin)

              mit einer geeigneten kombination aus schriftgrösse, fester höhenangabe und overflow liesse sich evtl. auch was machen ...

              gruss,
              wahsaga

  2. Hi,

    auf die Gefahr hin, dass die Lösung schon gepostet wurde (hab mir nicht alle Antworten durchgelesen):

    u {
    border-bottom: 1px dotted;
    text-decoration: none;
    }

    E7

    1. Hallo,

      hab mir nicht alle Antworten durchgelesen):

      Wäre aber wirklich besser gewesen.
      Denn:
      a) mehr oder weniger genau das habe ich auch vorgeschlagen
      b) genau die Lösung mit border ist nicht gefragt bzw. unzureichend.

      Grüße
      Thomas