...

View Full Version : align text wrap in ordered list



johndove523
04-07-2011, 05:37 PM
Hi,

Please see URL http://backstageweb.net/orion/students.htm

In the ol (e.g., list items 1 & 2), I want the text wrap to align with its preceding text, not the number. Can someone show me how? Code in question:


ol{
margin-left:10px;
/*list:inside decimal;*/
list-style-position:inside;
color:#666;
display:block;
}

.reg {
margin:0 0 12px 15px;
font-size:94%;
line-height:1.3;
}

I waste more time fiddling with lists! (I just don't really get them) If anyone can direct me to a great educational source for formatting all kinds of lists, I would sure appreciate it - thanks much.

John

teedoff
04-07-2011, 05:47 PM
Maybe this tutorial (http://www.sohtanaka.com/web-design/css-ordered-list-enhancement-tutorial/)can help.

johndove523
04-07-2011, 05:54 PM
Teed, thanks for the source! I will definitely study it when I have a little more time. As for my more immediate problem, any chance you could tell me how to bump that text over to align with the first-line text?

Thanks so much. :)

teedoff
04-07-2011, 06:17 PM
Remove the:


list-style-position: inside;

from your <ol>. That seems to work. If you give the ol a larger margin-left( I used 200px), then they all line up perfectly.

johndove523
04-07-2011, 06:22 PM
Tee, thanks very much! And for the web resource too. Maybe one day, I'll actually get lists.

quartzy
04-08-2011, 02:11 AM
Teed how can that resource help when it delves into jquery, the poor man cant even do lists yet. http://www.alistapart.com/articles/taminglists/

teedoff
04-08-2011, 02:32 AM
Teed how can that resource help when it delves into jquery, the poor man cant even do lists yet. http://www.alistapart.com/articles/taminglists/

It was a quick response to his initial post. The tutorial gets much deeper than he would have needed anyway based on his problem. The jQuery used is only one of two solutions used for giving beveled looks to colored borders.


So yes it does give basic steps to create ordered lists. Besides, after I read back through and viewed his code closer, the issue was resolved.

quartzy
04-08-2011, 02:48 AM
Hi Teed
thanks for your response, it's just that as a learner, if I find a resource that has php or jquery in it, I dont even read it, as I am not yet ready for that. So I thought he may too. Yes, I gather you did answer his query anyway.

teedoff
04-08-2011, 02:57 AM
Well the reason I didnt give him the link you posted from alistapart is because this was the only one I knew of that actually used an ordered list for the tutorial rather than unordered lists. Programatically, I guess they're no different, but I figured it would be better for him to see an actual ordered list tutorial.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum