0

So I have started to mess around with responsive html. But anyways, that's not really the issue. The issue is after i added this parallelogram shape, it messed up the contents of my wrapper. I tried using z-index to make it so the nav bar appears over the wrapper, but then It didn't work when I set my wrapper to relative, it worked when i set it to absolute/fixed and z-index -1. I'm just trying to get my wrapper to be aligned in the center while having the parallelogram shape in the nav bar. Because right now, my 2 column layout is being messed up because of the shape.(I suck at explaining, but if you look at my site on jsfiddle, I think you can get the idea) Thanks!

http://jsfiddle.net/RgKaQ/

heres something I've tried

nav {
    height: 40px;
    width: 100%;
    background: #33FF00;
    font-size: 11pt;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #339900;
    z-index : 1;

}
.wrapper {
    width: 800px;
    margin: 0 auto;
       /* position: relative; doesn't work*/
        position: fixed; /*works but it makes it not aligned in the center*/
    z-index: -1;
}
4

2 回答 2

0

Try to use the position this absolute if you want to chage the css for nav bar make hte changes in nav bar css not in wrapper ..

.wrapper {
width: 800px;
margin: 0 auto;
   /* position: relative; doesn't work*/
   /* position: fixed; works but it makes it not aligned in the center*/
     position:absolute;
z-index: -1;

}

于 2013-03-16T08:33:39.063 回答
0

The id #swank (which is taller than the nav) is causing the problems. Use position:absolute; for the nav and add margin to .wrapper. Like this. http://jsfiddle.net/RgKaQ/4/

nav {
position:absolute;
top: 0;
}
.wrapper {
margin: 40px auto 0 auto;
overflow:auto;
}
于 2013-03-16T08:54:13.090 回答