473,320 Members | 1,993 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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

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.kindergarten {
background: url('images/eng_k_logo.gif') no-repeat top center;
padding-top: 75px;
}

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

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

My HTML looks like this:

<div id="content" class="kindergarten">

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.kindergarten" 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.kindergarten" 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 "kindergarten"? Other DIV's cannot be
assigned this class.

I've tried different arrangements of the CSS, like div#content.kindergarten,
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

Nov 24 '05 #1
8 1896
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.kindergarten {
background: url('images/eng_k_logo.gif') no-repeat top center;
padding-top: 75px;
}

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

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

My HTML looks like this:

<div id="content" class="kindergarten">

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.kindergarten" 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.kindergarten" 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 "kindergarten"? 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.kindergarten,
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="kindergarten">, <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.gif') no-repeat top center;
padding-top: 95px;
}

#gr2 #content {
background: url('images/eng_gr2_logo.gif') 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
Nov 24 '05 #2
> 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 "kindergarten"? 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.kindergarten statement meant that only elements with the ID
"kindergarten" could have that style, so if I tried to assign
class="kindergarten" 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="kindergarten">, <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.gif') no-repeat top center;
padding-top: 95px;
}

#gr2 #content {
background: url('images/eng_gr2_logo.gif') 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
Nov 24 '05 #3
>>> 3. I assume that the above statement means "The DIV named "content" (and
only that ID) will get the class "kindergarten"? 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.kindergarten statement meant that only elements with the ID
"kindergarten" could have that style, so if I tried to assign
class="kindergarten" 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="kindergarten">, <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
Nov 24 '05 #4
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 "kindergarten"? 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.kindergarten statement meant that only elements with the ID
"kindergarten" could have that style, so if I tried to assign
class="kindergarten" to another div that didn't have the correct ID, it
wouldn't work.


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

You can use CSS like:

#content.kindergarten{padding-top:100px;background: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
Nov 24 '05 #5
> 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
Nov 24 '05 #6
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.gif') 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.gif') 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.gif') 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.kindergarten{}
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)
Nov 24 '05 #7
> 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.gif') 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.gif') 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.gif') 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.kindergarten{}
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
Nov 24 '05 #8
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.kindergarten{}
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)
Nov 24 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: George | last post by:
Hi, I am trying to write a query in Oracle which I have not done before, and are having some difficulty getting my result. Please check my query and my results. select max(note.datetime),...
8
by: Jan-Ole Esleben | last post by:
Hi! I am new to this list, and maybe this is a stupid question, but I can't seem to find _any_ kind of answer anywhere. What I want to do is the following: I want to insert a class variable...
18
by: Larry Herbinaux | last post by:
I'm having issues with garbage collection with my long-standing service process. If you could review and point me in the right direction it would be of great help. If there are any helpful...
11
by: dalu.gelu | last post by:
Hi, can anyone help me by writing a sample code of defining a copy constructor in a class having data member as an object of another class. for eg: class A{ int x; public: A(){ x=6;} };
2
by: manstey | last post by:
Hi, Is is possible to have two classes, ClassA and ClassB, and setattr(ClassA, 'xx',ClassB), AND to then have ClassA.xx store an integer value as well, which is not part of ClassB? e.g. If...
3
by: irkahs | last post by:
Hello all, I am using an SQL select statement to store the result into a variable. This variable then needs to get into a table. I am having issues with it. Kindly help. I am...
30
by: Logos | last post by:
I have what may be a bug, or may be a misunderstanding on how pass by reference and class inheritance works in PHP. Since I'm relatively new to PHP, I'm hoping for a little outside help to shed...
14
by: adam.timberlake | last post by:
This is a really basic question for all you people out there who know PHP. This is not a problem but just something I'm confused about. I was reading the article below and wondered why are normal...
3
by: nagarajuch | last post by:
Can I create an object from child class for a parent class having parametrical constructor only not having default constructor(i,e I can create object of parent only by passing perameter to the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.