Solved

DIV style with Bulletted list

Posted on 2013-01-11
5
480 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

623 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