4 Replies Latest reply on Aug 1, 2006 3:37 AM by Newsgroup_User

    More of a CSS question really....

    adeking Level 1
      Hi,

      I am creating a site that uses quite a lot of bullet points in various areas of the design, such as content and navigation.

      I have designed my own bullet image, which is applied through my stylesheet.

      Is there a way to get the second (and subsequent) lines of text all to align together when using bullet points.

      An example is below of what I currently have is below.

      - Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah

      This is what I currently have, but I want all the lines of text to be aligned with the first "B" on the first line.

      Thanks for your time, I hope I have explained myself correctly!

      Adrian
        • 1. Re: More of a CSS question really....
          Level 7
          I think if you try
          ul {
          list-style-position: outside;
          }
          that should do, maybe with a bit of margin change as well.

          HTH

          Piers


          • 2. Re: More of a CSS question really....
            Level 7
            adeking wrote:
            > This is what I currently have, but I want all the lines of text to be aligned
            > with the first "B" on the first line.

            Put this in your style rule for the bulleted lists.

            list-style-position: outside;

            This should be the default value anyway, so it's possible that your
            image is pushing the first line in. You may also need to experiment with
            margin and/or padding on your li elements.

            --
            David Powers
            Author, "Foundation PHP for Dreamweaver 8" (friends of ED)
            Author, "Foundation PHP 5 for Flash" (friends of ED)
            http://foundationphp.com/
            • 3. Re: More of a CSS question really....
              adeking Level 1
              Hi,

              Thanks for the responses. I must be doing something wrong. I have added the CSS to my stylesheet and all this seems to do is override the padding I have applied so that the text doesnt overlap the bullet image.

              The CSS I am using is shown below, and an example of the HTML too.

              Thanks for your time guys.

              CSS

              #content li {
              background: url(../Images/content_bullet.gif) no-repeat 5px 5px;
              padding: 2px 0px 2px 5px;
              list-style-position:outside;
              }

              HTML

              <li>50 students and five members of staff went on the first Macmillan trip to the United States . A six day visit to New York, postponed after 9/11, permitted experience of art and culture – the Metropolitan Museum of Art (MOMA), Broadway, the Empire State Building, Statue of Liberty, Brooklyn Bridge and much more.</li>
              <li>Year 8 students combined Geography and Languages in northern France and followed this up on return with French breakfasts and thinking skills challenges. </li>

              Thanks once again..
              • 4. Re: More of a CSS question really....
                Level 7
                adeking wrote:
                > The CSS I am using is shown below, and an example of the HTML too.
                >
                > #content li {
                > background: url(../Images/content_bullet.gif) no-repeat 5px 5px;
                > padding: 2px 0px 2px 5px;
                > list-style-position:outside;
                > }

                You're using the image as a background, not as a bullet. The CSS should
                be like this:

                #content li {
                list-style-image: url(../Images/content_bullet.gif);
                padding: 2px 0px 2px 5px;
                }

                You may need to experiment with padding and/or margin.

                --
                David Powers
                Author, "Foundation PHP for Dreamweaver 8" (friends of ED)
                Author, "Foundation PHP 5 for Flash" (friends of ED)
                http://foundationphp.com/