Michael Gates 0

I have an image that is supposed to be the background of a navigation bar and no matter what I try, it always is positioned about 4 pixel to the right. At first I just thought it was because I sliced unevenly, so I went back and made sure it was perfectly equal on both sides and nothing changed. I'm still learning so I don't really know what's going on. The html is just a <nav> element with a <ul> in it. It inside three <div>'s. The CSS for the <nav>, the three <div>'s and the <body> are as follows:

body {
    padding: 24px 0;
    margin: 0;
    background: url(../images/back_black_diagonal.gif) repeat;
}

#container {
    width: 915px;
    margin: 0 auto;
}

#pagetop {
    background: url(../images/main_top.png) no-repeat top;
    width: 911px;
    float: left;
    padding: 34px 0;
}

#main {
    background: url(../images/main.png) repeat-y;
    width: 911px;
    float: left;
}

nav {
    background: url(../images/nav_bar.png) no-repeat;
    width: 922px;
    float: left;
}

Thanks in advance.

EDIT:

Not taking into account the terrible design this is the only problem. Remember, I'm learning...

alt text

  • Can't really say much without seeing an actual page where these styles are put into some kind of context. — Nathan Duran almost 9 years ago
  • A screen shot perhaps... — Michael Gates almost 9 years ago
  • Progress, but without the actual markup, it's still a guessing game. — Nathan Duran almost 9 years ago
  • If your really feeling motivated, you can waste 10 kbs of your bandwidth and try and help me out. Don't worry about it though, I'll probably figure it out if I hit my head against the computer long enough. — Michael Gates almost 9 years ago
  • Opps, here is the link to the whole thing. http://drop.io/0hw3hh1# — Michael Gates almost 9 years ago

2 answers

Tony Crockford 7095
2
points
This was chosen as the best answer

if you look at your screen shot the left hand of the image is shifted over as well.

looking at the files, I just added a negative left margin to the nav to shift it far enough to the left so that the image width worked.

nav {
    background:url(../images/nav_bar.png) no-repeat top right;
    width:922px;
    float:left;
    margin-left: -6px;
}

you could use a smaller image if you want the ribbon effect to start and end somewhere else, but to get 922px wide around a 911px inner, you'll need to offset the image container somehow.

this would also work:

nav {
    background:url(../images/nav_bar.png) no-repeat top right;
    width:922px;
    float:left;
    position: relative;
    top: 0;
    left: -6px;
}

note that it might be better to use widths that match the inner tips of the ribbon, and adjust the position of the nav again.

Answered almost 9 years ago by Tony Crockford
Nathan Duran 555
1
point

Your nav element is aligning with the left edge of your #main div exactly the way you're telling it to. Since you want it to move over beyond that edge, you either need a negative margin on the nav element, or a wider #main div. The first solution is the easiest, though not necessarily the best:

margin-left:     -6px;

Fixes it for me.

Answered almost 9 years ago by Nathan Duran
  • Thank you, that's what I was originally going to do, but for some reason I thought it would just be a temporary fix. Now I see that it will work that way. — Michael Gates almost 9 years ago