PDA

View Full Version : Div --- ID // Class


africano
08-10-2008, 06:39 PM
Ive been looking at a lot of websites and their source code to try and figure out how they are sturctured. Ive seen a lot of sites that have lots of small boxes that hold information. Small boxes with a title and info. I think this small boxes in the page are made using Div Class. And I just wanted to know what the difference is between a Div Class and a Div ID. As I understand it Div ID should be used for the main parts like Header, footer, content, etc. And the Div Class can be used for the rest, like for example the small boxes.

Are div class used in the same way, I mea declaring them in the html and then styling them with css?

Here some info Ive been reading; http://creativebits.org/webdev/div_id_vs_div_class
And here is a site that uses the small info boxes:
http://www.petdoctors.co.uk/

edbr
08-11-2008, 01:15 AM
the major difference between div id and div class is that although these can be identical in styling. classes can be applied more than once in a page

africano
08-12-2008, 02:36 PM
Ok, but if I wanted to make a design with small info boxes, would i use div id or div class??

domedia
08-12-2008, 05:10 PM
Like Ed said, that depends on if the style is going to be repeated or not. For unique boxes, use ID, for several thumbnails for example with the same border, use class.

Corrosive
08-13-2008, 07:28 AM
Like Ed said, that depends on if the style is going to be repeated or not. For unique boxes, use ID, for several thumbnails for example with the same border, use class.


I'd use IDs for this. Classes are useful for elements that you know will be reapeated through a site and constant in appearance. If you want control over styling of your boxes individually than use IDs.

Rob_Che
08-15-2008, 03:54 PM
Corrosive;
Surely if the thumbnails were all identical and identically spaced it would be extra work to code each box, no?

If you had columns of small boxes I'd use a different class for each column probably... maybe.

For example; if you were going to recreate this page (not dynamic) you would use the same class for each post box and add content appropriately surely ?

Corrosive
08-15-2008, 04:09 PM
Corrosive;
Surely if the thumbnails were all identical and identically spaced it would be extra work to code each box, no?

If you had columns of small boxes I'd use a different class for each column probably... maybe.

For example; if you were going to recreate this page (not dynamic) you would use the same class for each post box and add content appropriately surely ?

Hey Rob

I agree, if Africano were wanting to arrange thumbnails then, yes. In fact I'd even go so far as sticking thumbnails in a...

TABLE (as DJ has now taken to phrasing it)

If you look at the 'petdoctors' website he gave us the link for (he, he makes me think of 'Heli-vets') he is talking about info boxes and I'd use IDs because you'd want max control over each one. They are different widths, heights, backgrounds etc. Classes would be too restrictive IMHO.

davidj
08-15-2008, 04:12 PM
i think we should rename them to

Altar

as they should be worshipped

domedia
08-15-2008, 04:20 PM
Those boxes look to have the exact same style..
CSS class look prefect for this. We're talking about the boxes with blue bg headers, right?

OT: Even a pet doctor in Lewes.. I have some fond memories from there..

Corrosive
08-15-2008, 04:34 PM
Those boxes look to have the exact same style..
CSS class look prefect for this. We're talking about the boxes with blue bg headers, right?

OT: Even a pet doctor in Lewes.. I have some fond memories from there..

Must just be the way my brain works. I agree that classes would be fine for the expanding backgrounds of the box content and the footers of each box as well but I'd ID each header just so as I know which one it is. Us west country (UK) folk get easily confused. Do I have 'IDitis'?

BTW, 'Pet Doctors...it's the vet your pet would choose'...Well, my cats don't pay the bill, or drive. They'll go where I take them.

Corrosive
08-15-2008, 04:59 PM
i think we should rename them to

Altar

as they should be worshipped

You can be god of tables if you like.

domedia
08-15-2008, 05:01 PM
.. but I'd ID each header just so as I know which one it is. Us west country (UK) folk get easily confused. Do I have 'IDitis'? .
Possibly :-) The ID/Class is not there for you to be able to separate them conceptually in your head, it's there for CSS and JS.

If certain element share a style.. let's say header style, font, color, background etc, you would want a class attached so you could change all of them in one CSS rule. You could attach an ID as well if you needed one of them to have a specific separate style. Or add specific style based on where it is. For example:

.box {
background: blue;
font-weight: bold;
color: orange;
}

#leftcolumn .box {margin: 10px;}
#rightcolumn .box {margin: 20px;}

Corrosive
08-15-2008, 05:10 PM
Are you saying I can attach a class and an ID to a div?

domedia
08-15-2008, 05:20 PM
Are you saying I can attach a class and an ID to a div?Absolutely, they're different attributes. :) And adding several classes could be beneficial in many occasions as well.

<div id="photoBox" class="infoBox formBox">All your base are belong to us</div>

Corrosive
08-15-2008, 05:37 PM
Absolutely, they're different attributes. :) And adding several classes could be beneficial in many occasions as well.

<div id="photoBox" class="infoBox formBox">All your base are belong to us</div>

I was just about to ask how you make these decisions when you sit down to build a site but I guess that's your eight years experience against my eight months :)

Thanks Ove I'm learning a lot this week...I just hope there's room in my brain for it all. :(

domedia
08-15-2008, 05:46 PM
Np, hit me on MSN of there's anything urgent coming up!

d a v e
08-15-2008, 06:38 PM
dom - i don't think IE6 supports multiple classes though does it? (no surprises there)
e.g. http://css-discuss.incutio.com/?page=MultipleClasses

domedia
08-15-2008, 09:18 PM
dom - i don't think IE6 supports multiple classes though does it?It does support it. Read the link you posted, it talks about adding several classes in the CSS rule, not in the HTML attribute. :) Looking at some of the browsers listed, my guess is that the page is quite old..

Either way, the non-problematic way of defining a style for several classes in your CSS is

.class1, .class2, .class3 {margin: 1px;}

d a v e
08-16-2008, 04:43 AM
oops sorry - jumped the gun a bit there ;)