Jump to content

Styling difficulty with lists

OperaDivaMommy

By OperaDivaMommy
in CSS

 Share

Recommended Posts

OperaDivaMommy Newbie

OperaDivaMommy

Posted
Posted

Hi there,I'm somewhat new to Styles, so please pardon the likely noob question:I've set my style for my ordered list so that it's all a different color. But really, I only want the NUMBER to be a different color, but the text entered for that list item to remain the regular text color.Additionally, I'd like to set it up so there's a certain amount of spacing between the list items. I'm just not sure how to do that!Thanks in advance and I look forward to hearing from you soon.All the best,~Laura Ruiz

Link to comment
Share on other sites
OperaDivaMommy Newbie

OperaDivaMommy

Posted
  • Author
Posted
Well You're talking about numbers but you didn't give me the xhtml's code so i can't really help you..

I'm sorry, I don't really understand. I'm not using xhtml, just html. If you're wanting the code for the list itself, here you go...
<ol>              <li><strong><a name="1"></a>What are the best features of Vantage                 Point Apartments?</strong>                 <ul>                  <li><font color="#000000">Privacy</font></li>                  <li><font color="#000000">Small number of units per building</font></li>                  <li><font color="#000000">Close-knit community</font></li>                  <li><font color="#000000">Beautiful scenery, vistas and landscaping</font></li>                </ul>              </li></ol>

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

For setting the number's color. Did you tryed styling their containing element instead? I mean, if around the <ol> there's a <div>, give the <div> the color instead. Then give the <ol> the different color to give the list items all the same color.If that doesn't work, then I'll have to break it to you that it won't be possible until all browsers support the content property's counter() function.For whitespace, try setting margin between the <li>s like this:

li {margin-bottom: 20px; /* For example */color: #000000; /* Remove the <font>. This is what this could help for */}

If you would like the last <li> to be without that margin, you would either have to make a special class for it, where you remove the margin, or wait for browsers to support the CSS3 preudo selector(s) for this.

Link to comment
Share on other sites
OperaDivaMommy Newbie

OperaDivaMommy

Posted
  • Author
Posted
For whitespace, try setting margin between the <li>s like this:
li {margin-bottom: 20px; /* For example */color: #000000; /* Remove the <font>. This is what this could help for */}

The spacing worked GREAT! Thank you so much. I still need to try the other item you'd suggested. Will let you know if it works.~Laura
Link to comment
Share on other sites
Jonas Devoted Member

Jonas

Posted
Posted 
<html><head><style type="text/css">ol {font-family: Tahoma, Verdana, Arial;font-size: 12px;color: #ff0000;}ul {list-style-image: url('images/arrow.gif');font-family: Tahoma, Verdana, Arial;font-size: 12px;color: #ff0000;}li span {margin-left: 20px;color: #000000;}</style></head><body><ol><li><strong><a name="1"></a><span>What are the best features of Vantage Point Apartments?</span></strong>    <ul>     <li><span>Privacy</span></li>     <li><span>Small number of units per building</span></li>     <li><span>Close-knit community</span></li>     <li><span>Beautiful scenery, vistas and landscaping</span></li>   </ul></li></ol></body></html>

Does that do what you want? Except perhaps you want other colours and margins?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...