28173 sujets

CSS et mise en forme, CSS3

Zone cliquable

Bien le bonjour à tous.

J'expose mon petit soucis : je termine mon thème wordpress, et la problème, je comptais pour mon menu utiliser des zones cliquables sur une image (ma bannière), j'ai donc défini une zone pour mon lien, mais là, stupeur, le lien ne fonctionne pas, je lui ai pourtant ajouté un contenu texte que j'ai fait disparaître grâce à "text-indent:-5000px;"...

La je sèche...ci-joint le code des parties concernées :

#news {
position:absolute;
cursor: pointer;
right:240px;
width:80px;
height:35px;
top:50px;
text-indent:-5000px;
display: block;
}



<a id="news" href="http://www.tetealair.com/" title="News">NEWS</a>


Et voici l'adresse du site : http://www.tetealair.com

En vous remerciant d'avance.
Modifié par jbbourgois (22 Nov 2007 - 14:38)
Si j'en crois le code source, le lien est dans un div et c'est ce div qui à l'id "news" 

<div id="news"><a href="http://www.tetealair.com/" title="News">NEWS</a></div>


C'est très fortement possible que ce soit ça le problème... Ton lien ne prend pas les propriétés qu'il faut, il reste un élément inline, etc...
Modifié par TheMonkeySan (22 Nov 2007 - 21:59)
Bonjour,

Sans avoir approfondi l'exemple en ligne (j'ai un peu de mal avec les frames Smiley ohwell ), d'après ce qu'indique TheMonkeySan, tu as commis une erreur dans ton code.

Si j'ai bien compris, tu n'as pas placé l'identifiant au bon endroit : au lieu de le placer sur les liens, tu l'as indiqué sur le <div> le contenant. Du coup, les propriétés que tu voulais lui affecter échouent au <div> en question et non au lien... Smiley cligne

Par ailleurs, n'oublie pas que pour une suite de liens, l'emploi d'une liste est tout indiqué. Smiley murf
Bonjour,

Ton lien est un élément a, qui a par défaut un rendu de type inline (en-ligne).
Il est dans un conteneur div#news qui a un text-indent négatif. La zone cliquable qui porte uniquement sur le texte du lien se retrouve donc 5000px à gauche du bord gauche de div#news. Donc invisible à l'écran.

Si je passe la souris sur div#news, il n'y a pas de lien. Il y a juste un cursor: pointer qui m'induit en erreur (je crois que c'est cliquable, mais non, c'est juste une div).

Solution 1:
À partir du code actuel, il suffirait de donner le style que tu attribues à div#news au lien plutôt qu'à la div.

Solution 2:
Utiliser une image (élément img) pour le lien, et pas une image de fond. Avantage: on peut rendre ça plus accessible que la solution actuelle, pour peu qu'on renseigne correctement le texte alternatif de l'image.

À ce propos, niveau accessibilité il y aurait beaucoup à faire. En l'état, c'est hélas assez catastrophique.
Certains parti-pris de mise en page sont aussi assez problématiques (une série de tirets pour tracer une ligne pointillée???).
Enfin, chaque chose en son temps...
Tout d'abord merci beaucoup pour ces réponses complètes et très instructives.
Je pense que je vais redécouper mon image et utiliser votre 2e solution.

Il est vrai que je n'avais pas encore testé le validateur, j'avoue que cela m'effrayait un peu (et vu à quel point je rame déjà...), cela dit, pourquoi les tirets sont-ils problématiques ?
jbbourgois a écrit :
Il est vrai que je n'avais pas encore testé le validateur, j'avoue que cela m'effrayait un peu (et vu à quel point je rame déjà...), cela dit, pourquoi les tirets sont-ils problématiques ?

Ils sont problématiques parce que si je n'ai pas la bonne fonte (police de caractères), si j'agrandis le texte, si je le réduis, si j'ai une taille de texte par défaut différente de celle attendue, etc., eh bien ça sera trop court ou trop long, ça ne prendra pas toute la largeur ou ça débordera, etc.

Et aussi: ça laisse beaucoup moins de libertés de mise en page!

Il serait beaucoup plus intéressant de passer par un border-bottom sur div.meta (avec un peu de padding-bottom pour que la bordure ne soit pas collée au contenu). On peut alors virer les br qui trainent, les tirets, etc.

Sinon, problèmes de qualité rencontrés:
- l'utilisation d'une iframe... à proscrire;
- une structure de titres un peu aléatoire;
- un balisage HTML pas toujours pertinent (série de div pour le menu, quelques br pour créer des espaces, etc.);
- un texte trop petit (sur un écran en 1280px de large, c'est vraiment trop petit), avec une taille de texte figée en pixels;
- l'utilisation de cursor: crosshair sur les champs de formulaire... ça n'est pas le comportement par défaut, et ça ne peut que perturber les utilisateurs... (de même, le style avec fond noir pour ces éléments de formulaire est assez inattendu, et peut être déroutant).

Voilà pour un début. Smiley cligne
Il est probable que tu ne puisses pas tout modifier. En priorité: 1) rendre le menu cliquable, 2) éviter autant que possible de passer par une frame (quitte à prendre un petit hébergement pour ce site), 3) agrandir un minimum la taille du texte.
Florent V. a écrit :

- l'utilisation de cursor: crosshair sur les champs de formulaire... ça n'est pas le comportement par défaut, et ça ne peut que perturber les utilisateurs... (de même, le style avec fond noir pour ces éléments de formulaire est assez inattendu, et peut être déroutant).


Pour cette partie, je pense garder ce parti pris...

Une fois le menu cliquable je m'occuperai de virer les tirets.

Par contre, ou voyez-vous une iframe ?

Encore une fois merci pour ces conseils avisés.
jbbourgois a écrit :
Par contre, ou voyez-vous une iframe ?

Pardon, une frame tout court. Smiley smile

Code source de www.tetealair.com :
<html>
        <head>
                <title>http://www.tetealair.com</title>
                <meta name="generator" content="ORT - Ovh Redirect Technology">
                <meta name="url" content="www.jbbourgois.com">
                <meta name="robots" content="all">
        </head>
        <frameset rows="100%,0" frameborder=no border=0>

                <frame name="ORT" src="http://www.jbbourgois.com">
                <frame name="NONE" src="" scrolling="no" noresize>
                <noframes>
                        <body><a href="http://www.jbbourgois.com">Click here</a><hr></body>
                </noframes>
        </frameset>
</html>


Je suppose que le nom de domaine tetealair.com a été configuré pour pointer vers une URL et non pas vers l'adresse IP d'un serveur dument configuré.
En effet, il s'agit d'une redirection faite automatiquement par OVH...

Désolé d'être insistant, mais pour mon histoire de zone cliquable, de quelle manière puis-je positionner mes images "news, a propos,..." (les images du menu) correctement en haut à droite de la div "rap"...?

Dois-je m'y prendre de cette façon :
li><a href="http://www.tetealair.com/"><img id="news" src="images/news.jpg" /></a></li>


Et attribuer à #news des attributs comme float : right etc...?

Edit: j'ai au passage changé les tirets pour un border dashed, mais cette dernière vient se coller a mon contenu...
Modifié par jbbourgois (23 Nov 2007 - 13:51)
Non, il faudrait plutôt faire ceci:
<ul id="menu">
	<li><a href="..."><img src="..." alt="News" /></a></li>
	<li><a href="..."><img src="..." alt="À propos" /></a></li>
	<li><a href="..."><img src="..." alt="Shop" /></a></li>
	<li><a href="..."><img src="..." alt="Contact" /></a></li>
</ul>

Et positionner ul#menu... par exemple avec une simple marge à gauche (de 600 et quelques pixels, quelque chose du genre).

Ne pas oublier le texte alternatif pour les images.
Une dernière petite chose : je ne peux définitivement pas afficher les images...je sais qu'il faudra que je vire le padding-top de la div "rap" etc...
Mais pourquoi mes images ne s'affichent pas ? Le chemin vers le répertoire est pourtant le bon.
Lorsque j'essaie d'accéder à une image, par exemple celle-ci:
http://www.jbbourgois.com/images/apropos.jpg

Je me retrouve redirigé vers la page d'accueil du site.
Je pense qu'il y a un problème de ce côté là. Soit le chemin vers l'image est mauvais et les erreurs 404 redirigent vers la page d'accueil, soit il y a une réécriture d'URL mal définie quelque part.

Je penche plutôt pour la première solution, vu que le chemin suivant (qui n'est pas celui que tu utilises) marche très bien:
http://www.jbbourgois.com/wp-content/themes/TAL/images/apropos.jpg

Dans tes templates Wordpress, tu dois avoir une variable PHP qui te permet d'indiquer l'URL du dossier du thème utilisé. Il faut s'en servir pour construire l'URL des images du menu.
En effet en mettant le chemin complet cela fonctionne, mais alors, pourquoi quand j'avais mis la bannière en background image avec comme chemin "images/top.jpg" cela fonctionnait-il ?
Ca me dépasse un peu...
jbbourgois a écrit :
En effet en mettant le chemin complet cela fonctionne, mais alors, pourquoi quand j'avais mis la bannière en background image avec comme chemin "images/top.jpg" cela fonctionnait-il ?
Ca me dépasse un peu...

Les liens relatifs donnés dans une feuille de style CSS prennent la feuille de style comme point de départ.

Les liens relatifs donnés dans une page HTML prennent la page HTML comme point de départ.

D'où la différence. Smiley smile
Oui, logique et élémentaire.
Heureusement que je commence à voir le bout du tunnel, le codage, c'est vraiment pas mon truc !

Cela devrait être bon maintenant, merci beaucoup à vous, en particulier à vous Florent.
Sujet clos
Aller à