1 Reply Latest reply on Aug 23, 2013 6:57 AM by Jon Fritz II

    Using custom bullet points in a "centered list"

    JoeDivTag

      Yes, I spent over an hour between yesterday and today after work styling a list with custom bullet points and then centering the list onto the middle of the page. It was very difficult and ultimately I failed and cannot reach a solution nor is one available on google. I entered my code and in "live" view, the list is centered and is using my custom bullet points; however, after "putting" the file onto the server and viewing the webpage, the list rendered without style whatsoever. Please help me get the list to show up styled on the server side. Here is my code for the entire page and my CSS external style sheet:

       

       

      The source code below:

       

      <!doctype html>

      <html>

      <head>

      <meta charset="UTF-8">

      <title>The Fat Loss Factor</title>

      <link href="externalstyles.css" rel="stylesheet" type="text/css"><style type="text/css">.sfadsf {font-family: 'Myriad Pro'}

      .size {font-family: 'Myriad Pro'; font-size: 19px; }

      .size {font-size: 19px}

      </style>

      <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/permanent-marker:n4:default.js" type="text/javascript"></script>

      </head>

       

       

      <body>

      <div class="nav">

        <table width="100%" border="0">

          <tr>

            <th width="25%" scope="col">Home</th>

            <th width="25%" scope="col">Terms</th>

            <th width="25%" scope="col">Disclaimer</th>

            <th width="25%" scope="col">Privacy</th>

          </tr>

        </table>

      </div>

      <div class="header" id="header"><p><center><img src="header.jpg" width="1000" height="294"  alt=""/></center></p></div>

      <div class="body">

        <h1 style="text-align: center"> </h1>

        <h1 style="text-align: center">&quot;Introducing <a href="http://dc06fet7mc2e2y31tboekenhis.hop.clickbank.net/">The Fat Loss Factor</a>, Your Detox and Solution to Weight Loss!&quot;</h1>

        <p style="text-align: center"> </p>

        <p style="text-align: center"> </p>

        <h2 style="text-align: center">Download The 1st Bonus &gt;&gt;&gt;</h2>

        <p style="text-align: center"> </p>

        <p style="text-align: center"> </p>

        <h3 style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px;"><a href="http://bit.ly/14473an">DOWNLOAD THE BONUS HERE</a></h3>

        <p style="text-align: center; font-family: 'Myriad Pro';"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px;">The <span class="hightlighter">FREE</span> Bonus ebook - <strong>The Fat Loss Factor 5 Toxins In Your Body That Sabotage Your Weight Loss,</strong> by Dr. Charles (a $9.99 value): This ebook created by A Board Certified Chiropractice Physician, Dr. Charles details parasites (how common they are) and how to get rid of them, food additives, interesting facts on protein, stress, emotional eating and more! </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: Non;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: Non;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: Non;"><a href="http://bit.ly/14473an"><img src="FLF_5_toxins.jpg" width="259" height="330"  alt=""/></a></p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: Non;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: Non;"> </p>

        <h2 style="text-align: center; font-family: 'Myriad Pro'; font-size: Non;"> </h2>

        <h2>Download

          The 2nd Bonus &gt;&gt;&gt;

        </h2>

        <p> </p>

        <p> </p>

        <h3 style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px;"><a href="http://bit.ly/14pMUL7">DOWNLOAD THE BONUS HERE</a></h3>

        <p style="text-align: center"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px;"><span style="font-size: 19px">The <span class="hightlighter">FREE</span> Bonus ebook - <strong>The 7 Habits Of Highly Effective Weight Loss,</strong> by Dr. Charles (a $4.99 value): This ebook created by A Board Certified Chiropractice Physician, Dr. Charles contains 7 highly effective habits plus one secret bonus habit. A few of the habits explained are the &quot;pyramid, grazer and holiday&quot; principles. </span>Make sure you know and master these basics. A new habit takes 300 repeptitions to implement and 3000 repepitions to break. </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px;"><img src="FLF_7_habits.jpg" width="259" height="330"  alt=""/></p>

        <p> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: Non;"> </p>

        <h2 style="text-align: center; font-family: permanent-marker; font-size: 24px; font-style: normal; font-weight: 400;">Download The 3rd Bonus &gt;&gt;&gt;<br>

          <br>

          <br>

          <br>

          <br>

          <br>

        </h2>

        <h3 style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"><strong><br>

          <a href="http://bit.ly/19ZveOv">DOWNLOAD THE BONUS HERE</a></strong></h3>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px;">The <span class="hightlighter">FREE</span> Bonus ebook - <strong>Lessons From The Miracle Doctors A Step-by-Step Guide To Optimum Health and Relief from Catastrophic Illness,</strong> by Jon Barron (a $19.99 value): This ebook created by Jon Barron is highly accepeted for its value and knowledge that has helped inform others about healthy practices and alternatives to traditional medicine.  178 pages in length, it is a must have for anyone serious about improving their health today, especially for those that have experimented with alternative medical treatments before. </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px;"><img src="FLF_MD_lessons.jpg" width="259" height="330"  alt=""/></p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"> </p>

        <p style="text-align: center; font-family: permanent-marker; font-size: 24px; font-style: normal; font-weight: 400;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;">These bonus ebooks are highly recommended and will serve as a cumulative or additive effect to the results from The Fat Loss Factor. Make sure to experience this amazing remedy as the entire package, bonuses included. </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"> </p>

        <h2 style="text-align: center; font-family: permanent-marker; font-size: 19px; font-style: normal; font-weight: 400;"><span style="text-align: center; font-family: permanent-marker; font-style: normal; font-weight: 400; font-size: 23px;">THE FAT LOSS FACTOR REVIEW</span></h2>

        <p style="text-align: center; font-family: permanent-marker; font-size: 19px; font-style: normal; font-weight: 400;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"><a href="http://dc06fet7mc2e2y31tboekenhis.hop.clickbank.net/">The Fat Loss Factor</a> is here and <span class="hightlighter">exposed.</span> Do you have a weight related problem or maybe you are someone that just wants to lose some pounds to feel and look better? Perhaps you have stubborn bodyfat that won't come off. This is where The Fat Loss Factor can help you achieve your dream. It is a revolutionary program ready to be <span class="hightlighter">TAPPED</span> into today. Within 10 minutes you can begin to delve into the information that puts you closer to your goal or ideal body weight. Unlike your typical crash diet that may leave you heavier in the long run, the Fat Loss Factor preaches a novel, one-of-a-kind call to action; however, who is Dr. Charles, what does he know?</p>

        <p style="text-align: left; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"> </p>

        <blockquote>

          <blockquote>

            <blockquote>

              <blockquote>

                <blockquote>

                  <blockquote>

                    <blockquote>

                      <blockquote>

                        <blockquote>

                          <blockquote>

                            <blockquote>

                              <blockquote>

                                <blockquote>

                                  <p style="text-align: left; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;">Dr Charles is: </p>

                                </blockquote>

                              </blockquote>

                            </blockquote>

                          </blockquote>

                        </blockquote>

                      </blockquote>

                    </blockquote>

                  </blockquote>

                </blockquote>

              </blockquote>

            </blockquote>

          </blockquote>

        </blockquote>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"> </p>

        <div id="wrapper">

          <ul>

          <li>A Board-Certified chiropractic physician<span style="text-align: left; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"></span></li>

          <li>Certified wellness practitioner </li>

          <li>Certified advanced nutritionist </li>

          <li>Speaker &amp; has </li>

          <li>Helped thousands reach their weight loss dream</li>

        </ul>

      </div>

        </ul>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;">Dr. Charles invented the Fat Loss Factor after an experiment with his favorite client. Lory, after her pregnancy was at a whopping 210 lbs; however, at the end of Dr. Charles' innovative weight loss solution, Lory weighed only 120 lbs total! That's a total weight loss of incredible <span class="hightlighter">90 pounds!</span> In addition, Lori's genes were tainted with diabetes and obesity  throughout her family lineage. Lory accomplished this feat while rearing her child. In the picture below, Lori stands accomplished on the beach at the fat left. </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"><span style="font-size: 18px; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; color: #000; font-style: normal; font-weight: 400;"><img src="Before&Aftersnaps.jpg"  alt=""/></span></p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"> </p>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"> </p>

        <h2 style="text-align: center; font-family: permanent-marker; font-style: normal; font-weight: 400; font-size: 23px;">WHAT CAN THE FAT LOSS FACTOR DO FOR ME?</h2>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"> </p>

        <ul>

        <ul>

          <ul>

          <ul>

            <ul>

            <ul>

              <ul>

              <ul>

                <ul>

                  <p> </p></ul></ul></ul></ul></ul></ul>

            </ul>

          </ul>

        <p style="font-size: 19px; font-family: 'Myriad Pro'; color: #000; font-style: normal; font-weight: 400;">Lori lost an incredible <span class="hightlighter">16 dress sizes</span>! She realizes a size even smaller than her highschool days, a goal you can accomplish as well! Women, especially need a program like The Fat Loss Factor when considering the barriers to their success. Let's review basic physiology to edify you in understanding the culprits. Success will be more practical when we have knowledge of what's working against us, right?</p>

        <p style="font-size: 18px; font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif; color: #000; font-style: normal; font-weight: 400;"> </p>

        </ul>

        <p style="text-align: center; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"><!--- end wrapper div --->  <span style="font-size: 18px; font-family: permanent-marker; color: #000; font-style: normal; font-weight: 400;"><img src="women_hurdles.jpg"  alt=""/></span></p>

        <p style="text-align: left; font-family: 'Myriad Pro'; font-size: 19px; font-style: normal; font-weight: 400;"> </p>

        <h2 style="text-align: center; font-family: permanent-marker; font-style: normal; font-weight: 400;">SUCCESS WILL BE YOURS!</h2>

        <dl>

        </dl>

        <p><br>

          <br>

          <br>

          <br>

          <span style="font-size: 19px; font-family: 'Myriad Pro'; color: #000; font-style: normal; font-weight: 400;">Charles pondered, if Lori can do it, despite her barriers, than many people will experience asoulte weight loss through The Fat Loss Factor. Their bodies will be SOLD to fat loss. People will meet and exceed their expectations and guess what? There is proof. Go now, to this video page &gt;&gt;&gt; <a href="http://kimbroj.flfenglish.hop.clickbank.net">here</a> and scroll down to the bottom of the page to view the amazing quanity of facebook comments. Notice thousands of comments from people suceeding like you will, you can do it! Visualize your way to the finish line, you can become the next customer to post a success story. Why wait, &quot;<a href="http://kimbroj.flfenglish.hop.clickbank.net?pid=checkout">Get it</a>&quot; within minutes from now. Experience joy!</span></p>

        <p style="text-align: center"> </p><br>

        <p style="text-align: center; font-family: permanent-marker; font-style: normal; font-weight: 400; font-size: 23px;">WHAT ONE CUSTOMER WANTS YOU TO EXPERIENCE</p>

        <p> </p>

        <p> </p>

        <div id="FLF Movie"><p><center><iframe width="420" height="315" src="//www.youtube.com/embed/vL5tYcuc5Jg" frameborder="0" allowfullscreen></iframe></center></p></div>

        <p style="text-align: center">Video Caption: The Incredible <a href="h.hop.clickbank.net?pid=checkout">Fat Loss Factor</a> yours now!</p>

        <p style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;"> </p>

      </div>

      <div class="footer" id="footer">

      <p><center><img src="footer.jpg"  alt="" width="971" height="186" class="center"/></center></p></div>

      </body>

      </html>

       

       

      My external style sheet below:

       

      @charset "UTF-8";

      h1 {

                color: #000000;

                font-style: normal;

                font-weight: 400;

                font-family: permanent-marker;

                font-size: 30px;

      }

      h2 {

                font-style: normal;

                font-weight: 400;

                font-family: permanent-marker;

                color: #000000;

                font-size: 24px;

                line-height: 10px;

                text-align: center;

      }

      .adjustment {

                text-align: justify;

      }

      .center {

                text-align: center;

       

       

      }

      #wrapper {

                margin-left: 400px;

                text-align: center;

      }

      li {

                background: url(sunny3.png) left center no-repeat;

                list-style: none;

                padding-bottom: 5px;

                padding-left: 26px;

                padding-right: 30px;

                padding-top: 7px;

                text-align: left;

                font-family: "Myriad Pro";

                font-size:19px

      }

      .hightlighter {

                background-color: #FFFF00;

      }

       

       

      Notice I defined the li tag in the CSS and used that to position all the elements withinthe div "wrapper" however, the list shows up plainly on my website http://www.lean-abs.net , if you scroll down to about the middle of the page you'll see the list sitting on the far left with regular styled bullet points and uncenetered. When I made my custom bullet points, the were aligned left, then I put that list into a div and used a margin on the div to position the list towards the center of the page. If you know a better method that will show the let server side, please help.

        • 1. Re: Using custom bullet points in a "centered list"
          Jon Fritz II Adobe Community Professional & MVP

          Add...

           

          display:inline-block;

           

          To the css for your <li> and they will take on the text-align:center from the wrapper <div>

           

          Then change the width of your wrapper to either stack them all centered, or line them up across the screen centered.

           

          You can remove the margin-left from the wrapper if you're adjusting the width. FWIW, a 100% width for the wrapper will center your bullets on a large screen and center/stack them on smaller viewports.

          1 person found this helpful