button states

23 views

Skip to first unread message

zalel

unread,

Feb 10, 2013, 1:39:44 PM2/10/13

to css-d...@googlegroups.com

I am designing a new website for someone, but in the meantime I have to make a few changes in the existing site.

The first link is what their pages look like now. http://panafricanacupuncture.org/index.html

The second link is a new page I made. http://panafricanacupuncture.org/mexico2013.html

The third link is an alternate version of the new page. http://panafricanacupuncture.org/mexico2013.html. There is also a question mark "?" at the top of the page, just to the left of the white border. I do not see this in the source code.

The CSS is here: http://panafricanacupuncture.org/screen.css

If you look at the navbar, you can see that the button for PROGRESS TO DATE is in the Down state. I did a Save As and added a new <li> for the new button, so I figured that was the cause. When I looked at the CSS, I could not see what to change, in order to make the MEXICO button display the Down state.

Next, I took the Index page, and made the changes again. Now, the Down state does not appear for the Mexico page, nor the Progress to Date page.

What am I overlooking?

Thanks,

Nicky

Paul Scheltema

unread,

Feb 11, 2013, 4:50:30 AM2/11/13

to css-d...@googlegroups.com

Hi there :)

Just took a look at your html (that question mark is most likely from php, and i think youve allready solved it, i couldnt find it)

your mexico page: view-source:http://panafricanacupuncture.org/mexico2013.html

line: 202, this element <body id="bhome">

in your css you or the one who made that css before you, uses selectors like:

  body#bhome li#lhome a {//}

and your mexico page also has an id of bhome, so there is no css rule to change the button's background color

so just add a new body class and a corresponding css rule for the mexico page and your done.

You said youll be redesigining the html/css, might i advise you not to use that technique for yourself.

Your a lot better of using css classes to set a state.

Instead of making the body change id's and having to name all buttons, you can instead add a class name to the active button

#navigation .active {//}

and lastly, not your css i know, but those css selectors are not very efficient

body#bhome li#lhome a
#bhome, should mean the same as body#bhome, just like li#lhome
use id's spasely and only on container elements.
there should be no need to name buttons with an id, it also doesnt add any semantical meaning
a css selector with 2 id's in it is most likely wrong
use tools like yslow (firefox) to find bad css selectors

good luck :)

Reply all

Reply to author

Forward

0 new messages