Jump to content

Menu aligning with browser window, rather than content

ondi

By ondi
in CSS Help

 Share

Recommended Posts

ondi Member

ondi

Posted
Posted

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;
}

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.