Skip navigation
Jonathan Fortis
Jonathan Fortis
Currently Being Moderated

bullets not aligning using css

Jun 1, 2012 7:12 AM

i have made a text area, added a text editor but when i view the text area on the page the bullet points are sitting outside the DIV

 

i am using php mysql and using

 

<textarea name="landlordsTXT" id="landlordsTXT" style="width: 610px; height: 200px"><?php echo nl2br($row_Recordset1['landlordsTXT']); ?></textarea>

<script>

          $('#landlordsTXT').wysihtml5();

</script>

  <script src="lib/js/wysihtml5-0.3.0_rc3.js"></script>

<script src="lib/js/jquery-1.7.1.min.js"></script>

<script src="lib/js/prettify.js"></script>

<script src="lib/js/bootstrap.min.js"></script>

<script src="src/bootstrap-wysihtml5.js"></script>

 

thanks in advance

771 Views   5 Replies   Latest reply: Jonathan Fortis, Jun 5, 2012 6:53 AM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Jun 1, 2012 10:04 AM   in reply to Jonathan Fortis
    Report

    Bullet placement is controlled with CSS margins & padding on unordered lists <ul> <li>.

    If you use a CSS reset, you may need to add margins & padding to your lists.

     

    ul li {

    margin-left: 45px;  /**text indent**/

    padding-left: 18px; /**space from bullet**/

    }

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Jonathan Fortis
    Currently Being Moderated
    2. Jonathan Fortis,
    Jun 1, 2012 11:02 AM   in reply to Nancy O.
    Report

    the output is set inside a div but i dont want this div to have paddings or margins because i want the main text above to sit acrossbullets.jpg

     

    as you can see the bulletts are currently outside the div they are sitting in.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    3. Nancy O.,
    Jun 1, 2012 11:14 AM   in reply to Jonathan Fortis
    Report

    <div ="DivName">

    <h3>Heading text goes here...</h3>

    <ul>

         <li>list item</li>

         <li>list item<li>

         <li>list item</li>

    </ul>

    </div>

     

     

    CSS:

     

    #divName h3 {margin:0; padding:0;}

     

    #divName ul li {margin-left: 45px; padding-left: 18px}

     

     

    Nancy O.

     

    Message was edited by: Nancy O.   Make that margin-left and padding-left.

     
    |
    Mark as:
  • hans-g.
    Currently Being Moderated
    4. hans-g.,
    Jun 2, 2012 1:34 AM   in reply to Jonathan Fortis
    Report

    Hello Jonathan,

     

    you could have a look at my bullets test page, where I've "played" a little bit with different spacing variants. Here is the link:

     

    http://hansgd.de/AdobTest/bullets/bulletsAbstandNur.php

     

    Hans-Günter

     
    |
    Mark as:
  • Jonathan Fortis
    Currently Being Moderated
    5. Jonathan Fortis,
    Jun 5, 2012 6:53 AM   in reply to hans-g.
    Report

    thanks hans, very useful

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points