icon Get the most out of Surmunity, read our tips here! Need an interesting blog to read? You've got to read the Surpass Blog! | Welcome! Please register to access all of our features.
Old September 21st, 2007, 4:22 PM   #1 (permalink)
Google Bot
Super #1
 
-RanZ-'s Avatar
 
Joined in Jun 2004
Lives in Minnesota
Hosted on Pass33/Pass70
1,036 posts
Gave thanks: 19
Thanked 10 times
div id vs class

I have just started getting into CSS layouts and was wondering something...

is it better to use div IDs or classes? I have been using IDs because thats what some of the training material I read used. Is it better to use just one of them or is a mix fine?

ex:

<div id="content_main"> </div>

using css:

div#content_main {
margin:0;
padding:0;
}


would it be better to do:

<div class="content_main"> </div>

using css:

.content_main {
margin:0;
padding:0;
}
__________________
DK Web Solutions Pass70 & Pass33
-RanZ- is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old September 21st, 2007, 4:25 PM   #2 (permalink)
Registered User
Fresh Surpasser
 
Joined in Aug 2007
23 posts
Gave thanks: 4
Thanked 3 times
An ID is for single use e.g preferablly 1 element on a page.
While a class, is designed for multiple elements on a page with the same class, I hope this clarifies a little where you should use what :p
__________________
Domain: braincracking.net; Server: sh127; Usage:
braincracking is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
This user thanks braincracking for this great post!
-RanZ- (September 21st, 2007)
Old September 21st, 2007, 4:35 PM   #3 (permalink)
H
after g, before i
Resident.
 
H's Avatar
 
Joined in Jul 2004
Hosted on Gojira
8,023 posts
Gave thanks: 48
Thanked 129 times
braincracking kinda clarified the usage.

Generally and ID is used as an identifier... you only have one header. It must be unique. I try to only use ID's on page structure elements.

Classes are interesting. They're generally overused (I hate people who put class="blah" on every list item within a list... put it on the damn list element!), but still very necessary and useful.

In the case you provide of your div containing the main content, I'd recommend you use an ID.
H is online now  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
This user thanks H for this great post!
-RanZ- (September 21st, 2007)
Old September 21st, 2007, 4:41 PM   #4 (permalink)
Google Bot
Super #1
 
-RanZ-'s Avatar
 
Joined in Jun 2004
Lives in Minnesota
Hosted on Pass33/Pass70
1,036 posts
Gave thanks: 19
Thanked 10 times
ok, so use IDs on the main elements that do not change and class on things like centering text or text color... something that can be re-used throughout the page/site

thanks!
__________________
DK Web Solutions Pass70 & Pass33
-RanZ- is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old September 24th, 2007, 12:00 AM   #5 (permalink)
Race Surpass
Super #1
 
MarkRH's Avatar
 
Joined in Jul 2006
Lives in Oklahoma City, OK
Hosted on sh102
1,218 posts
Gave thanks: 18
Thanked 86 times
I use ID's for container elements or major sections/blocks of a page (so, typically only with DIVs). I then use classes to either apply to any element of a given type on a page or just for items within a containing ID. Say, I only want anchor tags in my sidemenu to be a certain color, which won't change the color of anchor tags outside of that section:

Code:
#sidemenu a {
	text-decoration: none;
	color : blue;
	font-weight: bold;
}
MarkRH is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On