having trouble lining up a navigation

ud3webdev · 21st March 12, 12:38 AM

my link here www.template1.ultimate-d3sign.com

i want to be able to line it up with the "home" tab and also to center the whole navigation.

here is my CSS

Code:

/* CSS Document */
/*Link decoration*/
a:link{text-decoration: none;}
a:visited{text-decoration: none;}
a:activated{text-decoration: none;}
a:hover{text-decoration: none;}
/* HEADER START  includes title and logo */
#header{margin: 0 auto; height:160px; width:900px; position:relative;}
#title{height:160px; width:600px; padding-top:15px; padding-bottom:15px; padding-right:25px; position:relative; float: right; text-align:right; font-style:normal; font-family: Tahoma, serifSansSerifMonospace;}
#logo{height:160px; width:250px; padding:5px; position:relative; float:left; background-color:#09C}
/* HEADER END */ 
 
/*NAVIGATION START*/
#navigation{margin: 0 auto; height:35px; width:900px; position:relative; background-image:url(Images/navigation/nav-background.png); text-align:center; font-style:normal; font-family: Tahoma, serifSansSerifMonospace;}
ul.cssmenu {
	list-style: none;
	padding: 0px;
	}
.displace {
	position: absolute;
	left: -5000px;
	}
ul.cssmenu li {
	float: left;
	}
ul.cssmenu li a {
	display: block;
	width: 200px;
	height: 35px;
	background-image:url(Images/navigation/nav-sprite.png);
	}
/*
*	Normal Links
*/
ul.cssmenu li.home a {
	background-position: 0px 0px;
	}
ul.cssmenu li.about a {
	background-position: 0px 0px;
	}
ul.cssmenu li.services a {
	background-position: 0px 0px;
	}
ul.cssmenu li.reviews a {
	background-position: 0px 0px;
	}
/*
*	Hover Links
*/
ul.cssmenu li.home a:hover {
	background-position: 0 -35px;
	}

ul.cssmenu li.about a:hover {
	background-position: 0px -35px;
	}

ul.cssmenu li.services a:hover {
	background-position: 0px -35px;
	}
	
ul.cssmenu li.reviews a:hover {
	background-position: 0px -35px;
	}		
/*
*	Selected/Active Links
*/
ul.cssmenu li.home a.selected {
	background-position: 0px -35px;
	}
ul.cssmenu li.about a.selected {
	background-position: 0px -35px;
	}	
ul.cssmenu li.services a.selected {
	background-position: 0px -35px;
	}
ul.cssmenu li.reviews a.selected {
	background-position: 0px -35px;
	}	
#contact{height:212px; width:50px; position:fixed; float:right; top:50%; background-image:url(Images/navigation/contact%20panel.png); background-repeat:no-repeat; overflow:hidden; right: 0%;}
#contact:hover{width:90px; display:block;}
/*NAVIGATION END*/
/* Body Layout Start */
#body{margin: 0 auto; top:14px; height:700px; width:905px; position:relative; background-image:url(Images/page-layout/body-side-bar.png);}

and my html:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Your Name of your company can be added to the line below.-->
<title>Page</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header"><!--HEADER START title and logo-->
    	<!--Can hold an image of 150pixels x 240pixels the line below-->
    	<div id="logo"></div><!--Logo-->
        <div id="title"><h1>Testing</h1><br /><h2>Test</h2></div><!--Title-->  
</div><!--HEADER END-->
<div id="navigation"><!--START OF NAVIGATION-->
    <ul class="cssmenu">
                        <li class="home"><a href="#" class="selected" title="Home">Home<span class="displace">Home</span></a></li>
                        <li class="about"><a href="#" title="About">About<span class="displace">About Us</span></a></li>
                        <li class="services"><a href="#" title="Services">Services<span class="displace">Services</span></a></li>
                        <li class="reviews"><a href="#" title="Reviews">Reviews<span class="displace">Reviews</span></a></li>
                    </ul>
</div>
<div id="contact"><!--Contact Side Panel--></div><!-- END OF NAVIGATION-->
<div id="body"><!-- BODY START-->

</div><!-- END OF BODY-->   

</body>
</html>

thanks for your time

chrishirst · 21st March 12, 10:23 AM

A: you cannot use float: value; AND position: fixed on the same element.

AND when you set a rule that moves a background image by -35 pixels THAT is exactly what it will do!

centering: give a block element left and right margins of auto.

ud3webdev · 21st March 12, 02:17 PM

the background position is set at 0 when nothing is interacting with it.

Code:

ul.cssmenu li.home a {
	background-position: 0px 0px;
	}
ul.cssmenu li.about a {
	background-position: 0px 0px;
	}
ul.cssmenu li.services a {
	background-position: 0px 0px;
	}
ul.cssmenu li.reviews a {
	background-position: 0px 0px;
	}

and the -35 px; doesnt change the actual layout of it it moves the background inside the block once the mouse goes over it.

chrishirst · 21st March 12, 08:33 PM

What about the selected class which is applied to the element in your example??

ud3webdev · 21st March 12, 08:38 PM

Like i said that just changes the position of the background.

chrishirst · 21st March 12, 09:08 PM

then clear the floats on the parent UL.

ud3webdev · 21st March 12, 09:17 PM

it works fine out side a parent div but i cant seem to figure out what is wrong with the parent div "navigation" and what do u mean by parent UL? the "float" css menu on the is supposed to be there otherwise it would be stacked

chrishirst · 21st March 12, 09:21 PM

the float is applied to the <li> elements which MUST HAVE a <ul> element as a parent.

ud3webdev · 21st March 12, 09:33 PM

Code:

ul.cssmenu li {
	float: left;
	}

isnt it on the UL?

chrishirst · 22nd March 12, 11:00 AM

Nope. That rule is specific to a list item element (<li>) that is a child of an unordered list (<ul>) that has a class attribute value of 'cssmenu'.

http://www.quirksmode.org/css/clearing.html

21st March 12, 10:23 AM	#2
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: having trouble lining up a navigation A: you cannot use float: value; AND position: fixed on the same element. AND when you set a rule that moves a background image by -35 pixels THAT is exactly what it will do! centering: give a block element left and right margins of auto.

21st March 12, 02:17 PM	#3
ud3webdev WLC Member Join Date: Mar 2012 Posts: 5	Re: having trouble lining up a navigation the background position is set at 0 when nothing is interacting with it. Code: ul.cssmenu li.home a { background-position: 0px 0px; } ul.cssmenu li.about a { background-position: 0px 0px; } ul.cssmenu li.services a { background-position: 0px 0px; } ul.cssmenu li.reviews a { background-position: 0px 0px; } and the -35 px; doesnt change the actual layout of it it moves the background inside the block once the mouse goes over it.

21st March 12, 08:33 PM	#4
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: having trouble lining up a navigation What about the selected class which is applied to the element in your example??

21st March 12, 08:38 PM	#5
ud3webdev WLC Member Join Date: Mar 2012 Posts: 5	Re: having trouble lining up a navigation Like i said that just changes the position of the background.

21st March 12, 09:08 PM	#6
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: having trouble lining up a navigation then clear the floats on the parent UL.

21st March 12, 09:17 PM	#7
ud3webdev WLC Member Join Date: Mar 2012 Posts: 5	Re: having trouble lining up a navigation it works fine out side a parent div but i cant seem to figure out what is wrong with the parent div "navigation" and what do u mean by parent UL? the "float" css menu on the is supposed to be there otherwise it would be stacked

21st March 12, 09:21 PM	#8
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: having trouble lining up a navigation the float is applied to the <li> elements which MUST HAVE a <ul> element as a parent.

21st March 12, 09:33 PM	#9
ud3webdev WLC Member Join Date: Mar 2012 Posts: 5	Re: having trouble lining up a navigation Code: ul.cssmenu li { float: left; } isnt it on the UL?

22nd March 12, 11:00 AM	#10
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: having trouble lining up a navigation Nope. That rule is specific to a list item element (<li>) that is a child of an unordered list (<ul>) that has a class attribute value of 'cssmenu'. http://www.quirksmode.org/css/clearing.html

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode