Skip to main content
D
Don Lowe
Known Participant
June 6, 2018
Question

bullets not centered with centered text

  • June 6, 2018
  • 1 reply
  • 873 views

Everything looks good in design mode but when I look in Live mode or the uploaded page, the bullets are way out to the left and not next to text (Central Ohio Hiking Club:about).  Your help will be much appreciated.

<ul>

        

            <div class="club_info_center">

              <li><strong><a href="documents/Club Info docs/COHC LIABILITY WAIVER.pdf" target="_blank">Liability Waiver<br>

                <br>

              </a></strong></li>

              <li><strong><a href="documents/Club Info docs/Hike Leader's Checklist.pdf" target="_blank">Hike Leader Checklist</a></strong><br>

                <br>

              </li>

             

              <li>

                <strong><a href="documents/Club Info docs/COHC Hike Sign-in Roster.pdf" target="_blank">Hike Sign-In Roster</a> <span class="just_red_text">(as of 6/1/18)</span></strong>

              </li>

           

         

    </ul>

    This topic has been closed for replies.

    1 reply

    ALsp
    ALsp
    Legend
    June 6, 2018

    List items (LI tags) are block-level elements and when centered, the actual element's bounding box is the entire width of the container. Modern CSS, however, can be used to position the bullets. To the UL element, declare list-style-position to a value of inside:

    ul.my-list {

    list-style-position: inside;

    }

    D
    Don LoweAuthor
    Known Participant
    June 6, 2018

    How do apply this code and what do I replace?

    Thanks.

    Don

    ALsp
    ALsp
    Legend
    June 6, 2018

    Hi Don,

    I'm afraid you need to fix some errors on your page before you tackle the list, which seems fine to me as it is. Your head code is corrupt:

    <!doctype html>

    <html>

    <style type="text/css">

    STYLES HERE
    </style>

    The following line indicates manual corruption of your page...

    <!-- InstanceBegin template="/Templates/template_2nd.dwt" codeOutsideHTMLIsLocked="false" -->

    The opening head tag belongs before the style tag.

    <head>

    </head>

    The favicon link belongs in the head...

    <link rel="shortcut icon" href="images/photos/Favicon.png">

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices