[CSS]Problèmes sur boutton image[resolu]

Bonjour à tous!

Voila j'ai un problème que je n'arrive pas à résoudre (vous vous en doutez ).

En fait dans mon menu j'ai une liste de boutton constitués comme celui-ci :

<a href="index.php"><div class="elementMenu_accueil"> </div></a>

avec pour propriété css :

.elementMenu_accueil (line 230)

{

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: black;

border-right-color: black;

border-bottom-color: black;

border-left-color: black;

background-image: url(onyx/boutton_accueil.jpg);

height: 62px;

width: 179px;

margin-top: 30px;

}

(euh je vous ai copier ce que me donne ff avec sa debugbar)

Tout mes bouttons sont fait de la sorte et ils marchent tous mais pas tt le temps !

Par exemple le boutton inscription ( ) ne marche pas sur la page d'accueil mais marche quand je suis sur ma page contact...

Ce que je ne comprend pas c'est que mon menu est toujours le meme vu que je fait un include de ma fonction menu en php -_-

Merci d'avance pour votre aide!

PS : www.e-caveavin.com pour tester (pareil pour les deux design que je propose-_-)
Modifié par serial (23 Jun 2007 - 10:46)

Salut,

t'as sûrement déjà dû vérifier ça, mais parfois avec la tête dans le guidon c'est pas évident, mais vérifie tout simplement les liens vers les images et les pages. Peut-être que toutes tes pages ou images ne sont pas au même niveau d'arborescence et que du coup les liens ne fonctionnent pas (appel du CSS etc.)

Bonjour,

La page fait 1100+ Ko, dont la quasi-totalité venant du poids des images. Ça explique peut-être quelques lenteurs dans le chargement des images.

Sinon, la syntaxe HTML choisie n'est pas valide. Un petit tour pas le validateur du W3C ne manque pas de le signaler.

MErci pour le validateur! Je l'y avais déjà passé et je n'étais pas arriver à avoir ce rendu autrement qu'en imbricant un div dans un lien (mais je sais que c'est faux vu que div est in-block). Donc si vous avez une solution pour ca je suis preneur!

Par contre j'avais une autre erreur (oublié de fermer un paragraphe) et le fait de la corriger ma permis de refaire marcher mes boutons du menu. Coïncidence? Je vais essayer de valider entièrement mon menu comme ca je serais sur que cela marchera à long terme.

Donc je suis preneur de tout vos conseil!

PS : Merci florent pour la prise de conscience du poids des images -_- je n'y avais jamais fait attention! Merci

serial a écrit :
je n'étais pas arriver à avoir ce rendu autrement qu'en imbricant un div dans un lien (...). Donc si vous avez une solution pour ca je suis preneur!

Solution simple et accessible :

<a href="contact.html"><img src="images/bouton_contact.png" alt="Nous contacter"></a>

C'est tout de même pas bien sorcier.

oui...Je trouvais ca moins maintenable qu'avec le css. JE ne sais pas trop quoi faire

serial a écrit :
oui...Je trouvais ca moins maintenable qu'avec le css.

Tu travailles avec un CMS, un système de template, des include PHP, ou tout autre système qui fait que tu ne dupliques pas le code de ton menu ? Auquel cas, ça sera tout aussi maintenable ainsi.

Oui je travail avec des includes. Mais au niveau de la maintenabilité (oula il est long ce mot lol), le jour ou je veux rajouter un design je suis obliger de modifier le code ET le css. Le problème vient du fait que ces images font parties du design ET de la navigation. Personnellement j'aurais tendance a les placer dans la partie uniquement design. Toi tu les placerais plutôt coté navigation (donc dans le code). Que faire -_-

Merci pour ce débat intéressant^^

serial a écrit :
Mais au niveau de la maintenabilité (oula il est long ce mot lol), le jour ou je veux rajouter un design je suis obliger de modifier le code ET le css.

Ce qui est loin d'être rédhibitoire. Ce qui le serait, c'est d'avoir à modifier toutes les pages d'un site une par une.

Ensuite, tu n'es pas forcément obligé de changer le code HTML, pour certaines modifications tu pourras te contenter de changer d'image.

serial a écrit :
Le problème vient du fait que ces images font parties du design ET de la navigation.

Pour tes utilisateurs ET pour les moteurs de recherche, elles font d'abord partie du contenu de ta page et de la navigation, avant d'être une question de design graphique.
À l'heure actuelle, tu as des liens vides (pas d'intitulé pour le lien, ni sous forme de texte ni sous forme d'une image avec texte alternatif). Si on désactive les images ou les couleurs de fond ou encore les styles CSS, on ne peut plus utiliser les liens. Et les moteurs de recherche seront peu enclins à les suivre s'ils n'ont pas d'intitulé...

C'est vraiment à corriger, d'une manière ou d'une autre, et de préférence avec la méthode que j'indique.

serial a écrit :
Merci pour ce débat intéressant^^

Pour le débat à proprement parler, voir ce sujet :
http://forum.alsacreations.com/topic-2-26756-1.html
Modifié par Florent V. (22 Jun 2007 - 11:47)

Merci de m'avoir indiquer ces pages florent V.!! bonne continuation à tous^^