This is topic CSS help please in forum Books, Films, Food and Culture at Hatrack River Forum.


To visit this topic, use this URL:
http://www.hatrack.com/ubb/main/ultimatebb.php?ubb=get_topic;f=2;t=030154

---

Posted by NdRa (Member # 2295) on :
 
I can't figure out for the life of me how to do this. I'm assuming this is a simple problem a guru here at hatrack could help me with in a breeze.

So here is what I can't manage to do:
I have a column with a list on the left of the page. It list five states... california, arizona, etc. When you click on 'California,' there is a frame in the next column to the right that lists a bunch of cities to choose from. Now I want the color of 'california' to change to white and stay white while all the other state links stay the original color. When I decide to click on 'Arizona'instead, I would like 'california' to go back to the original color while only 'arizona' is now white. I would think this is a simple thing to do, but I am banging my head against the monitor over this.

This site under 'where to buy' does exactly what I want to do but with flash. Any help would be greatly appreciated.
 

---

Posted by kaioshin00 (Member # 3740) on :
 
Hmm... Im not sure how to do this in HTML, but if you use php, you can store the name of the selected state in a variable and then use if-else statements for the colors.

But there's probably an easier solution that I don't know.
 

---

Posted by Bokonon (Member # 480) on :
 
I don't think CSS can do this. Using JavaScript ought to work.

-Bok
 

---

Posted by fugu13 (Member # 2859) on :
 
Are the city lists separate pages (one per state)?

If so . . .

quote:

---

#selectedState {
properties here . . . .
}

---

code:

---

<li id="California"> . . California . . </li>
<li id="Nevada"> . . Nevada . . </li>

---

).
 

---

Posted by fugu13 (Member # 2859) on :
 
Oh, you said frame? Simple, don't use frames

If you insist on using frames (again, I highly recommend against them, there're distinctly evil), the second solution can be used. Just change your bit that opens it in a new frame to use javascript and in the same function do as I described (if you need more detail, I can provide that).
 

---

Posted by NdRa (Member # 2295) on :
 
Ah ok. Thanks for all your help folks. Must use frames as the clients are indeed evil. I am going to try to plug this in and see if it works:

<

code:

---

   <style>
a:link.menuLink {
	font-family: Arial, Helvetica, sans-serif;
	color: #4A543D;
	text-decoration: none;

}
a:visited.menuLink {
	color: #4A543D;
	text-decoration: none;
}
a:hover.menuLink {
	color: #CC9933;
	text-decoration: underline;
}
a:active.menuLink {
	color: #4A543D;
	text-decoration: none;
}

a:link.menuLinkStuck {
	font-family: Arial, Helvetica, sans-serif;
	color: #4A543D;
	text-decoration: underline;

}
a:visited.menuLinkStuck {
	color: #4A543D;
	text-decoration: underline;
}
a:hover.menuLinkStuck {
	color: #CC9933;
	text-decoration: underline;
}
a:active.menuLinkStuck {
	color: #4A543D;
	text-decoration: underline;
}

</style>


<Script language="JavaScript" type="text/JavaScript">

function ChangeToStuck(object o)
{
	o.class = "menuLinkStuck";
}

function ChangeToNormal(object o)
{
	o.class = "menuLink";
}
</script>

.
.
.

<a href="somewhere.html" class="menuLink" onClick="JavaScript:ChangeToStuck(this);">This is a Link</a>

    

---

code:

---

function SelectNewState(newState) {
    var allLis = document.getElementsByTagName("li");
    for (i = 0; i < allLis.length; i++) {
        if (allLis[i].className=='stateSelected') {
            allLis[i].className = '';
        }
    }
    newState.className = 'stateSelected';
}

---

 

---

Posted by fugu13 (Member # 2859) on :
 
Yay!

<--- doesn't like frames.

I'd go with the pure CSS solution, having different pages as appropriate.
 

---

Posted by quidscribis (Member # 5124) on :
 
Yeah, CSS is something I need to learn. And soon. Ugh.

I'm using Dreamweaver. Any decent tutorials out there? I haven't found any yet. . .

[ December 21, 2004, 09:27 PM: Message edited by: quidscribis ]
 

---

Posted by fugu13 (Member # 2859) on :
 
Search for posts made with the word CSS in them by me (using my member number), and you'll find a lot of good links and advice.
 

---

Posted by fugu13 (Member # 2859) on :
 
Oh, and I generally like to code in dreamweaver by writing my html mostly by hand and just using the rendered view to see what's happening. I do use some dreamweaver capabilities, such as their windows for configuring css information, but I always look at the actual code they make.
 

---

Posted by quidscribis (Member # 5124) on :
 
Admittedly, when I'm using Dreamweaver, I like having both the wysiwyg editor showing plus the code view. I figure I'll learn more that way.

Plus I just switched over from the dark side - FrontPage - so I'm redoing everything from scratch. I refuse to use bloated FrontPage code, so . . . I have a huge job in front of me. Did I mention that evil FrontPage crapped all over everything?

Ah well. Life moves on.

Thanks for the tips, fugu.
 

---