Discussion :

[adamo901]

bonjour tout le monde,

Voici un bout de code css

Code :

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
.pagelinks a {
    vertical-align: middle;
    border: solid 1px #ff6600;
    text-decoration:none;
    margin: 2px;
    padding:2px;
    background-color:#ffffcc;
}
.pagelinks a:hover {
    color:#ffffcc;
    background-color:#ff9900;
}
 
.pagelinks img  {
    vertical-align: middle;
    border:none;
}

Avec ce code, j'ai les images qui ont le même style que les liens!
Quel est le code CSS à utiliser pour que les images n'aient aucun style. (pas de border ni de color ou background-color)
Merci

[laurentibus]

comment ca tes images on le meme style que t liens ...................met nous ton code HTML stp

[adamo901]

voilà le code html que je ne peux pas changer
je n'ai accès qu'au fichiers css

Code :

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

1
2
3
4
5
6
7
 
<span class=pagelinks>
    <a href=?p=1><img src=../img/first.gif></a>
    <a href="?p=5" title="Go to page 5">5</a>
    <a href="?p=6" title="Go to page 6">6</a>
    <a href=?d-446797-p=12><img src=../img/last.gif></a>
</span>

Ce dont j'ai besoin est que le style que j'ai donnée à la balise <a> ne s'applique pas aux images

[orphen]

Salut,

Utilise le css suivant

Code :

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

1
2
3
4
 
img{
border:none;
}

Je pense que c'est ce que tu cherche a obtenir

a ++

[adamo901]

Ça existe déjà dans le code CSS que j'ai posté!

Désolé!! ça ne marche pas!

[orphen]

nous pourrions peut être avoir un aperçu image de tes liens images ?

[adamo901]

bien sur :



Mon but est que les flèches n'aient ni de contour (borders) ni de couleur d'arrière plan (background-color)

Merci

[laurentibus]

non mais c normal que tes images "aient" le style de tes liens ...... en fait elle n 'ont pas le style de tes liens mais tes liens englobe les images donc forcement on a l impression que les images ont le style des liens ....

vire moi ces liens et met un onclick dans l image !!!

[adamo901]

Je suis tout à fait d'accord avec ton analyse.

Cependant, permets moi de reformuler ma question :

Que faire pour que les images ne subissent pas le style de la balise <a>?

Sachant que je ne peux absolument pas intervenir sur le code html.

Merci

[Aumélisse]

Il faut que tu retires le CSS actuel (de tes liens) et que tu crées une classe en CSS que tu appliques à tes liens (ceux que tu veux encadrés).

Code :

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

1
2
3
.monlien{
  /* le CSS que tu veux lui appliquer*/
}

et en html

Code :

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

<a class="monlien" href="http://etc/">ton lien </a>

Sur les images, n'applique pas de classe.

[orphen]

Tu n'a apparemment pas essayer d' utiliser le bout de code que je t'ai fourni qui annule les bordures de toutes les images et pas d'une image par parenter.

Je viens de l'essayer de mon coter ça fonctionne très bien.

le code:

Code :

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
21
 
img{
	border:none;
}
  body {
.pagelinks a {
    vertical-align: middle;
    border: solid 1px #ff6600;
    text-decoration:none;
    margin: 2px;
    padding:2px;
    background-color:#ffffcc;
}
.pagelinks a:hover {
    color:#ffffcc;
    background-color:#ff9900;
}
 
.pagelinks img  {
    vertical-align: middle;
}

a++

[adamo901]

j'ai bien essayer ton code orphen et c'est blizzard: ça marche pas chez moi!!
Merci quand même d'avoir insister sur le truc

Code :

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

imag{border:none;}

en ce qui concerne Aumélisse : je n'ai pas accès au code html : il est généré automatiquement avec "DisplayTag" dans une page jsp.

[orphen]

Si mon code ne fonctionne pas c'est que le problème ne viens pas directement de cette partie du css.

As tu une version en ligne (je regarderai directement avec firebug)

JE t'ai mis un fichier html avec ton code qui fonctionne chez moi

[Candygirl]

Tu peux ne cibler, avec un sélecteur d'attribut, que les liens comportant un title:

Code :

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

1
2
3
4
5
6
7
8
.pagelinks a[title] {
    vertical-align: middle;
    border: solid 1px #ff6600;
    text-decoration:none;
    margin: 2px;
    padding:2px;
    background-color:#ffffcc;
}

Mais ne fonctionne qu'à partir de IE7

[Bovino]

Merci quand même d'avoir insister sur le truc

Code :

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

imag{border:none;}

Tu n'as pas tout compris, je pense, les bordures ne viennent pas des images, mais des images qui sont dans des liens...
Essaye :

Code :

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

1
2
3
.pagelinks a img  {
    border:none;
}

[adamo901]

orphen : Je te remercie toujours pour ta proposition. Je travaille avec Dreamweaver, pendant le designe, j'ai bien le résultat que je cherche mais quand je le teste avec IE7 ou FF3 j'obtiens toujours le même problème.

Bovino: j'ai bien essayé ton code mais il ne fonctionne pas car les bordures ne viennent ni "des images" ni "des images qui sont dans des liens". Il viennent tout simplement des liens.

Candygirl : Chapeau! ton code fonctionne très très bien. Merci pour ton soutient

Toute fois j'ai une remarque : Le code proposé par Candygirl fonctionne par excellence car je n'ai pas d'attribue title dans les <a> qui entourent les images.

Et si cet attribut(title) s'ajoute dans toutes les <a>(avec ou sans img)?!!!

[Candygirl]

Et si cet attribut(title) s'ajoute dans toutes les <a>(avec ou sans img)?!!!

Et bien tu te retrouveras avec le même problème

Soit tu pourras gérer en spécifiant un mot qui apparaît dans le title ou dans l'url du lien des textes et pas des images.

Soit tu pourrais jouer en appliquant tes styles à tout les liens et en les retirant pour tes images en jouant avec les pseudo-classes :first-child et :last-child. Le problème est qu'actuellement, sauf erreur, ie7 ne gère que le first-child, présent en css 2.1, et pas le last-child (css3).

Disons qu'en l'état tester la présence de l'attribut title me semblait le plus simple.

[adamo901]

Pourra tu s'il te plait me donner des exemples avec :

1: css en spécifiant un mot qui apparait dans le title ou dans l'url du lien
2: Pseudo-classes

Merci pou ton aide

[Bovino]

L'exemple a déjà été donné :

Code :

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

.pagelinks a[title]

sélectionne les balises <a> ayant un attribut title...
Sinon, tu peux aussi affecter une classe aux liens qui ne doivent pas avoir de bordure, par exemple :

Code css :

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

1
2
3
a.sans_bordure{
    border:none;
}

et tous les liens de type

Code html :

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

<a class="sans_bordure">

n'auront pas de bordure...