Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

DIV style with Bulletted list

Posted on 2013-01-11
5
Medium Priority
?
489 Views
Last Modified: 2013-11-19
I'm looking to create a fixed flexible div stlye that will have the same amount of horizantal padding on each side to the border. Basic enough questions...

In summary How can I change the style so that the LI elements are centered interms of padding \ margins left and right to the div borders but left justified for their relative starting point.

Here is the HTML & CSS code I am using...
<code>
<div class="paneltext">
<ul><li>the child's organisation of their experience (degree of attention and participation with adults and peers)</li></ul>
<ul><li>internalisation of controls (emotional security, responsiveness, accommodation of others)</li></ul>
<ul><li>'self-limiting features' (disengagement, self-negation)</li></ul>
<ul><li>undeveloped behaviour (attachments to others; inconsequential behaviour)</li></ul>
<ul><li>supported development (different aspects of attachment, sense of self, regard for others).</li></ul>
</div>
<p>The categories of behaviour which comprise this checklist are helpful and include for example, abnormal eye contact, mood swings, temper, inappropriate physical contact, attention seeking, restlessness, bullying, attention to teacher, reactions to disturbed routines, thoughtfulness, communication with others and many other aspects of behaviour.</p>
<p><b>Coping in School Scales (CISS)</b></p>
<p>Another useful screening tool is the Coping in School Scales (McSharry 2001). This checklist is included in the appendix of a text book on challenging behaviour. The scale consists of five checklists that reflect the pupil's:</p>
<div class="paneltext">
<ul><li>self management of behaviour;</li></ul>
<ul><li>relationship between self and others;</li></ul>
<ul><li>self organisation;</li></ul>
<ul><li>attitude, and</li></ul>
<ul><li>learning skills.</li></ul>

CSS

div.paneltext {
      align="center";
      margin-left:15%;
      margin-right:15%;
      width:auto;
      font-style: normal;
      text-align: left;
      background-attachment: scroll;
      background-color: #f5f6f1;
      background-position: 000000;
      height: auto;
      width: auto;
      border: 1px solid #664F9D;
      border-width: medium;
      font-weight: normal;
      color: #333333;
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 5px;
      padding-left: 10px;
      -moz-border-radius: 10px;
}

div.paneltext li:before{
    content:'\2022';
    color: red; /* or whatever color you prefer */
      display: block;
      position: relative;
      max-width: 0px;
      max-height: 0px;
      left: -15px;
      top: -0px;
      color: #664F9D;
      font-size: 20px;
    }
   

div.paneltext li{
     list-style:none;
     color:black;
    padding-left: 1.5em;
    text-indent: -1em;
}
</code>
div1.JPG
0
Comment
Question by:Needy11
5 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 38767905
So you want each <li> centered, but they should all have the same starting point?

Can you show an image of what your looking for exactly? Your question is a little confusing.  If you want each one centered, you'll have to use text-align: center;. Since each line is a different length though, you can center them, but they wont' have the same starting position.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38769124
The CSS is chaotic and redundant.  I need to see a link to the page to understand what rules are actually getting applied.

Cd&
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38769617
My suggestion is to wrap the list in a div which has margin: 0 auto and is as wide as you want the list to be wide. there you have your centered and justified list.
0
 

Accepted Solution

by:
Needy11 earned 0 total points
ID: 38905773
Apologies guys. Life got in the way - just back at work now...

i have attached a pic of two paragraphs as they render in html including the one the code above is provided for. I want eh one style to be applicable to any paragraph with bullets but if the width of the paragraphs are short as in the second paragraph in the pic attached it should appear per the mock up I have created in divsample2 rather than as it actaully does in divsample.jpg.

In othere words I want to auto size the paragraph box according to the widths of the widest point. Is that possible?

Apologies for the delay getting back. I'll award points in next day or so.

Ciaran
divsample.JPG
divsample2.JPG
0
 

Author Closing Comment

by:Needy11
ID: 38924998
worked it out myself
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to dynamically set the form action using jQuery.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question