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...
- Can't really say much without seeing an actual page where these styles are put into some kind of context.
- A screen shot perhaps...
- Progress, but without the actual markup, it's still a guessing game.
- 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.
- Opps, here is the link to the whole thing. http://drop.io/0hw3hh1#
2 answers
points
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.
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.
- 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.
