Probleme zones cliquables sur image background

--- Attention, grand débutant inside ---

Bonjour,
Je suis en train de rajeunir mon site, et j'ai décidé de faire ça bien en employant des CSS ;
N'y connaissant -pour le moment- pas grand chose, me suis basé sur un template libre.

Voila ce que ça donne pour le moment :
http://compend.universalis.free.fr/index.html

Mon problème c'est que je voudrais utiliser les touches du "piano" de l'image de fond comme liens, j'ai donc placé des liens positionné via CSS ;
Cela fonctionne si je les positionne comme "absolute", mais alors elles sont déplacées lors des changements de fenêtres ou de résolution.
Ca, je comprend : Cela provient, je crois, du fait que mon image de fond est centrée ;

Et quand je les positionne comme "relative" au background -sans rien changer d'autre-, elles gardent bien leurs places mais alors les zones ne sont plus cliquables !!! (Seul leurs éventuel texte de contenu est cliquable, pas la zone.)
Et là je n'y comprend plus rien...
(Un problème d'héritage ?)

Si vous pouviez m'aider avant que cela ne me dégoûte complétement des CSS, je vous en serait grandement reconnaissant,
D'avance merci.



Voici la feuille de style :

/* CSS Document */
#home
{
  display: block;
  position: relative;
  top: 0px; 
  left: 0px;  
  width: 1000px;
  height: 100px;
}
#piano-Home 
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 494px;
  width: 22px;
  }
#piano-A 
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 516px;
  width: 20px
 }
#piano-B
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 536px;
  width: 21px
 }
#piano-C
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 557px;
  width: 20px
 }
#piano-D
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 577px;
  width: 18px
 }
#piano-E
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 595px;
  width: 22px
 }
#piano-F
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 617px;
  width: 21px
 }
#piano-G
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 638px;
  width: 21px
 }
#piano-H
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 659px;
  width: 25px
 }
#piano-I
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 684px;
  width: 22px
 }
#piano-J
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 706px;
  width: 20px
 }
#piano-K
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 726px;
  width: 22px
 }
#piano-L
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 748px;
  width: 22px
 }
#piano-M
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 770px;
  width: 30px
 }
#piano-N
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 800px;
  width: 23px
 }
#piano-O
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 823px;
  width: 20px
 }
#piano-P
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 843px;
  width: 21px
 }
#piano-Q
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 864px;
  width: 22px
 }
#piano-R
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 886px;
  width: 29px
 }
#piano-S
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 915px;
  width: 23px
 }
#piano-T
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 938px;
  width: 22px
 }
#piano-U
{
  position: absolute;
  height: 85px;
  top: 102px; 
  left: 960px;
  width: 22px
 }
#piano-V
{
  position: absolute;
  height: 85px;
  top: 102px; 
 }
#piano-W
{
  position: absolute;
  height: 85px;
  top: 102px;
 }
#piano-X
{
  position: absolute;
  height: 85px;
  top: 102px; 
 }
#piano-Y
{
  position: absolute;
  height: 85px;
  top: 102px; 
 }
#piano-Z
{
  position: absolute;
  height: 85px;
  top: 102px; 
 }
#piano-#
{
  position: absolute;
  height: 85px;
  top: 102px; 
 }
body
{
margin:0px;
padding:0px;
background-image:url(../images/bdy_bg.jpg);
background-repeat:repeat;
}
a:link {
	text-decoration: none;
	outline:none;
}
a:visited {
	text-decoration: none;
	outline:none;
}
a:hover {
	text-decoration: none;
	outline:none;
}
.outertable
{
width:1000px;
background-image:url(../images/bg1.jpg);
background-repeat:no-repeat;
height:910px;
}
.top-middle
{
background-image:url(../images/middle-top.jpg);
background-repeat:repeat-x;
}
.right-middle
{
background-image:url(../images/right-middle.jpg);
background-repeat:repeat-y;
}
.bottom-middle
{
background-image:url(../images/middle-bottom.jpg);
background-repeat:repeat-x;
}
.left-middle
{
background-image:url(../images/middle-left.jpg);
background-repeat:repeat-y;
}
.white-light
{
background-color:#f2f2f2;
}
.text1
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#940101;
text-decoration:none; font-weight:normal;
text-align:center;outline:none;
}
.text2
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#9d9a9a;
text-decoration:none;outline:none;
}
.text3
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#7e7c7c;
text-decoration:none;
line-height:20px;
text-align:justify;outline:none;
}
.text4
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#3e3b3b;
text-decoration:none;
font-weight:bold;outline:none;
}
.text5
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
text-decoration:none;outline:none;

}
.red-bg
{
background-color:#940101;
}
.grey-bg
{
background-color:#9d9a9a;
}
.heading
{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:#626060;
text-decoration:none;outline:none;
}
.link1
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#940101;
text-decoration:none;outline:none;
}
.link1 a:link
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#940101;
text-decoration:none;outline:none;
}
.link1 a:hover
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#940101;
text-decoration:underline;outline:none;
}
.link2
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
text-decoration:none;outline:none;
}
.link2 a:link
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
text-decoration:none;outline:none;
}
.link2 a:hover
{ 
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#FFFFFF;
text-decoration:underline;outline:none;
}
.border1
{
border-bottom:1px dashed #ccc6c6;
}

Modifié par Murphy's Law (20 Mar 2011 - 21:03)

Bonsoir,

j'ai un peu regardé ton site, et je trouve dommage que tu te sois embêté à placer chaque touche de piano, en donnant à chacune une taille et une position.

Tout d'abord, ton a d'id #home n'a aucunement besoin d'être en "position:relative; top:0;left:0;", le display:block et les tailles font largement l'affaire.

Ensuite je te conseillerai de placer toutes tes touches dans une div que tu floaterais à droite.
Cette div aurait la hauteur et la largeur de ton piano, et contiendrait toutes tes notes floatées gauche.

il te suffit ensuite de donner une taille différente aux quelques notes qui sont plus larges ou moins larges.

Je n'ai pas tout bien positionné, mais au niveau du code ça donnerait ça :

HTML :

<a id="home"></a>
	<div id="notes">
		<a id="piano-Home" href="index.html" title="Home"></a>
		<a  href="html/compositeurs/A.html" title="A"></a>
		<a  href="html/compositeurs/B.html" title="B"></a>
		<a  href="html/compositeurs/C.html" title="C"></a>
		<a  href="html/compositeurs/D.html" title="D" class="note-15"></a>
		<a  href="html/compositeurs/E.html" title="E"></a>
		<a  href="html/compositeurs/F.html" title="F"></a>
		<a  href="html/compositeurs/G.html" title="G"></a>
		<a  href="html/compositeurs/H.html" title="H"></a>
		<a  href="html/compositeurs/I.html" title="I"></a>
		<a  href="html/compositeurs/J.html" title="J"></a>
		<a  href="html/compositeurs/K.html" title="K"></a>
		<a  href="html/compositeurs/L.html" title="L"></a>
		<a  href="html/compositeurs/M.html" title="M" class="note-28"></a>
		<a  href="html/compositeurs/N.html" title="N"></a>
		<a  href="html/compositeurs/O.html" title="O"></a>
		<a  href="html/compositeurs/P.html" title="P"></a>
		<a  href="html/compositeurs/Q.html" title="Q"></a>
		<a  href="html/compositeurs/R.html" title="R" class="note-28"></a>
		<a  href="html/compositeurs/S.html" title="S"></a>
		<a  href="html/compositeurs/T.html" title="T"></a>
		<a  href="html/compositeurs/U.html" title="U"></a>
		<a  href="html/compositeurs/V.html" title="V"></a>
		<a  href="html/compositeurs/W.html" title="W" class="note-28"></a>
		<a  href="html/compositeurs/X.html" title="X"></a>
		<a  href="html/compositeurs/Y.html" title="Y"></a>
	</div>

CSS :

#home
	{
		display: block;
		height: 100px;
		width: 1000px;
		
	}
	
	#notes
	{
		width : 654px;
		height : 85px;
		float : right; /* OU margin-left : 346px; */ /* OU position:relative; left : 346px; */
		
	}
	#notes a
	{
		display : block;
		width : 22px;
		height : 88px;
		float : left;
	}
		#notes a.note-15
		{
			width : 15px;
		}
		
		#notes a.note-28
		{
			width : 28px;
		}
		
	#piano-Home
	{
		margin-left : 15px;
	}

Beaucoup moins de css, un peu moins de html, on a enlevé beaucoup d'id sur les touches en préférant utiliser le css.

c'est très loin d'être parfait, j'ai vraiment vu ça rapidement, mais je pense que déjà, ça peut faire une partie du boulot .

PS : il est vraiment dommage que tu utilises un tableau pour faire ton site, si tu te lances dans le CSS, je te conseil vivement d'y aller " à fond " et d'apprendre à monter ta page avec des div bien placées, et le tout sans tableau.
Modifié par n3k0 (20 Mar 2011 - 22:08)

Merci beaucoup pour cette réponse ultra rapide !!!!

Quel idiot fais-je : Une div "FLOAT", c'était si évident...
Il faut dire que j'étais partis sur une Image Map...
(Pourquoi faire simple quand on peut faire compliqué .)