Zone de cadrage fixe sur blocs défilants sur css/html

Fermé
maximator52 Messages postés 1 Date d'inscription vendredi 14 février 2014 Statut Membre Dernière intervention 14 février 2014 - 14 févr. 2014 à 18:59
Bonjour,

je conçois actuellement mon futur site internet, et c'est en autodidacte que je me suis mis à coder du HTML et du CSS,

Sur une de mes pages je souhaite que le visiteur du site fasse défiler l'information de manière horizontale:
Voici une partie du code html et css:



<!DOCTYPE html>

<html lang="fr">
<head>
<meta charset="utf-8">
<title>olé</title>
<style type="text/css">
body
{
font-family:arial;
}

table
{
position:absolute;
float:left;
margin-top:6%;
margin-left:36%;
height:10%;
width:300%;
overflow:hidden;
height:35%;
}

td
{

width:10%;
}

#zonecadrage
{
position:fixed;
width:40%;
height:17%;
top:25%;
margin-left:30%;
padding-top:0.25%;
padding-bottom:0.25%;
padding-right:1%;
background-color:red;
}


.defilement
{
margin-top:5%;
margin-left:4%;
width:50%;
display:inline-block;
text-decoration:none;
text-align:center;
padding-top:1%;
padding-bottom:1%;
font-weight: bolder;
border-top:solid 2px rgb(255,255,255);
border-bottom:solid 2px rgb(255,255,255);
background-color:rgb(255,255,255);
color:red;
}


#elementfix
{
position:fixed;
width:40%;
margin-top:3.55%;
margin-left:30%;
padding-top:0.25%;
padding-bottom:0.25%;
padding-right:1%;
color:rgb(0,0,0);
text-align:center;
font-weight: bolder;
float:left;
border-bottom:solid 1px rgb(0,0,0);
}
</style>
</head>
<body>
<div id="zonecadrage"></div>
<table>
<tr>
<td><a href="#" class="defilement">hello</a></td>
<td><a href="#" class="defilement">hello</a></td>
<td><a href="#" class="defilement">hello</a></td>
<td><a href="#" class="defilement">hello</a></td>
<td><a href="#" class="defilement">hello</a></td>
<td><a href="#" class="defilement">hello</a></td>
</tr>
</table>
<div id="elementfix">selecteur de hello</div>
</body>
</html>



Vous pouvez constater en faisant défiler l'information horizontalement que les blocs "hello" semblent ne pas avoir de couleur de fond puisqu'elle est blanche comme celle du body, et que lorsqu'ils passent sur la zone fixe de cadrage rouge, ils donnent l'illusion d'en acquérir une.

Jusque là tout allait bien ce n'était pas très compliqué pour moi.

Or j'ai envie de pousser le bouchon un peu plus loin et de recréer cet effet en inversant la donne. je souhaiterait que ma zone de cadrage soit invisible (blanche comme le body) et que mes blocs "hello" acquièrent la couleur rouge en "background-color" (le texte devra quant à lui passer au blanc pour qu'il soit lisible).
Et là je sèche, j'ai beau tourner le problème dans tous les sens en ayant évité soigneusement de me tourner vers le java script.
J'espère bien me faire comprendre. En clair je souhaiterait que ma zone (rouge dans l'exemple) devienne un masque (invisible) qui change la couleur de fond et du texte de mes blocs qui défilent horizontalement.

Auriez vous une solution ? cela est-il possible ?