Hey there! I heard this was the best forum to ask web design questions so I'll shoot with my first one. I need to make a website where the links/buttons show a selected version of that button not only when I hover over them, but also when I click them, so they STAY selected (see the attached pics for a better idea of what I need done here). When I click lets says "Pants", the button will stay red and the brands that are available for sale will turn black, the ones that aren't will remain grey. Then when I click on one of the brands in black, they will turn red and in the big box it will show the title (ie. adidas) and then feature the products/pics in those rectangles. sample1-01.png = unselected versions sample1-02.png = EXAMPLE sample1-03.png = selected versions
In your style.css file (maybe named something else but will have .css extension) you can make or change current settings. Please search for a guide on proper css terms but this will give an idea. .links li a { color: html color code; Style: none; } .links li a:hover { color: html color code; Style: Underline; } .links li a:active { color: html color code; style Underline; } Code (markup): I hope this helps you.
The best and easiest way to do something like this is to apply an 'active' class on the appropriate pages and style them appropriately. So on your homepage your 'home' links would have class="active" etc
Since those do not appear to be form elements I'm going to assume you mean "anchor" when you say "button" (NOT that one should really ever use the BUTTON tag -- pointless idiotic redundancy in the specification that it is)... If so, then when you click each takes you to a new page, correct? If so, riboflavin is on the mark, you need to say on EACH page which one is 'current' using something like a class (Personally, I'd avoid using a class named "active" since there's a pseudostate of the same name)... since as it would be a separate page things like what was clicked on some other page does not apply. Though if you are using frames, iframes, or javascript asshattery to piss all over accessibility using AJAX for nothing or DHTML trickery, that's a horse of a different color.
Please put below CSS class in your css file. Just change my .menu1 to your class name. Also give .current class which page you will needs to be active. .menu1 li.current a {color:#fff; background:url(button3.gif);} .menu1 li.current a {background:url(button3.gif) no-repeat right top;} .menu1 li a:hover {color:#fff; background:#000 url(button2.gif);} .menu1 li a:hover {background:url(button2.gif) no-repeat right top;} .menu1 li.current a:hover {color:#fff; background:#000 url(button3.gif); cursor:default;} .menu1 li.current a:hover {background:url(button3.gif) no-repeat right top;}