By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,435 Members | 2,891 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,435 IT Pros & Developers. It's quick & easy.

CSS menu - changing colors of tab - do I need a css file for each color? a better way?

P: n/a
Hi

I am making a tab menu with css, and the tabs changes color depending
on wich tab is current.

1. I could load a different css file for each tab/color.
2. I could do some inline css only for the color of the tabs. (which I
would then change with trough php).
3. I could make a different class for each color, and change the class
of the tab.

But there a way to make a "intelligent" css, so that you in the css
file could do some sort of if bode class is class=body one, then colour
af tabs should be xxx?

I am thinkin of something along this line -

body.section-1 td.menu,
{
background : #fff;

}

body.section-2 td.menu,
{
background : #444;

}

body.section-2 td.menu,
{
background : #444;

}

so i would only need to change name of body class and make a section
for each color?

Aug 5 '05 #1
Share this Question
Share on Google+
25 Replies


P: n/a
well I just treid my on suggestions a that works

body.section-1 td.menu {
background-color: #ff0000;
}

body.section-2 td.menu {
background-color: #0000ff;
}
Any body got better ideas?

Aug 5 '05 #2

P: n/a
Had hoped this would work

body.section-1 td.current, td.submenu, td.bredtsubmenumellemrumhojre,
td.bredtsubmenumellemrumvenstre {
background-color: #ff0000;
}

body.section-2 td.current, td.submenu, td.bredtsubmenumellemrumhojre,
td.bredtsubmenumellemrumvenstre {
background-color: #ffc233;
}

but it does not work.

Aug 5 '05 #3

P: n/a
Els
ma************@gmail.com wrote:
Had hoped this would work

body.section-1 td.current, td.submenu, td.bredtsubmenumellemrumhojre,
td.bredtsubmenumellemrumvenstre {
background-color: #ff0000;
}

body.section-2 td.current, td.submenu, td.bredtsubmenumellemrumhojre,
td.bredtsubmenumellemrumvenstre {
background-color: #ffc233;
}

but it does not work.


compiling in my mind your original question, your follow-up, and this
message, I think this:

Use your solution number 2.
Have php check which page is the current one, and make it add
'class="current"' to the td that needs to have a change of colour.
Then style td.current in your stylesheet.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Pearl Jam - Why Go
Aug 5 '05 #4

P: n/a
Hi Els

Thanks for taking more time at my menu problems.

" Have php check which page is the current one, and make it add
'class="current"' to the td that needs to have a change of colour.
Then style td.current in your stylesheet. "

But would I then not need a different class for each colour ? Or do I
misunderstand you?

With solution 2 I was actually thinking more of simply not placing a
colour in the external css stylesheet. But just put a internal style <
td class="current" background-colour: #ffffff;" > and I could then
change the colour when php build the table. I just found that is was
not a "elegant" solution. But perhaps it is after all the most
efficient solution.

Best regards
Mads

Now playing: Pink Floyd ;-)

Aug 5 '05 #5

P: n/a
Els
ma************@gmail.com wrote:
Hi Els

Thanks for taking more time at my menu problems.

" Have php check which page is the current one, and make it add
'class="current"' to the td that needs to have a change of colour.
Then style td.current in your stylesheet. "

But would I then not need a different class for each colour ? Or do I
misunderstand you?
Or I misunderstood what you want to accomplish :-)

What I gathered you wanted, is for instance a row of links, each link
leading to a different page. And then for instance having the
background colour of each link blue, except for the one that leads to
the page you're already on.

Isn't that what you wanted?
With solution 2 I was actually thinking more of simply not placing a
colour in the external css stylesheet. But just put a internal style <
td class="current" background-colour: #ffffff;" > and I could then
change the colour when php build the table. I just found that is was
not a "elegant" solution. But perhaps it is after all the most
efficient solution.
It's less efficient than just td class="current" and apply the
background color to it in the stylesheet. If I got your intention
correct though.
Now playing: Pink Floyd ;-)

^^^
I don't know that song by them ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Guns N' Roses - The Garden
Aug 5 '05 #6

P: n/a
Hi Els

Well, i think you do misunderstand, and that is because I have not
explained it good enough, sorry my mistake. I have a menu, with 4 main
tabs, and for each main tab there is a submenu with sub items. When a
main tab is selected it is forexsample orange and so are all the
submenu items. But when you choose another main tab, the main tab is
blue and so are all the submenu items. So i have a class main tab and
sub tab, and all i need to change depending on which tab is showing is
the colour.

Do you see what I mean?

"Now playing: Guns N' Roses - The Garden "

How have you set it up, so that it writes that?

Mads

Aug 5 '05 #7

P: n/a
Els
ma************@gmail.com wrote:
Hi Els

Well, i think you do misunderstand, and that is because I have not
explained it good enough, sorry my mistake. I have a menu, with 4 main
tabs, and for each main tab there is a submenu with sub items. When a
main tab is selected it is forexsample orange and so are all the
submenu items. But when you choose another main tab, the main tab is
blue and so are all the submenu items. So i have a class main tab and
sub tab, and all i need to change depending on which tab is showing is
the colour.

Do you see what I mean?
Possibly - IIUC, the colour changes on selecting by for example
mouse-click, not on changing the page.
If you want it changed on merely hovering the mouse over it, the
solution is simple. If 'onclick', you'd need JavaScript to do it
'user-side'.
"Now playing: Guns N' Roses - The Garden "

How have you set it up, so that it writes that?


Winamp 'nowplaying' plugin :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Guns N' Roses - Locomotive
Aug 5 '05 #8

P: n/a
Hi Els

I still dont think you catch what I getting at, I think maybe the best
thing is this, take a look at www.apple.com , that is what I am looking
for. Click the main tabs and see how main tab and sub tabs change
colour.

"Winamp 'nowplaying' plugin :-) "

cool little thing.

Mads

Aug 5 '05 #9

P: n/a
Els
ma************@gmail.com wrote:
Hi Els

I still dont think you catch what I getting at, I think maybe the best
thing is this, take a look at www.apple.com , that is what I am looking
for. Click the main tabs and see how main tab and sub tabs change
colour.


Ah, okay - so it is related to which page you're on.
Hence your suggestion for giving the body a class.
So.. what is it that isn't working?
If page 1 has <body class="page1"> and page 3 has <body
class="page2">, and you've given the current menu class="current",
it's as simple as adding the following lines to your stylesheet:

body.page1 .current{background:red;}
body.page2 .current{background:blue;}

If that doesn't work, your problem may be with the way you have
constructed your menu. What does your html code look like?

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Split Enz - Message To My Girl
Aug 5 '05 #10

P: n/a
Els
ma************@gmail.com wrote:
Had hoped this would work

body.section-1 td.current, td.submenu, td.bredtsubmenumellemrumhojre,
td.bredtsubmenumellemrumvenstre {
background-color: #ff0000;
}

body.section-2 td.current, td.submenu, td.bredtsubmenumellemrumhojre,
td.bredtsubmenumellemrumvenstre {
background-color: #ffc233;
}

but it does not work.


In addition to my previous post:

body.section-1 td.current,
body.section-1 td.submenu,
body.section-1 td.bredtsubmenumellemrumhojre,
body.section-1 td.bredtsubmenumellemrumvenstre {
background-color: #ff0000;
}

body.section-2 td.current,
body.section-2 td.submenu,
body.section-2 td.bredtsubmenumellemrumhojre,
body.section-2 td.bredtsubmenumellemrumvenstre {
background-color: #ffc233;
}

Does that do what you want? :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: The Eagles - Heartache Tonight
Aug 5 '05 #11

P: n/a
Hi Els

I think you know my html code
http://www.madsgormlarsen.dk/andersen/index.php ! :-)

You are the BEST BEST - remember ?

Yes, this work.

"body.page2 .current{background:blue;} "

But i am going to need a lot of them.

Therefore I treid this, to make it a bit more clean.

body.section-2 td.current, td.submenu, td.bredtsubmenumellemrumhojre,
td.bredtsubmenumellemrumvenstre {
background-color: #ffc233;

But it does not work, and it just seems to me like there must be a
simpler way.

Mads

Aug 5 '05 #12

P: n/a
Yes, I like that, your are the king, that is a cool solution. Do you
think it is the way to go?

PS. Like you taste in music.

Mads

Aug 5 '05 #13

P: n/a
Els
ma************@gmail.com wrote:
Hi Els

I think you know my html code
http://www.madsgormlarsen.dk/andersen/index.php ! :-)

You are the BEST BEST - remember ?
Ah! I that you :-)

But no, I don't remember everybody's name and url after having replied
to their messages really. And while I'm on the subject: how about you
quoting relevants bit of messages you reply to? Today I'm not
responding to many messages, and I mostly remember what you said like
one hour before. But if I come back tomorrow evening, I don't remember
your previous post, and other people may not even have seen it.
Long story short: please quote stuff :-)
Yes, this work.

"body.page2 .current{background:blue;} "

But i am going to need a lot of them.

Therefore I treid this, to make it a bit more clean.

body.section-2 td.current, td.submenu, td.bredtsubmenumellemrumhojre,
td.bredtsubmenumellemrumvenstre {
background-color: #ffc233;

But it does not work, and it just seems to me like there must be a
simpler way.


That does not work, because as soon as you use a comma, it's a new
selector. 'body.section-2' only applies to td.current, and not to
td.submenu and the rest, unless you repeat it like I did in my other
post. (posted 3 minutes after the one you just replied to).

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Anthrax - Got The Time
Aug 5 '05 #14

P: n/a
Els
Els wrote:
Ah! I that you :-) ^^
is!
my other post. (posted 3 minutes after the one you just replied to).


I saw you found it already :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Skunk Anansie - Hedonism
Aug 5 '05 #15

P: n/a
Hi Els

" Long story short: please quote stuff :-) "

I promise that I will do that, I use Google groups, and it gives bad
habits regarding queteing.

Mads

Aug 6 '05 #16

P: n/a
Els
ma************@gmail.com wrote:
Hi Els

" Long story short: please quote stuff :-) "

I promise that I will do that, I use Google groups, and it gives bad
habits regarding queteing.


I've heard there is a 'reply' button in Google Groups, which lets you
quote the message. Seems it's not too easy to find, but it there.
(They say, I haven't checked)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Smokie - Oh Carol
Aug 6 '05 #17

P: n/a
"I've heard there is a 'reply' button in Google Groups, which lets you
quote the message. Seems it's not too easy to find, but it there.
(They say, I haven't checked) "

There is a reply button, but one must copy pase in order to quote, but
I think that it is works just fine. (I don't see more than one type of
reply button)

Mads

Aug 6 '05 #18

P: n/a
Els
ma************@gmail.com wrote:
"I've heard there is a 'reply' button in Google Groups, which lets you
quote the message. Seems it's not too easy to find, but it there.
(They say, I haven't checked) "

There is a reply button, but one must copy pase in order to quote, but
I think that it is works just fine. (I don't see more than one type of
reply button)
Well, as you can see, your method of quoting doesn't really work, as
it is just you putting some text between quotes. Usenet quoting looks
like this:
first line of quoted message
second line of quoted message
etc etc etc


That way you can easily see who said what, especially after 2 or 3
people have responded. (see how it now looks like you wrote that first
line, second line, etc, while there is no indication that I said what
you wrote between "". )

Really, you must find the correct quoting button in Google Groups, I
really don't believe all the other Google Groups users who found that
button are copy pasting and manually adding in > and >> and >>>
characters...

Better still, would be using a real newsreader of course.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Smokie - It's Your Life
Aug 6 '05 #19

P: n/a
wrote:
"I've heard there is a 'reply' button in Google Groups, which lets you
quote the message. Seems it's not too easy to find, but it there.
(They say, I haven't checked) "

There is a reply button, but one must copy pase in order to quote, but
I think that it is works just fine. (I don't see more than one type of
reply button)


Don't use the "reply" link at the end of the message. Click on the "show
options" link at the top of the message and use its "reply" link; that
quotes the message you're replying to. Just remember to trim the parts
you're not replying to.

--
Steve

The measure of a man's real character is what he would do if he knew he
would never be found out. -Thomas Babington Macaulay
Aug 7 '05 #20

P: n/a
Don't use the "reply" link at the end of the message. Click on the "show
options" link at the top of the message and use its "reply" link; that
quotes the message you're replying to. Just remember to trim the parts
you're not replying to.
Cool steve, I would never have figurede that out. Thanks to both you
asn Els.
The measure of a man's real character is what he would do if he knew he
would never be found out. -Thomas Babington Macaulay


Who is Thomas BM?

Aug 7 '05 #21

P: n/a
JRS: In article <11**********************@f14g2000cwb.googlegroups .com>
, dated Sat, 6 Aug 2005 11:37:46, seen in news:comp.infosystems.www.auth
oring.stylesheets, ma************@gmail.com posted :
" Long story short: please quote stuff :-) "

I promise that I will do that, I use Google groups, and it gives bad
habits regarding queteing.

If you find that, when you start a News reply, Google does not provide
the previous article in quoted form, note what Keith Thompson wrote in
comp.lang.c, message ID <ln************@nuthaus.mib.org> :-
If you want to post a followup via groups.google.com, don't use
the "Reply" link at the bottom of the article. Click on "show
options" at the top of the article, then click on the "Reply" at
the bottom of the article headers.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demon.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.
Aug 7 '05 #22

P: n/a

Els wrote:
Does that do what you want? :-)


Well, almost, but hover does not work in IE, it seams you can not have
a hover on a td in IE?

I have treid this

body.section-2 td.current,
body.section-2 td.submenu,
body.section-2 td.bredtsubmenumellemrumhojre,
body.section-2 td.bredtsubmenumellemrumvenstre {
background-color: #ffc233;
}

body.section-2 td.submenucurrent {
background-color: #ffcc66;
}

body.section-2 td.submenu:hover {
background-color: #ffcc66;
}

and this

body.section-2 td.current,
body.section-2 td.submenu,
body.section-2 td.bredtsubmenumellemrumhojre,
body.section-2 td.bredtsubmenumellemrumvenstre {
background-color: #ffc233;
}

body.section-2 td.submenucurrent,
body.section-2 td.submenu:hover {
background-color: #ffcc66;
}

Which works in firefox, but not in IE.

Then I treid setting the hover effect on the link, like this.

a.submenulink:hover {
background-color: #ff0000;
}

But then the entire cell is not filled out.

Can you see a fix for this problem?

Mads

Aug 8 '05 #23

P: n/a
ma************@gmail.com wrote:
The measure of a man's real character is what he would do if he knew he
would never be found out. -Thomas Babington Macaulay


Who is Thomas BM?


You're using Google Groups (and gmail) and you haven't figured out how
to search the web? ;-)

http://www.google.com/search?q=%22Th...on+Macaulay%22

--
Steve

The creation of a thousand forests is in one acorn. -Ralph Waldo Emerson
Aug 8 '05 #24

P: n/a
You're using Google Groups (and gmail) and you haven't figured out how
to search the web? ;-)
Point taken :-)
The creation of a thousand forests is in one acorn. -Ralph Waldo Emerson


Is it made automatically - somehow?

Aug 8 '05 #25

P: n/a
ma************@gmail.com wrote:
The creation of a thousand forests is in one acorn. -Ralph Waldo Emerson


Is it made automatically - somehow?


I have software (http://www.qliner.com/quotes/default.htm) that randomly
selects quotes every so often and generates a signature file that my
news reader uses.

--
Steve

We have just enough religion to make us hate but not enough to make us
love one another. -Jonathan Swift
Aug 9 '05 #26

This discussion thread is closed

Replies have been disabled for this discussion.