开发者

My menu is aligning with browser window, rather than content

I am in the process of creating a site using wordpress. (It can be seen here: http://www.adp-design-demos.com/brolim2/) However, the menu aligns with the side of the browser, rather than the content of my wordpress site. I have been through the CSS, and know where the menu CSS is, but at the moment all I've managed to do is move it by percentage.

Can anyone help me with the coding so that the menu appears in a fixed position regardless of window/browser size and location.

Cheers

The area I have been editing:

#header .nav {
    background: #E0DCD9 url('images/bg_nav.png') repeat-x;
    overflow: hidden;
}
#header .nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#header .nav li {
    float: left;
}
#header .nav li a {
    display: block;
    padding: 12px 18px 13px 18px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

    #header .nav li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        margin-top: 26px;
    }

    #header .nav li li a {
        font-size: 11px;
        padding: 0;
        margin: 0 0 0 20px;
    }
    #header .nav li li {
        width: auto;
        display: inline;
        float: none;
    }
    #header .nav li li a:hover {
        background: none;
    }

#header .nav li a:hover, #header .nav .current_page_item a {
    background: #4B3F33;
    color: #fff;
}
#header .nav li ul {
    display: none;
}
#header .nav .current_page_item ul {
    display: block;
    position: absolute;
    left: 652px;
}
开发者_如何学运维#header .nav .current_page_item ul li a {
    background: none;
    color: #666;
}

.nav_categories {
    background: #f58220;
    background-position: top center;
    overflow: hidden;

}
.nav_categories ul {
    width: 1000px;
    margin: 0 auto 0 auto;
}
.nav_categories a {
    display: block;
    padding: 15px;
align: center;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;

    color: #fff;
}
.nav_categories li {
    float:right;
 position:relative;
 left:-42%;
 text-align:left;
}
.nav_categories .current-cat a, .nav_categories a:hover {
    color: #4b3f33;
}


At first glance the alignment of your navigation looks correct (even after resizing). I looked at the demo site and inspected the html as well. I couldn't find .nav within #header. Can you provide me with the html you're working with?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜