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

**maximator52** · 13/02/2014, 21h01

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 de ma feuille de style et son code html associé :

CSS

Code HTML:

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-size:2.5VMI®®®®®n;
	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-size:2.5VMI®®®®®n;
	font-weight: bolder;
	float:left;
	border-bottom:solid 1px rgb(0,0,0);
	}

HTML

<!DOCTYPE html>

<html lang="fr">
	
	<head>
		<meta charset="utf-8">
		<title>olé</title>
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="stylesheet" href="styleexemple.css" />
	</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>

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 ?

**galerien69** · 14/02/2014, 10h50

hello

ta page est invalide.
ta balise body n est pas fermee, ta balise html non plus
ton css n est meme pas ecrit dans des balises style, et est en plus ecrit avant meme le doctype html
tu devrais avoir qqch du genre

Code:

<!DOCTYPE html>

<html lang="fr">
	
	<head>
		<meta charset="utf-8">
		<title>olé</title>
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="stylesheet" href="styleexemple.css" />
        <style type="text/css">
            ton css
        </style>
	</head>
	
	<body>
    </body>
</html>

**maximator52** · 14/02/2014, 11h47

effectivement, ma balise html n'est pas fermée, mon erreur pardon.
Pour ce qui est est des balises css elles étaient dans un fichier feuille de style à part je vais les inclure dans le html.
le nouveau code :

Code HTML:

<!DOCTYPE html>

<html lang="fr">
	
	<head>
		<meta charset="utf-8">
		<title>olé</title>
		<link rel="shortcut icon" href="/favicon.ico">
		<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>

voila, toutes mes excuses
j'attends vos réponses

**JPL** · 14/02/2014, 15h19

Ce n'est pas le rôle des modérateurs de mettre les balises à ta place. Le prochain message qui ne respectera pas cette règle de présentation sera effacé.

A voir en vidéo sur Futura · Aujourd'hui

**maximator52** · 14/02/2014, 15h37

Autant pour moi, je ne savais pas que c'était obligatoire. Je viens de repérer l'icône dans les outils de rédaction.

**JPL** · 14/02/2014, 15h46

C'est surtout pour améliorer nettement la présentation du code (garder les indentations par exemple). Je me suis un peu fâché parce que j'avais ajouté la balise la première fois (et le forum t'avais automatiquement averti) et tu n'en as pas tenu compte dans ton dernier message.

**galerien69** · 14/02/2014, 19h00

hello,

chez moi rien ne défile.
en revanche de ce que je comprends

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).

tu as qu'à déjà commencer par enlever tous les backgrounds red, puis à mettre la couleur du texte hello en mettons, bleu, puis à essayer de modifier le background du texte hello!

**maximator52** · 14/02/2014, 20h43

chez moi rien ne défile.

les blocs "hello" ne défilent pas tout seul. Ils défilent horrizontalement avec la souris.

tu as qu'à déjà commencer par enlever tous les backgrounds red, puis à mettre la couleur du texte hello en mettons, bleu, puis à essayer de modifier le background du texte hello!

ce n'est pas tout à fait ça.
Je veux bien admettre que ma demande soit un peu tordu mais intuitivement elle me semble pas relever de l'impossible. Un bricolage farfelu me conviendra parfaitement.

Je vais donc essayer d'être plus clair.
Il y a 3 éléments sur ma page:
-une div de position fixe par rapport à la fenêtre de mon navigateur et qui correspond à mon titre. Il ne doit pas bouger par rapport à ma fenêtre.

-en dessous une autre div de position fixe par rapport à la fenêtre (de background rouge dans mon code pour le rendre visible, mais je le veux invisible) qui symbolise une zone fixe (un cadre )dans laquelle je souhaite qu'il se passe un changement sur les blocs" hello".

-une série de blocs <td>"hello" qui se trouve dans un un bloc<tr> très large (300% de la largeur de ma fenêtre) pour que le visiteur du site la fasse défiler horizontalement. Je veux que ces blocs "hello" aient un background invisible et une couleur de typo (mettons rouge) en dehors de ma zone fixe. Par contre, en les faisant défiler horrizontalement, lorsqu'ils passent dans ma zone fixe (rouge dans mon code, mais que je veux invisible) je souhaite que leur background devienne rouge et que la couleur de typo devienne blanche.

En d'autres termes, il faut que ma zone fixe (que je rappelle doit être invisible) ait la propriété de changer les attributs de couleur de mes blocs "hello" lorsque ces derniers passent dedans en défilant.

Je me demande s'il est possible d'en faire une sorte de masque (comme sur photoshop) qui modifie les attributs de mes blocs.

petit rappel du code :

Code HTML:

<!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>

Merci encore

**galerien69** · 14/02/2014, 21h23

c'est plus clair pour moi.

La seule solution que je vois est de sélectionner le td qui est dans la zone rouge.
Pour ca il faudrait déjà plutot utiliser un ul, avec des li (à la place des td), et les li passent en overflow. (changement simplement sémantiquement parlant parce que c'est pas vraiment une présentation sous forme de tableaux mais juste une liste de hello).
Puis il faudrait pouvoir savoir quels sont les li en overflow (idem qui dépassent les dimensions de l'ul, symbolisé par le block rouge).

Le problème c'est que ya pas de pseudo selector overflow, et plus généralement, voir http://stackoverflow.com/questions/1...r-for-overflow
On peut gruger avec le pseudo selector :hover, mais il ne se déclenche que quand on passe sur le li. Même si on le mets à 100% de la hauteur de la page, quand on scroll, rien ne se passera donc.

Bref, je crois que tu es bon pour du js

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

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

Re : zone de cadrage fixe sur blocs défilants sur css/html

Re : zone de cadrage fixe sur blocs défilants sur css/html

Re : zone de cadrage fixe sur blocs défilants sur css/html

Re : zone de cadrage fixe sur blocs défilants sur css/html

Re : zone de cadrage fixe sur blocs défilants sur css/html

Re : zone de cadrage fixe sur blocs défilants sur css/html

Re : zone de cadrage fixe sur blocs défilants sur css/html

Re : zone de cadrage fixe sur blocs défilants sur css/html

Discussions similaires

[Brun] Problème cadrage

Positionnement des blocs en CSS HTML

Leucogranitic boudins cyanite dans la zone de la Zanskar Shear Zone, Gianbul Valley. Vue vers le nor

petite question cadrage

cadrage image televiseur