Assigning an ID *and* a CLASS to a DIV. Having issues. (A little long)

[Viken Karaguesian]

Hello all,

I'll start with this question: Can I assign an ID *and* a CLASS to a DIV? I
am under the impression that you can. I'm having a problem that I can't seem
to figure out.

Some background info: I'm an amateur who makes sites for fun. I'm creating a
website for my son's small school. It's a table-less design. I'm basically
using a Container DIV with a Content DIV and a right-floating Sidebar DIV.

I have a separate page for each classroom (Kindergarten - Grade 5). All are
identical except for the Content DIV (container and sidebar are the same). I
want each Content DIV to have a different background image at the top. I
have assigned ID's to the DIVs (<div id="container"> , <div id="content">,
etc). I have also assigned different classes to the Content DIV to reflect
each image and the padding necessary to accomodate it. To keep it short I'll
include an excerpt from the relevant section of my CSS, instead of the whole
thing:

#content {
margin-right: 200px;
padding: 0 10px 0 10px;
}

#content.kinder garten {
background: url('images/eng_k_logo.gif' ) no-repeat top center;
padding-top: 75px;
}

#content.gr1 {
background: url('images/eng_gr1_logo.gi f') no-repeat top center;
padding-top: 95px;
}

#content.gr2 {
background: url('images/eng_gr2_logo.gi f') no-repeat top center;
padding-top: 55px;
}

My HTML looks like this:

<div id="content" class="kinderga rten">

So far, so good: When I open the Kindergarten page, I see the background
image and padding. However, NONE of the other class pages (Grade 1 - 5) have
the background image OR padding. It's as if the CSS wasn't even there. So,
for an experiment, I removed the "#content.kinde rgarten" class. This time
the Grade 1 background image and padding appeared but, again, none of the
others. This happens in IE, Firefox, and Opera.

So I guess my questions are:

1. Any ideas as to what's causing this? :>)
2. Is the "#content.kinde rgarten" format valid? It seems so, since the
Kindergarten class image appears. Also, the CSS file validates at the W3C
website.
3. I assume that the above statement means "The DIV named "content" (and
only that ID) will get the class "kindergart en"? Other DIV's cannot be
assigned this class.

I've tried different arrangements of the CSS, like div#content.kin dergarten,
etc. but none of it seems to work. I've even tried changing the HTML so the
CLASS comes before the ID, but that didn't work either.

I'm stumped. Can anyone shed some light on this? Any suggestions would be
greatly appeciated! A BIG Thank You in advance!

--
Viken K.
http://home.comcast.net/~vikenk
http://www.sayatnova.com

[Els]

Viken Karaguesian wrote:

Hello all,
Hello :-)
I'll start with this question: Can I assign an ID *and* a CLASS to a DIV? I
am under the impression that you can. I'm having a problem that I can't seem
to figure out.
Yes you can assign both class and id to one and the same element.
Some background info: I'm an amateur who makes sites for fun. I'm creating a
website for my son's small school. It's a table-less design. I'm basically
using a Container DIV with a Content DIV and a right-floating Sidebar DIV.

I have a separate page for each classroom (Kindergarten - Grade 5). All are
identical except for the Content DIV (container and sidebar are the same). I
want each Content DIV to have a different background image at the top. I
have assigned ID's to the DIVs (<div id="container"> , <div id="content">,
etc). I have also assigned different classes to the Content DIV to reflect
each image and the padding necessary to accomodate it. To keep it short I'll
include an excerpt from the relevant section of my CSS, instead of the whole
thing:

#content {
margin-right: 200px;
padding: 0 10px 0 10px;
}

#content.kinder garten {
background: url('images/eng_k_logo.gif' ) no-repeat top center;
padding-top: 75px;
}

#content.gr1 {
background: url('images/eng_gr1_logo.gi f') no-repeat top center;
padding-top: 95px;
}

#content.gr2 {
background: url('images/eng_gr2_logo.gi f') no-repeat top center;
padding-top: 55px;
}

My HTML looks like this:

<div id="content" class="kinderga rten">

So far, so good: When I open the Kindergarten page, I see the background
image and padding. However, NONE of the other class pages (Grade 1 - 5) have
the background image OR padding. It's as if the CSS wasn't even there. So,
for an experiment, I removed the "#content.kinde rgarten" class. This time
the Grade 1 background image and padding appeared but, again, none of the
others. This happens in IE, Firefox, and Opera.

So I guess my questions are:

1. Any ideas as to what's causing this? :>)
Not really...
Do you have an online example?
2. Is the "#content.kinde rgarten" format valid? It seems so, since the
Kindergarten class image appears. Also, the CSS file validates at the W3C
website.
Yup, valid.
3. I assume that the above statement means "The DIV named "content" (and
only that ID) will get the class "kindergart en"? Other DIV's cannot be
assigned this class.
I think you mean other DIVs won't take on the style, and that's
correct. You can still assign the same class to other elements though,
you'll just have to add styles to the stylesheet for those other
elements.
I've tried different arrangements of the CSS, like div#content.kin dergarten,
etc. but none of it seems to work. I've even tried changing the HTML so the
CLASS comes before the ID, but that didn't work either.

I'm stumped. Can anyone shed some light on this? Any suggestions would be
greatly appeciated! A BIG Thank You in advance!

I've never even tried to do it the way you described above. What I do
myself in such situations, is give each classroom their own id in the
body: <body id="kindergarte n">, <body id="gr1">...., and then code
thus:

#kindergarten #content {
background: url('images/eng_k_logo.gif' ) no-repeat top center;
padding-top: 75px;
}

#gr1 #content {
background: url('images/eng_gr1_logo.gi f') no-repeat top center;
padding-top: 95px;
}

#gr2 #content {
background: url('images/eng_gr2_logo.gi f') no-repeat top center;
padding-top: 55px;
}

However, the way you coded it, should work too, and the fact that only
one style is picked up and that one being the top one, lets me believe
there may be a weird character in your CSS right above or below that
first style, which makes the rest of the styles invisible for the
browser (try typing a brand new set of rules, without copying
anything, not even a blank line), or maybe some similar error on the
HTML page.

If you have a URL to the problem, that would help greatly to help you
discover what is causing it.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Duran Duran - Notorious

[Viken Karaguesian]

> Not really...

Do you have an online example?
I just uploaded it for you to view. Go to http://www.ssaes.org/test_site_02
From the main menu, go to"Elementary School" then "English Curriculum"
(you'll have to enable JavaScript) and you'll see what I'm talking about.
Remember, it's unfinished. :>) Much of the formatting hasn't been completed.
Incidentally, if you go to www.ssaes.org, you'll see the site I'm replacing.
It's really poorly written. I'm not an expert, but I can tell that the code
is just horrible. If you go to www.ssaes.org/test_site, you'll see my first
draft.

3. I assume that the above statement means "The DIV named "content" (and
only that ID) will get the class "kindergart en"? Other DIV's cannot be
assigned this class.

I think you mean other DIVs won't take on the style, and that's
correct. You can still assign the same class to other elements though,
you'll just have to add styles to the stylesheet for those other
elements.

I can still assign that class to other elements? I thought the
#content.kinder garten statement meant that only elements with the ID
"kindergart en" could have that style, so if I tried to assign
class="kinderga rten" to another div that didn't have the correct ID, it
wouldn't work.

I've never even tried to do it the way you described above. What I do
myself in such situations, is give each classroom their own id in the
body: <body id="kindergarte n">, <body id="gr1">...., and then code
thus:

#kindergarten #content {
background: url('images/eng_k_logo.gif' ) no-repeat top center;
padding-top: 75px;
}

#gr1 #content {
background: url('images/eng_gr1_logo.gi f') no-repeat top center;
padding-top: 95px;
}

#gr2 #content {
background: url('images/eng_gr2_logo.gi f') no-repeat top center;
padding-top: 55px;
}

However, the way you coded it, should work too, and the fact that only
one style is picked up and that one being the top one, lets me believe
there may be a weird character in your CSS right above or below that
first style, which makes the rest of the styles invisible for the
browser (try typing a brand new set of rules, without copying
anything, not even a blank line), or maybe some similar error on the
HTML page.

What you suggested works well, but I'm still curious as to why it won't work
the way I coded it. Thanks for replying!

--
Viken K.
http://home.comcast.net/~vikenk
http://www.sayatnova.com

[Viken Karaguesian]

>>> 3. I assume that the above statement means "The DIV named "content" (and

only that ID) will get the class "kindergart en"? Other DIV's cannot be
assigned this class.

I think you mean other DIVs won't take on the style, and that's
correct. You can still assign the same class to other elements though,
you'll just have to add styles to the stylesheet for those other
elements.

I can still assign that class to other elements? I thought the
#content.kinder garten statement meant that only elements with the ID
"kindergart en" could have that style, so if I tried to assign
class="kinderga rten" to another div that didn't have the correct ID, it
wouldn't work.

NEVER MIND! I just re-read what you wrote (above) and it makes more sense
now. I should be careful not to use the words "class" and "style"
interchangeably :>)

I've never even tried to do it the way you described above. What I do
myself in such situations, is give each classroom their own id in the
body: <body id="kindergarte n">, <body id="gr1">...., and then code
thus:

As I mentioned before, that worked great when I tried it. I'm still curious
why it won't work the way I coded it though.

Incidentally, the reason I'm doing this is to keep the Content div from
falling under the Sidebar div when the window is resized smaller. If I have
an image in there with a fixed width (like in my first draft,
www.ssaes.org/test_site/eng_k.htm) the Content Div falls under the Sidebar
div when the window is made smaller. Making the image a background of the
div means that the window can be made much smaller and still retain its
design without collapsing (to a certain extent).

--
Viken K.
http://home.comcast.net/~vikenk
http://www.sayatnova.com

[Els]

Viken Karaguesian wrote:

Not really...
Do you have an online example?
I just uploaded it for you to view. Go to http://www.ssaes.org/test_site_02
From the main menu, go to"Elementary School" then "English Curriculum"
(you'll have to enable JavaScript) and you'll see what I'm talking about.
Remember, it's unfinished. :>) Much of the formatting hasn't been completed.

On test_site_02 I see a different image for every grade, but the
padding doesn't change.
Incidentally, if you go to www.ssaes.org, you'll see the site I'm replacing.
It's really poorly written. I'm not an expert, but I can tell that the code
is just horrible. If you go to www.ssaes.org/test_site, you'll see my first
draft.
On test_site I see the images change and the paddings with them, the
way I would think you're planning it...

3. I assume that the above statement means "The DIV named "content" (and
only that ID) will get the class "kindergart en"? Other DIV's cannot be
assigned this class.

I think you mean other DIVs won't take on the style, and that's
correct. You can still assign the same class to other elements though,
you'll just have to add styles to the stylesheet for those other
elements.

I can still assign that class to other elements? I thought the
#content.kinder garten statement meant that only elements with the ID
"kindergart en" could have that style, so if I tried to assign
class="kinderga rten" to another div that didn't have the correct ID, it
wouldn't work.

If you have in your HTML:
<div id="content" class="kinderga rten">bla bla</div>
<h2 class="kinderga rten">Bla Title</h2>

You can use CSS like:

#content.kinder garten{padding-top:100px;backg round:url(image .jpg)
no-repeat left top;}
h2.kindergarten {font-size:250%;}
..kindergarten{ color:green;}

Should result in the #content having a background image and a top
padding and green text, and the h2 being green and in a large font.
What you suggested works well, but I'm still curious as to why it won't work
the way I coded it.
Me too - do you have a URL which shows the non-working version? :-)
Thanks for replying!

You're welcome :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Talking Heads - Road To Nowhere

[Viken Karaguesian]

> On test_site_02 I see a different image for every grade, but the

padding doesn't change.
Really? I only see the header image for the Kindergarten class. No other
images for any other grades...
On test_site I see the images change and the paddings with them, the
way I would think you're planning it...

Correct. However, those are not background images. Those are images that are
placed in the HTML with the <img> tag. If you resize the window smaller,
you'll see that the Content Div moves under the sidebar when the div comes
to the image. I've designed the site around 1024x768, but I'd like it to be
as viewable as possible at lower resolutions.

BTW, which browser are you using?

OK. I just tried it out on FF and it works?!?! But it still won't work in
IE. Yesterday I couldn't get it to work in IE, FF or Opera!

--
Viken K.
http://home.comcast.net/~vikenk
http://www.sayatnova.com

[Els]

Viken Karaguesian wrote:

On test_site_02 I see a different image for every grade, but the
padding doesn't change.
Really? I only see the header image for the Kindergarten class. No other
images for any other grades...

Really :-)

On test_site I see the images change and the paddings with them, the
way I would think you're planning it...

Correct. However, those are not background images. Those are images that are
placed in the HTML with the <img> tag.

Ah, that explains the perfect padding ;-)
BTW, which browser are you using?
Opera.
But it works in Firefox too.
Does not work in though, but I have JavaScript disabled in IE.
OK. I just tried it out on FF and it works?!?! But it still won't work in
IE. Yesterday I couldn't get it to work in IE, FF or Opera!

Okay, I've taken your page, stripped it down to the bare minimum
(leaving a small valid page), and for IE goes: If there is any
#id.class {style} before another #id.class {style} in which the #id is
identical but the class isn't, the styles for the second and
subsequent selectors aren't used.

HTML:
<div id="content" class="gr2">
<p>bla bla</p>
</div>

CSS:
Example 1:

#content.gr1{
font-size:100%;
}
#content.gr2 {
background: url('images/eng_gr2_logo.gi f') no-repeat top center;
padding-top: 75px;
}

Does not show image. By only using 'font-size' for the first style, I
eliminated the chance that it was a problem with overriding styles.

Example 2:
#content.gr2{
font-size:100%;
}
#content.gr2 {
background: url('images/eng_gr2_logo.gi f') no-repeat top center;
padding-top: 75px;
}

Shows image. Both ID and class are identical for both stylesets.

Example 3:
#content.gr1 p{
font-size:100%;
}
#content.gr2 {
background: url('images/eng_gr2_logo.gi f') no-repeat top center;
padding-top: 75px;
}

Works too, because the first style isn't styling the #content.

There's probably something in the specs that got interpreted
differently by the makers of IE, and I would just refrain from
combining id and class that way.

Just
div.kindergarte n{}
div.gr1{}
div.gr2{}
etc, would work fine as long as the styles aren't trying to override
other general styles for #content, so it won't help you with the
padding-top...

You should really use the validator btw - the site not being finished
isn't really an excuse to nest an <h1> inside an <a> element or to
have an entire <div> in the <head> of your page...

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Christina Aguilera - Stripped (Part I)

[Viken Karaguesian]

> Okay, I've taken your page, stripped it down to the bare minimum

(leaving a small valid page), and for IE goes: If there is any
#id.class {style} before another #id.class {style} in which the #id is
identical but the class isn't, the styles for the second and
subsequent selectors aren't used.

HTML:
<div id="content" class="gr2">
<p>bla bla</p>
</div>

CSS:
Example 1:

#content.gr1{
font-size:100%;
}
#content.gr2 {
background: url('images/eng_gr2_logo.gi f') no-repeat top center;
padding-top: 75px;
}

Does not show image. By only using 'font-size' for the first style, I
eliminated the chance that it was a problem with overriding styles.

Example 2:
#content.gr2{
font-size:100%;
}
#content.gr2 {
background: url('images/eng_gr2_logo.gi f') no-repeat top center;
padding-top: 75px;
}

Shows image. Both ID and class are identical for both stylesets.

Example 3:
#content.gr1 p{
font-size:100%;
}
#content.gr2 {
background: url('images/eng_gr2_logo.gi f') no-repeat top center;
padding-top: 75px;
}

Works too, because the first style isn't styling the #content
There's probably something in the specs that got interpreted
differently by the makers of IE, and I would just refrain from
combining id and class that way.
I follow what you're saying and the steps you've taken. I was suspicious of
IE maybe ignoring the multiple styles, but I wanted to make sure my CSS was
OK. I'll probably implement your earlier suggestion of using an ID attribute
for the body.
Just
div.kindergarte n{}
div.gr1{}
div.gr2{}
etc, would work fine as long as the styles aren't trying to override
other general styles for #content, so it won't help you with the
padding-top...
It doesn't help with the padding. That's one thing I tried last night. I
just made a div.gr1 {} style - the image showed up, but not the padding.
You should really use the validator btw - the site not being finished
isn't really an excuse to nest an <h1> inside an <a> element or to
have an entire <div> in the <head> of your page...

I know about those issues. Once I get the general layout and content
finished, I then go back and validate each page and fix any errors. The
<div> in the head of the page is code from Milonic, the place I got the menu
from. I assume they provide the <div> so I can move it into the page and
credit them. That will all be done when it's finished.

I thank you for your great help!

P.S. I checked out your site and found that you are into photography and
have a Minolta. What a coincidence, so do I! :>) Have you checked out the
Minolta group on Yahoo Groups (http://groups.yahoo.com/group/Minolta/)? It's
a great Minolta and photography community. Maybe we'll see you there one
day.

--
Viken K.
http://home.comcast.net/~vikenk
http://www.sayatnova.com

[Els]

Viken Karaguesian wrote:

There's probably something in the specs that got interpreted
differently by the makers of IE, and I would just refrain from
combining id and class that way.
I follow what you're saying and the steps you've taken. I was suspicious of
IE maybe ignoring the multiple styles, but I wanted to make sure my CSS was
OK. I'll probably implement your earlier suggestion of using an ID attribute
for the body.

Just
div.kindergarte n{}
div.gr1{}
div.gr2{}
etc, would work fine as long as the styles aren't trying to override
other general styles for #content, so it won't help you with the
padding-top...

It doesn't help with the padding. That's one thing I tried last night. I
just made a div.gr1 {} style - the image showed up, but not the padding.

It would work for the padding too, if you wouldn't first set the
general padding on #content.

You should really use the validator btw - the site not being finished
isn't really an excuse to nest an <h1> inside an <a> element or to
have an entire <div> in the <head> of your page...

I know about those issues. Once I get the general layout and content
finished, I then go back and validate each page and fix any errors.

Best be aware that the visual layout may change after validating, as
some effects may be due to errors, without you knowing it.
I thank you for your great help!
You're welcome.
P.S. I checked out your site and found that you are into photography and
have a Minolta. What a coincidence, so do I! :>) Have you checked out the
Minolta group on Yahoo Groups (http://groups.yahoo.com/group/Minolta/)? It's
a great Minolta and photography community. Maybe we'll see you there one
day.

Maybe - not soon though, too much to do and too little time already.
Thanks for the link though :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Visage - Fade to grey (12'' version)