Discussion :

[kalisha stark]

Bonjour

Je me suis lancée dans un site extensible (j'avais construit mon site en fixe avec dimensionnement en pixels, mais je voulais passer aux % pour mieux m'adapter aux diverses écrans) et je rencontre un soucis qui va me poser problème sur presque tous mes boutons :

Pour les boutons, j'ai une div avec une image en background directement dans la feuille css, et du coup quand j'ai un hover sur la div, l'image change. Le gros problème, c'est que du coup quand mes divs en pourcentage rétrécissent ou s'agrandissent au grès du vent de l'écran, les images ne s'adaptent pas. (et elles boudent complétement le background-size:100%; ) Une image placée au niveau du html n'a pas ce problème, mais avec ce genre d'image je ne peux pas utiliser hover pour changer l'image... Si ? (tous mes espoirs reposent dans le si !). Sinon je passe en html et j'utilise mouseover, mais dans ce cas si le client a désactivé le javascript, adieu les effets !

Enfin si j'ai pas d'autre options je ferais ça, je préfère des gentils boutons qui s'adaptent à la page à un effet de style

Note : en recherchant sur de vieux sujets, j'ai vu que ce n'était pas possible autrefois, je voulais donc plus précisément savoir si le CSS3 avait changé la done


Voici la page pour voir le site en ligne : http://kali.voila.net/

Par ailleurs comme je suis en pleine modification, si vous voyez un gros bug n'hésitez pas à le signaler !

[rodolphebrd]

Bonjour,

je vais essayé de te guider un peu (je serais un peu direct, désolé d'avance).

1. Passe en Html5;
2. supprime ou modifie/optimise ton image de fond (qui bave de partout);
3. nomme correctement tes blocs (menu, aside, content, header...);
4. construit dans un premier temps une architecture simple en Html;
5. ton menu est à proscrire car une balise map ne correspond pas du tout aux besoins (c'est largement réalisable en CSS);

[kalisha stark]

Yop ! Dernières maj mises en ligne, je viens de tester sur un grand écran et sur un smartphone et ça rend pas mal du tout (si on prend le smartphone en paysage ! Et si on ne prend pas garde au problème des images background qui sont du coup coupées )

rodolphebrd ce que tu as dit pour le menu d'accueil m'intéresse beaucoup car j'étais justement en train de chercher avec désespoir comment adapter mon image pleine de liens vu que area demande des positions absolues (et que le coup du calcul de position dynamique en javascript me branche moyen ).

Donc il est possible d'avoir ce résultat avec du css ? J'avais essayé d'y réfléchir mais ça n'avait pas donné grand chose (mon cerveau est peut-être parti en vacance lui...). Si tu pouvais essayer de me donner les grandes lignes pour avoir l'équivalent ça m'aiderait beaucoup =)

mettre les liens dans des divs transparents qui modifient une même image ? J'ai vraiment du mal à visualiser ça

edit : faire de mon image une sorte de faux background en plaçant les texte des liens par dessus avec z-index ? (enfin avec un redissionnement de la page ça ferait un truc space ça je pense)


EDIT 2 : par rapport au problème de base, ce petit bout de code trouvé sur internet va peut-être pouvoir m'aider... Je test et je confirme/infirme

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
a:visited img ,a:active img
{
content:url('change img link as you want');
}

vu que du coup il me permetrait de passer par des images html tout en gardant le hover (dynamisme du css)

EDIT 3 : Ca marche perfect ! =D code final pour une image en particulier dans une div en particulier :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div#Bfr{
	display:inline-block;
	vertical-align: top;
	width:20%;
	height:10%;
 
}		
 
div#Bfr img {
	display:block;
	width:100%;
	height:100%;
	}	
 
 
 
 
div#Bfr a:hover img{
	content:url('../pictures/bouton_drapeau_fr_S2.png'); 
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="Bfr">
    <a href="index_fr.html" title="traduire en français">
       <img src="pictures/bouton_drapeau_fr_NS2.png" />
    </a>
</div>

EDIT :
Je me suis peut-être un peu emballée vu que IE et firefox ne considèrent pas "content:url(...)" du coup j'utilise en prime un code javascript sur la page html (avec onmouseover et onmouseout), les deux solutions ne se gènent pas et comme ça même si je tombe sur quelqu'un qui a désactivé le javascript, sur au moins opera et chrome, on a les effets de hover avec la fonction css content

EDIT EDIT DIT :
J'abandonne le content car par rapport à ma problématique de départ il pose un soucis majeur : l'image chargée lors du hover ne s'adapte pas à la taille de la div Donc une bonne solution pour éviter javascript sur opéra et chrome et sur site fixe uniquement

[rodolphebrd]

C'est un menu facile à réaliser :

• à base de liste non-ordonnée;
• de changement de police avec font-face;

Ton menu extensible se comporte très mal lorsque l'on réduit la fenêtre.

Je fais un exemple...

[NoSmoking]

Bonjour,
<HS>
des script comme celui ci

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script type="text/javascript">
//<![CDATA[
if (typeof _gstat != "undefined") _gstat.audience('','confirme-voila.net');
//]]>
</script>

sont-ils indispensables sur des pages de test?
</HS>

Sinon vu rapidement une erreur de mouseover quand on réduit la taille de l'écran sur Compagny, Services..., pas regardé plus avant.

Astuce:
sous FireFox CTR+ MAJ +M pour redimensionner sans trop ce fatiguer

[kalisha stark]

NoSmoking > pour la page de test je t'avoue que je fiche ça direct, mais c'est sur qu'il va falloir nettoyer ^^'

> pour le soucis au niveau du mouseover c'est justement la div area et donc l'effet du map sur mon image que je dois virer, à cause de ce bug justement C'est assurément un big soucis

> Merci beaucoup pour l'astuce ! =D ça va m'épargner des aller-retour !

rodolphebrd > j'attends ton exemple pour y voir plus clair, mais j'imagine que je dois tout de même renoncer aux chouettes effets photfiltre ^^' (on ne peut pas tout avoir )

[rodolphebrd]

Code kalisha stark :

Sélectionner tout - Visualiser dans une fenêtre à part

renoncer aux chouettes effets photfiltre

Qu'est-ce que c'est

[rodolphebrd]

J'ai pris le fond du menu, à toi d'enlever le texte sur Photoshop pour mieux tester.
http://codepen.io/anon/pen/AxBfi

J'ai gardé l'effet au survol, mais il est à changé

[kalisha stark]

C'est génial ! Merci beaucoup =D (et les chouettes effets photofiltres sont toujours là en fait donc j'ai rien dit )

Je regarde ça ce soir à tête reposée et j'applique demain, ma journée de boulot est finish pour today

Encore merci beaucoup =D

C'est donc une double résolution pour ce sujet

[rodolphebrd]

Pour la police personnalisée tu utilises @font-face (connais-tu ?)

[kalisha stark]

D'accord Oui je connais mais le site qui étais conseillé pour avoir toutes les versions de la police pour tous les navigateurs ne fonctionnait pas au bureau (bouton flash d'après leur faq et comme je peux rien installer )

bref il faudra juste que je prenne le temps de générer ça chez moi