ondi Posted August 16, 2011 Share Posted August 16, 2011 Hi, appologies if this has been covered before, but my searches didn't come up with anything. 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 CSS: The area I have been editing: .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; The whole CSS file. body { background: #dad5d2; background-position: top center; margin: 0; padding: 0; font-family: Helvetica, Arial; font-size: 12px; line-height: 20px; color: #666; } #wrap { width: 1000px; margin: 0px auto 0 auto; padding: 0px; } #header { background: #e3dfdd url('images/header.png') no-repeat; background-position: top center; margin: 0; overflow: hidden; } #header .content { width: 1000px; margin: 20px auto 0 auto; position: relative; } #header .logo { color: #999999; float: left; width: 45%; overflow: hidden; } #header .logo p { text-shadow: #eee 0 1px 0px; } #header .banner { float: right; text-align: right; } #header .feed { background: url('images/ico_rss.png') no-repeat; display: block; float: right; width: 43px; height: 32px; overflow: hidden; text-indent: -999px; position: absolute; bottom: 0; right: 0; } #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; } #main { margin-top: 20px; } #content { width: 600px; float: left; } /* different content widthes based on sidebar visibility preferences */ .nosidebar #content { float: none; width: auto; } #sidebar { min-width: 330px !important; width: 330px; float: right; } #footer { margin-top: 5px; overflow: hidden; } #footer .content { margin: 30px auto 25px auto; } #footer #s { width: 150px; } #footerbar .widget { width: 28%; margin-right: 40px; float: left; } #footerbar .widget ul { background: #fff; padding: 10px; } #footerbar .widget li { border-bottom: 1px dotted #aaa; padding-bottom: 2px; } #footerbar .widget input { display: block; } .copyright { background: #d0ccc9; margin-top: 00px; overflow: hidden; } .copyright .content { width: 1000px; margin: 10px auto 10px auto; } .copyright .text { float: left; margin: 10; } .copyright .footer_nav { float: left; margin-left: 40px; } .copyright .footer_nav a { color: #666; } .copyright .footer_nav a:hover { text-decoration: underline; } .copyright .footer_nav li { display: inline; margin-right: 10px; } #idesigneco { text-align: right; float: right; } /* ________________________________________________________ */ .pagetitle { margin-bottom: 25px; color: #666; } .post { background: #fff; padding: 15px; margin: 0 0 50px 0; } .post .share { background: #fff; width: 20px; position: absolute; margin-left: -35px; padding: 3px 0 3px 3px; } .post .share li { margin-bottom: 4px; } .post .share li a { display: block; overflow: hidden; text-indent: -999px; } .post .share .fb a { background: url('images/ico_fb.png') no-repeat; } .post .share .tt a { background: url('images/ico_tt.png') no-repeat; } .post .text { overflow: hidden; } .post .text a { text-decoration: underline; } .post .text h1, .post .text h2, .post .text h3, .post .text h4 { margin: 35px 0 10px 0; } .post .meta { background: #f7f5f4 url('images/bg_meta.png') repeat-x; background-position: bottom left; padding: 6px; border-width: 1px 0 1px 0; border-style: solid; border-color: #eee; margin-bottom: 20px; } .post .postmetadata { margin: 10px 0 20px 0; } .post .postmetadata { margin-top: 30px; font-weight: normal; font-size: 10px; list-style-type: none; } .post .meta p { padding: 0; margin: 0; } .post .meta .category { float: left; width: 40%; } .post .meta .date { float: left; width: 40%; } .post .meta .comments { float: right; width: 20%; text-align: right; } .post .meta .author { float: left; } .post .meta .tags { background: url('images/ico_tag.png') no-repeat; background-position: 0px 6px; float: right; padding-left: 16px; min-height: 12px; font-size: 11px; } .homepage { margin-bottom: 30px; } .homepage .slideshow { width: 600px; float: left; } #homefeatured { width: 570px; height: 250px; border: 15px solid #fff; overflow: hidden; position: relative; } #homefeatured .featured { background-repeat: no-repeat; width: 570px; height: 250px; overflow: hidden; position: absolute; } #homefeatured .featured .title { background: url('images/bg_title_arrow.png') no-repeat; background-position: 10px 0; margin: 170px 12px 0 10px; overflow: hidden; } #homefeatured .featured .title a { background: url('images/bg_title.png'); line-height: 20px; display: block; margin-top: 10px; padding: 9px; font-size: 20px; color: #333; border-radius: 4px; -border-radius: 4px; -khtml-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .homepage .dots { margin-top: 5px; text-align: center; } .homepage .dots li { display: inline; } .homepage .dots a { font-size: 40px; color: #B9B2AD; margin-right: 10px; } .homepage .dots a:hover, .homepage .dots .sel { color: #88827F; text-decoration: none; } .homepage .banner { float: right; text-align: right; border: 15px solid #fff; } /* ________________________________________________________ */ .sticky { background: #f7f7f7; padding: 0 10px 10px; } .sticky h2 { padding-top: 10px; } #respond, #comments { margin-top: 50px; } #respond textarea { width: 95% !important; } .commentlist li ul li { } .commentlist li { font-weight: bold; background: #eee; padding: 6px; margin-bottom: 10px; } .commentlist li .avatar { float: right; border: 1px solid #eee; padding: 2px; background: #fff; } .commentlist cite, .commentlist cite a { font-weight: bold; font-style: normal; font-size: 1.1em; } .commentlist p { font-weight: normal; line-height: 1.5em; text-transform: none; } .commentmetadata { font-weight: normal; } /* ________________________________________________________ */ .widget ul { background: #fff; margin: 0; padding: 10px; list-style-type: none; } .widgetbanners { list-style-type: none; padding: 0; margin: 0; } .widgetbanners li { display: inline; margin: 2px 2px 2px 0; } #sidebar .widget { margin-bottom: 15px; margin-left: 10px; margin-right: 10px; clear: both; } .ide_widget_ecosocial { background: #dad5d2; overflow: hidden; border: 15px solid #fff; } .ide_widget_ecosocial ul { background: none; list-style-type: none; width: 28%; padding: 0 !important; float: left; } .ide_widget_ecosocial .list { margin: 20px 0 0 10px; } .ide_widget_ecosocial .list li { margin-bottom: 6px; } .ide_widget_ecosocial .list li .sel { font-weight: bold; } .ide_widget_ecosocial .stats { width: 60%; float: right; margin: 15px 15px 15px 0; text-align: center; overflow: hidden; } .ide_widget_ecosocial .stats li { display: none; overflow: hidden; text-align: center; } .ide_widget_ecosocial .stats .caption { display: block; } .ide_widget_ecosocial .stats .twitter p { font-size: 10px !important; } .ide_widget_ecosocial .stats .twitter .twtr-ft { display: none; } /* ________________________________________________________ */ .searchform { position: absolute; top: 2px; right: 5px; } .searchform .input, #s { background: #fff; width: 150px; border: none; margin: 6px 0 0 0; padding-left: 12px; font-size: 12px; color: #aaa; border-radius: 15px; -border-radius: 15px; -khtml-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; } /* ________________________________________________________ */ a { text-decoration: none; color: #4b3f33; } a:hover { color: #666; } a img { border: 0; } h1,h2,h3, h4 { margin: 0 0 10px 0; font-size: 38px; font-weight: normal; } h1 { letter-spacing: -1px; line-height: 38px; font-weight: 400; font-size: 32px; } h2 { font-size: 18px; } h3 { font-size: 16px; font-weight: bold; } h4 { font-size: 14px; font-weight: bold; } input, select, textarea { border: 1px solid #ccc; padding: 6px; font-family: Helvetica, Arial; font-size: 16px; } blockquote { background: #efefef; padding: 1px 5px 1px 5px; font-family: Georgia, Helvetica, Arial; font-style: italic; } blockquote blockquote { margin: 5px; padding: 5px; clear: both; } acronym, abbr, span.caps { font-size: 0.9em; letter-spacing: .07em; } .alignleft { float: left; margin: 5px 10px 5px 0; } .alignright { float: right; margin: 5px 0 5px 10px; } .aligncenter, div.aligncenter { display: block; margin: 10px auto; text-align: center; } img.alignleft { float: left; margin: 5px 10px 5px 0; } img.alignright { float: right; margin: 5px 0 5px 10px; } img.aligncenter { display: block; margin: 10px auto; text-align: center; } .wp-caption { background-color: #f3f3f3; border: 1px solid #ddd; padding-top: 4px; text-align: center; } .wp-caption img { border: none; margin: 0; padding: 0; } .wp-caption p.wp-caption-text { color: #111; font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } .noul { margin: 0; padding: 0; list-style-type: none; } .button, #searchsubmit { background: #4B3F33; width: auto; padding: 4px 15px 4px 15px; border: 0; font-weight: bold; font-size: 14px; color: #fff; } a.button:hover { background: #666; color: #fff; } .clear { clear: both; line-height: 0; padding: 0; margin: 0; } Quote Link to comment https://forums.phpfreaks.com/topic/244920-menu-aligning-with-browser-window-rather-than-content/ Share on other sites More sharing options...
Frank P Posted August 16, 2011 Share Posted August 16, 2011 I see you solved it already? At least, here it's looking OK, in FF4 and IE8. Quote Link to comment https://forums.phpfreaks.com/topic/244920-menu-aligning-with-browser-window-rather-than-content/#findComment-1258268 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.