|
View Full Version : Rollover Question
tammyhart 03-25-2006, 02:06 AM I am using your typical java rollovers on a design, but I want my "down" image to stay down while I'm on the page it links to.
www.tammyhartdesigns.com/rose - The two links that work so far are Home and About. I want "About" to stay the orange down image while you're on that page. I'm using php to call my header and footer, so I may be asking too much, any ideas?
zoobie 03-25-2006, 04:49 PM well, you could just set the orange image to display when you're on that page
otherwise, the guys over at codingforums.com can show you the code to make it stick
tammyhart 03-25-2006, 04:55 PM It's not a text link, it's an image. you'd know that if you'd have gone to the link provided.
And also, what do you mean by "old abused tables being used in their new website"?
tammyhart 03-25-2006, 05:17 PM ok, I figured out what you meant about the visited thing, my apologies. But I tried that, and it works, but the only problem is, it stays orange until you delete your history, and I want the page they are looking at to be the only one with the orange over image. I tried setting it to active, but that didn't work either. There's an extension for dreamweaver by XM that does this beautifully... but only in IE, not firefox. Why does it all have to be so doggone different!?
the_pm 03-25-2006, 05:59 PM It's pretty easy to do this actually.
Assign a class or ID to each link. Then, assign an ID to each <body> tag, corresponding to one of the links. Finally, create a rule that tells the browser to display the down state when that combination of IDs/classes is found on the page. Here's a skeleton of how this would work:
Your body tags, for individual pages:
<body id="myDog">
<body id="myCat">
<body id="myFish">
Your links on all pages:
<a href="mydog.html" class="myDogLink">Check out my dog</a>
<a href="mycat.html" class="myCatLink">Check out my cat</a>
<a href="myfish.html" class="myFishLink">Check out my fish</a>
Finally, the CSS style that makes your down state appear when you're visiting a particular page:
#myDog .myDogLink { background:#FFF url(path/to/down_state_Dog.gif) }
#myCat .myCatLink { background:#FFF url(path/to/down_state_Cat.gif) }
#myFish .myFishLink { background:#FFF url(path/to/down_state_Fish.gif) }
There's all kinds of things you can do with this, like making a menu where sections appear only when body tags have specific IDs, that sort of thing.
tammyhart 03-25-2006, 07:09 PM okay, but I don't have a body tag on all of my pages, just in the header and i close it in the footer. could i do the same thing, but assign it to a table tag instead?
tammyhart 03-25-2006, 07:17 PM you're a genius! thanx a million
the_pm 03-25-2006, 07:36 PM I take it that worked then :lol:
Excellent! Yes, that one tag can go anywhere, so long as it encapsulates the links. I just find the body tag to be a convenient place for it :)
tammyhart 03-25-2006, 08:09 PM there is something really weird wrong in firefox
www.tammyhartdesigns.com/rose/about.php
the_pm 03-25-2006, 08:49 PM Hmm. When in doubt, throw borders around everything, so you can see what's pushing what where.
Also, I personally find that you get a more consistent rollover effect when you position your two states side by side and switch from right to left...
tammyhart 03-25-2006, 08:57 PM well, I'm using a spacer.gif for the link, then using the css to tell it what back ground to have, but it's like it's cutting half of it off.
Then on the two gradient bars you see, they are only supposed to be like 1px high, like on the main page. It's just happening in there. I might have to change the way I'm putting those there. ugh... This is supposed to be a "simplistic design".
the_pm 03-25-2006, 09:29 PM I'm not entirely sure Tammy. I wouldn't have put all of this inside table cells in the first place, so I can't tell you what's causing the inconsistencies, if in fact they have to do with how tables handle CSS. The same issue is showing up in Opera ("All of my code is gauranteed to be Internet Explorer and Firefox compatible so that your design is available to all internet users" - not all users ;) ), which is a good indication there is a formating violation in there somewhere.
I would put all of your links inside a simple unordered list, lose the tables entirely and style it from there. That would simplify things tremendously...though there's a learning curve involved.
tammyhart 03-25-2006, 09:59 PM yeah, i know what i guarantee, that's why I'm working on it.
the_pm 03-25-2006, 10:11 PM My only point there is if you're going to guarantee delivery to "all Internet users," you'll need to add Opera, Konqueror, Lynx (very important for people with visual disabilities), Safari, Camino, mobile/small-screen browsers, etc., etc., and the same issue that may prevent you from doing this could be responsible for the display issue you're trying to overcome right now, which is the use of tables as a layout device.
That takes us back to my last suggestion. Place the links within an unordered list, and style from there. You'll want to float the list items to one side or another, and apply margins around each one to create the space you are currently simulating with non-breaking spaces. It's a cleaner way to mark this up (though there will be some CSS to learn), and it will make it a lot easier to get past the current display issue you're facing now. Plus, you're closer to achieving what you want regarding cross-browser/cross-platform functionality :)
tammyhart 03-27-2006, 10:08 AM Chalk one up for tables and java!
www.tammyhartdesigns.com/rose
www.tammyhartdesigns.com/ahvio
Thanx for your help, I'm revising my "guarantee"
the_pm 03-27-2006, 10:23 AM You scared me there for a second! I thought you meant you turned your navigation into a Java Applet. Yes, I've often made the argument that rollovers could be considered behavioral, and that this makes JavaScript just as good an option as CSS. CSS is much more streamlined, but there are instances where JS must be used. Either way, I don't think you've done anything wrong here. The tables don't help, but they don't bloat things badly enough for anyone to notice, so long as everything presents itself appropriately when tables are not an option for the end user (and I believe you're just fine here as well).
You're soooooooo close to being able to make a solid Any Browser (http://www.anybrowser.org/campaign/) guarantee. :)
tammyhart 03-27-2006, 04:13 PM Well, I had never even heard of not using tables until a few weeks ago. I guess I just don't understand why tables are the enemy? I have had more trouble getting tableless designs to work between browsers than i have tables. Like wordpress or this guy that asked for some help. His coding was fine in firefox, and messed up in ie, so i fixed it for ie, but when i went back to firefox, it was messed up there. I ended up trashing the divs and making the element a table. It worked perfectly. I was glad he was satisfied, because those stupid divs drive me insane! So what's the deal?
the_pm 03-27-2006, 09:26 PM If you spend the time to learn one method, the other will always seem to be more frustrating. Designing with tables would feel the same way to me designing without them feels to you.
I've written about this stuff on various forums, including WHT, and I'm going to save my fingers some agony, because as many people know, I can put together some mighty lengthy posts about certain topics :) But I'll share with you a few links to get you started:
http://sitening.com/blog/2005/11/07/going-tableless-why-css-should-be-used-for-layouts/
http://www.hotdesign.com/seybold/
http://www.iwdn.net/showthread.php?t=773
http://forums.digitalpoint.com/showthread.php?t=61910 - A discussion in which I participated. Here's a payoff post (http://forums.digitalpoint.com/showthread.php?p=683716#post683716) that explains a particular real-life scenario in which a company saves almost $1,000,000/yr. by simply reengineering their intranet without tables.
|