ID's only used once?

[mfunkmann]

Hello,

I want to make my Homepage completely w3 validator compatible. I fixed
most of the errors but one I can't fix:

Error Line 15 column 10: ID "MENUPOINT" already defined.

<div id="menupoint"><br><a href="index.php?get=2">Contact</a></div>

An "id" is a unique identifier. Each time this attribute is used in a
document it must have a different value. If you are using this
attribute as a hook for style sheets it may be more appropriate to use
classes (which group elements) than id (which are used to identify
exactly one element).

So I have declared all styles in seperate file linked in the head
(<link href="style.css" type=text/css rel=stylesheet>)

a typical entry in this file looks like this:

#menupoint
{
border-bottom: 1px solid #A6A0C7;
}



So how should I replace <div id"..... to get the same result??

Thx

Matthias

 

[Benjamin Niemann]

I want to make my Homepage completely w3 validator compatible. I fixed
most of the errors but one I can't fix:

Error Line 15 column 10: ID "MENUPOINT" already defined.

<div id="menupoint"><br><a href="index.php?get=2">Contact</a></div>

An "id" is a unique identifier. Each time this attribute is used in a
document it must have a different value. If you are using this
attribute as a hook for style sheets it may be more appropriate to use
classes (which group elements) than id (which are used to identify
exactly one element).

So I have declared all styles in seperate file linked in the head
(<link href="style.css" type=text/css rel=stylesheet>)

a typical entry in this file looks like this:

#menupoint
{
border-bottom: 1px solid #A6A0C7;
}



So how should I replace <div id"..... to get the same result??

Use the CLASS attribute:

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

And in your stylesheet:

..menupoint
{ ... }


And a more global remark. Perhaps what you want to achive should better be
done like this:

<ul id="menu">
<li><a ... </a></li>
<li><a ... </a></li>
<li><a ... </a></li>
</ul>

With a stylesheet like

#menu
{
list-style: none;
margin: 0;
padding: 0;
}

#menu li
{
border-bottom: 1px solid #A6A0C7;
margin-top: 1em;
}