CODEWITHSUNDEEP
htmlcss
apscience
apscience

Reputation: 7273

Navigation Bar - Each button is at a seperate line, how do I fix that?

Demo: http://glados.cc/eJdemo/

My code:

<style type="text/css">
#home
{
display: block;
width: 40px;
height: 38px;
background: url("bar1.png") no-repeat 0 0;
}
#home:hover
{ 
background-position: 0 -38px;
}
#myplaces
{
display: block;
width: 123px;
height: 38px;
background: url("bar2.png") no-repeat 0 0;
}
#myplaces:hover
{ 
background-position: 0 -38px;
}
</style>
</head>
<body>
<a id="home" href="#" title="Home"></a>
<a id="myplaces" href="#" title="My Places"></a>
</body>

I just couldn't figure out how to squash them onto the same line. I'm new to css and googling didn't get me any answers. Thanks for any help!

Upvotes: 1

Views: 143

Answers (4)

kongr45gpen
kongr45gpen

Reputation: 453

You should set display to inline-block and then margin:0px;. Note that display:inline won't work. And you should place the <a> tags on the same line.

Upvotes: 0

ADW
ADW

Reputation: 4080

You can either float them (see answer by Jrod) or another alternative is to change from:

display: block;

to:

display: inline-block;

Upvotes: 3

Jared
Jared

Reputation: 12524

You need to float your links.
Add 'float:left' to both of your links' css.

Upvotes: 3

SteeveDroz
SteeveDroz

Reputation: 6156

Simple: display:block makes them go on separate lines. Try display:inline instead.

Upvotes: 1

Related Questions