Hi

 

I'm designing my site using css and have followed a tutorial to create my navigation using a 100% css solution. This all works fine on each page however my problem is now linking the pages. Is this done with css or do I need some other code to implement this?

 

If anyone could help it would be really appreciated!

 

Thanks

It would be easier to see the best solution if you could post the code, as it really depends on how the code is written to the best solution.

 

I could be as simple as just placing this:

 

<a href="page.htm">this is a link</a>

 

or it might need more to it...so if you could post the css and also one of the pages html so that we can see how you have gone about designing the navigation, it would help

Hi Dizi

 

Here's the css:

 

/* Main Navigation

------------------------------------------------- */


#main-nav { height: 88px; float: right; margin-top: 39px;}

#main-nav ul { margin: 0; padding: 0; list-style-type: none; }

#main-nav li { float: left; }



#main-nav li a {

float: right;

height: 0px !important;

height /**/:88px; /* IE 5/Win hack */ 

padding: 88px 0 0 0;

overflow: hidden;

background-repeat: no-repeat;

border-bottom: 0 none;

}



a img {

border: 0 none;

border-bottom: 0 none;

}



#main-nav li a:hover {

background-position: 0 -88px;

}



#main-nav li#home,

#main-nav li#home a { width: 81px; background-image: url(../images/nav/home.png); }



#main-nav li#services,

#main-nav li#services a { width: 93px; background-image: url(../images/nav/services.png); }



#main-nav li#portfolio,

#main-nav li#portfolio a { width: 96px; background-image: url(../images/nav/portfolio.png); }


#main-nav li#contact,

#main-nav li#contact a { width: 91px; background-image: url(../images/nav/contact.png); }


#main-nav li#submit,

#main-nav li#submit a { width: 144px; background-image: url(../images/nav/submit.png); }



body.home li#home,

body.home li#home a,

body.home li#home a:hover,

body.services li#services,

body.services li#services a,

body.services li#services a:hover,

body.portfolio li#portfolio,

body.portfolio li#portfolio a,

body.portfolio li#portfolio a:hover,

body.contact li#contact,

body.contact li#contact a,

body.contact li#contact a:hover

body.submit li#submit,

body.submit li#submit a,

body.submit li#submit a:hover

{

background-position: 0 -176px;

 

 

 

 

and here is the html page:

 

 

<body class="home">

<div id="wrapper">

	<div id="main-nav">
				<ul>
					<li id="home"><a href="/index.html">Home</a></li>
					<li id="services"><a href="/html/services.html">Services</a></li>
					<li id="portfolio"><a href="/html/portfolio.html">Portfolio</a></li>
					<li id="contact"><a href="/html/contact.html">Contact</a></li>
					<li id="submit"><a href="/html/submit.html">Submit a brief</a></li>
				</ul>
	</div>

	<div id="header"><h1><a href="index.html"><img src="images/general/logo.png" alt="Candydesign" width="433" height="127" border="0" /></a></h1>
	</div>

	<div id="sidebar-a">
			<div class="padding">
				<center><img src="images/sidebar/home.png" width="142" height="40" alt="Home" />
				</center>
	  </div>
	</div>

	<div id="content">
	<div class="padding">				
			</div>
			</div>

	<div id="footer">
			<div id="altnav">
					<a href="index.html">Home - </a>
					<a href="html/services.html">Services - </a>
					<a href="html/portfolio.html">Portfolio - </a>
					<a href="html/contact.html">Contact </a>- 
					<a href="#">Terms & Conditions</a>
			</div>
</div>
</div>
</body>

Thanks

Does anyone have an idea as to what I need to do in order to link my pages together?

 

Help much appreciated!

I don't really understand what your problem is as you have links within your code. Maybe you've not got the right paths to the pages and that's why the links don't work. It's hard to help you there without knowing the structure of your site.

 

If all your pages reside in the root directory then your links should be as follows:

 

home - <a href="index.html">Home</a>

services - <a href="services.html">Services</a>

portfolio - <a href="portfolio.html">Portfolio</a>

contact - <a href="contact.html">Contact</a>

terms - <a href="terms.html">Terms & Conditions</a>

 

If all your pages , apart from the homepage reside in a subfolder of the root directory then your links should be as follows:

 

home - <a href="index.html">Home</a>

services - <a href="foldername/services.html">Services</a>

portfolio - <a href="foldername/portfolio.html">Portfolio</a>

contact - <a href="foldername/contact.html">Contact</a>

terms - <a href="foldername/terms.html">Terms & Conditions</a>

Hey Eskymo, thanks for replying.

 

Its the main-nav that isn't working. The altnav at the bottom works fine. This is why I'm confused.

 

I was wondering if it has anything to do with the code that I'm using for the css navigation?

Got a link so we can see it in action?

 

 

How is it not working? Do you get a 404 message when you click the links? Or does nothing happen when you click the link?

a link would be very useful as then we can have a look at the code in action and figure out what is going wrong...