WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > having trouble lining up a navigation

Reply
  Thread Tools Display Modes
Old 21st March 12, 12:38 AM   #1
ud3webdev
WLC Member
 
Join Date: Mar 2012
Posts: 5
Default having trouble lining up a navigation

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
ud3webdev is offline   Reply With Quote
Old 21st March 12, 10:23 AM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,197
Default 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.
chrishirst is offline   Reply With Quote
Old 21st March 12, 02:17 PM   #3
ud3webdev
WLC Member
 
Join Date: Mar 2012
Posts: 5
Default 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.
ud3webdev is offline   Reply With Quote
Old 21st March 12, 08:33 PM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,197
Default Re: having trouble lining up a navigation

What about the selected class which is applied to the element in your example??
chrishirst is offline   Reply With Quote
Old 21st March 12, 08:38 PM   #5
ud3webdev
WLC Member
 
Join Date: Mar 2012
Posts: 5
Default Re: having trouble lining up a navigation

Like i said that just changes the position of the background.
ud3webdev is offline   Reply With Quote
Old 21st March 12, 09:08 PM   #6
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,197
Default Re: having trouble lining up a navigation

then clear the floats on the parent UL.
chrishirst is offline   Reply With Quote
Old 21st March 12, 09:17 PM   #7
ud3webdev
WLC Member
 
Join Date: Mar 2012
Posts: 5
Default 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
ud3webdev is offline   Reply With Quote
Old 21st March 12, 09:21 PM   #8
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,197
Default Re: having trouble lining up a navigation

the float is applied to the <li> elements which MUST HAVE a <ul> element as a parent.
chrishirst is offline   Reply With Quote
Old 21st March 12, 09:33 PM   #9
ud3webdev
WLC Member
 
Join Date: Mar 2012
Posts: 5
Default Re: having trouble lining up a navigation

Code:
ul.cssmenu li {
	float: left;
	}
isnt it on the UL?
ud3webdev is offline   Reply With Quote
Old 22nd March 12, 11:00 AM   #10
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,197
Default 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
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:30 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.