hi guys

 

just a quick question.

 

I wondering when should i use div's and when should i use classes, cause at the minute when im coding i always find myself using div's for everything, although i know the difference between the two(i think i do....lol) i never know when the correct time is to use them, when i look at other peoples code and see them using classes i can never work out why.

 

if anyone could help me that would be brilliant.

 

thanks guys

You are getting confused.

A div is a division element and all elements can be given either an id or a class for styling in CSS (cascading style sheets).

 

So you might have CSS:-

#type1 { color: red; } /* an id */
.type2 { text-decoration: underline; } /* a class*/

and HTML markup:-

<div id="type1">
<div class="type2"><p>Text</p></div> <!--either like this-->
<div><p class="type2">Text</p></div> <!--or like this-->
</div>

 

An id should only be used once on a page but a class can be used many times and on several elements if required.

There are 2 types of div; ID and Class.

 

 

Generally speaking,

 

' you use 'div id="" ' when there is only one instance of it on a page.

 

' you use 'div class="" ' when there is more than one instance of it on a page.

 

 

It still works if you mix the two up, but its good practice (plus it validates) to follow this rule.

 

 

Kyle

There are 2 types of div; ID and Class.

 

 

Generally speaking,

 

' you use 'div id="" ' when there is only one instance of it on a page.

 

' you use 'div class="" ' when there is more than one instance of it on a page.

 

 

It still works if you mix the two up, but its good practice (plus it validates) to follow this rule.

 

 

Kyle

 

There are two types of div? Weird thing to say - class and id can apply to any element, not just divs.

thanks for the replies guys

 

but im still not understanding it properly(it does take a while for me to grasp some things.......lol)

 

if at all possible could you have a look at this code Speedsters and higlight the areas where i should use id and where i should use class please,

 

much appreciated

 

Luke

Consider this code:-

<div id="footer">
       	 <div id="menu3"<ul> <!--note that the div is not closed; it should be <div id="menu3"> -->
           		<li><a href="#">Home</a></li>
               	<li><a href="#">Server</a></li>
               	<li><a href="#">Downloads</a></li>
               	<li><a href="#">Forum</a></li>

               	<li><a href="#">Ultrastats</a></li>
           	</ul>
           </div>

There's only one footer on the page, so using id="footer" is correct. There's only one menu3 on the page, so using id="menu3" is correct.

 

If you wanted two or three of the li tags to be a different color, you would create a class

.red { color: red; }

 

and apply it to two or three of the li tags:-

<li class="red"><a href="#">Server</a></li>
<li class="red"><a href="#">Downloads</a></li>

Thanks very much Wickham,

 

I think its just clicked....lol think i was having a blonde moment(no offence to any blonde's out there)

 

but its much appreciated again Wickham

There are two types of div? Weird thing to say - class and id can apply to any element, not just divs.

 

lol, maybe I wasn't very clear. The poster was asking about when he should use divs, and when he should use classes. I was trying to explain that divs and classes aren't 2 seperate entities, but that a div can have either an ID or a class.

 

 

 

Kyle

Quick example then

 

The top, bigger box with the F1 image, for me that would be an ID. E.g.

 

<div id="featured_item"></div>

 

The bottom three boxesuse the same layout, but different images/text - so for me this wwould be a class E.g.

 

<div class="featured_lower">
 <a href="#"><img src="someimage.png" alt="yada yada" /></a>
 <p>My Text here</p>
</div>

<div class="featured_lower">
 <a href="#"><img src="someimage.png" alt="yada yada" /></a>
 <p>My Text here</p>
</div>

<div class="featured_lower">
 <a href="#"><img src="someimage.png" alt="yada yada" /></a>
 <p>My Text here</p>
</div>

 

At the top and bottom you'd have ids for your header and footer divs, as you only have one header aND ONE FOOTER PER PAGE

E.g.

 

<div id="header"></div>

 

and

 

<div id="footer"></div>

 

You'd also have a wrapper/container div to center the content. Again, this would be an ID as you only have one wrapper per page in this example E.g.

 

<div id="wrapper"></div>

 

 

can i ask then what would my css would be for the featured lower classes cause i thought that you used a class if you wanted multiple areas to have the same styling, but the featured section your referring too, their in differnt positions across the page. i know you dont have my css file but any chance of a rough guess.....lol

 

i hope all that makes sense

Thanks for that Rallport its much appreciated