Solved

DIV style with Bulletted list

Posted on 2013-01-11
5
476 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

751 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