Maintain CSS setting after postback 1

[IT4EVR]

In CSS I have formatted a tab structure that points to different pages on the site. I have a:hover and a:active set to different colors in CSS class. This works fine, however, when I post back I lose the active attribute of the anchor link.

Is there a way of maintaining CSS over postbacks, because it seems it is resetting everything if that makes sense.

 

[IT4EVR]

I can understand why it's not retaining the active setting because essentially I am navigating to another page.

But when I click on a tab, I want to be able to retain the highlighting so the user is able to see what tab they are on.

 

[ca8msm]

If you are using a server-side language, use that language to change the class of the relevant anchor to something that will highlight it like you have done in a:active.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[cLFlaVA]

expanding on ca8msm's response:

make your css definition something like this:

a:active, a.active {
    ...
}

then, test for which page is active (from your server-side code), and, as ca8msm said, apply the class "active" to the appropriate "tab".



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[IT4EVR]

This is actually an ASP.NET page, so yes I am using server-side code with IIS.

Maybe this is evolving into an asp.net related question, unfortunately, so it might be wise to move the question there.

But basically I have this <ul> list with anchors that is formatted to look like tabs, and I have put that in a user control so all pages would display these tabs the same way.

So when I navigate to another page, I would call the .active class from that page?

 

[IT4EVR]

What maybe problematic is that the actual tabbed list resides in a user control.

 

[IT4EVR]

To give you an idea what I have so far. In the usercontrol page I have:

<div id="navigation"><ul><li></li></ul></div> to display the menu.

In a separate css file I have:

#navigation {
	width: 200px;
	height:500px;
	background-color:#B51032;
	font-family: Arial, Helvetica, sans-serif;
}
#navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	
}
#navigation li {
	border-bottom: 1px solid #ED9F9F;
}
#navigation li a:link, #navigation li a:visited  {
	display: block;
	padding: 5px 5px 5px 0.5em;
	border-left: 12px solid #711515;
	border-right: 1px solid #711515;
	background-color: #B51032;
	color: #FFFFFF;
	text-decoration: none;
}
#navigation li a:hover {
	background-color: #711515;
	color: #FFFFFF;
}
#navigation li a:active {
	background-color: orange;
	color: #FFFFFF;
}

This works great until I navigate to another page.

 

[cLFlaVA]

yes, and we keep saying to change your css to this:

#navigation li a:active, #navigation li a.blahhhh {
    background-color: orange;
    color: #FFFFFF;
}

and in your asp page, write the list item like this:

<div id="navigation"><ul><li><a class="blahhhh">active page here</a></li></ul></div>

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[IT4EVR]

Thanks for replying but that did not solve the problem.

 

[Vragabond]

You need to ask in the ASP.NET forum, forum855, how to append the class of active or whatever you want to the currently loaded page. It is definitely possible, but the guys at the proper forum will know more about the solution.

 

[ChrisHunt]

I think the problem is that [tt]:active[/tt] doesn't mean what you probably think it means. Take a look at my post halfway down thread215-1272084

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[IT4EVR]

Thanks Chris, that helped me to learn a few things.

 

[cLFlaVA]

did you happen to try our suggestions?



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[IT4EVR]

Yes I tried them and I must be missing a piece of the puzzle because it's not working as it should. Since this is on an asp.net page, I moved the post over there.

I appreciate your response but I can't get it to work. I'll just have to figure it out myself. I wouldn't waste anymore time on it because right now it's not sinking in.

I probably need a CSS bootcamp where they hit you over the head and hold your hand.

 

[IT4EVR]

I managed to figure out how to get this done by just using CSS. I created separate body id's for each page that loaded the navigation user control and referenced that in the style sheet.

There are other ways to do it but this was simple and functional. It's really quite easy.