28173 sujets

CSS et mise en forme, CSS3

Résolu : L' image disparait lorsque je descends dans mes liens

Désolé pour le petit désagrément Smiley cligne

Bonsoir à tou(te)s Smiley rolleyes
C'est mon 1er post et déjà, j'ai besoin de vous Smiley confused


Voici mon problème !

J'ai fait en sorte que lorsque l'on passe sur un lien, l'image correspondante s'affiche !
Jusque là, ça fonctionne Smiley ravi

Seulement, comme j'ai prés de 100 "liens", dès que j'atteinds ceux visibles, je dois donc descendre et,
c'est là que le problème commence CAR, lorsque je descends, l'image MONTE et aprés quelques autres liens , elle n'est plus visible car disparue dans les " hauteurs " Smiley decu

Smiley rolleyes Est-je était assez clair ! Smiley rolleyes

si vous voulez mieux me comprendre, voici ci-dessous ma source HTML ( que j'ai simplifiée ( trouver.html))
Il vous suffit seulement de renommer 2 photos de chez vous par 00.jpg et 01.jpg

D'avance merci !

Smiley langue 




<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title> Cartes Postales </title>

<meta name="Generator" content="EditPlus">
<meta name="Autor" content="Bruttuss">
<meta name="Keywords" content="">
<meta name="Description" content="">

<style type="text/css">

<!--
/* définition du lien qui affichera le "calque" */
a.carteCache {
	text-decoration: none; 
}
/* correction d'un bug IE */
a.carteCache:hover {
	background: none;
}
/* définition de la balise <span> inclue dans <a> */
a.carteCache span {
	display: none;
}
/* définition de la balise <span> au survol */
/* avec positions et dimensions du calque */
a.carteCache:hover span {
	display: inline;
	position: absolute;
	top: 100px;
	left: 290px;
	width: 232px;
	height: 187px;
	background: none;
	text-align: center;
	color: white;
	z-index: 2;
} 
-->
</style>

</head>

<body>

<BODY BACKGROUND='./mini/feuille.jpg'>

<BR>			 
<a href="#" class="carteCache">           Amiti&eacute;s                                                     	     		<span><img src="00.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">           Amiti&eacute;s 1913                                                	  		<span><img src="01.jpg" width="340" height="600" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">           Amiti&eacute;s 1921                                                        			<span><img src="00.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">           Amiti&eacute;s 1922                                                       			<span><img src="01.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">           Amiti&eacute;s 1                                          			<span><img src="00.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">           Amiti&eacute;s 3 2                                    			<span><img src="01.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>	

<img src="./mini/ligne.gif" width="190" height="10"><BR>

2006  <a href="#" class="carteCache">           Baraquement    de la dr&egrave;ve         	            		<span><img src="00.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>	
		
<img src="./mini/ligne.gif" width="190" height="10"><BR>

<a href="#" class="carteCache">            Charbonnage 1                                                            			<span><img src="01.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">            Charbonnage 2                                                               			<span><img src="00.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			  
<a href="#" class="carteCache">            Charbonnage c&ocirc;t&eacute; Sud 1                         			<span><img src="01.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">            Charbonnage C&ocirc;t&eacute; Sud 2                       			<span><img src="00.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">            Charbonnage vue de l' extraction                              			<span><img src="01.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">            Charbonnage vue du Triage                                			<span><img src="00.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">            Charbonnages                                                                  			<span><img src="01.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">            Ch&acirc;teau de Monsieur Andr&eacute;. Cour int&eacute;rieure	<span><img src="00.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">            Ch&acirc;teau de Monsieur Andr&eacute;. Entr&eacute;e                	<span><img src="01.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">            Chemin d' Hensies                                                               		<span><img src="00.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">            Cit&eacute; du Charbonnage                                               		<span><img src="01.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">            Coron Saint-Roch                                                                      		<span><img src="00.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">            Cour de l' &Eacute;cole des religieuses Franciscaines       		<span><img src="01.jpg" width="600" height="340" border=0 alt=" hihi "></span></a>
<BR><BR><BR><BR><BR>		
		
<img src="./mini/ligne.gif" width="275" height="10"><BR>

</body>

</html>


Smiley murf
Modifié par htmleur (15 Nov 2006 - 23:23)
Euh.... T'as oublié les balises code pour poster ton code... Et pis ça sert pas à grand chose de nous balancer 50 pages de codes, le mieux est un lien vers le site Smiley decu
Penses-tu que c'est vraiment compréhensible par un être humain normalement constitué? Smiley nimp

Peux-tu placer ta source entre les balises codes comme demandé dans les règles du forum? Merci.

edit: grillé par FlorentG...
Modifié par Benjamin D.C. (14 Nov 2006 - 18:39)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur et comme les autres membres te l'ont fait comprendre, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Administrateur
Au fait, puisque la question est un problème de mise en page et non de sémantique XHTML, je déplace dans le bon salon : "CSS et mise en page"
FlorentG a écrit :
Euh.... T'as oublié les balises code pour poster ton code... Et pis ça sert pas à grand chose de nous balancer 50 pages de codes, le mieux est un lien vers le site Smiley decu



Smiley confused
le site n'est pas en ligne Smiley confused

à cause de ce "petit " problème Smiley decu

mais, j'espère qu'il y sera VITE Smiley cligne

merci de votre aide
Modérateur
as tu essayer sans donné de coordonné de positionement a ton span ou en mettant le conteneur a en position:relative ?

d'ailleurs il est ou le span de :
a.carteCache:hover span
??

une page toute betes et simplifier sur un quelconque hebergeur gratuit pour l'occasion suffirait a eclairer les "eventuelles personnes ayant un peu de temps a te consacrer .

etre patient et commencer a s'aider soit même en preparant le terrain pour les autres est vraiment un plus, de plus , la c'est bientot l'heure du diner ... Smiley cligne

++
Merci Gcyrillus Smiley smile

Voici l'endroit du site ( que je viens de mettre MALGRÈS le problème )

http://users.tvcablenet.be/personal/tvcn127660
<html>




<head>


<title> Cartes Postales de 7321 Harchies dans le Hainaut en Belgique  </title>

<meta name="Generator" content="EditPlus">
<meta name="Autor" content="Bruttuss">
<meta name="Keywords" content="">
<meta name="Description" content="">



<style type="text/css">



<!--
/* définition du lien qui affichera le "calque" */
a.carteCache {
	text-decoration: none; 
}
/* correction d'un bug IE */
a.carteCache:hover {
	background: none;
}
/* définition de la balise <span> inclue dans <a> */
a.carteCache span {
	display: none;
}
/* définition de la balise <span> au survol */
/* avec positions et dimensions du calque */
a.carteCache:hover span {
	display: inline;
	position: absolute;
	top: 100px;
	left: 290px;
	width: 232px;
	height: 187px;
	background: none;
	text-align: center;
	color: white;
	z-index: 2;
} 
-->
</style>


</head>


<body>



<SCRIPT LANGUAGE="JavaScript" SRC="deroulant-01.js"></SCRIPT>


<!  *********************************************                A               *****************************************************************************************************************************************************>		
<BR>			 
<a href="#" class="carteCache">           Amitiés                                                     	     		<span><img src="./cp/0005.jpg" width="660" height="380" border=0 alt=" Si vous possedez des cartes postales de Harchies pensez a moi"></span></a>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">           Amitiés 1913                                                	  		<span><img src="./cp/0010.jpg" width="380" height="660" border=0 alt=" Si vous possedez des cartes postales de Harchies pensez a moi"></span></a>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">           Amitiés 1921                                                        			<span><img src="./cp/0020.jpg" width="660" height="380" border=0 alt=" Si vous possedez des cartes postales de Harchies pensez a moi"></span></a>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">              Vue aérienne                                				<span><img src="./cp/1230.jpg" width="660" height="380" border=0 alt=" Si vous possedez des cartes postales de Harchies pensez a moi"></span></a>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">              Vue aérienne le centre                                  			<span><img src="./cp/1240.jpg" width="660" height="380" border=0 alt=" Si vous possedez des cartes postales de Harchies pensez a moi"></span></a>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>			
<a href="#" class="carteCache">             Vue aérienne panoramique                                   		<span><img src="./cp/1250.jpg" width="660" height="380" border=0 alt=" Si vous possedez des cartes postales de Harchies pensez a moi"></span></a>
		

</body>

</html>


Smiley decu bon courage Smiley decu


Modifié par htmleur (15 Nov 2006 - 23:26)
Modérateur
bonsoir,
au lieu d'un top:100px;
un margin-top:-25%; devrait garder l'image a peu prés devant le lien;

il faut adapter cette valeur en fonction de la position des premiers lien , pour ne pas faire disparaitre le haut des premiers images.

++
Smiley eek MA GNI FI QUE Smiley eek

un tout GRAND merci à toi gcyrillus

3 jours que je cherche et toi, en quelques minutes tu as trouvé ! Smiley biggol

Tu es le meilleur ( juste aprés moi ) Smiley cligne


gcyrillus a écrit :
bonsoir,
au lieu d'un top:100px;
un margin-top:-25%; devrait garder l'image a peu prés devant le lien;

il faut adapter cette valeur en fonction de la position des premiers lien , pour ne pas faire disparaitre le haut des premiers images.

++



Smiley cligne
Ce qui nous donne :

Merci Gcyrillus

Voici l'endroit du site ( que je viens de mettre MALGRÈS le problème )

http://users.tvcablenet.be/personal/tvcn127660
<html>

<head>

<title> Cartes Postales de 7321 Harchies dans le Hainaut en Belgique  </title>

<meta name="Generator" content="EditPlus">
<meta name="Autor" content="Bruttuss">
<meta name="Keywords" content="">
<meta name="Description" content="">



<style type="text/css">



<!--
/* définition du lien qui affichera le "calque" */
a.carteCache {
	text-decoration: none; 
}
/* correction d'un bug IE */
a.carteCache:hover {
	background: none;
}
/* définition de la balise <span> inclue dans <a> */
a.carteCache span {
	display: none;
}
/* définition de la balise <span> au survol */
/* avec positions et dimensions du calque */
a.carteCache:hover span {
	display: inline;
	position: absolute;
	[b][#red]margin-top:-25%;  [/b]      [#black]au lieu de       [#blue]top: 100px;[#green]	
             left: 290px;	width: 232px;
	height: 187px;
	background: none;
	text-align: center;
	color: white;
	z-index: 2;
} 
-->
</style>


</head>


<body>

	

</body>

</html>


Sujet clos
Aller à