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

variants, object oriented styles, theme and variatons

P: n/a
I have a style like this:

table.borderless /* no border table */ {
border-collapse : collapse;
border-spacing : 0px;
border-style : hidden;
}

table.borderless td /* no border table cell */ {
border-style : hidden;
padding : 5px;
}

table.borderless th /* no border table cell */ {
border-color : #808080;
border-style : inset;
border-width : 1px;
padding : 5px;
}

I would like to invent a minor variation of this .borderless table.

I could clone the three entries and modify. But the programmer in me
says there should be a way to say my new menutable style is LIKE a
borderless table, with these minor overrides, much the way you do
object oriented programming in Java.

That way changes to the base borderless would be reflected also in
menutable.

Is this possible? Anyone point be to an example of use?
--
Bush crime family lost/embezzled $3 trillion from Pentagon.
Complicit Bush-friendly media keeps mum. Rumsfeld confesses on video.
http://www.infowars.com/articles/us/...s_rumsfeld.htm

Canadian Mind Products, Roedy Green.
See http://mindprod.com/iraq.html photos of Bush's war crimes
Jul 21 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
Roedy Green schrieb:
I would like to invent a minor variation of this .borderless table.

says there should be a way to say my new menutable style is LIKE a
borderless table, with these minor overrides,


table.borderless,
table.menu {
border-collapse: collapse;
border-style: hidden;
}
table.borderless th,
table.borderless td,
table.menu th,
table.menu td {
border: 1px inset #808080;
padding: 5px;
}
table.borderless td {
border-style: hidden;
}
table.menu td {
border-style: dotted;
}

<table class="menu">...

or

table.borderless {
border-collapse: collapse;
border-style: hidden;
}
table.borderless th,
table.borderless td {
border: 1px inset #808080;
padding: 5px;
}
table.borderless td {
border-style: hidden;
}
table.menu td {
border-style: dotted;
}

<table class="borderless menu">...

PS: "borderless" is a bad, non-semantic class name.
Jul 21 '05 #2

P: n/a
Roedy Green schrieb:
I would like to invent a minor variation of this .borderless table.

says there should be a way to say my new menutable style is LIKE a
borderless table, with these minor overrides,


table.borderless,
table.menu {
border-collapse: collapse;
border-style: hidden;
}
table.borderless th,
table.borderless td,
table.menu th,
table.menu td {
border: 1px inset #808080;
padding: 5px;
}
table.borderless td {
border-style: hidden;
}
table.menu td {
border-style: dotted;
}

<table class="menu">...

or

table.borderless {
border-collapse: collapse;
border-style: hidden;
}
table.borderless th,
table.borderless td {
border: 1px inset #808080;
padding: 5px;
}
table.borderless td {
border-style: hidden;
}
table.menu td {
border-style: dotted;
}

<table class="borderless menu">...

PS: "borderless" is a bad, non-semantic class name.
PPS: This is a frequent question, you should have been able to
find the answer in this newsgroup with little searching.
Jul 21 '05 #3

P: n/a
On 08/06/2005 01:25, Roedy Green wrote:

[snipped rules]
I would like to invent a minor variation of this .borderless table.


An alternate suggestion to the one you already have could be to use
multiple classes. A second class could override previous declarations,
or just build on existing ones.

[snip]

By the way, I agree with Christoph: class names should be semantic, not
descriptive.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 21 '05 #4

P: n/a
On Wed, 08 Jun 2005 12:22:08 GMT, Michael Winter
<m.******@blueyonder.co.invalid> wrote or quoted :
A second class could override previous declarations,
or just build on existing ones.


Could you please point me to style sheet somewhere that uses
overriding?

--
Bush crime family lost/embezzled $3 trillion from Pentagon.
Complicit Bush-friendly media keeps mum. Rumsfeld confesses on video.
http://www.infowars.com/articles/us/...s_rumsfeld.htm

Canadian Mind Products, Roedy Green.
See http://mindprod.com/iraq.html photos of Bush's war crimes
Jul 21 '05 #5

P: n/a
On 09/06/2005 20:48, Roedy Green wrote:
On Wed, 08 Jun 2005 12:22:08 GMT, Michael Winter
<m.******@blueyonder.co.invalid> wrote or quoted :
A second class could override previous declarations,
or just build on existing ones.


Could you please point me to style sheet somewhere that uses
overriding?


No. :p

But, the principle is simple enough. You define a rule set with a series
of declarations:

.A {
border: 1px dashed blue;
margin: 1ex;
}

After that, another that builds on it:

.B {
background-color: white;
color: red;
}

You can use each independently, or combine them:

<p class="A B">...</p>

Similarly, a class could specify new values for a previously defined
property:

.C {
border-style: none dashed;
}

<p class="A C">...</p>

Of course, order and specificity are important: more specific rules will
take precedence over the less specific, and later rules will take
precedence over earlier rules of the same specificity.

There are a couple of things to consider:

1. IE sometimes miscalculates specificity, so watch out for that.
2. Some older browsers, like NN4 and IE4, would ignore both of the
style rules for the paragraphs above as they do not understand
multiple class names within the same class attribute.
I hope you weren't thinking I was referring to something more
complicated than this.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 21 '05 #6

P: n/a
On Thu, 09 Jun 2005 20:14:30 GMT, Michael Winter
<m.******@blueyonder.co.invalid> wrote or quoted :
I hope you weren't thinking I was referring to something more
complicated than this.


I hoped there would be a way to combine the classes in the style sheet
so the user was unaware of the composition.

--
Bush crime family lost/embezzled $3 trillion from Pentagon.
Complicit Bush-friendly media keeps mum. Rumsfeld confesses on video.
http://www.infowars.com/articles/us/...s_rumsfeld.htm

Canadian Mind Products, Roedy Green.
See http://mindprod.com/iraq.html photos of Bush's war crimes
Jul 21 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.