CSS Question - Classes

I'm trying to tidy up my site.

http://www.celticguitartalk.com/assets/index.html

At the moment, my CSS navigation has the following class declaration for my
sub-buttons:

p.navsubs {font-size: 12px;}

..navsubs a {
background-image: url(../nav/navsub.jpg);
font-size: 90%;
}

..navsubs a:hover, .navsubs a:active {
color: #FFFFFF;
background-image: none;
}

This is reflected in my HTML template as:

<div class="hideit" id="sub2">
<p class="navsubs">
<p class="navsubs">
<p class="navsubs">
....etc for each button.
</div>

I'm trying to cut down on needless repetition by removing the
class="navsubs" part of <p class="navsubs"> and created this declaration in
order to do so:

div.hideit p {font-size: 12px}

I then deleted all instances of class="navsubs", leaving just the <p> tags.

Of course, now the <a> tag has lost its navsubs attributes, so I tried to
simply change the .navsubs a entries to .hideit a but it doesn't work.

I also tried it with div.navsubs a but can't for the life of me get it to
work.

Can anyone advise me as to how to edit the CSS so that I can safely remove
all the class="navsubs" entries?

My CSS are here:

http://celticguitartalk.com/CSS/cgtv4.css
http://celticguitartalk.com/CSS/cgtv5.css

Thanks.

--
Cams, Luxembourg
cams AT celticguitartalk DOT com

Assuming you need to keep the hideit class for other reasons, try this -

div.hideit p {font-size: 12px;}

div.hideit a {
background-image: url(../nav/navsub.jpg);
font-size: 90%;
}

div.hideit a:hover, div.hideit a:active {
color: #FFFFFF;
background-image: none;
}

....

<div class="hideit" id="sub2">
<p>
<p>
<p>
....etc for each button.
</div>


--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Cams" <not (AT) valid (DOT) com> wrote

I'm trying to tidy up my site.

http://www.celticguitartalk.com/assets/index.html

At the moment, my CSS navigation has the following class declaration for
my
sub-buttons:

p.navsubs {font-size: 12px;}

.navsubs a {
background-image: url(../nav/navsub.jpg);
font-size: 90%;
}

.navsubs a:hover, .navsubs a:active {
color: #FFFFFF;
background-image: none;
}

This is reflected in my HTML template as:

div class="hideit" id="sub2"
p class="navsubs"
p class="navsubs"
p class="navsubs"
...etc for each button.
/div

I'm trying to cut down on needless repetition by removing the
class="navsubs" part of <p class="navsubs"> and created this declaration
in
order to do so:

div.hideit p {font-size: 12px}

I then deleted all instances of class="navsubs", leaving just the <p
tags.

Of course, now the <a> tag has lost its navsubs attributes, so I tried to
simply change the .navsubs a entries to .hideit a but it doesn't work.

I also tried it with div.navsubs a but can't for the life of me get it to
work.

Can anyone advise me as to how to edit the CSS so that I can safely remove
all the class="navsubs" entries?

My CSS are here:

http://celticguitartalk.com/CSS/cgtv4.css
http://celticguitartalk.com/CSS/cgtv5.css

Thanks.

--
Cams, Luxembourg
cams AT celticguitartalk DOT com

"Murray *TMM*" <forums (AT) HAHAgreat-web-sights (DOT) com> wrote

Assuming you need to keep the hideit class for other reasons, try this -

div.hideit p {font-size: 12px;}

div.hideit a {
background-image: url(../nav/navsub.jpg);
font-size: 90%;
}

div.hideit a:hover, div.hideit a:active {
color: #FFFFFF;
background-image: none;
}

...

div class="hideit" id="sub2"
p
p
p
...etc for each button.
/div

Thanks for the reply Murray. That is indeed what I tried without success.

I created my site by following the Project7 Foundations e-book, but, to be
honest, I don't think it was in-depth enough for me to gain an understanding
of exactly what I was doing. Perhaps I'll just forget about trying to remove
the repetitious class="navsubs" entries as nothing I've tried works.

Saying that, it would be a good exercise for me to gain a better knowledge
of what I'm doing, only I've been at it for 2 hours now and made no
progress; hence my question to the group.

Thanks,
Cams

Cams:

Show me your most recent failed attempt, please.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Cams" <not (AT) valid (DOT) com> wrote

"Murray *TMM*" <forums (AT) HAHAgreat-web-sights (DOT) com> wrote in message
news:c8i3p6$4j1$1 (AT) forums (DOT) macromedia.com...
Assuming you need to keep the hideit class for other reasons, try this -

div.hideit p {font-size: 12px;}

div.hideit a {
background-image: url(../nav/navsub.jpg);
font-size: 90%;
}

div.hideit a:hover, div.hideit a:active {
color: #FFFFFF;
background-image: none;
}

...

div class="hideit" id="sub2"
p
p
p
...etc for each button.
/div

Thanks for the reply Murray. That is indeed what I tried without success.

I created my site by following the Project7 Foundations e-book, but, to be
honest, I don't think it was in-depth enough for me to gain an
understanding
of exactly what I was doing. Perhaps I'll just forget about trying to
remove
the repetitious class="navsubs" entries as nothing I've tried works.

Saying that, it would be a good exercise for me to gain a better knowledge
of what I'm doing, only I've been at it for 2 hours now and made no
progress; hence my question to the group.

Thanks,
Cams

"Murray *TMM*" <forums (AT) HAHAgreat-web-sights (DOT) com> wrote

Cams:

Show me your most recent failed attempt, please.

Okay, the failed attempt is here:

http://www.celticguitartalk.com/monkey/test.html

Style sheets are here:

http://www.celticguitartalk.com/monkey/CSS/cgtv4.css
http://www.celticguitartalk.com/monkey/CSS/cgtv5.css

The working version with class="navsubs" intact is here:

http://www.celticguitartalk.com/assets/index.html

Thanks for taking an interest in this.

Yours sincerely,


--
Cams, Luxembourg
cams AT celticguitartalk DOT com

"Cams" <not (AT) valid (DOT) com> wrote

I'm trying to tidy up my site.

http://www.celticguitartalk.com/assets/index.html

I've just managed to solve it!

There is an on_click swap class entry at the top of each nav button section that looks as follows:

<p class="navbutts"><a href="#" tabindex="50" onclick="P7_swapClass(1,'sub3','showit','hideit',' div')">Button Text</a></p>
<div class="hideit" id="sub3">

There is also the following two declarations in the style sheet:

..showit {display: block;}
..hideit {display: none;}

So, applying a declaration to the hideit class such as

div.hideit a {}

will actually do as it is supposed to do, only it won't be seen because it is hidden.

Presumably clicking a button changes its status from hideit to showit so, in order to get the desired effect, what I did was create the following:

div.showit a {}

and that did the trick!

I'm feeling quite good that I managed to solve this. It is fun when it works out!

Cams

Cams:

Nicely reasoned. I'm glad you got through this.

P.S. Please post in plain text.

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"Cams" <not (AT) valid (DOT) com> wrote

"Cams" <not (AT) valid (DOT) com> wrote

I'm trying to tidy up my site.

http://www.celticguitartalk.com/assets/index.html

I've just managed to solve it!

There is an on_click swap class entry at the top of each nav button section
that looks as follows:

<p class="navbutts"><a href="#" tabindex="50"
onclick="P7_swapClass(1,'sub3','showit','hideit',' div')">Button Text</a></p>
<div class="hideit" id="sub3">

There is also the following two declarations in the style sheet:

..showit {display: block;}
..hideit {display: none;}

So, applying a declaration to the hideit class such as

div.hideit a {}

will actually do as it is supposed to do, only it won't be seen because it
is hidden.

Presumably clicking a button changes its status from hideit to showit so, in
order to get the desired effect, what I did was create the following:

div.showit a {}

and that did the trick!

I'm feeling quite good that I managed to solve this. It is fun when it works
out!

Cams