asked on
UL / LI tag should display as paragraph - by using css
What is the style to make this output
<ul>
<li >Item 1</li>
<li >Item 2</li>
<li >Item 3</li>
<li >Item 4</li>
<ul>
looks like this Item 1 | Item 2 | Item 3 | Item 4
<ul>
<li >Item 1</li>
<li >Item 2</li>
<li >Item 3</li>
<li >Item 4</li>
<ul>
looks like this Item 1 | Item 2 | Item 3 | Item 4
Web Languages and StandardsCSS
Last Comment
mreuring
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Still doesn't add the vertical bar | separator. If you want that bar, why even put it in a
- array at all?
- Just put it in a javascript function --
- function(showList) {
- var list = new array()
- list[0] = "item1"
- list[1] = "item2"
- list[2] = "item3"
- list[3] = "item 4";
- var final_list = list.split(' | ');
- document.getElementById('l
isting').i nnerHTML=f inal_list; - }
- Then in the HTML you will have a SPAN tag --
- the list goes here
- To load the list, use as the main body tag. This gets you want you want
here is the complete code, without parts deleted by this new EE input box that deletes HTML tags --
function(showList) {
var list = new array()
list[0] = "item1"
list[1] = "item2"
list[2] = "item3"
list[3] = "item 4";
var final_list = list.split(' | ');
document.getElementById('listing').innerHTML=final_list;
}
Then in the HTML you will have a SPAN tag --
<SPAN id="listing">the list goes here</SPAN>
To load the list, use <BODY onLoad="showList();"> as the main body tag. This gets you want you want
scrahcyboy & tomaugerdotcom,
the solution with li+li is elegant (as the solution with pseudo-class first-child is), and it works in IE7. The only "problem", which tomaugerdotcom has not mentioned, is that DOCTYPE at the beginning of the document is needed (for an example see code snippet).
But... it doesn't work in IE6. When we know that many users still have IE6, where these features are not supported at all, the situation is even worse :-((
scrathcyboy,
why should JavaScript be used? With your solution text is "hidden" in the function and maintenance of the page is more complicated than in pure HTML+CSS solution. I don't see any advantages of your solution...
the solution with li+li is elegant (as the solution with pseudo-class first-child is), and it works in IE7. The only "problem", which tomaugerdotcom has not mentioned, is that DOCTYPE at the beginning of the document is needed (for an example see code snippet).
But... it doesn't work in IE6. When we know that many users still have IE6, where these features are not supported at all, the situation is even worse :-((
scrathcyboy,
why should JavaScript be used? With your solution text is "hidden" in the function and maintenance of the page is more complicated than in pure HTML+CSS solution. I don't see any advantages of your solution...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
...
</head>
<body>
...
</body>
</html>
@brundo: good call on the IE6 compatibility issue. I usually do a bit of a workaround like this:
ul { style as listed above }
ul li { border-left:1px solid black; display:inline; padding:0 5px; } /* this works for all browsers */
ul > li { border:none; } /* this only works in Moz and IE7, so IE6 will still have all borders */
ul li + li { border-left:1px solid black; } /* this only works in Moz and IE7, so they get their borders back */
It's a bit of a compromise, as in IE6 you'll have a left border on the first menu item as well as the others. So I guess it's up to tv4free whether this is a major concern. I'm not convinced that there are so many IE6 users out there, but I agree that you want to make sure you're as backward-compatible as possible.
@s-boy: I totally agreen with Brundo here - why would you suggest a JavaScript solution when CSS will work great? Now all of a sudden you're building a list at runtime that Google and other search engines will not be able to traverse or index. Add the presumed requirement of nesting anchor tags in there so that this will be a working menu rather than a pretty graphical item and the complexity of your JS solution just rises. Keep the JS to a minimum and only use it for non-critical visual/interactive enhancements that do not interefere with the semantic markup. Google "unobtrusive javascript" if you want to start writing standards-compliant javascript code. It will make you a better programmer.
ul { style as listed above }
ul li { border-left:1px solid black; display:inline; padding:0 5px; } /* this works for all browsers */
ul > li { border:none; } /* this only works in Moz and IE7, so IE6 will still have all borders */
ul li + li { border-left:1px solid black; } /* this only works in Moz and IE7, so they get their borders back */
It's a bit of a compromise, as in IE6 you'll have a left border on the first menu item as well as the others. So I guess it's up to tv4free whether this is a major concern. I'm not convinced that there are so many IE6 users out there, but I agree that you want to make sure you're as backward-compatible as possible.
@s-boy: I totally agreen with Brundo here - why would you suggest a JavaScript solution when CSS will work great? Now all of a sudden you're building a list at runtime that Google and other search engines will not be able to traverse or index. Add the presumed requirement of nesting anchor tags in there so that this will be a working menu rather than a pretty graphical item and the complexity of your JS solution just rises. Keep the JS to a minimum and only use it for non-critical visual/interactive enhancements that do not interefere with the semantic markup. Google "unobtrusive javascript" if you want to start writing standards-compliant javascript code. It will make you a better programmer.
One size fits all, instead of trying to distinguish which is the first list-item, why not give them all a border and sweep the border of the first list-item 'under the rug'.
Simply giving the lot a negative margin-left equal to the size of the border and giving the list an overflow: hidden and presto, one solution fits all. Although, I do assume the use of a valid doctype, I dare predict this one to work without a Doctype as well.
In all fairness, this solution sweeps all the borders under the rug of the previous list-item, so if you need a background-color or such you'd need to set a positive margin-right equal to the border-size to make sure the other borders remain visible...
Simply giving the lot a negative margin-left equal to the size of the border and giving the list an overflow: hidden and presto, one solution fits all. Although, I do assume the use of a valid doctype, I dare predict this one to work without a Doctype as well.
In all fairness, this solution sweeps all the borders under the rug of the previous list-item, so if you need a background-color or such you'd need to set a positive margin-right equal to the border-size to make sure the other borders remain visible...
ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
zoom: 1; /*Float-resize fix for IE6 and below*/
}
li {
float: left;
margin-left: -1px;
border-left: 1px solid black;
padding: 0.5em;
}
Later you can play with paddings, margins etc.
And, important: there is an elegant solution using first-child pseudoclass, but it doesn't work in IE :-((
Open in new window