Forum d'entraide PHPFrance

Bonjour,

je voudrais savoir qu'est ce qui bloque sur mon site (je débute en php )

Sur l'adresse http://www.lesailesdanges.fr dans le footer.php, il y 3 vignettes.
Sur chaqu'une des vignettes, je voudrais faire apparaitre une image puis une autre image lors du survole.

Voici comment j'ai procédé :

dans mon PHP, j'ai crée une div pour chaque vignette voici mon code :

<div class="item1">
<a id=contact_link target="_blank" href="/contact/" title="Contact">contact</a>
</div>

Voici mon css associé :

.item1{
display:block;
width:280px;
height: 100px;
background:url("/wp-content/uploads/footer/footer_adresse00.png");
}
.item1 a:hover{
display:block;
width:280px;
height: 100px;
background:url("/wp-content/uploads/footer/footer_adresse01.png");
}

Ma question ?

pourquoi, j'ai le "mots" contact qui reste apparant ?
pourquoi la zone cliquable ne fait pas la taille de mon image footer_adresse00.png ?
Est ce que j'utilise la bonne méthode ?

Merci de votre aide !

Si un élément passe par dessus un autre c'est qu'il vient ensuite dans le code html (le second afficher passe par dessus le premier). Pour modifier cet ordre tu peux jouer sur le z-index.

(Ton sujet n'est pas dans le bon forum. Il s'agit ici de html/css )

Merci pour l'information mais cela n'est pas suffisant dans mon cas.

Je vois apparaitre 3 choses (pour une vignette, celle de droit contact par exemple) :

le mot "contact" (en haut a gauche)
l'image 1 (qui apparait au chargement de la page)
l'image 2 quand on survolle l'image 1...

Mais tout est mal agencé et je ne sais pas comment m'y prendre...

Pouvez-m'aidez ?

Merci.

Contact apparait parce que il est présent dans ton code html

<div class="item1">
<a id=contact_link target="_blank" href="/contact/" title="Contact">contact</a>
</div>

==>

<div class="item1">
<a id=contact_link target="_blank" href="/contact/" title="Contact"></a>
</div>

J'ai fait quelque chose de semblable ici
http://www.esco-da.be/Home/Home_Fr.php

<p class="swap"><a href="LIEN" style="background-image:url(IMAGE 1);" onMouseOut="this.firstChild.style.visibility = 'visible'" onMouseOver="this.firstChild.style.visibility = 'hidden'"><img src="IMAGE 2" alt="" width="XX" height="YY" /></a></p>

et css la partie avec onMouseOver et onMouseOut sert à gérer les IE

Merci ça marche mieux !

mais je n'ai pas utilisé dans mon cas ce code :

alt="" width="280" height="100"

Pour l'attribut alt, il est recommandé de le remplir surtout pour les images comportant une partie textuelle. Cela aidera les personnes avec des problème de vue et les personnes désactivant les images. Mais il n'est pas indispensable.

Les attribut width et height renseigne la taille de ton image, les ommettre affiche l'image dans ces dimensions. Il ne sont pas indispensable non plus.

Cependant, je t'encourage à utiliser et compléter ces 3 attributs

Pour l'attribut alt, il est recommandé de le remplir surtout pour les images comportant une partie textuelle. Cela aidera les personnes avec des problème de vue et les personnes désactivant les images. Mais il n'est pas indispensable.

Ta phrase est un peu ambigüe ... des images comportant une partie textuelle ? Autant dire que le contenu de alt est ce qui s'affiche dans les navigateurs textuels ou si l'image n'est pas disponible. Effectivement c'est recommandé de remplir cette balise mais pas toujours possible.

Les attribut width et height renseigne la taille de ton image, les ommettre affiche l'image dans ces dimensions. Il ne sont pas indispensable non plus.

Cependant, je t'encourage à utiliser et compléter ces 3 attributs

Par contre il est très vivement recommandé de renseigner les dimensions des images. Sinon la page va faire de l'accordéon en attendant le chargement des images. C'est visible quand on vide le cache du navigateur et que l'on fait des tests d'affichage sur le serveur distant. En vidant le cache on se met donc dans les conditions d'un visiteur visitant la page pour la première fois et l'on s'aperçoit mieux de la nécessité de renseigner les dimensions des images

Bonjour,

merci pour ces conseils, j'ai donc repositionné les paramètres Alt + Widht + Height.

Par contre cette technique au final ne me satisfait pas !

Voila sur mon navigateur habituel FireFox tout fonctionne bien !


Par contre sur Internet Explorer 7, cette fonction bug complet.. !! j'ai mes 2 images qui ce superpose !


Donc si vous avez une solution ça serait super.

Salut

Pour IE7, (IE 8 et autre navigateurs valables (IE 8 n'en fait pas partie)) il est important de mettre l'instruction dans ta feuille de style

Pour reglé la superposition des images, ajoute un background à tes balises images avec PS si tu abandonne le support de ie6, retire les mention onmouseout et onmouseover

C'est magique !!! merci !

Allez j'en profite encore un peu pour poser une dernier colle, vu que j'ai affaire à des vraiments bon !

Pourquoi mon paramétrage de CSS dans mon Footer mes laisse de bonne marge sur Firefox :


Sur IE 7 j'ai une marge qui est bien plus grande, encore un mauvais paramètre dans le CSS ?


D'avance merci !

au passage, ça ne marche pas du tout sous chrome... (j'essaye d'envoyer la capture...)


(l'upload ne marche pas sur le forum?)

faire des images de même taille devrait regler le problème de chrome, prend le format png pour gerer la transparence

Personne n'a la solution pour le problème IE7 vs Firefox ???

(Le bas du site reste décallé... )

C'est à priori un problème de marges qu'IE n'interprête pas selon les standards.

Jette un oeil là-dessus