CODEWITHSUNDEEP
htmlcssmenuhorizontallist
user3116358
user3116358

Reputation: 27

horizontal menu with text and images

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>

Upvotes: 0

Views: 596

Answers (1)

user3589620
user3589620

Reputation:

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/

Upvotes: 1

Related Questions