[collie]

hi

http://davidcolligan...hain/index.html

been having a couple of problems with my navigation altogether.

Navigation.
1)im wanting my navigation to be centered, without having to use "margin-left:"
2)my drop down sits off place and not cetnered under the item its supposed to be. u can see this on the accessories bit.
3)also the dropdown sits on top of the item its supposed to be under.

Footer.
i cnt seem to get my footer to sit in the right place, i want it to be connected onto the bottom without any gaps

any help would be much appreciated.

thanx

collie

[Wickham]

Making your own drop down menu can get problems, that's why many people use a pure CSS menu from cssplay
http://www.cssplay.co.uk/menus/
and edit it.

Your li and "a" tags for the top level don't have any widths, so they are just using what the text needs, Bikes is a shorter word than Accessories so the drop down underneath is out of position. When this happens you need to add a class for the drop down ul to suit the different li tag above, see below.

<li><a href="accessories.html">Accessories</a>
			<ul class="acc">
				<li>...........

This is the CSS styles I used;-

/** start of navigation **/
#navigation
{
	width:990px;
	height:22px;
	float:left;
	background-color:black;
	border-top:solid #f40a01 2px;
	border-bottom:solid #f40a01 2px;
	
}

/** start of the navigation ul **/

.nav ul{
	
	margin-top:0px;
	list-style-type: none;

	
	
}
.nav li
{        
	display:inline;
	list-style:none;
	float:left;
	position:relative;
} 
.nav ul li a
{                  
	font-size:14pt;
	text-decoration:none;
	text-align: left;
	font-family:"arial";
	display:block;
	color:#f9ff11;
	height:24px;
	margin-left:40px;
}
.nav ul li a:hover
{
	color:#007ee9;
	

}
.nav ul ul
{
	position: absolute; margin-top: 20px;
	visibility:hidden;
	top:2px;
	text-align:left;
	width:118px;     /*was 120px;*/
	
}
.nav ul ul.acc          /*added style*/
{                
	position: absolute; margin-left: 15px;
	visibility:hidden; 
	top:2px;
	text-align:left;
	width:160px;
	
}
.nav ul ul li a
{	
	font-size:10pt;
	text-decoration:none;
	text-align: center;
	font-family:"arial";
	display:block;
	color:white;
	height:25px;
	
}
.nav ul ul.acc li a          /*added style*/
{
	text-align: left; 	 	
	margin-left: 2px;	
	
}

.nav ul li:hover ul
{                
	visibility:visible;
	display:inline-block;
	position:absolute;
	background-color:black;
	
	-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

/** start of new nav menu **/
/*.nav>ul>li { outline: 1px solid red; } deleted*/

I've marked the revised and added styles. I deleted the outline as it duplicated the top level borders and outline is outside a border so it looked odd.
I hope that helps. It's still not perfect.

This post has been edited by Wickham: 19 January 2012 - 07:37 AM

[collie]

Wickham, on 19 January 2012 - 07:30 AM, said:

Making your own drop down menu can get problems, that's why many people use a pure CSS menu from cssplay
http://www.cssplay.co.uk/menus/
and edit it.

Your li and "a" tags for the top level don't have any widths, so they are just using what the text needs, Bikes is a shorter word than Accessories so the drop down underneath is out of position. When this happens you need to add a class for the drop down ul to suit the different li tag above, see below.

<li><a href="accessories.html">Accessories</a>
			<ul class="acc">
				<li>...........

This is the CSS styles I used;-

/** start of navigation **/
#navigation
{
	width:990px;
	height:22px;
	float:left;
	background-color:black;
	border-top:solid #f40a01 2px;
	border-bottom:solid #f40a01 2px;
	
}

/** start of the navigation ul **/

.nav ul{
	
	margin-top:0px;
	list-style-type: none;

	
	
}
.nav li
{        
	display:inline;
	list-style:none;
	float:left;
	position:relative;
} 
.nav ul li a
{                  
	font-size:14pt;
	text-decoration:none;
	text-align: left;
	font-family:"arial";
	display:block;
	color:#f9ff11;
	height:24px;
	margin-left:40px;
}
.nav ul li a:hover
{
	color:#007ee9;
	

}
.nav ul ul
{
	position: absolute; margin-top: 20px;
	visibility:hidden;
	top:2px;
	text-align:left;
	width:118px;     /*was 120px;*/
	
}
.nav ul ul.acc          /*added style*/
{                
	position: absolute; margin-left: 15px;
	visibility:hidden; 
	top:2px;
	text-align:left;
	width:160px;
	
}
.nav ul ul li a
{	
	font-size:10pt;
	text-decoration:none;
	text-align: center;
	font-family:"arial";
	display:block;
	color:white;
	height:25px;
	
}
.nav ul ul.acc li a          /*added style*/
{
	text-align: left; 	 	
	margin-left: 2px;	
	
}

.nav ul li:hover ul
{                
	visibility:visible;
	display:inline-block;
	position:absolute;
	background-color:black;
	
	-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

/** start of new nav menu **/
/*.nav>ul>li { outline: 1px solid red; } deleted*/

I've marked the revised and added styles. I deleted the outline as it duplicated the top level borders and outline is outside a border so it looked odd.
I hope that helps. It's still not perfect.

thanx alot that navigation works now, just cnt get the text to center in the accessories drop down, but ill figure that out, do you have any idea why my footer is sitting out of place, i was wanting it to be up flush against the bottom

[Wickham]

These may do what you want, but I haven't downloaded all your files and images, so the footer may not work:=

.nav ul ul li a
{	
	font-size:10pt;
	text-decoration:none;
	text-align: center;
	font-family:"arial";
	display:block;
	color:white;    margin-left: 0; /*added*/
	height:25px;    width: 118px;   /*added*/
	
}
.nav ul ul.acc li a /*added style*/
{
	text-align: center; /*was left;*/	 	
	margin-left: 2px;     width: 160px; /*added*/	
	
}

/* ~~ The footer ~~ */
#footer {

	height:22px;
	background-color:#191917;
	width:990px;             margin-top: -10px; /*added*/
	padding: 10px 0;
	float:left;
	font-family: arial;
	font-size: 16px;
	text-align: center;
	color: #00a9c0;
	border-top: solid white 2px;	
			-moz-box-shadow: 0 0 5px 5px 
#565555;
	-webkit-box-shadow: 0 0 5px 5px #565555;
	box-shadow: 0 0 5px 5px #565555;	
		-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;

}

To be honest, your coding and styles are a bit of a mess, but the above edits worked for me in IE9 and Firefox.

This post has been edited by Wickham: 19 January 2012 - 07:46 PM