Welcome to WebmasterWorld Guest from 54.159.246.164

Forum Moderators: not2easy

Message Too Old, No Replies

Using both id and class in a div tag

   
8:34 pm on Feb 9, 2006 (gmt 0)

5+ Year Member



On my page I frequently use empty div-elements for spaces.

Normally, I would just make a class and specify the styles.
But now, I'd like to keep all the styles inside a single "id" in my CSS file, except the height and make a few "classes" named 10, 15, 25 ect. that contains the height.

So, my CSS file would look something like this:

#space { font-size: 0px;width: 230px;padding: 0px 1px;margin: auto; }
.05 { height: 5px; }
.10 { height: 10px; }
.15 { height: 15px; }
.25 { height: 25px; }

And then add a div element like this:

<div id="space" class="15"></div>

At first, I was positive this would work out just fine, but it doesn't. Still, I've seen this done in other people's html code, that is, using BOTH id's and classes in a single tag.

Is there something that I'm just doing wrong or is this not possible?

8:52 pm on Feb 9, 2006 (gmt 0)

5+ Year Member



First, your class names need to start with a letter. Second, you can specify more than one class for an element:

.space { font-size: 0px;width: 230px;padding: 0px 1px;margin: auto; }
.five { height: 5px; }
.ten { height: 10px; }
.fifteen { height: 15px; }
.twenty_five { height: 25px; }

<div class="space fifteen"></div>

8:52 pm on Feb 9, 2006 (gmt 0)

5+ Year Member



Try by putting a letter before your numbers:

.p01 {...}

I think Firefox doesn't like it when your classes start with a number.

8:57 pm on Feb 9, 2006 (gmt 0)

10+ Year Member



Hi atlibj,

AFAIK, class names may not start with a number. Try giving them names that start with an alpha character.

Also, you may want to reconsider the naming, use semantics instead of describing the property in the name.

You have a class called, say, .p15 and assign it 15px height. What if later you find that the elements formatted with this class look much better with 20px height? Ok, you will change the value of the class .p15 in the CSS but you'll get really confused as you go along.

It would be much better to semantically name the class, i.e. create a name that describes which element it formats, instead of what the format is.

cheers

tey

looks like I only re-hashed the previous two answers, but I started writing when there were no replies yet. Then I get this phone call that goes on forever .... :)

9:24 pm on Feb 9, 2006 (gmt 0)

5+ Year Member



Thank you so much guys!

Yes, I simply forgot about that you can't start a class with a number. Changing this of course solved my problem :)

Also a really good point Teylyn mentioned about the semantics and the hard work I might be facing if I like to change the heights sometimes later.

In this case I think I'm gonna do alright later on, but this is really something I will consider next time.

Thanks again so much :)