class and id in css

[diverdan]

I am trying to find a way of applying two styles to a table cell.

I can do this like so <td class=SiteText id=Shopping> then add a style such as td#shopping to my style sheet.

Very useful, when you want to apply different styles to the contents of each cell.

Problem is,.... id needs to be unique for my code to validate. So I cna only do this once on a page.

Any other way I can do this?

Dan

http://www.sundive.com.au

 

[stormbind]

<style>
tagName {}
#id {}
.class {}
</style>

tagName affects all the tags on the page. The following will give all tables a solid black border.

<style>
table {border:1px solid black;}
</style>

#id should be reserved for a specific element because javascript uses the same id= to reference one element. The following will give the element id=&quot;myLayer&quot; a dashed red border.

<style>
#myLayer {border:1px dashed red;}
</style>

.class is used to apply styles to a group of elements. The following will give all elements the classname class=&quot;myImages&quot; a blue dotted border, regardless of what element they are. <P> <IMG> <BLOCKQUOTE> and anything else can share the same classname.

<style>
.myImages {border:1px dotted blue;}
</style>

Hope this helps

----------
I'm willing to trade custom scripts for... [see profile]

 

[stormbind]

In addition to the above, you can apply the same styles to move than one group.

The following will give every element that is a TABLE and every element with the classname=&quot;myImages&quot; the same 10px margin.

<style>
table .myImages {margin:10px;}
</style>

You can use the same solution to apply one effect to many ungrouped elements with #id. The following gives three seperate elements a 5px solid border.

<style>
#element1 #element2 #element3 {border:5px solid green;}
</style>

----------
I'm willing to trade custom scripts for... [see profile]

 

[Vragabond]

diverdan, what you're trying to do is pretty simple using multiple classes. Just do something like this:

<style type=&quot;text/css&quot;>
 .SiteText { declarations; }
 .Shopping { declarations; }
</style>

<td class=&quot;SiteText Shopping&quot;>

Hope it sorts out your problem. The syntax below validates and works in all the current browsers.

 

[diverdan]

OK, I'll try and ecxplain better.

I was using id=&quot;cart&quot; in all my shopping cart table cells, to ensure they got the right size/width/colour border. My cart has 24 cells in it.

I then wrote a style for this id.

I was then able to attach a DIFFERENT style to the table cells themselves,

eg <td class=blueheading id=cart>

which did not affect the style brought in by the id on the actual cell, but DID effect the contents of the table cells. I could thus set a class for the CONTENTS of the cell and and id for the BORDER of the cell.

It works, but does not validate.

I can of course write a style for each cell, but thought their might be a better way.

Dan

http://www.sundive.com.au

 

[Vragabond]

I'm not really sure what's bugging you. There's no difference between ids and classes in the way they show the styles. If I create a class or an id with the same style, the element will look the same whether it uses the class or the id. The only difference, as you have noticed yourself, is that ids have to be unique (and are as such of no use to your page). Now look at the problem from a different perspective. You do not need a class and an id, you need two distinctive styles. And you can apply two distinctive styles to two separate classes. For your example, it might look like this:

<style type=&quot;text/css&quot;>
 .blueheading {
  font: 1em/1.5em bold Arial, Helvetica, sans-serif;
  color: blue;
  background: #cccccc;
 }
 
 .cart {
  border: 1px solid black;
 }
</style>

Then you would use the blueheading class where you needed to change the contents:

<td class=&quot;blueheading&quot;>

the cart class where you needed (if anywhere) the borders:

<td class=&quot;cart&quot;>

and BOTH classes where you wanted to apply CONTENTS AND BORDERS:

<td class=&quot;blueheading cart&quot;>

This is what you said you wanted to accomplish and this is what this does. And it validates. And it works in all the current browsers.

 

[diverdan]

ohhhhhhh!

I can put two style in a class? was unaware.

lovely

Dan

http://www.sundive.com.au

 

[diverdan]

Um oh...now i remember... that's why I was using ids.....

Applying a new style in dreamweaver does not overwrite them. To apply two styles to a table cell it appears I have to hand code... as DW overwites the existing style if I select a new one, as opposed to ADDING a new one?

looks like i'm handcoding to do this...yuk



Dan

http://www.sundive.com.au

 

[stormbind]

&quot;Um oh...now i remember... that's why I was using ids.....&quot;

Should avoid ID if you can incase you ever want to use Javascript with them to create DHTML. Javascript won't like two elements sharing the same ID.

Handcoding is not so bad when you get used to it

----------
I'm willing to trade custom scripts for... [see profile]

 

[BillyRayPreachersSon]

Handcoding is great - the code is (assuming you do it right ;o) always more optimised that any WYSIWYG editor around.

I'd write to Macromedia and highlight the multiple class issue with them... Certainly if you've paid good money for their product.

Dan

 

[wiser3]

The problem of having to hand code the use of two classes in one element isn't unique to DreamWeaver. Although GoLive will render and handle the use of two classes on one element it also requires you to hand code the second class.

I'm amazed that both heavy weight HTML editors would lack such a basic ability.

 

[BillyRayPreachersSon]

Maybe I should write a kick-ass HTML editor ;o)

Trouble is, it'd end up being about 20Mb large or something!

 

[diverdan]

20meg?

dreamweavermx unpacked is 100meg..

Dan

http://www.sundive.com.au