Solved

DIV style with Bulletted list

Posted on 2013-01-11
5
472 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
worked it out myself
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

763 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now