Hi guys, I am in the process of coding a design into CSS, and everything is going well, no problems except for one question that I have. http://cintrexmedia.com/order/skin/frontend/default/default/images/new/orderlist.jpg How would I go about breaking that up into CSS? The actual list is easy, of course, I have everything down except for the numbers 1-3 on the left. I have that all coded, except I have the <ol> plain text, 1. 2. 3. and what I want to do is replace that with the spiced up version in the image above, while keeping the positioning right. Any ideas? Thanks a lot
Use CSS to hid the normal numbers, get rid of the padding/margin on the ol element. Add left padding to the li elements and give them each a class. Set your styled numbers as a background image, and you're done! <ol> <li class="one">Item One</li> <li class="two">Item One</li> <li class="three">Item One</li> </ol> That should get you started!
In the forum you just mentioned class one, two, three but did not show the code of the three classes. Can you show a CSS code of class one, two and three.
Can do, often times it's more rewarding when you figure it out for yourself. Give me some time and I'll see what I can do.
No, this is an Ordered List (ol). That means that the list is in order, and is intended to be numbered. If it didn't matter what order the list was in, then you would use ul (unordered list). There is also something called a definition list - which is also very useful.
Just one quick question: When I add a border-bottom to the li CSS, it starts all the way from the image, so it look's a little odd, is there a way to modify it a bit to start the bottom border when the text starts?
Yeah, that's a problem I ran into. One way to do it would be to wrap your text in the li in p or span tags, then set that to have the border. Or just have the line stretch all the way across, but add padding to the li element so it doesn't touch the image.
Hmm, I tried both ways but they didn't turn out quite right. I'll continue to play around with it a bit!
Here you go, change the css to this: @charset "UTF-8"; /* CSS Document */ ol {margin:0; padding:0; list-style-type:none; font:12px/1.4 Verdana, Geneva, sans-serif;} li {margin:0 0 10px 0; padding:0 0 0 40px; display:block; width:250px;} li span {display:block; height:27px; padding:7px 0 8px 0; border-bottom:1px solid #ccc;} li.one {background:transparent url(one.gif) no-repeat 0 0;} li.two {background:transparent url(two.gif) no-repeat 0 0;} li.three {background:transparent url(three.gif) no-repeat 0 0;} Code (markup): And change the html to: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Untitled Document</title> </head> <body> <ol> <li class="one"><span>Item One</span></li> <li class="two"><span>Item One</span></li> <li class="three"><span>Item One</span></li> </ol> </body> </html> Code (markup): Then you should be good to go! you can change that span to a p, or an a, just make sure you change the css to match.