MyBB Community Forums

Site: www.vampirecounts.net

I have had complaints off members that the top Navigation bar does not look right in certain resolutions.

In my screen for example it looks fine:

[attachment=16385]

But on someone elses:



The code to amend this bar is:

#navigation-1 {
        background:url(images/Seperator.gif) top left repeat-x;
	padding:1px 0;
	margin:0px;
	list-style:none;
	width:100%;
	height:21px;
	border-top:1px solid #525252;
        border-left:1px solid #525252;
        border-right:1px solid #525252;
	border-bottom:1px solid #525252;
	font:normal 8pt verdana, arial, helvetica;
}
#navigation-1 li {
	margin:0;
	padding:0;
	display:block;
	float:left;
	position:relative;
	width:170px;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
	padding:4px 0;
	display:block;
	text-align:center;
	text-decoration:none;
        background:url(images/Seperator.gif) top left repeat-x;
	color:#CCCCCC;
	width:170px;
	height:13px;
}

#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
	padding:4px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	background:url(images/hover.gif) top left repeat-x;
	color:#CCCCCC;
	width:168px;
	height:13px;
	border-left:1px solid #525252;
	border-right:1px solid #525252;
}

#navigation-1 li ul.navigation-2 {
	margin:0;
	padding:1px 1px 0;
	list-style:none;
	display:none;
	background:#525252;
	width:168px;
	position:absolute;
	top:21px;
	left:-1px;
	border:1px solid #151515;
	border-top:none;
}

#navigation-1 li:hover ul.navigation-2 {
	display:block;
        background:url(images/Seperator.gif) top left repeat-x;
        color:#CCCCCC;
}

#navigation-1 li ul.navigation-2 li {
	width:168px;
	clear:left;
	width:168px;
}

#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
	clear:left;
	background:url(images/Seperator.gif) top left repeat-x;
	padding:4px 0;
	width:168px;
	border:none;
	border-bottom:1px solid #525252;
	position:relative;
	z-index:1000;
}

#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:hover {
	clear:left;
	background:url(images/hover.gif) top left repeat-x;
        padding:4px 0;
	width:168px;
	border:none;
	border-bottom:1px solid #525252;
	position:relative;
	z-index:1000;
}

#navigation-1 li ul.navigation-2 li a:active{
	clear:left;
	background:url(images/Seperator.gif) top left repeat-x;
        padding:4px 0;
	width:168px;
	border:none;
	border-bottom:1px solid #525252;
	position:relative;
	z-index:1000;
}

#navigation-1 li ul.navigation-2 li ul.navigation-3 {
	display:none;
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	left:168px;
	top:-2px;
	padding:1px 1px 0 1px;
	border:1px solid #525252;
	border-left:none;
	background:#272727;
	z-index:900;
}

#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
	display:block;
}

#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
	background:url(images/Seperator.gif) top left repeat-x;
}

#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
	background:url(images/hover.gif) top left repeat-x;
}

#navigation-1 li ul.navigation-2 li a span {
	position:absolute;
	top:0;
	left:169px;
	font-size:12pt;
	color:#fe676f;
}

#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
	position:absolute;
	top:0;
	left:169px;
	font-size:12pt;
        color:#CCCCCC;

Please can some advise how to edit it so the bar resizes fit the screen resolution rather then remaining static? Obviously the buttons etc would need to resize as well.

Thanks