[SniperTowers]

How do I put images next to each other.
Here is my CSS:

Code:

#home{
  display: block;
  width: 219px;
  height: 57px;
  background: url("images/home.png") no-repeat 0 0;
}
#home:visted{ 
  background-position: 0 -57px;
}
#home:hover{ 
  background-position: 0 -57px;
}
#home:active{ 
  background-position: 0 -114px;
}
#home span{
  display: none;
}
#nav li.one {background: url("images/homeactive.png") no-repeat;}
#podro{
  display: block;
  width: 219px;
  height: 57px;
  background: url("images/podro.png") no-repeat 0 0;
}
#podro:visted{ 
  background-position: 0 -57px;
}
#podro:hover{ 
  background-position: 0 -57px;
}
#podro:active{ 
  background-position: 0 -114px;
}
#podro span{
  display: none;
}
#nav li.two {background: url("images/podro.png") no-repeat;}
#ljudje{
  display: block;
  width: 219px;
  height: 57px;
  background: url("images/ljudje.png") no-repeat 0 0;
}
#ljudje:visted{ 
  background-position: 0 -57px;
}
#ljudje:hover{ 
  background-position: 0 -57px;
}
#ljudje:active{ 
  background-position: 0 -114px;
}
#ljudje span{
  display: none;
}
#nav li.three {background: url("images/ljudje.png") no-repeat;}

Here is my HTML:

Code:

<ul id="nav">
<li class="one"><a id="home" href="index.html" title="Home"><span>Home</span></a></li>
<li><a id="podro" href="#" title="podro"><span>Podro</span></a></li>
<li><a id="ljudje" href="#" title="ljudje"><span>Ljudje</span></a></li>
</ul>

Currently just display one after the other, how do I display them next to each other?

[wirehopper]

Not tested.

HTML Code:

li
{
display:inline;
}

CSS List

You might also want to use divs and spans instead, since it's navigation.