horizontal menu with text and images - html

Question

this is my css and html for the menu. I am trying to work out how to make it all horizontal. Any help would be greatly appreciated. Cheers.
ol {
margin-top: 20px;
}
#images {
margin-left: 10px;
}
#images-text {
background: #f5f8ef;
border-radius: 10px;
width: 300px;
height: 40px;
font-family: Impact, Charcoal, sans-serif;
display: inline;
}
This is the html
<ol>
<li class="newbar">
<div id = "images">
<img src="images/crowd.png" width ="200" height="180">
<img src="images/crowd.png" width ="200" height="180">
<p>
<div id = "images-text">
Arctic Monkeys
</div>
<div id = "images-text">
Arctic Monkeys
</div>
</div>
</li>
</ol>
</div>

Answer 1

You don't need to use a <ol>. If you have <img> with some text below or above it is good practice to use <figure> and <figcaption>for the imagetext.
<figure>
<figcaption>
Image text
</figcaption>
<img src="images/crowd.png">
</figure>
If you want the image text below the <img> just put the <figcaption>below the <img>.
Than, the figures in a <div>:
<div>
<figure>
...
</figure>
<figure>
...
</figure>
<figure>
...
</figure>
...
</div>
The CSS for every <figure>:
div figure {
display: inline-block;
}
CSS selectors usage: http://www.w3schools.com/css/css_selectors.asp
example: http://jsfiddle.net/qpk9smm8/