View Full Version : css designer

06-01-2007, 07:18 AM
I have downloaded css designer to make css tabs.

if i use <li id="current"><a href="Home.asp"><span>Home</span></a></li>
it means that on home.html the css tab will have a different look.
Now the easy way to do the same with other links is to put <li id="current"> on each link on different page.

But i dont want to do that as i use header.inc file to include the navigation. Due to that i had to delete id="current" otherwise the home.asp tab would be in different color all the time.
my question is, how can i do in css so that if i click home.asp, the tab will be in different color or if i go to products.asp the tab will also stay in differnet color?

this is the code that css designer makes:

#tabs6 {
border-bottom:1px solid #666;
#tabs6 ul {
padding:10px 10px 0 50px;
#tabs6 li {
#tabs6 a {
background:url("tableft6.gif") no-repeat left top;
padding:0 0 0 4px;
#tabs6 a span {
background:url("tabright6.gif") no-repeat right top;
padding:5px 15px 4px 6px;
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs6 a span {float:none;}
/* End IE5-Mac hack */
#tabs6 a:hover span {
#tabs6 a:hover {
background-position:0% -42px;
#tabs6 a:hover span {
background-position:100% -42px;

#tabs6 #current a {
background-position:0% -42px;
#tabs6 #current a span {
background-position:100% -42px;

06-01-2007, 08:20 AM
This is how you would do it with php
Not sure about asp. Maybe this will help

06-01-2007, 05:43 PM
You could stick with the "id='current'" method you've got going in ASP. On each page, you would start off with something like this:

<% currentPage = "about" %>
<!--#include virtual="/includes/header.inc" -->

Then in the header, where your nav lives, you would use something like this to assign the current id to the right list item:

<li <% if currentPage = "home" then response.write("id='current'") %>><a href="home.asp">Home</a></li>
<li <% if currentPage = "about" then response.write("id='current'") %>><a href="about.asp">About Us</a></li>
<li <% if currentPage = "contact" then response.write("id='current'") %>><a href="contact.asp">Contact</a></li>

I don't know much ASP so there might be a fancier way but this should work.

06-02-2007, 12:48 PM
i tried that, but then the home.asp tab stays in different color even when i click the about.asp page. Acutally both home and about pages then have same color.

06-02-2007, 05:21 PM
You're going to need to link to your page or show some HTML; what you've posted above (CSS only) isn't enough.

06-02-2007, 05:56 PM
Sorry :)

<div id="tabs6">
<li><a href="<%=urlNonSSL%>default.asp"><span><%=LangText("GenHome","")%></span></a></li>
<li><a href="<%=urlNonSSL%>prodList.asp"><span><%=LangText("GenAllCategories","")%></span></a></li>
<li><a href="<%=urlNonSSL%>contactUs.asp"><span><%=LangText("GenContactUsHdr","")%></span></a></li>

Thing is that this page is named INC_Template.asp. This file is a page from Candypress asp store that im using.
this page is actually a template that is used on complete store and it's the only page that needs to be fixed if i want to change the look of my site ( design, banners, etc.)....beside css of course :).

file is also included on all pages such as prodlist.asp, prodview.asp etc so that the site runs properly.

So maybe this could be the reason why above code is not running??

06-03-2007, 12:38 AM
I don't understand. Where's the part that adds "id='current'"? Did you try the code or suggestions out?

06-03-2007, 03:46 AM
k I don't know asp, but I guess your using something like the include file. I had the same problem once. All I did was make a variable on the pages
then in the header with the css included I made a switch so that it would include the curent id in the div only if the page var was true. I'm not a good coder as I do it on and off for fun, so I'm sure if you use some links you will find a better solution.