div id conflict

[neilkw]

Another question for Friday!

I apply this css link style below to 8+ divs which have the same id of 'adesc' . It has been pointed out to me that using the same id for div's is a dodgy practice. So to combat this I have decided to re-name each div id as: adesc1, adesc 2 etc.

Is it possible to assign this link style to each div id without duplicating the whole css? ie can I input multiple id's in the css to which it applies?

Hope i've made sense! I'm still learning.

thanks


#adesc a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #003399;
display: block;
height: 65px;
width: 207px;
}
#adesc a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
display: block;
height: 65px;
width: 207px;
}
#adesc a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
display: block;
height: 65px;
width: 207px;
}

[jscheuer1]

The class selector is made for that. You can give all the elements the same class and a unique id. The styles that are common to the class may be selected for it:


.adesc:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #003399;
display: block;
height: 65px;
width: 207px;
}


<a class="adesc" id="adesc1" href="whatever.htm">Link Text</a>

[neilkw]

thanks

[mburt]

If you have more than one ID that is the same, the document is invalid.

[neilkw]

is there a tutorial online about this as I cant't get my head round it!

this is what i have been doing..

code:
<div class="accessorybox" id="adesc">
<div align="center"><a href="taps/taps.html"><br>
View all the taps </a>

<div class="accessorybox" id="adesc">
<div align="center"><a href="taps/taps.html"><br>
View all the taps </a>

css:
#adesc a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #003399;
display: block;
height: 65px;
width: 200px;
}

Is this technically valid? Its does work, which is why I've kept it.

[jscheuer1]

Well, um yes, technically invalid. It will cause a real problem if you try to access that element by its id because then, there absolutely can be only one.

Here's a pretty good css tutorial:

http://www.w3schools.com/css/default.asp

This particular concept isn't too hard though, what makes it confusing is that many (most) browsers will let you get away with it if all that is involved is style. However, as soon as javascript gets involved there will be problems unless you find an unorthodox workaround.

Basic concept:

Only one element per page may have a given id. If you want to select a number of elements, use the class construct.

[mwinter]

is there a tutorial online about this as I cant't get my head round it!

It isn't that complicated. The id attribute is used to uniquely identify a single element. As such, there can be no duplicate values. That's all there is to it.

The general guidelines are: if you need to label an element for a particular purpose, and there will only ever be one element in a document that fulfils that purpose, use an id attribute. If there may be many elements of a particular type, use the class attribute.

When making that decision, consider future developments to a site or document. Just because there is only currently one element that you want to label, think about whether there could be more in the future.



<div class="accessorybox" id="adesc">

So change that to:



<div class="accessorybox adesc">

and:



#adesc a:link {

to:



.adesc a:link {




font-size: 12px;

Whilst you're at it, use percentages for font sizes, preferably using 100% for body text, and nothing lower than 85% of the default font size.



color: #003399;

Consider whether you are assuming that a particular default background colour will be used with this element. If you are, the content of the element might not be readable if the user has a different default (due to the use of desktop themes, and the like).



height: 65px;
width: 200px;

Finally, text-related dimensions are best specified in em length units. These are proportional to the font size, and will help prevent overflow should the user force a different size.



Its does work, which is why I've kept it.

You need to remember that browsers have evolved over time to attempt to repair all sorts of errors. The Web is so full of junk that it simply isn't feasible for a browser to be completely strict and still remain useful. However, that isn't an excuse for authors to be sloppy.

Mike

[neilkw]

Mike, many thanks for your considered reply. I shall study it today.
I am adjusting fonts to use percentages. Do you reccommend completely dropping pixel dimensions and replacing divs with em measurements instead?

[mwinter]

Do you reccommend completely dropping pixel dimensions and replacing divs with em measurements instead?

No, not completely. When working around something that is of a fixed size, like an image, it makes sense to use pixel lengths. However, as text is not necessarily fixed (the user can influence the size at will), em lengths (which are proportional to text size) are typically more practical.

Mike

[neilkw]

The penny has started to drop..
thanks again.