CSS Header Image "Stacked"

Question

I been having this problem with my website for a little while, so I been working on a header using pictures and its all up and good, it changes pictures when I hover over it but then after finishing putting "Home" "News" "Login" "Register" and "Contact", I noticed that instead of it all next to eachother, it all stacks up, like this:

The CSS coding: #menubar { width: 50%; margin: 0 auto 0 auto; }

.home {
    display: block;
    width: 240px;
    height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: 0 0;
}
.home:hover {
    background-position: 0 100;
}
/***************************************************/
.news {
display: block;
    width: 240px;
height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: -240 top;
}
.news:hover {
    background-position: -240 bottom;
} 
/***************************************************/
.register {
    display: block;
    width: 240px;
    height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: 480 top ;
}
.register:hover {
    background-position: 480 bottom;
}

/***************************************************/
.play { /*login*/
    display: block;
    width: 240px;
    height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: 720 top;
}
.play:hover {
    background-position: 720 bottom;
}

/***************************************************/
.contact {
    display: block;
    width: 240px;
    height: 100px;
    background: url('IMG/Heading_Normal_and_Hover.png');
    background-position: 240 top ;
}
.contact:hover {
    background-position: 240 bottom;
}

/***************************************************/

The HTML coding

Answer 1

Your problem generally stems from listing multiple block elements next to each other, unfloated, which causes them to get stacked on top of each other (instead of next to each other).

There are a multitude of possible ways to achieve what you'd like to achieve. Here are two of them:

1. Floating the elements next to each other

You can float the elements by applying the following attribute to your CSS definitions:

float: left;

Whereas left can also be right or none.

If you have a normally ordered list of elements and you want them to float next to each other, you can use float:left.

Try adding float: left to all of your CSS definitions (.news, .register, etc.).

A more clean way would be to create a CSS class:

.floatLeft {
    float: left;
}

And apply the class to all of the affected elements:

<a class="floatLeft" href=""></a>

However, since you use <a> elements, you may want to make them block elements, so applying:

.floatLeft {
    float: left;
    display: block;
}

can be helpful.

Generally i suggest you use an <ul> element for your menu container and an <li> element for your menu buttons. You can still use <a> elements inside of your <li> tags.

Please note that your parent container must allow for enough width to list its child elements next to each other, or the floated elements will wrap into the next 'line'.

Learn about floats here.

2. Using inline-block

You can use:

display: inline-block

on every menu button, which will allow you to display multiple elements next to each other.

If you use this approach, bear in mind that you might need to set:

white-space: nowrap

On the menu container.

You might also run into vertical alignment issues - in that case use:

vertical-align: top

on each element (top or middle or bottom, depending on what you need).

Additional Information

You can learn about the above two methods by following this link