Solved

Ordered list

Posted on 2014-02-18
12
183 Views
Last Modified: 2014-02-20
My client wants an ordered list. Easy enough... except

All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers... in a bright blue. Fortunately, he doesn't want to change typefaces, but this is bad enough.

I have a workaround (in line images), but is this sort of thing at all possible? And if so, how?

Thanks,

ep
0
Comment
Question by:ericpete
  • 4
  • 4
  • 4
12 Comments
 
LVL 54

Assisted Solution

by:Julian Hansen
Julian Hansen earned 150 total points
ID: 39869630
There are many ways to skin this cat.

You could just style the li and then put the content in its own tags and style those. Or you could create a list-style none and add your own numbers - two examples below.
<!doctype html>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
$(function() {
	
});
</script>
<style type="text/css">
ol {
  font-size: 28px;
  color: blue;
}
ol li p {
  font-size: 12px;
  color: #000;
}
ul {
	list-style: none;
	padding: 0;
}
ul li span {
	padding-right: 10px;
	font-size: 28px;
	color: blue;
	text-align: right;
	display: inline-block;
	width: 35px;
}
</style>
</head>
<body>
<ol>
  <li><p>First Item with some text to make this about thirty words long and some more text just to add words and make this the right length. I hate test data.</p></li>
  <li><p>Second Item</p></li>
  <li><p>Third Item</p></li>
  <li><p>Fourth Item</p></li>
  <li><p>...</p></li>
  <li><p>Tenth Item</p></li>
</ol>
<ul>
  <li><span>1.</span>First Item with some text to make this about thirty words long and some more text just to add words and make this the right length. I hate test data.</li>
  <li><span>2.</span>Second Item</li>
  <li><span>3.</span>Third Item</li>
  <li><span>...</span> ...</li>
  <li><span>10.</span>Tenth Item</li>
</ul>

</body>
</html>

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39870346
you could also do something like this, which styles the actual numbers:

<!doctype html>
<html>
<head>
<title></title>

<style>
ol {
    counter-reset:li; /* Initiate a counter */
    margin:0; /* Remove the default left margin */
    padding:0; /* Remove the default left padding */
}
ol > li {
    list-style:none; /* Disable the normal item numbering */
}
ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */

    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;

    margin-right:8px;
    color:blue;
    font-weight:bold;
    font-size: 28px;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;
}

</style>
</head>
<body>
<ol>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
</ol>


</body>
</html>

Open in new window


you could add a dor if you wanted, like this:
content:counter(li) ".";
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 350 total points
ID: 39870401
Here is an alternative version in which the text is indented across multiple lines:

<!doctype html>
<html>
<head>
<title></title>

<style>
ol {
    counter-reset:li; /* Initiate a counter */
    margin:0; /* Remove the default left margin */
    padding:0; /* Remove the default left padding */
}
ol > li {
    list-style:none; /* Disable the normal item numbering */
    margin:0 0 0 2em; /* Give each list item a left margin to make room for the numbers */
    padding:8px;
    position:relative;
}
ol > li:before {

    content:counter(li) "."; /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:8px;
    color:blue;
    font-weight:bold;
    font-size: 28px;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;

}

</style>
</head>
<body>
<ol>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
  <li>All of the items are between 20 and 50 words (two to six lines) in good ol' black text, and he would like them with significantly larger numbers</li>
</ol>


</body>
</html>

Open in new window

0
Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 
LVL 15

Author Closing Comment

by:ericpete
ID: 39870603
Outstanding. All three solutions work; however, Kyle's was almost copy and paste for my particular situation (I just had to change the font and size).

Couldn't ask for better; thanks!

ep
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39871458
Just a note - the accepted solution may have an issue with older browsers. Personally I don't care about IE - I don't support it - but in case it is an issue just bear it in mind.
0
 
LVL 15

Author Comment

by:ericpete
ID: 39871496
Julian,

I tested it in my client's pages using (among other things) IE8 on a Windows XP machine. Considering the nature of the client's business, I don't think it's much of a concern earlier than that.

Thanks, though.

ep
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39871738
IE8 on a Windows XP machine
Interesting - can't get it to work on IE8 / XP here.
0
 
LVL 15

Author Comment

by:ericpete
ID: 39871961
If you'd like, I can send you the page.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39871975
it works for me in Ie8

however, supporting ie8 is not something i do anymore. move on.
0
 
LVL 15

Author Comment

by:ericpete
ID: 39871982
*laughing*... were it not for this client, I wouldn't support it either (okay, that and the fact that I'm still not sure whether I want to pick up a new machine in the next month or so, or load a whole new OS on this one and then reinstall all the software).
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39872524
I am a staunch advocate of killing off anything IE - only raised it in case it was an issue.

Reason it was not working here - IE7 Compatibility mode - issue closed.

@Kyle - nice solution
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39873080
:)
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Problem with a CSS in a page 2 31
compact pure CSS Read More Toggle 4 73
Add shadow behind div 5 14
How to resize a div in html 3 15
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

832 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