PDA

View Full Version : Roll Over_Button remain clicked


André Barreto
10-25-2009, 10:59 PM
Hi!

Probably it's a simple question, because I'm very begginer, there goes: I would like to know how remain the button clicked while it's session is read. I want to keep the active stage. I have my css like this:

#menu .bt1 {
background-image:url(botoes_menu/web_link.png);
width:64px;
height:22px;
display:block;
float:left;
}

#menu .bt1:hover {
background-image:url(botoes_menu/web_over.png);
width:64px;
height:22px;
display:block;
float:left;
}

#menu .bt1:active {
background-image:url(botoes_menu/web_active.png);
width:64px;
height:22px;
display:block;
float:left;
}

clintoncole
10-26-2009, 01:59 AM
I'm not quite sure what you're asking, reword it for me and I'll happily answer :)

André Barreto
10-26-2009, 02:31 AM
I've made a very fast fake layout to illustrate what I want. Observe the button 1: at image one the button it's set as "link", at image two as "hover", and at image three as "active". But the active don't remains after the click, and I want it to reamains as a sign that the session it's being read. If I don't be clear just drop one more line and I try again :)

clintoncole
10-26-2009, 02:38 AM
I understand what you want now but I don't know how to code that :(. Let me know if you find out how, I'd love to know how to do that myself!

walkamongus
10-26-2009, 03:11 AM
nevermind waht i said

*rattlsnak's method is much cleaner!

rattlsnak
10-26-2009, 03:17 AM
you need to add an 'onload' property.

Look at these two:

onload="your path/description/img source here"

onload=""

First one will tell the page to add the image you want when the page is loaded, second will tell it to use the default setting (the at rest setting).

So, for each page have to make two changes.
1. add the onload img for the page you are on.
2. add the onload " " (blank) for the other imgs.

André Barreto
10-26-2009, 03:24 AM
Yes, it makes sense. But I was wondering if there's a way to do that in the css, once it's the way I'm coding this site, there's an iframe also, so I think it won't be a solution in this case.

rattlsnak
10-26-2009, 03:31 AM
are you attaching the same external style sheet to all your pages? if so, not sure of a way to do this. this needs to be page specific for the look you are looking for. add an internal style sheet for each page with these changes.

I'll let someone else chime in who might know of a way to do it on one CSS sheet.

André Barreto
10-26-2009, 03:40 AM
I have a main page with only one style sheet. This page loads an iframe an every html page that goes inside it will have it's owns style sheets. Like the fake layout I posted with this message.

rattlsnak
10-26-2009, 03:45 AM
right, but each page that has a navigation menu will have to have its own internal CSS to make the look you want. you can copy it from one page to another, just make the small changes i mentioned earlier.

André Barreto
10-26-2009, 03:52 AM
Only the main page will have the navigation menu, the others (internals htmls loaded in the iframe) will link another pages inside the iframe. So I believe if I placed all the "onloads codes" necessary in the style sheet of the main page, it will work. Right?

rattlsnak
10-26-2009, 04:12 AM
Before I send you off on a wild goose chase, I'll let someone else with better knowledge answer while I keep looking around. I'm seeing some info on a css 'current' command, as those ive told you are jscript.

André Barreto
10-26-2009, 04:36 AM
Ok, thanks for the help! :-)

domedia
10-26-2009, 04:40 AM
:active is a link after it's clicked. You will only see this style after the link is clicked and before the new page is loaded. The psedu state :active, does not mean the current page, that is something you made up yourself, but it's not so ;)

There is no 'current' function in CSS. What you can do is make a CSS class for what you want the current page link to be and apply it to that link.

For example:
.currentPage {font-weight: bold}
<a href="page.html" class="currentPage">Link</a>

André Barreto
10-26-2009, 05:22 AM
Great domedia! I think I got it!
I thought :visited was the state you mentioned and active was for the current link, at least the name makes more sense :mrgreen:
I'm using images in the menu. It will be something like this?

html:
<div id="menu">
<a href="firstlink.html" target="center" class="button1"><strong>first link</strong></a>
</div>

css:

#menu .button1 {
background-image:url(...firstlink_link.png);
width:64px;
height:22px;
display:block;
float:left;
}

#menu .button1:hover {
background-image:url(...firstlink_over.png);
width:64px;
height:22px;
display:block;
float:left;
}

.currentPage {
background-image:url(...firstlink_current.png);
width:64px;
height:22px;
display:block;
float:left;
}


But where goes [class="currentPage"]? The html accepts two classes?

domedia
10-26-2009, 01:36 PM
Yes you can do two classes.
class="classname1 classname2"

rattlsnak
10-26-2009, 02:50 PM
ok, since im learning here also... and knowing my way will work, but always looking for the better/correct way, so this can be done in one external attached stlye sheet and control all the pages in the menu regardless of which page you are currently on?

All the ones i have built to date have been within DW and it has a 'checkbox' to determine which one is 'page down'. lol.. but learning is fun, right?? :)

domedia
10-26-2009, 03:56 PM
so this can be done in one external attached stlye sheet and control all the pages in the menu regardless of which page you are currently on? Yes, it's preferred that you keep all the styles organized in CSS files.

All the ones i have built to date have been within DW and it has a 'checkbox' to determine which one is 'page down'. lol.. but learning is fun, right?? :) Like I said in another thread. Clicking a button in DW is not really a skill 8)

André Barreto
10-26-2009, 05:27 PM
I tried this html:

<div id="menu">
<a href="web.html" target="janela" class="bt1 currentPage"><strong>web</strong></a>
</div>

And these css for the 2 states:

#menu .bt1 {
background-image:url(botoes_menu/button1_link.png);
width:64px;
height:22px;
display:block;
float:left;
}

#menu .bt1:hover {
background-image:url(botoes_menu/button1_over.png);
width:64px;
height:22px;
display:block;
float:left;
}

And tried these 3 css for the currentPage:

#menu .bt1 .currentPage {
background-image:url(botoes_menu/button1_current.png);
width:64px;
height:22px;
display:block;
float:left;
}

#menu .currentPage {
background-image:url(botoes_menu/button1_current.png);
width:64px;
height:22px;
display:block;
float:left;
}

.currentPage {
background-image:url(botoes_menu/button1_current.png);
width:64px;
height:22px;
display:block;
float:left;
}


It didn't work :confused:
Sometimes the current image state didn't appear, and sometimes the current image state became the link state.
What I did wrong?

André Barreto
10-27-2009, 03:52 AM
I'm working with an iframe in this site. The main content, where I have the iframe, menu, background and logo got one style sheet. The htmls loaded inside the iframe got their owns. This fact could be the reason for which the code it's not working?

rattlsnak
12-04-2009, 11:12 PM
ok, since now I'm building a new site strictly with a CSS nav (instead of the DW built in function like I'm used to) this question has come about for me as well. Can you explain this a little deeper please? How can that class work if you navigate to the page via the URL?

rattlsnak
12-07-2009, 02:41 AM
ok I got it to work.. The only way i could see how to do it, is to add a .xxx class to each page in HTML. I was trying to figure out a way to do it from one template and it apply to all pages in the navigation menu, but after days of searching i was only able to find a way to do it page by page by simply changing one line of HTML. The CSS is still one external page link as its the same on all pages.

The HTML: (simply add the class to each page you want to show as "current". So in this case, 4 simple code changes, one on each page)

<ul id="nav">
<li class="cur"><a href="home.html>Home</li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="contactus">Contact Us</a></li>
</ul>

The CSS: (simplified to just show color change)

ul#nav a {
color:#CCC
}

ul#nav li.cur a{
color:#f90;
}

Hope this helps someone else!!

rattlsnak
12-07-2009, 03:27 AM
And now that I've gone back and reread domedia's reply, it's basically the same thing but I applied the class a little differently. it also wasnt clear to me on making the change on each page, as i was looking to do it on the stlye sheet.