bonjour
mon code provient de eric meyer CSS technique professionnel chapitre 6 graphique à partir d 'une carte.
<table> ....</table>
table {position relative ; background:url(us-state-map.gif) no-repeat 0% ; }
td {position: absolute; top: %; left: %; }
comment faire avec le code css ( pas de javascript ni <img> ) suivant pour avoir les cellules du tableau ( nom des états) positionnées relativement a la largeur de l' image ( image qui doit être visible entièrement hauteur et largeur) en diminuant la largeur du navigateur ?.
En gros j ai 2 couches ayant en commun l élément table
-des couches Html contenant de plusieurs <td>
-une couche css contenant une image background
en pixel/layout fixed je n 'ai aucun problème a positionner mes <td> <th> par code css top left en %
en mode responsive je me demande si le code html doit être changé ou si seulement un changement de code css est possible ?
en responsive ; le code css fait que l'image est tronqué par un effet clipping mask dynamique puisque la largeur diminue, le contenu visible de l image diminue ( pas de stretch de l image dans la zone visible) . La technique de mediaqueries permet de redefinir une image pour que le sujet central de l'image ne soit pas caché ou soit recentré/bien visible .
La position des nom des états du pays ainsi que la carte des USA doivent correspondre lors du changement de la largeur du navigateur .C'est bien le cas horizontalement mais pas verticalement car je ne n utilise pas le explicitement "height :valuepx ;" .
cordialement
Modifié par 75lionel (27 Nov 2014 - 23:25)
mon code provient de eric meyer CSS technique professionnel chapitre 6 graphique à partir d 'une carte.
<table> ....</table>
table {position relative ; background:url(us-state-map.gif) no-repeat 0% ; }
td {position: absolute; top: %; left: %; }
comment faire avec le code css ( pas de javascript ni <img> ) suivant pour avoir les cellules du tableau ( nom des états) positionnées relativement a la largeur de l' image ( image qui doit être visible entièrement hauteur et largeur) en diminuant la largeur du navigateur ?.
En gros j ai 2 couches ayant en commun l élément table
-des couches Html contenant de plusieurs <td>
-une couche css contenant une image background
en pixel/layout fixed je n 'ai aucun problème a positionner mes <td> <th> par code css top left en %
en mode responsive je me demande si le code html doit être changé ou si seulement un changement de code css est possible ?
en responsive ; le code css fait que l'image est tronqué par un effet clipping mask dynamique puisque la largeur diminue, le contenu visible de l image diminue ( pas de stretch de l image dans la zone visible) . La technique de mediaqueries permet de redefinir une image pour que le sujet central de l'image ne soit pas caché ou soit recentré/bien visible .
La position des nom des états du pays ainsi que la carte des USA doivent correspondre lors du changement de la largeur du navigateur .C'est bien le cas horizontalement mais pas verticalement car je ne n utilise pas le explicitement "height :valuepx ;" .
cordialement
Modifié par 75lionel (27 Nov 2014 - 23:25)