Can't use an ID twice and can't get styles to work. 2

[ironhide1975]

I'm trying to setup various heads and content areas on a page, but I get a notice in Visual Studio that you can't use the same ID twice on a page. However when I try to apply the CCS style using either a class, span or p tag, it does not display correctly.

It works fine as an id, and looks fine in the browser but I get the little error notice in Visual Studio.

What is the proper way to establish a style within a DIV tag?

 

[cLFlaVA]

IDs need to be unique. the proper way to assign styles to multiple elements is using classes.

show your code for more help.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Foamcow]

To add to Cory's answer.

ID's identify an element in the HTML document.

Classes identify a set of style rules in your stylesheet.

So you would assign a set of styles to a class within your stylesheet then apply it to your div like so:

<div class="myclass">
...
</div>

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[ironhide1975]

   <div id="mainHeader">Special News</div>
   <div id="mainText">Main Header</div>
   <div id="mainHeader">Upcoming Events</div>
   <div id="mainText">Second Article</div>

Now the above works fine, but if I do it this way.

   <div id="mainHeader">Special News</div>
   <div id="mainText">Main Header</div>
   <div id="mainHeader2" class="mainHeader">Upcoming Events</div>
   <div id="mainText2" class="mainText">Second Article</div>

Now this is correct but doesn't display correctly.

 

[cLFlaVA]

your CSS is most likely incorrect. show your CSS.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Vragabond]

And think of rewriting your code to be more semantically correct. How about:

<h1>Special News</h1>
<p>Main Header</p>
<h1>Upcoming Events</h1>
<p>Second Article</p>

 

[traingamer]

In your stylesheet you would refer to a class like .mainHeader and an id like #mainHeader. One way to make them the same is

.mainHeader, #mainHeader {...

another is

   <div [b]class="mainHeader">[/b]Special News</div>
   <div id="mainText">Main Header</div>
   <div id="mainHeader2" [b]class="mainHeader">[/b]Upcoming Events</div>

but Vragabond likely has a valid point concerning styling tags vs. styling new divs.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[ironhide1975]

#mainHeader
{
	color: #fff;
	font-size: 14px;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
	font-weight: bold;
	position: relative;
	width: 400px;
	height: 20px;
	background: #fff url(i/HeaderBar.gif);
	text-align: left;
	margin: 2px;
	padding: 4px 3px 3px 5px; }
#mainText
{
	color: #606;
	font-size: 12px;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
	position: relative;
	width: 400px;
	height: 20px;
	text-align: left;
	margin: 2px;
	padding: 2px; }

 

[cLFlaVA]

you haven't supplied any CSS for the classes, which is for the most part what we've all said.

see traingamer's last response...



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Foamcow]

You must define classes differently.

#elementid { 
 color:red;
}


.elementClass {
 color:red;
}

You cannot refer to an ID in a class attribute nor a class in an id attribute.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[ironhide1975]

Got it, so there is a difference between a class and ID. That makes sense.

Is it best to store the width variables in the class or ID for an object? What is best practice?

 

[cLFlaVA]

whatever you need. as we've said, classes can apply to multiple objects. ids are for singular objects.

if you have many objects you'd like to set a certain width for, it should be defined in a class and then assign the class to those objects.

if only one object needs the width, then the ID is the way to go, if you choose to have an ID for the object.



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[ironhide1975]

Do you have to create a CSS ID for every ID you place on the page, or is that not neccessary?

Thank you again for your help.

 

[cLFlaVA]

not necessary. if an element has an ID, that does not mean it NEEDS a CSS definition.

if you have a CSS definition for an ID:

#myID {
   ...
}

however, then of course you will only see those styles become a reality if you have an object on your page with the same ID (myID).



*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Foamcow]

The ID is used to identify to element within the DOM (Document Object Model - a tree of all the elements in the document, visible or otherwise)

So you can use the ID to target elements with Javascript if you like.

And to make my point again.

ID's identify elements

Classes identify styles - not necessarily multiple elements.

I find it easier to think of in this way. I think alot of confusion comes from thinking of them in the same terms whereas they are actually quite different things.
Like comparing apples to chocolate cake.

Cory
I figured that's the reason why there is no native DOM method for targetting classes. You CAN target elements by class with Javascript, but you need to create a function to do it. BUt really classes are a CSS thing only, nothing to do with the DOM as such. Whereas ID's are inherently a DOM thing.

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[ironhide1975]

Ok mainly just trying to figure out how to lay out a webpage using CSS this time instead of traditional tables. Thank you all for your help.

 

[Vragabond]

I believe that if you're really trying to use modern coding techniques, please try and use semantic markup as well and rethink what I suggested. Your best bet is to put all that in a div with an id or class and use h1 and p to mark up your things without any id or class. Then use descendant selectors to style all h1 and p within that div in a way you want.