Welcome to WebmasterWorld Guest from 54.146.221.231

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)

New User

10+ Year Member

joined:Jan 23, 2006
posts:12
votes: 0


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)

Junior Member

10+ Year Member

joined:Feb 5, 2006
posts:69
votes: 0


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)

Junior Member

10+ Year Member

joined:June 9, 2005
posts:190
votes: 0


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)

Junior Member

10+ Year Member

joined:Mar 7, 2005
posts:65
votes: 0


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)

New User

10+ Year Member

joined:Jan 23, 2006
posts:12
votes: 0


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 :)