HTML List classes - html

Question

So for my Tafe work, one requirment is to have an unordered list.
I have a menu, but it clashes with the list I'm attempting to make.
Here's the fiddle: http://jsfiddle.net/tHLY7/1/
If you remove:
li {
display: inline;
}
It shows the list how I want but ruins my menu.
Any idea?

Answer 1

You need to tell the display:inline to be on the nav only.
#Menubar ul li { display: inline; }

Answer 2

your styling li { display: inline } will apply to ALL <li> on the page, no matter where they are. I would suggest targeting only the <li> that are part of your menu. In your case,
#menu li { display: inline; }.
Or maybe,
#Menubar li { display: inline }.
(one word of note though, ID's and classes in HTML are by convention, all lowercase, so you should change <div id="Menubar"> to <div id="menubar">.

Answer 3

I've made some improvement overall: http://jsfiddle.net/oneeezy/tHLY7/4/
Here are a few tips
1.) You should never use "#ID" for styling purposes, just use #ID for javascript hooks, always use ".class" for styling and like someone else said, keep it lowercase.
2.) Always use a "reset.css" file. I've attached the best reset file I know that exists from HTML5 boilerplates website. You can take care of a lot of your "base" styles in that file. Use a stylesheet.css file after your reset.css file
3.) Like someone else said, if you have multiple elements on a page (in this case, ul's) then you must target that specific ul through a class name and tell it specifically what you want it to do.. otherwise it will take the style from the reset.css file.
4.) 2 very important styles have been added!
Clear Fix (I'm calling this ".row", This is the best way to make things drop to the next line (like hitting the "return" key in microsoft word)
Box sizing is you're best friend! It makes "padding" act correctly and doesn't add space to your elements that have it. I gave it the "*" to apply on everything.
/* Box sizing is you're best friend! It makes "padding" act correctly and doesn't add space to your elements that have it. */
*, *:after, *:before { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* Clear Fix - This is the best way to make things drop to the next line (like hitting the "return" key in microsoft word ) */
.row:before, .row:after { content: " "; display: table; }
.row:after { clear: both; }
.row { *zoom: 1; clear: both; }
/* This "wrapper" goes around everything and makes your content stay in the middle of the page */
.wrapper { width: 90%; margin: 0 auto; }
/* Navigation */
.menu { background: #000; width: 100%; float: left; display: block; }
.menu ul { color: #fff; float: right; }
.menu ul li { float: left; display: block; }
.menu ul li a { display: block; color: #fff; padding: .25em 1em; border-left: 1px solid #fff; }
.menu ul li a.active { background: #333333; display: block; color: #fff; padding: .25em 1em; border-left: 1px solid #fff; }
.menu ul li a:hover { background: #333333; color: #fff; }
/* Main Content */
.main { padding: .5em 0; }
.main h1 { margin: .5em 0; }
.main ul { }
.main ul li { list-style: inside; }
I hope this helps!