Problem facing in div id and div class

Hi Folks,

Well I want to make website using CSS (Tableless). I am confuse in div id and div class that when to use div id and when to use div class.

Also inside div id we have to put div class ? Also by which css rule two elements block be besides to each other and what to do when we have to put second element below that first element. Please clear me out from this soon.

Thanks for your time, consideration, and forthcoming response.

 

div id is used when u need to define a single usage like header comes only once on a page

div class is used to create multiple elements on same page like a blue box,there can be many blue boxes on a page


Regards

Alex

 

I am not totally clear. Suppose i have make div id for header and inside that i have make div class.
Now suppose I want to make left navigation and beside there will be content part.
So after completing header, I have to make first div id and then inside i make div class (left navigation) and div class (content) or we dont need to make div id, directly we can start from div class.

 

There is no rule to where you can use a class or id. You can have class inside a ID div or the other way around.

Just remember that you cannot use a div twice with the same ID.

 

Also be aware that class and ID can go on ANY tag and not just DIV, but not every element NEEDS a div, class or ID.

You'll often see nonsense like:

<div id="content">
	<p class="contentParagraph">Some text</p>
	<p class="contentParagraph">Some text</p>
	<p class="contentParagraph">Some text</p>
	<p class="contentParagraph">Some text</p>
	<p class="contentParagraph">Some text</p>
	<p class="contentParagraph">Some text</p>
</div>

Code (markup):

If they're all going to get the same class, you don't need a class on them to target them!

<div id="content">
	<p>Some text</p>
	<p>Some text</p>
	<p>Some text</p>
	<p>Some text</p>
	<p>Some text</p>
	<p>Some text</p>
</div>

Code (markup):

Is functionally identical in 99% of cases. In your CSS "#content p" would point at the exact same thing in EITHER html as .contentParagraph is in the first one.

You also have the problem of throwing classes at things that don't need it, or using div's for things they shouldn't...

<div class="heading"> for example... Heading? Don't we already HAVE tags called 'headings'? Or the classic:

<div id="nav">
	<ul id="navMenu">
		<li class="menuItem"><a href="/" class="menuAnchor">Home</a></li>
		<li class="menuItem"><a href="/faq" class="menuAnchor">FAQ</a></li>
		<li class="menuItem"><a href="/forums" class="menuAnchor">Forums</a></li>
	</ul>
</div>

Code (markup):

Every time I see code like that I want to beat somebody with a wet trout. Not only does this suffer from a bunch of classes and ID's that don't do anything - see that outer div? in most layouts that's also unnecessary as a UL is a block level element that can receive all the same styling as a DIV... as such in most cases there is NO reason for that to be more than:

<ul id="mainMenu">
	<li><a href="/">Home</a></li>
	<li><a href="/faq">FAQ</a></li>
	<li><a href="/forums">Forums</a></li>
</ul>

Code (markup):

On the majority of websites that can be made functionally identical. Anything that would have gone on EITHER #nav or #navMenu would go on #mainMenu, .menuItem in the original is simply "#mainMenu li" and .menuAnchor becomes "#mainMenu a"

DIV means division - it's primary role is to divide up sets of tags into groups. If you are only putting a single block-level child into it, ask yourself "Am I using this to apply styling I couldn't just put on the child element?" - there are legitimate reasons to wrap an extra div for styling - like when you want two different backgrounds layered atop each-other, but in most cases it serves no purpose apart from bloating out the markup.

In that same way, classes and ID's should only be used when a tag is receiving different styling than it's siblings. Take that paragraph example above; if they are all receiving the same styling and are all children of #content, don't waste classes on them.

It's also why 'presentational classnames' are such a pig. You'll often see people doing nonsense like <div class="right font12px bold colorRed"> - COMPLETELY DEFEATING THE POINT of using CSS in the first place... The point being to say what things ARE in the markup not how they are going to appear. You decide you want that div to no longer be colorRed or want it to float left, you end up having to change what classes it's assigned in the markup - at that point you might as well go back to using HTML 3.2 - this also lists among my complaints about nonsense like clearing DIV and .clearfix classes, not only are they unnecessary 99.99% of the time, they involve putting stuff in the markup that doesn't belong in the markup.

That's why semantic markup goes hand-in-hand with CSS - it gives separation of presentation from content. Your HTML tags, classes and ID's should say what things are, NOT how they are going to appear. If it's a heading, put it in a heading tag - if it's a list, put it in a list, If it's a paragraph, put it in a paragraph tag... if it's not a paragraph and is a image or sentence fragment, don't put it in a tag that gives a different meaning (like paragraph). Use the tags for what they MEAN, NOT their default appearance. Appearance? That's CSS' job!