Problème affichage tableau index : lien et hover

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème affichage tableau index : lien et hover

Message par Ancients le Ven 4 Mar 2016 - 5:46

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://nsp-d3.forumofficiel.com/

Description du problème

Bonjour,

J'ai créé un tableau comme vous pouvez le voir avec une image en background, voici le code (qui se trouve dans index_body) ci-dessous :

Code:
<table align="center" style="width: 100%;" border="0" rules="rows">
                                                 
<tbody>
<tr>
                                                   
<td align="center" style="background-image: url(http://i84.servimg.com/u/f84/19/42/85/35/fond_c10.png); background-repeat:no-repeat; background-position:center; width: 307px; height: 185px; position: center; float: center;">
                          <a href="Lien vers le sous-forum N°1"><strong>Titre du Sous-forum N°1</strong></a>                         
<ul>
                                                 
<li>
                        <a href="Lien vers sujet N°1">Titre du Sujet N°1</a>                         
</li>
                                                 
<li>
                        <a href="Lien vers sujet N°2">Titre du Sujet N°2</a>                         
</li>
                                                 
</ul>
                                                 
</td>
 <td style="width: 10px;">
                                                   
</td>
 
<td align="center" style="background-image: url(http://i84.servimg.com/u/f84/19/42/85/35/fond_c10.png); background-repeat:no-repeat; background-position:center; width: 307px; height: 185px; position: center; float: center;">
                          <a href="Lien vers le sous-forum N°2"><strong>Titre du Sous-forum N°2</strong></a><br />                         
<ul>
                                                 
<li>
                        <a href="Lien vers sujet N°4">Titre du Sujet N°4</a>                         
</li>
                                                 
<li>
                          <a href="Lien vers sujet N°5">Titre du Sujet N°5</a>                         
</li>
                                                 
</ul>
                                                 
</td>
<td style="width: 10px;">
                                                   
</td>
 
<td align="center" style="background-image: url(http://i84.servimg.com/u/f84/19/42/85/35/fond_c10.png); background-repeat:no-repeat; background-position:center; width: 307px; height: 185px; position: center; float: center;">
                          <a href="Lien vers le sous-forum N°2"><strong>Titre du Sous-forum N°3</strong></a><br />                         
<ul>
                                                 
<li>
                        <a href="Lien vers sujet N°6">Titre du Sujet N°4</a>                         
</li>
                                                 
<li>
                          <a href="Lien vers sujet N°7">Titre du Sujet N°5</a>                         
</li>
                                                 
</ul>
                                                 
</td>
<td style="width: 10px;">
                                                   
</td>
                                                 
</tr>
                                                   
</tbody>
</table>

J'aimerai faire en sorte que chaque images et son contenu texte fassent un seul lien (ne prenez pas en compte les liens Titre du sous-forum, Titre du sujet 1 et 2 ! Je vais les supprimer, ça sera du texte)

J'aimerai faire un hover avec une deuxième image qui remplacera l'autre au passage de la souris.

Merci d'avance pour votre aide


Dernière édition par Ancients le Mar 8 Mar 2016 - 18:32, édité 1 fois

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage tableau index : lien et hover

Message par Feuilla' le Ven 4 Mar 2016 - 20:33

Re/Bonsoir,
on peut rajouter une class aux cellules td :
Code:
<td class="table-index" ...
par exemple. Smile
Ensuite, vous rajoutez l'image de fond par la Feuille de style, et l'image de fond qui apparaîtra au survol :
Code:
.table-index {background-image:url("http://i84.servimg.com/u/f84/19/42/85/35/fond_c10.png")}
.table-index:hover {background-image:url("adresse de l'image au survol")}
Note : les points de suspension sur le premier exemple remplacent la suite de votre code. Wink

On peut aussi englober chaque partie avec
Code:
<div class="table-index">
au début et
Code:
</div>
à la fin.
Bonne soirée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage tableau index : lien et hover

Message par Ancients le Sam 5 Mar 2016 - 5:11

Bonsoir,

Votre code marche très bien, j'ai pu l'adapter à mes attentes. Mais j'ai 1 problème qui apparait :

Le premier passage sur chaque image provoque un petit "saut" de l'image (surement du à son chargement), et je vous avoue que ce petit détail casse tout le charme de l'animation avec le hover. Normalement un hover même avec image est fluide.
Il y a t-il une solution? Peut-on faire en sorte que les images du hover se charge en même temps que la page?

J'ai deux autres questions :
  • Comment faire pour que le texte ne dépasse pas de l'image? J'ai essayé en intégrant les éléments width et height dans mon <td>, mais sans aucun changement. J'ai peut-être mal fait les choses, je ne sais pas.

  • Enfin j'aimerai que au passage de la souris l'image hover soit un lien.


Merci beaucoup et vous avez gagné un autre beaucoup Smile

Bien à vous

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage tableau index : lien et hover

Message par Chacha le Sam 5 Mar 2016 - 10:11

.


Dernière édition par Chacha le Dim 6 Mar 2016 - 10:42, édité 1 fois


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

Masculin
Messages : 50925
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage tableau index : lien et hover

Message par Feuilla' le Sam 5 Mar 2016 - 13:16

Re-Bonjour Ancients,
pour l'image-lien qui change au passage de la souris (survol), on peut utiliser par exemple :
Code:
<a href="adressedulien" title="textedel'infobulle"><img src="adressedel'imagepardéfaut"
alt="" onmouseover=this.src="adressedel'imageausurvol"
  onmouseout=this.src="adressedel'imagepardéfaut" /></a>
à chaque fois qu'il y a des guillemets " " avec du texte dedans, il faut remplacer par ce qui convient vraiment.
Par exemple, si on veut cette image sans rien :

et cette image lors du survol :

qui affiche "ForumActif" et qui redirige vers la page forum.forumactif.com, :
Code:
<a href="http://forum.forumactif.com" title="ForumActif"><img src="http://illiweb.com/bl/logo.png"
alt="" onmouseover=this.src="http://illiweb.com/fa/admin/icones/help.png"
  onmouseout=this.src="http://illiweb.com/bl/logo.png" /></a>

L'image change au survol, affiche une infobulle "ForumActif" et au clic redirige vers la page forum.forumactif.com. Smile

Pour les images, si elles sont lourdes et/ou prennent du temps à charger on peut les optimiser pour les alléger. Smile
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage tableau index : lien et hover

Message par Ancients le Dim 6 Mar 2016 - 0:56

Bonsoir Feuilla,

J'ai essayé pour le moment l'optimisation des 6 images (3 normales et 3 hovers) pour régler ce problème de fluidité. Mais le problème persiste.

A chaque rafraichissement de la page, on peut observer ce petit temps de chargement.

Merci pour votre aide et votre temps, c'est toujours un plaisir.

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage tableau index : lien et hover

Message par Feuilla' le Dim 6 Mar 2016 - 10:42

Re-Bonjour !
Pour le texte qui déborde (les images c'est tout de suite après), il faut d'abord ajouter une class au td (je crois que vous l'avez fait) comme :
Code:
<td class="table-index1" ...
ensuite, pour tester par exemple vous pouvez écrire de nombreux de mots collés, une longue suite de "aaaaaaaaaaa", ...
et dans le CSS
Code:
.table-index1 {
  overflow:scroll;
  display:block;
}
des barres de défilement apparaîtront pour voir tout le texte qui ne débordera pas. Wink

Par contre il est possible que ça décale le texte vers le haut, du coup il faut englober tout le texte dans des balises, juste après la première balise td (celle qui a la class)
Code:
        <td class="table-index1" align="center" style="background-image: url(http://i84.servimg.com/u/f84/19/42/85/35/fond_c10.png); background-repeat:no-repeat; background-position:center; width: 307px; height: 185px;"><div class="groupe-liens-index">
                                  <a href="Lien vers le sous-forum N°1"><strong>Titre du Sous-forum N°1 </strong></a>                         
        <ul>
                                                         
        <li>
                                <a href="Lien vers sujet N°1">Titre du Sujet N°1</a>                         
        </li>
                                                         
        <li>
                                <a href="Lien vers sujet N°2">Titre du Sujet N°2</a>                         
        </li>
                                                         
        </ul>
          </div>                                           
        </td>
(au fait j'ai supprimé des parties "position:center;" et "float:center;" qui ne sont pas correctes)
et dans le CSS on met
Code:
.groupe-liens-index {
    margin-top: 25%;
}
le texte sera à peu près centré verticalement.

Pour les images, si ce temps de chargement s'obstine à rester, un moyen serait de faire les "portes
coulissantes". Pour réaliser ça il faudrait que vos deux images fassent une seule, côte à côte.
C'est sur la ligne "background" du CSS que ça tient, du coup il ne vous sera plus obligatoire de mettre le lien du background-image dans la balise td. Smile
Vous pourrez mettre dans le CSS pour que ce soit plus clair :
Code:
.table-index1 {
  background:url("http://i84.servimg.com/u/f84/19/42/85/35/fond_c10.png");
  background-repeat:no-repeat;
  background-position:center center;
}
Et dans la balise on supprime
Code:
background-image: url(http://i84.servimg.com/u/f84/19/42/85/35/fond_c10.png); background-repeat:no-repeat; background-position:center;
Et ça a aussi l'avantage d'être beaucoup plus lisible et propre que lorsque le style est donné dans les balises.

Pour terminer avec les images, vous pouvez faire un petit test, en rajoutant une cellule td, qui a une class, par exemple :
Code:
        </td>
              <td class="tabletest">Contenu de l'article "tabletest" ...
          </td>
Nous allons faire les portes coulissantes avec ce td.
Dans la Feuille de style, on va lui mettre cette image de fond :, et au survol elle devra faire la porte coulissante (pas de saut).
Code:
.tabletest {
  display:block ;
  background:lime url(http://im0.all-up.com/static/images/free-hosting-forum.png) left top no-repeat ;
  color:#88BF41;
  text-align:center;
}   
.tabletest:hover, .tabletest:focus, .tabletest:active {
  background:lime url(http://im0.all-up.com/static/images/free-hosting-forum.png) right top no-repeat ;
}
Remarque : l'effet est plus fort quand on teste avec une grande image, donc nous allons utiliser par exemple celle-ci :
(l'avatar par défaut des forums ForumActif) :
Code:
.tabletest {
  display:block ;
  background:lime url(http://illiweb.com/fa/invision/pp-blank-thumb.png) left top no-repeat ;
  color:#88BF41;
  text-align:center;
}   
.tabletest:hover, .tabletest:focus, .tabletest:active {
  background:lime url(http://illiweb.com/fa/invision/pp-blank-thumb.png) right top no-repeat ;
}
Quand vous testerez, vous verrez, l'avatar se déplacer de droite à gauche au survol !
On se servira de cet effet quand vous aurez vos images collées et fusionnées pour que ce soit le côté droit (celui qui doit apparaître au survol) qui arrive lorsque la souris passe. Wink
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage tableau index : lien et hover

Message par Ancients le Dim 6 Mar 2016 - 21:25

Bonsoir chère Feuilla,

Vous m'avez écrit un beau bloc et je vous remercie pour votre temps et votre patience.

Je vais regarder ça, je vous tiens au courant très vite Smile

Merci, bien à vous

Edit :

  • Pour ce qui est du dépassement du texte, le problème est horizontal avant tout, j'aimerai juste que la zone du texte ait la dimension de la zone de l'image.
    Ici vous pouvez voir que le texte dépasse la zone de l'image :


  • Pour le test de défilement, l'animation ne marche pas :

    sans passage de souris


    avec passage de souris

    J'aimerai cependant garder le hoover mise en place initialement, juste avec ces deux images (image normale, et image "éclairée" avec le hoover).
    Est ce que chez vous, vous avez ce problème de "chargement" des images?


Merci beaucoup

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage tableau index : lien et hover

Message par Ancients le Mar 8 Mar 2016 - 10:12

up

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage tableau index : lien et hover

Message par Miettes le Mar 8 Mar 2016 - 13:46

Pour le texte qui dépasse, si tu essayais de :

1) Ajouter une classe sur le lien, par exemple :
Code:
<a href="#" class="lien-sous-forum"><strong>Titre du Sous-forum N°1xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</strong></a>

2) Dans la CSS, tu mets ce lien en inline-block, tu lui donnes une largeur et tu lui dis que si le texte est trop long, il doit se couper pour ne pas dépasser la largeur fixée :
Code:
.lien-sous-forum{
    display: inline-block;
    width: 252px;
    word-wrap: break-word;
}

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage tableau index : lien et hover

Message par Ancients le Mar 8 Mar 2016 - 16:59

En fait, j'ai indiqué tout en haut que les liens seront supprimés, ça ne sera que du texte.

J'ai essayé de remplacé par un autre <td> avec la class dedans mais le résultat est spécial Smile

Merci pour votre aide

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage tableau index : lien et hover

Message par Miettes le Mar 8 Mar 2016 - 17:08

Ton code va ressembler à quoi du coup sans les liens ?

Idea un td = une case d'un tableau. Avec le code que tu as fait là, ton tableau considére juste qu'il a une case de plus :/

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage tableau index : lien et hover

Message par Ancients le Mar 8 Mar 2016 - 17:34

Hm quelque chose comme ça je dirais :

Code:
<td class="table-index1" align="center">
                          Titre du Sous-forum N°1xxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
                          blabalbalblvdflibjdblhqdmofbhqdmofbhqmdofbhqdmofihbmoqdifhb<br />
                          dbhqdibjqdmgbjqemibhqdglibqe=lbhqdl=bgqd=lgbndql=gbndljgn<br />
                             
</td>
 <td style="width: 10px;">
                                                 
</td>


Et vous savez à quoi sert ceci?

Code:
</td>
 <td style="width: 10px;">

Merci!

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage tableau index : lien et hover

Message par Miettes le Mar 8 Mar 2016 - 17:38

Zioup là, un tuto utile pour comprendre les tableaux Wink [clic]

----

Pour en revenir à ton code, met le contenu de ta case dans une balise div :
Code:
<td class="table-index1" align="center">
   <div>
      Titre du Sous-forum N°1xxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br />
      blabalbalblvdflibjdblhqdmofbhqdmofbhqmdofbhqdmofihbmoqdifhb<br />
      dbhqdibjqdmgbjqemibhqdglibqe=lbhqdl=bgqd=lgbndql=gbndljgn<br />
     </div>                           
</td>

et ensuite, dans ta CSS :
Code:
.table-index1 > div{
    display: inline-block;
    width: 252px;
    word-wrap: break-word;
}

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème affichage tableau index : lien et hover

Message par Ancients le Mar 8 Mar 2016 - 18:31

Merci, c'est parfait!

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum