2

I must create a navigation bar exactly how it's shown in the picture below. I was trying to for a whole day. You can see the only code I could write below. The problem is that I used a method from here: Separators For Navigation, but I don't know how to put links and borders to make it look like in the picture. The orange line under the navigation bar doesn't belong to it. I have a PSD Photoshop file from which I can extract elements of the navigation bar. That's the source of the nav_border.png.

target navigation bar image

my result

My HTML code:

<div id="navbar">
    <ul>
        <li><a href="index.html">First time at auction ?</a></li>
        <li><a href="index.html">Next auctions</a></li>
        <li><a href="index.html">Rules</a></li>
        <li><a href="index.html">Terms of use</a></li>
        <li><a href="index.html">FAQ</a></li>
        <li><a href="index.html">Contacts</a></li>
        <li></li>
    </ul>
  </div>

My CSS code (so far):

#navbar {
    float: left;
    width: 776px;
    height: 40px;
    border-radius: 8px 8px 0 0;
    background-color: #003366;
}
#navbar ul {
    list-style-type: none;
}
#navbar li {
    float: left;
}
#navbar a {
    color: white;
    text-decoration: none;
}
#navbar li + li{
    background:url('nav_border.png') no-repeat top left;
    padding-left: 10px;
    margin-left: 30px;
}
Community
  • 1
  • 1
encrypted21
  • 194
  • 11

1 Answers1

1

Here's a fiddle that should get you headed in the right direction

https://jsfiddle.net/fx6gtj6o/

#navbar {

  background: blue;
  border-radius: 8px 8px 0 0;  

  ul {

    list-item-type: none;
    padding: 0;

    li {

      display: inline-block;
      text-align: center;
      padding: 10px 10px;
      border-right: 1px solid black;

      a {

        color: #FFF;

      }

    }

  }

}

No reason to use any of the images from the actual mockup, you can get everything done with CSS

zajd
  • 761
  • 1
  • 5
  • 18
  • Thanks! Now it's perfectly positioned. Would you also know how to change right border to image border? I tried online border generator, but border simply disappears after I use the code. – encrypted21 Dec 24 '15 at 16:46
  • https://jsfiddle.net/fx6gtj6o/1/ is an updated fiddle with a working gradient border – zajd Dec 24 '15 at 16:48