Solved

What am I doing wrong with this ordered list?

Posted on 2014-11-04
10
82 Views
Last Modified: 2014-11-06
Here's my site: http://www.brucegust.com/campaign/OOP/order_list.htm

Here's the tutorial I'm using: http://www.cssmojo.com/how_to_style_a_code_listing/#preview

Here's my code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ordered List Test</title>
<style>
ol {
	background:#036 url(/img/gutter.gif) 2.3em 0 repeat-y;
	overflow:auto;
	font-family:"Courier New",Courier,mono;
	margin:0;
	padding:1em 0 1em 2.8em;
	color:#fff;
	width:90%;
}
#content ol li {
	background:#ffc;
	font-size:small;
}
#content ol code {color:#036;}
</style>
</head>

<body>

<ol>
<li><code>ol {background:#036 url(/img/gutter.gif) 2.3em 0 repeat-y;overflow:auto;font-family:"Courier New",Courier,mono;margin:0;padding:1em 0 1em 2.8em;color:#fff;width:90%}</code></li>
<li><code>ol li {background:#ffc;font-size:small;}</code></li>
<li><code>ol code {color:#036;}</code></li>
</ol>

</body>
</html>

Open in new window


I want my stuff to look like the tutorial, but all I get is that solid blue box as opposed to the blue margin and I can't figure it out.

What am I missing?
0
Comment
Question by:brucegust
  • 5
  • 5
10 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40422649
Check the url of that image it does not look like it loads so you might have the path wrong and it cannot be found.

Cd&
0
 

Author Comment

by:brucegust
ID: 40424426
Yo, COBOL! I corrected the URL and I'm still south of where I need to be.

In the example, the blue portion is 36 pixels across. Mine, I'm taking up the whole page with the blue color. Yet, it should be just the "<ol>" portion, right?

Where am I blowing it?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40424492
You have width of the ol set to 90% and the background color is going to fill the complete area of the ol block. Plus you have the background properties in reverse order and that be affecting the stacking order.  In the example the color #036 is specified last.  The CSS in the example is so badly written, that it is hard to folow and you will probably have a problem anytime you try and do maintenance on the page.  I generally avoid junk like that when I see the code is badly written.

Cd&
0
 

Author Comment

by:brucegust
ID: 40424601
I do like the effect, though. Is there anything salvageable about the code, or can you point me in the direction of a well written example of what they're doing.

Bottom line: I want to publish my code in the context of a numbered format like what they've got at http://www.cssmojo.com/how_to_style_a_code_listing/#preview. Is it tweak-able, or can you show me a different approach?

What do you think?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40424730
The effect is basically the result of applying padding to the ol and then overlaying the color with a background color on the text in the li elements.

If I wanted to do something like that I would just create a blue background image and the use background properties to limit its width so the ol ends up with a narrow vertical band on the left side, and the use the styling in the li elements to do the alternating rows.

ol {background-color:blue; background-repeat:repeat-y;background-position:left top;}
with a 40px square image should work fine. Then you just adjust the margin-left of the ol to move it in off of the background.

Cd&
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:brucegust
ID: 40424857
Got it!

Cd - two things: Head out to http://brucegust.com/campaign/OOP/order_list.htm and you'll see the improvements. What have I got to do to change the font color of the <li>'s? Looks great as far as the blue background and the white font, in terms of my numbers, but how can I get my text to stand out?

Also, in the example on http://www.cssmojo.com/how_to_style_a_code_listing/#preview, they use a <code> tag. That's just a CSS tool that you can use to ensure that the syntax you're documenting isn't processed as actual code, correct?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40424891
in the rule ol li you have a typo that inserted a single quote background:#ffc;' and it stops psrsing befor it gets to the color property.

The <code> tag is a formatting tag like <em> or <strong> it is generally used to make code stand out or use an alternate format.  If you want code to hold its format you can use <pre> normally white space is collapsed but inside <pre> all the white space is preserved as are the line feeds without having to use <br />

If you are going to display html code you either need to put it in a textarea, or hide the opening angle bracket with &lt; if you put <h2> in the text, the browser will treat it as a tag an turn everything following a a heading but if you use &lt;h2> then it will display <h2>

Cd&
0
 

Author Comment

by:brucegust
ID: 40424981
Cd - do you smell that? It's the smell of success! We're almost there, but I'm still missing something.

Head out to http://brucegust.com/campaign/OOP/order_list.htm and you'll see where I'm at. All I want to do is change the color of the <ol>. I did correct the typo, but we're still having to endure a pesky amount of consistency between the format of the <ol> number and the color of the text in my <li> tags.

What do you think? How can I make my <li> tags black>?
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 40427101
If you want the text a different color than the numbering then put the text in a span
(<li><span>Your text here</span></li>) so you can style it independently with:

ol li span{ color:purple; }

Then you can set the color on the ol and it will only affect the numbers.

Cd&
0
 

Author Closing Comment

by:brucegust
ID: 40427195
Perfect!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML CSS 7 38
Bootstrap more than 12 columns in row 3 36
is this a cms? 8 32
Why my select dropdown does not work? 8 21
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …

932 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

10 Experts available now in Live!

Get 1:1 Help Now