4 Replies Latest reply on Jan 31, 2010 7:54 AM by geotso

    list indentation

    geotso

      This is a sample of code, that also explains the problem:

      <div style="float:left; width:160px">

        some text or/and an image of the same width as the div tag

      </div>

      <p>Some text. It appears at the right of the div. It is just a little block of text, that leaves an empty space underneath, so the following list also appears at the right of the div</p>

      <ul>

        <li>I want this, indented in relation with the above paragraph...</li>

        <li>... as it happens when the floating div is not present.</li>

        <li>However, the text is aligned according the preceding paragraph...</li>

        <li>... while the bullets float over the image in div tag.</li>

      </ul>

       

      Normally, the indent is about 30px for the bullet, plus about 20px for the text. How to keep that indent in a case like the example?

        • 1. Re: list indentation
          M.R.Biesheuvel Level 3

          I'm not completely sure what you mean.If you want to line up the unordered list beneath the div and the paragraph you simply add one div tag like:

           

           

          <div>

          <div style="float:left; width:160px">

            some text or/and an image of the same width as the div tag

          </div>

          <p>Some text. It appears at the right of the div. It is just a little block of text, that leaves an empty space underneath, so the following list also appears at the right of the div</p>

          </div>

          <ul>

            <li>I want this, indented in relation with the above paragraph...</li>

            <li>... as it happens when the floating div is not present.</li>

            <li>However, the text is aligned according the preceding paragraph...</li>

            <li>... while the bullets float over the image in div tag.</li>

          </ul>

           


          • 2. Re: list indentation
            Nancy OShea Adobe Community Professional & MVP

            If you could post a URL to your test page, we would better understand the problem.

             

            Trouble shooting CSS problems without seeing the whole  enchilada is difficult because styles from upper level elements cascade to lower  level elements.    If I were to make a wild guess, try clearing your floats.

             

            Floats with clearing demo:

            http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml

             

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            www.alt-web.com/
            www.twitter.com/altweb
            www.alt-web.blogspot.com

            • 3. Re: list indentation
              martcol Level 4

              Normally, the indent is about 30px for the bullet, plus about 20px for the text. How to keep that indent in a case like the example?

              I think that a part of the problem with lists is that different browsers apply the indent differently.  This can make it a little tricky to get the indenting how you want it.

               

              I've got a sample list at the bottom of this page and, the way that I did it was to use my own .gif as the bullet.  Here's the CSS for the list:

               

              ul#pointers {
              margin-left:20px;
              }
              #pointers  li {
              background: url("/siteimages/can02.gif")  no-repeat scroll left center;
              list-style-position:outside;
              list-style-type:none;
              padding:4px 0  6px 30px;
              }

              Hope that helps a little

              Martin
              • 4. Re: list indentation
                geotso Level 1

                Unfortunately, this is not a site project. It's just a local help system.

                The only thing I can do is to show you a picture that I think it explains the problem:

                http://tinyurl.com/ybg3756

                 

                (Sorry for I'm late, but I have a problem with forums.adobe.com server to whom I couldn't connect -and still can't periodically).