Q:

Buttons with CSS and HTML - Select by ID

I'm trying to create my very first web site and I'm stuck on the menu buttons (navigation bar). Somehow I managed to create a button finally. Watched a few videos about CSS selectors by ID, by class and attributes, however whenever I try to modify the working code for the first button to apply for the rest of the buttons, it just does not work.. I am trying to use ID instead of Class selections (class works just fine) as I want to change the pictures and sizes of each button and to make all the buttons to be on the same line, which I could not also do by myself.
Here's my code with Class selectors, please advise how to make it with IDs as if I just change the dot with a hash tag, it doesn't work. It doesn't work if I try to re-order the selected parts like a, li etc.
JSFiddle example
#menu {
    height: 70px; /* separating the next content from the button */
    width: 0px;
    text-align: center;
    margin: 0, auto;
}

How do I do that and how do I make the menu be on the same line.. tried with float and with style="clear:both" after that for the content after the menu, but it doesn't seem to work.

A:

First, you shouldn't use ids to select that kind of item. Better use ids to identify zones of your website.
But, you can find a working code here: http://jsfiddle.net/cjTN7/24/
#home, #about, #news { background-size: cover; }
#home { 
    height: 100px;
    width: 100px; 
}
#about {
    height: 200px;
    width: 200px; 
}
#news {
    height: 300px;
    width: 300px; 
}

For the inline menu, you set your #menu width at 0px. #menu should be 100% (or whatever bigger than your items inside) and set your items in inline-block instead of block.
I don't know if i understood well your issue but, hope it helps.
Good luck :)

