HTML - Setting Leading Text Within An Ordered List...
Hi there,
I'm new to this forum; got here researching the best method to do a task in HTML dealing with ordered lists. Basically I'm trying to figure out the best method to have the word "Step" precede the number in an ordered list, so that <ol> <li>first line of text</li> <li>next line of text</li> <li>last line of text</li> </ol> would return Step 1. first line of text Step 2. next line of text Step 3. last line of text I know how to do this using background images with CSS, but that isn't ideal because any formatting changes to the text would require making a new gif or jpg for the word "step." Does anyone know how to do this? Thanks for your help! Similar TutorialsHello, I am trying to generate customize numbering style for HTML ordered list like below: 1. Item no 1 2. Item no 2 a) sub item 1 b) sub item 2 (i) level no 3 (ii) level no 4 Is it possible (through css may be) to generate bullet numbers in Parenthesis? any sample code? Thanks. Hi everyone I am new to these forums and I am having trouble with ordered lists on one of the article on my site: http://boostplace.com/automotives/fitting-a-motorcycle-helmet/ If you look at the list it goes from 1 to 9 then resets to zero. Please can someone help me with this? I am using wordpress 3.2.1 as my cms P.S. I didn't want to link the article properly as this is my first post. Sorry about having to copy an paste. Thanks Hi, Is there any way such that i can use ordered list to number the rows of a table?? Nikhil I've got three drop-down lists in a navbar that displays properly in IE but not in Firefox or Sea Monkey. I can't figure out what I'm doing wrong. The lists under "Historic District" and "Take Action" are fine, but the two items under "Blog" don't show up in FF or SM. The "Blog" links are external. Would that matter to FF and SM? The WC3 turned up the likely error, but when I added and/or removed a ul and/or li tag, I got strange results and was unable to fix the problem. If someone can explain what I should do and why I'd appreciate it. WC3 flagged the <ul> tag after <li><a href="http://west80s.blogspot.com/">Blog</a></li> because: "document type does not allow element "UL" here; assuming missing "LI" start-tag" Here's the site: http://west80s.org/ Here's the code: Code: <ul class="NavHoriz-menu"> <li class="first"><a href="index.htm">Home</a></li> <li> <a href="http://">Historic District</a> <ul> <li class="first"><a href="Historic-District.htm">Proposed District</a></li> <li><a href="letters-index.htm">Support the Historic District</a></li> <li><a href="GB-pix.htm">Gilbert Brownstones</a></li> <li><a href="WestPark.htm">West Park Church</a></li> <li><a href="330-W-86-St.htm">330 W 86th St</a></li> </ul> </li> <li><a href="http://west80s.blogspot.com/">Breaking News</a></li> <li><a href="http://">Take Action</a> <ul> <li class="first"><a href="hydrofracking.htm">Hydrofracking</a></li> <li><a href="letters-index.htm">Support the Historic District</a></li> </ul> <li><a href="MembershipForm.htm">Join</a></li> <li><a href="mailto:info@west80s.org">Contact Us</a></li> <li><a href="http://west80s.blogspot.com/">Blog</a></li> <ul> <li class="first"> <a href="http://west80s.blogspot.com/2011/07/please-help-us-wipe-out-graffiti-this.html">Graffitti Removal</a></li> <li><a href="http://west80s.blogspot.com/2011/07/weve-adopted-tree.html">Beautificaiton</a></li> </ul> </li> </ul> Thanks for any help. Ellen This question is probably very basic, but I have a form on my site where people can enter a certain amount of text and after posting, it will populate a fixed width table. If I use a font like Courier New (fixed width font) I could easily have the form determine the maximum characters the person could type for this post and set the max limit. My problem is this. I don't want to use a fixed width font. I want to use Arial and a post with lots of 'i's can have more characters that a post with lots of 'W's. Is there a formula for calculation the average char width? With this I might be able to set a fair limit. Thanks, Joe I wish to change the html of my TD element by specifying a filename. The file I specify will include the new html I want the TD element to have. I do not know how to use innerHTML to do this. Thank you for any help you can provide. Hello forum, I have a very simple question which I can't solve: My html code looks something like this (in index.html with a directory of 'next/' which has the file index.html: HTML Code: <html><head /><body> <a href="next/">Continue</a> </body></html> Then when the link is clicked, it gets a permission error (meaning the browser can't find anything in the directory). Why is this? Shouldn't it automatically get into the index.html? thanks in advance, drmota I am having no luck changing the line spacing of a single paragraph. I looked online and found something on using it in a div tag: Code: div {line-height: 5px;} but everything else is with CSS. What would be the simplest way to encode a paragraph with a smaller line space between lines? Anders Hey Everyone, Has anyone else had this problem? I create an ordered list, and set the type="1". The numbers appear in Firefox, but do not appear in IE7 even though there is a margin there for the number. Help is appreciated. Leading SEO, SEM, SMO, SMM, PPC and Spam Building Company Earn money by working with s[a, building company United Kingdom. We'll pay you for our permanent basis campaigns. You get what you pay for! Search engine optimization has evolved into a competitive, growing industry. There are plenty of hoaxes and scams on the web. It seems that as the Internet grows more complex, so do the scams. Choosing an effective company can be quite a challenge. There are many factors to consider when hiring an SEO service. This article gives advice on how to select a credible website optimization service. Hi folks, I would really like to create a list that looks like this: A1) Item 1 A2) Item 2 A3) Item 3 ... The A ties in to a "type A" something, and another list with B1, B2, B3, etc. items will be tied into a "type B" something, and so on. So far I haven't been able to figure out how to do this. I can make an (A, B, C) or (a, b, c) or (i, ii, iii) or of course (1, 2, 3) list, but none of these will serve my purposes. I very specifically need an (A1, A2, A3) list. Am I pretty much stuck doing this manually with a table or is there a way to accomplish what I'm after using the list or order list tags? Does CSS provide a means? Hi.. I understnad that Code: <ol><li> Car</li> <li>Bus</li> <li>Train</li></ol> will display 1.Car 2.Bus 3.Train I want the lists to appear decending order as in 3.Car 2.Bus 1.Train The logic is "Train"-- was added first, and the most recent addition-- "Car" is shown at the top Now these lists are added dynamicaly .. so i cannot use the START Any help is great help Thank you Deepa I have been looking everywhere for code for this. What i have is a list menu where the user will select an item, then i want something to appear in the text box below it, depending on what is selected. I have been looking for 'if statements' but i cant get anything to work. e.g. if the list box "test" is selected then the text box should say "test1". if the list box "test2" is selected then the text box should say "test2" Please can someone help me out. Thanks Hi, I'm learning about horizontal lists. I'm trying to position a string ("Stuff" in the code snippet) a given distance (say 100px) to the right of the last item in a horizontal list, on the same line as the list. How do I do this? The following code snippet, using CSS for the UL and LI tags with a WIDTH specification for the UL tag, results in a BREAK between the last list item and the string "Stuff", as shown below: ------------------------------------------------------------------------------------------------------- Books Posters Stuff. ------------------------------------------------------------------------------------------------------- Code Snippet: Code: <HTML> <HEAD> <STYLE> li { float: left; padding-right: 32px; padding-left: 32px; } ul { list-style-type:none; width=300; } </STYLE> </HEAD> <BODY> <UL><LI>Books</LI><LI>Posters</LI></UL> Stuff. </BODY></HTML> In fact the only way to not have a BREAK between the last list item and the string "Stuff" is to remove the WIDTH specificaton from the UL tag altogether, but then the string "Stuff" cannot be positioned a given distance to the right from the last list item--it just goes the default distance. So how can text trailing a horizontal list be positioned a specific distance to the right of the horizontal list on the same line? Thanks very much for any help you can provide. Thanks, Dave Hi All, first post in the forum. I would like to know if it is possible to create a drop down list from which the user could select a value but could also decide to enter a new one ? What I want is to offer the user to select an existing company name or enter a new one, but I would like to have only one field to do it instead of two. Is this possible Thanks for helping. ALex Hi, I have a text box, when i press M ,it must populate a list of names that start with so that user can select any one of the name.on the selection of the name,it must appear in text box. In a short it must work like google search engine. Can any one provide me guide lines in this task Thanks & Regards in Advance HI, The following code HTML Code: <SELECT NAME="TEST"> <OPTION>TEST TEST</OPTION> </SELECT> renders an option with 'TEST TEST'. Even though there are more than 1 white spaces, only single white space is given. How can I over ride this default behavior? Thanks in advance, Chandu. I have a big list and I want to show on my webpage 6lines from that list randomly (when webpage is refreshed another 6 lines appear). can anyone help me with he code, how should the list look like so it works...or where can I find more info on this ? thanks I am making a website with a list inside list for my navigation bar. It looks good on safari(win/mac) and firefox but the list looks horrible in IE7.0(didnt check 6.0) I was wondering if anyone know what it could be HTML Code: Code: <div id="nav"> <img class="menupic" src="images/mainmenu.png" alt="Main Menu"/> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_findme.png" alt="findMe"/></a></li> <li> <ul class="navlinks"> <li><a href="#goto_facebook" id="facebook">- Facebook</a></li> <li><a href="#goto_myspace" id="myspace">- Myspace</a></li> <li><a href="#goto_youtube" id="youtube">- Youtube</a></li> </ul> </li> </ul> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_blog.png" alt="blog"/></a></li> <li> <ul class="navlinks"> <li><a href="#blogid2" id="blogid2">- Testing | May 01</a></li> <li><a href="#blogid1" id="blogid1">- Debut Album | Apr 30</a></li> <li><a href="#goto_blogarchive" id="blogarchive">- Archives</a></li> <li class="donthidethis"><ul class="navli donthidethiseither" style="padding:0;"> <li><a class="point" href="#">- Categories</a></li> <li><ul class="navlinks"> <li><a href="#goto_catid2" id="catid2">- Media</a></li><li><a href="#goto_catid1" id="catid1">- News</a></li><li><a href="#goto_catid3" id="catid3">- Off Topic</a></li><li><a href="#goto_catid4" id="catid4">- Tutorials</a></li> </ul></li> </ul></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_eliasmusictv.png" alt="eliasMusic Tv"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="coming">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_about.png" alt="about"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_biography" id="biography">- biography</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_links.png" alt="links"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="links">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_contact.png" alt="contact"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_contact" id="contactpage">contactForm</a></li> </ul></li> </ul> CSS Code: Code: #nav { float:right; width:195px; padding-left:20px; background:url("images/navback.png"); } #nav ul { list-style: none; margin-left:1px; border: none; } #nav .navli { padding-top:3px; padding-bottom:3px; } #nav .navlinks { padding-left:25px; } #nav .navlinks a,a:link { color:#262626; } #nav .navli img { margin-top:5px; margin-bottom:5px; } #nav .navlinks a:hover { color:#dadada; } #nav img.menupic { margin:20px 10px 5px 95px; } #nav a { font-size:14px; display:block; } #nav a.point { font-size:14px; font-weight:bold; } .navliover { background:url("images/navhover.jpg"); } Any help at all would be appriciated please I can show u the website via Private message if you are interested in helping Thanks in advance Reply With Quote if there is a tutorial or a forum post i would love to see it, thanks |