Property inherits or equals global property

[cc4mail]

This may seem convoluted, but there is a need.

I have a complex css page - 800+ lines to manage multiple menu boxes with each with many different properties ( BG, images, colors, etc)and some common properties (fonts, etc...).

eg:
menu_a_cat{font-weight;bold; font-size:11pt color:#000}
menu_a_subcat{font-weight;normal; font-size:11pt etc..}
menu_a a:hover (color:#e4892e}

thru...

menu_z_cat{font-weight;bold; font-size:11pt color:#FFF}
menu_z_subcat{font-weight;normal; font-size:11pt}
menu_z a:hover (color:#3f3e3eF}


all menus are grouped for easy coding and have many properties.

how can I set the common menu properties to a global property -
eg: global_subcat{font-weight;normal; font-size:11pt}

without using the traditional...

menu_a_subcat, menu_b_subcat, menu_c_subcat, menu_d_subcat {font-weight;normal; font-size:11pt}

I want to keep the properties in their indexed group so I need something like ...

menu_a_subcat{style="global_subcat"}



possible? - x-browser issues?

 

[Vragabond]

You can use more than one class for one element. Using that, you could easily achieve what you want:

.menu_a { color: red; }
.menu_b { color: green; }
.subcat { font-size: 0.5em; }

<li class="menu_a">Menu A</li>
<li class="menu_a subcat">Menu A subcat</li>
<li class="menu_b>Menu B</li>
<li class="menu_b subcat>Menu B subcat</li>

Still, there are probably much better ways to achieve your goals, using descendant selectors and such.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[cc4mail]

Thanks, I understand that, but trying to get flexibility...
so the oddball class isn't altered, teh menus may have dozens of subcats

and is still easily recognized in the css code

eg:


.global_subcat{font-weight;normal; font-size:11pt}


.menu_a_subcat{style=".global_subcat"}
.menu_b_subcat{style=".global_subcat"}
.menu_c_subcat{style=".global_subcat"}
.menu_d_subcat{style=".global_subcat"}

.menu_e_subcat{font-weight;bold; font-size:12pt;}

.menu_f_subcat{style=".global_subcat"}
.menu_g_subcat{style=".global_subcat"}
.menu_h_subcat{style=".global_subcat"}

 

[Vragabond]

Yes, you can do it the way you want to, but it won't work, because it's a made up code that doesn't do anything.

However, the method I have showed you, gives you all the flexibility you need: Just add global_subcat class to any element that needs it. Further to that, you could create a specific relationship when menu_x and subcat are used together.

I still think that you could show us the code and what you want to do and there would be a much superior way of doing it.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[cc4mail]

I appreciate you trying to help.

re:
"Yes, you can do it the way you want to, but it won't work, because it's a made up code that doesn't do anything. "

The example was just trying to convey the concept of trying to set a class property with a common global value in css.

The question is can I use a variable, or reference to a another "global" class inside an existing class?


Perhaps a different way of explaining without 800+ lines of css.

$var_font = 'font-weight;normal; font-size:11pt'

.menu_a_subcat{$var_font}
.menu_a table {properties...}
.menu_a a:hover{properties...}
.menu_a li {properties...}
.menu_a ul {...}
etc...

.menu_b_subcat{$var_font}
.menu_b table {properties...}
etc...

.menu_c_subcat{$var_font}

.menu_d_subcat{$var_font}

(this ine does not have the global value)
.menu_e_subcat{font-weight;bold; font-size:12pt;}

.menu_f_subcat{$var_font}


this is an actual code snippet ...
(there are dozens of these I am trying to simplfy in an existing app)

for example setting the below

.sp-img{width:46px; height: 25px;} to something like

.sp-img{$var_width_height}

and the dozens of other .??-img{} classes when needed, eliminates changing dozens of classes, eliminating errors and having consistent code .


.sp-img{width:46px; height: 25px;}

.sp-img{padding:7px 8px 5px 1px; float:left; max-width:38px;}
.sp_menu {background-color: #F8F8F8; border: 1px solid #ff6600; }
.sp_midbg{background: url('img/sp_mid_title.gif') left top repeat-x;}
.sp_midimg{padding:0px 18px 0 1px; float:left;}
.sp_paging a{color:#404040; text-decoration:none;}
.sp_paging a:hover{text-decoration:underline;}
.sp_subcat { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight:normal; font-decoration:underline; color: #cc0000; }
.sp_subcat a { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #cc0000;}
/*.sp_subcat a:hover{ font-weight: normal;}*/
.sp_subcat a:hover{ font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: normal;color: #000;}
.sp_subcat li { list-style:none; }
.sp_subcat li a { font-weight:normal; color:#cc0000; }
.sp_subcat li a:hover {font-weight:bold; color:#3f3e3e; }
.sp_subcat li a:visited { color:#3f3e3e; }
/*sub sub*/
.sp_subsub { position:relative; list-style:none; margin:3px 0 3px 10px; padding:0; color: #cc0000; }
.sp_subsub a { position:relative; list-style:none; margin:3px 0 3px 10px; padding:0; color: #cc0000; }
.sp_subsub a:hover { position:relative; list-style:none; margin:3px 0 3px 10px; padding:0; color: #3f3e3e; padding:0 0 0 18px; }
.sp_subsub li { list-style:none; color:#cc0000; }
.sp_subsub li a {color:#cc0000; }
.sp_subsub li a:hover {font-weight:bold; color:#5b5c5d; }
.sp_subsub li a:visited {color:#3f3e3e; }
.sp_table_border{border:1px solid #c3c3c3; border-top:0;}

 

[Vragabond]

I understand you were just trying to illustrate what you mean. But I understood you right away and I can only tell you that this is not possible. There is no way to define variables in CSS.

However, if you spent a little less time insisting on a variable solution and just accepted what I gave you, you would see that it can work pretty much the same. Just because you're used to variables from other languages, does not mean that there are not other ways to achieve same or similar results.

Your CSS is bloated even when you only show me a few lines as opposed to 800, which is how much you claim you have.

1. C in CSS stands for cascading. Start using this feature. It means, if body tag (which should hold all your visual content of the page) has Geneva font family, all tags within body will have it as well (unless otherwise specified). This means that you could remove all your references to font-family beyond your first one.
2. In pseudo classes visited, :hover, etc.), remember that all values will be inherited by default. You only need to specify the values that actually change. Not only will this shrink your code, it will make it much more readable and understandable, since you will see exactly, which property you're changing.

Again, with the suggestion I gave you, you can easily achieve what you want:

.subcat { font-weight: normal; font-size: 11pt; }   

.menu_a table {properties...}
.menu_a a:hover{properties...}
.menu_a li {properties...}
.menu_a ul {...}
 
.menu_b table {properties...}
etc...

/* this one does not have the global value */
.menu_e { font-weight: bold; font-size: 12pt; }

<div class="menu_a">Menu A</div>
<div class="menu_a subcat">Menu A subcat</div>
<div class="menu_b">Menu B</div>
<div class="menu_c">Menu C</div>
<div class="menu_d subcat">Menu D subcat</div>
<div class="menu_e subcat">Menu E (still not like global setting)</div>

Remember, what you want, can be achieved, just not like you want it.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[cc4mail]

sorry for the late response. very helpful.

defining multiple clases is something I'm getting my arms around. I defined the "global" class but had asked how to use it as a variable - you cleared this up by the use of multiple classes: class="menu_e subcat" - perfect!

the site came with a business - 1400 code files - multiple themes for multiple countries - requiring multiple css pages - that were overwritten by many inline styles.

I have hired and fired 6 different "programmers" to resolve these issues & many other issues without success - clueless. The last made the css a mess. I picked up a php book 9 mos ago fixed the code, and a css book a week ago. - ( just a "tech user") The css was the final upgrade.

Thank you for your help, -should work. The hard part is conveying a problem and the proposed solution clearly. I understand your frustration - but you have been truly helpful - "There is no way to define variables in CSS."

Now if you could just solve the issue of quality, knowledgeable and responsible employees...

thanks!

 

[BillyRayPreachersSon]

Now if you could just solve the issue of quality, knowledgeable and responsible employees

Do you give your developers a practical test before hiring them? If so, it sounds like you might need to beef it up a bit. If not, I suggest starting this with immediate effect - it's a great way of weeding out those who claim to be able to 'do web development' but can barely manage with Dreamweaver, let alone understand CSS and cross-browser issues.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/