Topic: CSS Subclassing (div tag) Pages that link to <a href="https://ozoneasylum.com/backlink?for=10743" title="Pages that link to Topic: CSS Subclassing (div tag)" rel="nofollow" >Topic: CSS Subclassing (div tag)\

 
Author Thread
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 05-24-2002 20:46 Edit Quote

Okay... I'm pretty new to the whole CSS thing.

I'd like to create 2 div tag classes, one for displaying units (right justified, with some margin) and one for displaying characters (left justified, with some margin).
I then need to be able to assign an ID to seperate instances of each, so as an example, with the units div tag: a units "in stock", a units "back order", a units "available", and so on...

With that said, is following correct:
div.units { }
div.units.backorder { }
div.units.instock { }
div.units.available { }

I'm thinking not... I'm thinking that the use of the : "colon" should appear somewhere.

Thanks!

Karl

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 05-24-2002 21:43 Edit Quote

Karl: You are probably complicating matters for yourself here:

code:
div.units { }
div.unitsBackorder { }
div.unitsInstock { }
div.unitsAvailable { }



and if you have common styles separat them and have it like:

code:
div.units, div.unitsBackorder, div.unitsInstock, div.unitsAvailable { }



Or I've misunderstood the question - in which case I'll try again!!

[edit: Oh and I tend not to bother putting things like div.units as .units will do and I'm aware of no extra benefits of doing it the long way]

___________________
Emps

FAQs: Emperor

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 05-24-2002 22:31 Edit Quote

[the long way]

Well, can't you do the following:

.myClass {}
table.myClass { }
div.myClass { }

Where each of the classes "myClass" belongs to the object listed, and .myClass alone is a global definnition of "myClass"?

Karl

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 05-24-2002 22:43 Edit Quote

The answer to your original question:

Have a style sheet like this that has all the stuff specific to all divs with class "units":

divs.units {...}

Then have additional ones like this that carry the extra information for each type:

div.backorder {...}
div.instock {...}
div.available {...}

And then, in your html, just put divs like this:

<div class="units backorder">...</div>
<div class="units instock">...</div>
<div class="units available">...</div>

The class attribute is actually a space-separated list of all the classes you want to apply to an element.

That thing you said in the post before mine will work perfectly fine; the first style sheet will apply to anything with myClass set, and the other two will apply only to their types of HTML element with myClass set. However, don't use HTML element names to differentiate between classes; only use the HTML element names where they're necessary. (for instance, only use a <table> tag when you have a table.)

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 05-24-2002 23:40 Edit Quote

Excellent thread!

Say... is there a way to print this thread *printer friendly* (no joke intendid)... I'd like to save this one!

Karl

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 05-24-2002 23:49 Edit Quote

Hey, that's a good question! The answer at the moment is no, but I'm wondering why the Asylum doesn't have a print style sheet? Or maybe it does, I haven't checked.

Someone should ask the Doc. I'd be willing to make the style sheet if he wanted.

DocOzone
Maniac (V) Lord Mad Scientist
Sovereign of all the lands Ozone and just beyond that little green line over there...

From: Stockholm, Sweden
Insane since: Mar 1994

IP logged posted posted 05-25-2002 00:35 Edit Quote

Hey wow, that would be cool, I'd appreciate that Slime, I don't *really* know where to start, I'm still "faking it" when it comes to CSS layouts, heh. I was fascinated with that nugget of info about the two class elements! Do you know of any issues in cross-browsers where that doesn't work? I'm going to start using that on my next project, you bet.

Your pal, -doc-

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 05-25-2002 00:55 Edit Quote

My thoughts exactly Doc. Very cool tidbit Slime....I never even thought about it.

I'll have to go read up now.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 05-25-2002 02:52 Edit Quote

Heh, thanks. I only vaguely remember reading it myself somewhere in the w3c specs, undoubtedly within http://www.w3.org/TR/REC-CSS2 somewhere. I've never actually used more than one class per element, so I don't know about the cross-browser issues.

I'll see if I can put together a print style sheet for the thread view. It might be hard depending on how the page is structured with HTML, but I'll give it a shot.

In the meantime, be nice to me and go give me advice here =)

DocOzone
Maniac (V) Lord Mad Scientist
Sovereign of all the lands Ozone and just beyond that little green line over there...

From: Stockholm, Sweden
Insane since: Mar 1994

IP logged posted posted 05-25-2002 16:29 Edit Quote

OK, advices given at that mentioned thread!

Your pal, -doc-



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu