8 Replies Latest reply on Jul 28, 2008 12:31 PM by Newsgroup_User

    CSS - Border Question

    Level 1
      I'm adding some subheaders and would like to create a dotted underline that is as long as the text. What happened though is that when I applied the css (I used the <h1> tag), the line goes all the way across the page. Is there a simple way to define the right width so that the underline is only as long as the text (with out creating some table or work around)?

      Thanks in advance!

      Tim
        • 1. Re: CSS - Border Question
          Level 7
          .oO(MonkeyPiePdx)

          >I'm adding some subheaders and would like to create a dotted underline that is
          >as long as the text. What happened though is that when I applied the css (I
          >used the <h1> tag), the line goes all the way across the page. Is there a
          >simple way to define the right width so that the underline is only as long as
          >the text (with out creating some table or work around)?

          Block-level elements like a heading spread across the entire available
          width by default. For things like above you have to make them behave as
          shrink-to-fit. There are several ways to achieve that, each with varying
          browser support.

          http://www.brunildo.org/test/shrink-to-fit.html

          Micha
          • 2. Re: CSS - Border Question
            Level 7
            Use the CSS text-decoration property.
            http://reference.sitepoint.com/css/text-decoration

            --

            Walt


            "MonkeyPiePdx" <webforumsuser@macromedia.com> wrote in message
            news:g62o91$srh$1@forums.macromedia.com...
            > I'm adding some subheaders and would like to create a dotted underline
            > that is
            > as long as the text. What happened though is that when I applied the css
            > (I
            > used the <h1> tag), the line goes all the way across the page. Is there a
            > simple way to define the right width so that the underline is only as long
            > as
            > the text (with out creating some table or work around)?
            >
            > Thanks in advance!
            >
            > Tim
            >


            • 3. Re: CSS - Border Question
              Level 1
              Thanks for the replies. The shrink to fit is a little above my skill level. The text decoration - seems good - but I didn't know if you could define the type, color and spacing away from the text of the underline text-decoration. Is that do-able with the text-decoration? Thanks!
              • 4. Re: CSS - Border Question
                Level 7
                No. See the link I gave you for a full description and explanation of what
                it can do.

                --

                Walt


                "MonkeyPiePdx" <webforumsuser@macromedia.com> wrote in message
                news:g63559$ctl$1@forums.macromedia.com...
                > Thanks for the replies. The shrink to fit is a little above my skill
                > level.
                > The text decoration - seems good - but I didn't know if you could define
                > the
                > type, color and spacing away from the text of the underline
                > text-decoration.
                > Is that do-able with the text-decoration? Thanks!
                >


                • 5. Re: CSS - Border Question
                  Level 1
                  Walt,

                  I looked at the link and read the whole page. I must be missing what you're trying to tell me. (I'm slow or just missing it). So with the text decoration (underline) you can define the thickness, color, style and offset from the text it's attached to? I always thought that the text decoration - specifically underline was pretty locked down.

                  Thanks! Tim
                  • 6. Re: CSS - Border Question
                    Level 7
                    Text-decoration cannot accomplish what you want. Border can, but be aware
                    that you would need to apply a border to all of the pseudo-classes for this
                    to work without causing a 'jump' in the text on rollover as that border
                    appears and disappears. Make the link pseudo-class have a border that's
                    identical to the hover pseudo-class, except in a color that matches the
                    background color so it's not visible.

                    --
                    Murray --- ICQ 71997575
                    Adobe Community Expert
                    (If you *MUST* email me, don't LAUGH when you do so!)
                    ==================
                    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                    ==================


                    "MonkeyPiePdx" <webforumsuser@macromedia.com> wrote in message
                    news:g6ktev$a5s$1@forums.macromedia.com...
                    > Walt,
                    >
                    > I looked at the link and read the whole page. I must be missing what
                    > you're
                    > trying to tell me. (I'm slow or just missing it). So with the text
                    > decoration
                    > (underline) you can define the thickness, color, style and offset from the
                    > text
                    > it's attached to? I always thought that the text decoration -
                    > specifically
                    > underline was pretty locked down.
                    >
                    > Thanks! Tim
                    >

                    • 7. Re: CSS - Border Question
                      Level 7
                      .oO(Murray *ACE*)

                      >Text-decoration cannot accomplish what you want. Border can, but be aware
                      >that you would need to apply a border to all of the pseudo-classes for this
                      >to work without causing a 'jump' in the text on rollover as that border
                      >appears and disappears. Make the link pseudo-class have a border that's
                      >identical to the hover pseudo-class, except in a color that matches the
                      >background color so it's not visible.

                      I don't think he wants to turn the headings into links.

                      Micha
                      • 8. Re: CSS - Border Question
                        Level 7
                        I certainly wouldn't want to either....

                        --
                        Murray --- ICQ 71997575
                        Adobe Community Expert
                        (If you *MUST* email me, don't LAUGH when you do so!)
                        ==================
                        http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
                        http://www.dwfaq.com - DW FAQs, Tutorials & Resources
                        ==================


                        "Michael Fesser" <netizen@gmx.de> wrote in message
                        news:jf6s84t9mbpjf8bm8smars160j4i4l445u@4ax.com...
                        > .oO(Murray *ACE*)
                        >
                        >>Text-decoration cannot accomplish what you want. Border can, but be aware
                        >>that you would need to apply a border to all of the pseudo-classes for
                        >>this
                        >>to work without causing a 'jump' in the text on rollover as that border
                        >>appears and disappears. Make the link pseudo-class have a border that's
                        >>identical to the hover pseudo-class, except in a color that matches the
                        >>background color so it's not visible.
                        >
                        > I don't think he wants to turn the headings into links.
                        >
                        > Micha