Div Id Or Div Class?

Moloney · November 29, 2012

Hi all,

I am just after watching the video series

CSS Layouts: Generic Text Editor (20 Videos):

In this Santo uses something like <div class="left"> and <div class="right"> to float 2 nested divs horizontally inside the <div id="main">.

This is fine and I fully understand this and I also understand that classes will apply not just to changes in this section but to

sections the class is applied.

So my question is, is it equally good to use the <div id="Left"> and <div id="right"> to float two nested div paragraphs.

Also, same question if dividing up the footer into 4 paragraphs --- is it equally good to divide here using div ids as div classes?

I don't want to start with bad habits.

:-)

Edited November 29, 2012 by Stephenius

Andrea · November 29, 2012

The difference between classes and IDs is that classes can be used multiple times on one page, whereas an ID can only be used once. So usually, designers use IDs for unique page elements like header, footer, navigation, and classes for anything that will show up more ofter: paragraph, H-tags, images, etc.

So in your example, using ID to float things right and left is most likely not a good choice, as you can easily have more than one thing floating right or left on one page.

That should also answer your question about your 4 footer divisions.

Let me know if not.

LSW · November 29, 2012

Let me ad to Andrea's answer:

ID's can also be used as targets for such things as "Back to top" sort of internal links or in a FAQ type situation you could link the question above with the answer below using an ID for example.

Another form for larger containers would be to link data, you would specify data being put in a table or DIV based on an ID.

So 90% of the time you would normally use Class for placement and/or formatting like your left and right. ID would be used when you need a more specific setting as Andrea mentions, it can only appear once on a page. I rarely use ID in pages unless it is a target for a link or a target to specify what data would be inserted there.

Moloney · November 29, 2012

I appreciate you replies.

So what I conclude is that it is better to use classes because they reduce the workload and are essentially simpler way of

doing it for long pages.

But if complexities are required such as in the case of an internal link -- then maybe an id is appropriate.

Just that my beginner pages are so simple it was hard to see the difference -- I imagine this difference becomes more noticeable for

pages with a lot of content.

THNX

Edited November 29, 2012 by Stephenius

Andrea · November 29, 2012

Classes aren't better, they just have a different purpose.

It's not wrong to always just use classes (but you can't just use IDs - unless each only occurs once), but IDs also have a specific purpose.

Bookmarks are created by using IDs - classes won't work for that.

LSW · November 30, 2012

You can use Class and ID together as well, it is not a one or the other. The cl;ass would format the Div and the ID would be the unique identifier for anchors or data.

newseed · December 1, 2012

To put the icing on the cake, you can indeed have a id and class together as suggested earlier like this:

But you can also have multiple classes within the same tag but not so for id.

You can set the css seperately or like this:

#main.content.green.blue {properties: values;}

Moloney · December 1, 2012

Hi Eddie,

Yes, you know I realized this by the time I got to the last page of my practice web page and I have already implemented exactly what you mention there.

I had to create a table but I hate the way the html comes out so I modified it (or butchered it -- depending on what you think of it) so that it would look

better but soon I realized I was employing 3 classes within one tag and writing a whole load of css. It wasn't so difficult but it was rather time-consuming.

But I suppose I could just copy and paste this the next time I want to use a table like this.

Here is the table:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

.table { padding-left:180px;

font-size:12px;

padding-top:20px;

padding-bottom:20px;

}

.column1 {

padding-right:10px;

padding-left:10px;

border-right-color:#BEEBB4;

border-right-width:2px;

border-right-style:solid;

}

.column2 {

padding-right:10px;

padding-left:10px;

border-right-color:#BEEBB4;

border-right-width:2px;

border-right-style:solid;

}

.column3 {

padding-right:10px;

padding-left:10px;

}

.bold1 {

font-size:18px;

font-weight:bold;

}

.rowborder {

border-bottom-color:#BEEBB4;

border-bottom-width:2px;

border-bottom-style:solid;

padding-bottom:5px;

padding-top:5px;

}

</style>

</head>

<body>

<tr>

<td class="column1 bold1 rowborder" >Part</td><td class="column2 bold1 rowborder"> Athlete 1 </td><td class="column3 bold1 rowborder"> Athlete 2 </td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td class="column1 bold1 rowborder" >Cycle</td><td class="column2 rowborder">41:23 (121)</td><td class="column3 rowborder">39:37 (86)</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td class="column1 bold1 finalrow" >Final Result</td><td class="column2 finalrow">1:24:47 (109) </td><td class="column3 finalrow">1:21:16 (73)</td>

</tr>

</table>

</body>

</html>

THNX,

Edited December 1, 2012 by Stephenius

Sign In

Div Id Or Div Class?

Recommended Posts

Moloney

Link to comment

Share on other sites

Andrea

Link to comment

Share on other sites

LSW

Link to comment

Share on other sites

Moloney

Link to comment

Share on other sites

Andrea

Link to comment

Share on other sites

LSW

Link to comment

Share on other sites

newseed

Link to comment

Share on other sites

Moloney

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Store

Support