468,107 Members | 1,273 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,107 developers. It's quick & easy.

CSS divs.

30
This is a question that i am sure some of you can answer quickly, but anway. I have been learning how to code useing Xhtml and CSS. I am confused about some CSS properties.

I know classes and ids are for styling certain elements like <p> and such, but what is the difference between that and <div> and <span> both allow you to name sections of your code, and for both you can set style like background image, text color and stuff like that.

Bassically what I am trying to do hear is code a layout. It's supposed to be a simple 2 collum one. So say I have an image of what I want to be the content backround. Do I use classes, ids, divs, or spans? What about the navigation sidebar thing? Spans Divs ahhhh its so confusing
Jul 2 '07 #1
14 1915
I can't answer many of your questions...but it has always occurred to me that <span>, <p>, and <DIV> all work the same way, except <span> <DIV> can be used to better carry out a JavaScript in a specific part of a document.

As for your question about a navigation bar, I suggest you use framesets and a seperate HTML document for the nav bar...
Jul 3 '07 #2
drhowarddrfine
7,435 Expert 4TB
I suggest you use framesets and a seperate HTML document for the nav bar...
Framesets cause too many problems, especially since it can be done so much easier with CSS.
it has always occurred to me that <span>, <p>, and <DIV> all work the same way
Not at all.

A <div> is a structural element used to help with containing 'like elements' that need to be separated from other elements. It is 'block level'. When laying out pages, the first thing too many people do is add divs to the page. However, divs are not always needed.

<span> is used to contain 'inline elements' such as those in a paragraph. Span, itself, is 'inline'.

You use span to apply some attribute, or to contain, content that is inside a paragraph. You use a div to apply attributes, or contain, blocks of elements, such as whole paragraphs, tables, and other divs.

So spans cannot be used on divs and divs cannot be used inside paragraphs.

Classes and ids are only used to name elements so you can identify them and use them differently. If I want one <p> to have a different font than another, I can id them as <p id="jack"> and <p id="jill>. Then in css:
#jack{
font-size:12px
}
#jill{
font-size:16px;
}

But, you can only have one <p> called jack or jill on a page. So, if my page is filled with jacks and jills, then I just put them all in the same category, or class.

<p class="jack> and <p class="jill>

.jack{
font-size:12px
}
.jill{
font-size:16px
}
Jul 3 '07 #3
Eep≤
14
Classes and ids are only used to name elements so you can identify them and use them differently. If I want one <p> to have a different font than another, I can id them as <p id="jack"> and <p id="jill>. Then in css:
#jack{
font-size:12px
}
#jill{
font-size:16px;
}

But, you can only have one <p> called jack or jill on a page. So, if my page is filled with jacks and jills, then I just put them all in the same category, or class.
This is incorrect; IDs can be used multiple times, just like classes can.
Jul 5 '07 #4
drhowarddrfine
7,435 Expert 4TB
This is incorrect; IDs can be used multiple times, just like classes can.
Absolutely not. From the W3C:
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
Unlike classes:
class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names.
Otherwise, there would be no difference between the two and no need for them.
Jul 5 '07 #5
Eep≤
14
Well, the guideline is wrong because I use IDs multiple times throughout a document...

You misworded what you originally wrote: you implied that a <p> tag could only have one ID, but this is incorrect. Any tag can have any number of IDs or classes throughout an HTML document.
Jul 6 '07 #6
drhowarddrfine
7,435 Expert 4TB
Well, the guideline is wrong because I use IDs multiple times throughout a document...
So you are saying the people who created the spec are wrong? I don't think so. That is the specification written by the W3C and not a guideline. You can only use an id name once per page.
You misworded what you originally wrote: you implied that a <p> tag could only have one ID, but this is incorrect. Any tag can have any number of IDs or classes throughout an HTML document.
I don't think I misworded anything. To be clear, an ID name must be unique on a web page and only used once. You can do:
<p id="jack"> but, on the same page, you cannot have:
<p id="jack"> and another <p id="jack">. The second one is illegal and analagous to calling two brothers of the same family Jack.

If you must use the same name to describe, or attribute, two elements, use "class". That's what it's for.
<p class="jack">
<p class="jack"> <-on the same page is legal.
Jul 6 '07 #7
Eep≤
14
So you are saying the people who created the spec are wrong? I don't think so. That is the specification written by the W3C and not a guideline. You can only use an id name once per page.
I don't think I misworded anything. To be clear, an ID name must be unique on a web page and only used once. You can do:
<p id="jack"> but, on the same page, you cannot have:
<p id="jack"> and another <p id="jack">. The second one is illegal and analagous to calling two brothers of the same family Jack.

If you must use the same name to describe, or attribute, two elements, use "class". That's what it's for.
<p class="jack">
<p class="jack"> <-on the same page is legal.
Heh, "illegal"--how silly. Just because something is "illegal" doesn't mean it's not possible. I use multiple "id="s of the same identifier ("id=c", for example) on my 3D game comparison table and it's never caused me any problems. So, yes, if that's what the HTML spec says, that using multiple IDs is not possible, it's dead wrong. I prefer using "id" to "class" because it's less bytes. Oh and there are multiple people in familes with the same first name, in case you didn't know.
Jul 7 '07 #8
Robbie
180 100+
Hi. I'm not particularly familiar with CSS or XHTML, but what's in the specs must be what they wanted people to use, and how they expected browsers would be made to support.
However, web browser designers could have seen that people were using id instead of class, and just made the browsers replace id with class internally if it sees that more than 1 id of the same 'name' is used, or something like that.
So, if the specs say that more than 1 id with the same 'name' is illegal (i.e. shouldn't be done), you can't really argue with that.
But if they're saying that it can't be done, then they may have been true at the time they were typed, but it seems not so anymore as many browsers now CAN actually handle this.
Jul 7 '07 #9
nitinpatel1117
111 100+
Id's should only be used once in each document,

The only reason it still works when you have multiple same ids, is becuase Internet explorer (i.e. microsoft) decided that they would make up for other people's (web developer's) mistakes and make internet explorer handle these web documents.
and then all the other broswers just tagged allong with the concept.

But however, if you run your website in mozilla firefox, it will work, but when viewing the page errors you'll see that mozilla has highlighted the incorrect use of the same ids.
Jul 9 '07 #10
Eep≤
14
Actually, nit, Firefox 2.0.0.4 doesn't report multiple (or even a single) ID(s) in the error console; the only thing it reports on my comparison table is:

"Error in parsing vaue for property 'white-space'. Declaration dropped." (line 11)
td.header {font-weight:bold; white-space: no-wrap;}

"Selector expected. Ruleset ignored due to bad selector." (line 20)
a.w:link, {color:fff}

"Expected ':' but found '='. Declaration dropped." (no line given)

Nothing about IDs there...
Jul 10 '07 #11
drhowarddrfine
7,435 Expert 4TB
Actually, nit, Firefox 2.0.0.4 doesn't report multiple (or even a single) ID(s) in the error console;
Possibly because your markup is invalid and unreadable. Like all browsers, Firefox may be giving up on your markup and doing the best it can with the errors. The W3C HTML Validator can't even make sense of it and the CSS Validator reports 12 errors there. You aren't even using a doctype!

This difference between id and class is the first thing a web designer learns about with html/css. The fact that it "works" in your instance is only luck and, like all errors, cannot be counted on to work everywhere all the time. Your insistence that the same name can be used for any id you wish, despite the proof that this is an error, is foolish. You are flat out wrong. Here are more links to educate you:
Mako
With the ID selector you identify an element to be an *unique instance* in a document.

You assign this element a name, like the NAME attribute of a form element, and it can be applied only once in a document, and this style rule with the ID selector can only apply to one single element.
W3Schools
id A unique id for the element.
The subject is even mentioned in the XML spec.
Validity constraint: ID

Values of type ID MUST match the Name production. A name MUST NOT appear more than once in an XML document as a value of this type; i.e., ID values MUST uniquely identify the elements which bear them.

Validity constraint: One ID per Element Type

An element type MUST NOT have more than one ID attribute specified.
Jul 10 '07 #12
drhowarddrfine
7,435 Expert 4TB
From the W3C CSS Spec:
What makes attributes of type ID special is that no two such attributes can have the same value; whatever the document language, an ID attribute can be used to uniquely identify its element.
If you use the same ID name more than once, you mess up the document tree. It can confuse browsers and definitely messes up the tree for Javascript, the DOM and a XML and XHTML document.
Jul 10 '07 #13
drhowarddrfine
7,435 Expert 4TB
So, yes, if that's what the HTML spec says, that using multiple IDs is not possible, it's dead wrong.
So you, and you alone, are saying the people who created HTML and CSS wrote the specifications wrong? And you say they are silly?!

They are not saying it's impossible. They are saying you should not do it and, yes, the validator WILL report it as an error for the reasons I gave in the previous post.

There are many things you can "get away with" in html and css, but counting on an error is unreliable. There are mathematical formulas that prove any number is equal to zero but would you want to fly in a plane that was built using that formula?
Jul 10 '07 #14
Eep≤
14
That's all nice and dandy, but until the browsers stop supporting it, it's still doable. <shrug>
Jul 10 '07 #15

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Egon Pasztor | last post: by
2 posts views Thread by David Winter | last post: by
15 posts views Thread by red | last post: by
3 posts views Thread by Marc | last post: by
39 posts views Thread by WindAndWaves | last post: by
12 posts views Thread by meltedown | last post: by
2 posts views Thread by sicapitan | last post: by
11 posts views Thread by dusk | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.