CSS - Navigation

Question

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>

CaribouCode · Accepted Answer · 2013-08-05 22:06:15Z

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'); }

answered Aug 5, 2013 at 22:06

CaribouCode

14.5k33 gold badges113 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2654694 Over a year ago

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

Alex Baulch · Accepted Answer · 2013-08-06 07:43:49Z

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

edited Aug 6, 2013 at 7:43

answered Aug 5, 2013 at 22:09

Alex Baulch

7511 gold badge11 silver badges24 bronze badges

6 Comments

user2654694 Over a year ago

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

Alex Baulch Over a year ago

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.

user2654694 Over a year ago

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.

user2654694 Over a year ago

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.

user2654694 Over a year ago

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.

|

Collectives™ on Stack Overflow

CSS - Navigation

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related