I have a ordered list in an html document, you know, like
<ol>
<li> item one
<li> item two
</ol>
which displays, obviously, as
1. item one
2. item two
I want to make these numbers countdown rather than up. Anyway to do this using html/css without manually numbering everything?
You can reverse CSS3 "counters"
see this answer I posted recently, it might help
How can I center the text but not the number label of an HTML ordered list
note though that that won't work in IE7 however if you hardcode the "values" in reverse you'll get the fall back too, obviously hardcoding the values should work for every browser on it's own too.. so the CSS3 counters is maybe a wishlist item ;)
Related
I have two text items. Both of them do not have any value. When I added some text in first text item same data should be reflected to other one. So how to do this.
Thnx in advance
If you really need always the same value in both items then you should use mirror items also known as synchronize with item property.
This will display the same value in both items.
If you need some kind of logic for the synchronizing of the two items then you can use the When-Validate-Item trigger of the master item to populate the child item. But if the need a simple synchronizing without any logic then the item property 'Synchronize With Item' (as already stated by nigthfox79) is the right way to go.
I have a list of newsletters like this:
Newsletter Jan
Newsletter Feb
Newsletter Mar
Newsletter May
I logically order them by date but the numeration does not really mean anything. So my question is what is semantically correct? to use <ol> or ul?
Thanks.
If they are listed in order, then <OL>. Although I don't think it is a huge deal either way.
From a UI perspective, there's no need to have a number and a date, it's just confusing. If you're going to be super anal about definitions though, I guess an appropriately styled ol would be better. But don't do that.
From a strictly semantic sense, any list of items that has an ordering to it (dates included) should be marked up as an <ol>, since the <ol> tag indicates it's contents are an ordered list.
That being said, I agree with #Dave that the numeric list indicators are unlikely to be needed (depending on the rest your design, of course), and could be hidden with CSS. Depending on the browsers you are targeting, adjusting the margin and/or padding will hide them.
The reason it matters is because non-visual browsers, such as screen readers or text-based browsers like Lynx can offer their users additional functionality for an ordered list than an unordered one. For example, it makes much more sense for a user to jump to the 8th item in an ordered list, since they are more likely to know what that item is based on ordering, than it does to jump to the 8th item in an unordered list. (ie. they can do a binary search on an ordered list, but not an unordered one)
I have a collection of items in an unordered list that overlap each other. My issue is that I need the first item to have the highest z-index and then go down from there. I can do this manually by setting the z-index:
http://jsfiddle.net/dp9YD/7/
But I would like to do this without manually setting each z-index (not sure if this is possible). Right now If i don't use the z-index it renders like this:
http://jsfiddle.net/dp9YD/8/
With items that come later in the list being on top which is what I would expect. Is there a way that I can get it to render like the first example without manually specifying the z-index or using javascript?
I have needed to do something similar in the past. I solved it be floating all li's to the right and listing them in reverse order.
See this fiddle: http://jsfiddle.net/sl1dr/KfK9w/
I have never used list before. I have created a website with over 30 000 LOC and never use a single list-element. But when I look at the source code of other say Twitter they use list all the time. What is the advantage of using list-elements? Most of the time I can achieve the same result with div-elements in terms of lay-out
Semantics. Items in a list are typically related by their meaning, not just their layout.
Chances are if you're using a table with one column you are using the table for layout, this is a good candidate to replace with a list
You should use lists when they are semantically the best choice. When you're creating some HTML, ask yourself the following question:
Am I making a list of things?
If your answer is yes, you want to use the list element, or if it's a list with two or more columns of related information, a table.
By comparison, a list of items created using divs has no meaning. Take the following example of a list:
Sausages
Bacon
Pork
Gammon
That is a list of pig meat products, and normally, your HTML should look like this:
<ol>
<li>Sausages</li>
<li>Bacon</li>
<li>Pork</li>
<li>Gammon</li>
</ol>
This tells us and the browser that all the items in that list are related. They all have a common attribute (in this case, that they are pig meats). If however you were to use this code:
<div>Sausages</div>
<div>Bacon</div>
<div>Pork</div>
<div>Gammon</div>
That tells us (and the browser) nothing about the content, only that they exist on the page. From a styling point of view (i.e. CSS), it doesn't make much difference, and may even make life easier, but it's (a) an abuse of the div element (see: Divitis), and (b) bad for accessibility, since screen readers and other similar software will not be aware that the data is related. Your search engine optimisation can also suffer (in theory).
Do bear in mind that it doesn't have to just be a list of text data, like above. A list of navigation links is still a list, and you should mark it up as such. For example:
<ul class="site-navigation">
<li>Home</li>
<li>About Us</li>
<li>Log in</li>
</ul>
It used mostly for creating menus, but the same results can be easily achieved with div elements.
It is more easy to control your menu if it's a simple list, and I think search engines also prefer them
I'm with Giles on this one, but wanted to expand a bit. A list of items holds semantic value. Anything you list in a page most likely belongs in a list. Examples are:
Products
Navigational menu items
Share links (e.g. Facebook, Twitter, LinkdIn, reddit, etc)
This list itself belongs in a list :)
Also, imagine a scenario in which styles are not applied or are applied differently (very common on mobile browsers, especially those not on newest/advanced smartphones), or if someone using Firefox goes into View -> Page Style and selects No Style to. You still want your page to make sense. If you're listing items on a page, you still want them to appear as some sort of list, not just a bunch of DIVs. DIVs have no semantic meaning except to organize things in separate containers and layout control.
I'm trying to re-make an existing ASP.Net page which generates labels. The original uses hideous tables-within tables-within tables to force a layout, and as our order quantity has increased it's now got to the point where it's spitting out 65k lines of HTML assuming it doesn't time out first.
I've replaced it with an unordered list for my list of lables, with each list item floated, and the on-screen layout is now perfect. For print, it's 4 labels per page, one in each corner.
However, at least in IE-land, go to print preview and it goes back to being a vertical list.
Any thoughts?
make sure you are using a float:... in your css of li class it will fix it :)
Let me know if that helps
Changed from UL/LI elements to the ubiquitous DIV, and placed every set of 4 inside a container which did the job. Still none the wiser about why FireFox, Chrome and IE all ignored float:left in print though, but it's working now.