0

I'm having an issue with the navigation links in my navbar. To start off, it's not aligned in the middle of the navigation bar as shown here:

enter image description here

and the other part is, I'm using padding to do this so if I put anything other than "test" or it in a different case, etc. It'll repeat the box. Code preview:

.menu {
background-image: url('../img/navbar_bg.png');
height: 65px;
width: 100%;
}
.menu a {
color: #FFFFFF;
text-decoration: none;
font-size: 14px;
background-image: url('../img/nav.png');
padding-top: 20px;
padding-bottom: 18px;
padding-right: 68px;
padding-left: 68px;
}
.menu a:hover {
color: #FFFFFF;
text-decoration: none;
font-size: 14px;
background-image: url('../img/navhov.png');
padding-top: 20px;
padding-bottom: 18px;
padding-right: 68px;
padding-left: 68px;
}

<div class="menu">
<a href="">Test</a>
<a href="">Test</a>
<a href="">Test</a>
</div>

2 Answers 2

1

Navs work well in lists. You can also set the links to display as block as give them set height/width with line-height.

 <nav>
    <ul>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
      <li><a href="#">Test</a></li>
    </ul>
 </nav>

CSS

nav {
    width: 100%;
    text-align: center;
    background-image: url('../img/navbar_bg.png'); }

nav li {
    display: inline-block;
    list-style-type: none; }

.menu a {
        display: block;
        color: #FFF;
        text-decoration: none;
        font-size: 14px;
        width: 130px;
        height: 50px;
        line-height: 50px;
        background-image: url('../img/nav.png'); }
Sign up to request clarification or add additional context in comments.

1 Comment

I have the navbar there i.imgur.com/ZlYBZmL.png but how would I align it left and keep the text in the center?
0

Made a few edits to you html to make it slightly better in terms of semantics. Mostly just needs an align center.

HTML

<nav class="menu">
  <ul>
    <li><a href="">Homepage</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</nav>

CSS

.menu {
  background-image: url('../img/navbar_bg.png');
  background:black;
  display:inline-block;
  height: 65px;
  text-align:center;
  width: 100%;
}
ul {
  display:inline-block;
  list-style:none;
  margin:0 auto;
  padding-top:4px;
  width:auto;
}
li {
  display:inline-block;
  margin-right:10px;
  width:160px;
}
.menu a {
  color: #FFFFFF;
  display:block;
  text-decoration: none;
  font-size: 14px;
  background-image:url('http://i.imgur.com/T07vDRX.png');
  padding-top: 20px;
  padding-bottom: 18px;
  width:160px;
}
.menu a:hover {
  text-decoration: none;
  background-image: url('../img/navhov.png');
}

Working link here...

http://codepen.io/alexbaulch/pen/HrAxl

6 Comments

I wanted it to be where it was, but I didn't want it popping up I wanted it to look like what it was in the PSD: i.imgur.com/m8Cqoo0.png
I have put your image links back in, so it won't look right on the link below but should work fine in your code. Let me know how you get on.
It is working better but I need it to be pushed down about 4 pixels and when I add another word in it restarts the image: i.imgur.com/GIhn724.png and when a word is too short, it removes some of the nav background.
Still the same, idk if it's the padding or not but its still repeating the image when I type anything other than "Test". and still needs to be pushed down about 4 px.
I added "padding: 5px;" to the li CSS class. Now it's where I want it to be but the text still makes the background repeat.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.