28220 sujets

CSS et mise en forme, CSS3

Hello,

Lorsque je cree un lien sur un bouton de mon site, celui-ci s'affiche alors avec une bordure bleue tout autour du plus mauvais effet.

Les seules infos que j'ai trouvé sont des trucs du genre:

"Lorsque vous faites un lien à partir d'une image, spécifiez la valeur 0 à l'attribut BORDER de la balise <IMG> afin de supprimer la bordure bleu."

Le probleme c'est que l'attribut BORDER est refusé par le certificateur XHTML 1.0 Strict......Comment faire, svp?
Modifié par BalooCantalou (01 Jun 2005 - 23:23)
Sorry, je vais l'apprendre par coeur!....

Mais ca marche pas!!!!

J'ai bien ajouté le code indiqué dans mon css mais j'ai toujours les bordures!

Voici le code:

#gauche {
background-color: #BF1717;
text-align: center;
padding-top:20px;
float: left;
width: 20%;
a img {border: 0;}
}

Modifié par BalooCantalou (01 Jun 2005 - 22:52)
bonsoir

Ce que tu appelle "bouton" est en fait une image. Dans ce cas, comme tu te serts d'une image comme lien, il te faut faire une programmation css pour les balises "img" comme pour un lien classique

img a { text-decoration: none;}
img a:hover { text-decoration: none;}


je crois Smiley smile
BalooCantalou a écrit :
Sorry, je vais l'apprendre par coeur!

Et copier son adresse 100 fois Smiley lol
Philippe a écrit :
bonsoir

Ce que tu appelle "bouton" est en fait une image. Dans ce cas, comme tu te serts d'une image comme lien, il te faut faire une programmation css pour les balises "img" comme pour un lien classique



edit : j'ai enlevé ma bétise et vais copier le lien 100 fois moi aussi Smiley ohwell
Modifié par Philippe (01 Jun 2005 - 22:48)
:) c'est gentil de ta part mais je suis sur ALSA depui quelques temps deja et je n'ai pas encore lu tous les tutos.
Donc ma solution semble hors propos. Smiley murf
Ou alors c'est une nouvelle decouverte magique Smiley biggrin

Allez ne revons pas. et allons lire tous les tutos Smiley cligne
Heu....Avec ca, toujours pas d'amélioration!
Aurais-je commis une boulette ou les Dieux du CSS valide seraient-ils en colère contre le newbie incompétent que je suis?

#gauche {
background-color: #BF1717;
text-align: center;
padding-top:20px;
float: left;
width: 20%;
img a { text-decoration: none;}
img a:hover { text-decoration: none;}
a img {border: 0;}
}


C'est quand meme étrange que depuis l'ajout des 3 dernieres lignes rien n'ait changé, non?
Modifié par BalooCantalou (01 Jun 2005 - 22:57)
hi hi

la je peux t'aider

reprend la solution d'Igor mais fais comme ça

#gauche {
blabla 
blabla
}

a img { ............}
etc.....

Modifié par Philippe (01 Jun 2005 - 22:59)
Il manque une accolade (c'est ta deuxième accolade du jour Smiley lol ) de fermeture après:
width:20%;[b]}[/b]


édit: grillé Smiley lol
Modifié par Igor (01 Jun 2005 - 23:02)
Cool, a y'est!!!!

Voici le code

#gauche {
background-color: #BF1717;
text-align: center;
padding-top:20px;
float: left;
width: 20%;
}
a img {border: 0;}


Mais je comprends pas tres bien pourquoi on ferme l'accolade avant la ligne:
a img {border: 0;}
J'avais cru comprendre que les infos de mises en page devaient se trouver entre { et }
Modifié par BalooCantalou (01 Jun 2005 - 23:22)
Enlèves, cela n'a pas de sens:

img a { text-decoration: none;}
img a:hover { text-decoration: none;}


Je viens de tester tes déclarations de style et elles fonctionnent correctement.
BalooCantalou a écrit :
Cool, a y'est!!!!

Voici le code

#gauche {
background-color: #BF1717;
text-align: center;
padding-top:20px;
float: left;
width: 20%;
}
a img {border: 0;}


Mais je comprends pas tres bien pourquoi on ferme l'accolade avant la ligne:
a img {border: 0;}
J'avais cru comprendre que les infos de mises en page devaient se trouver entre { et }


Il est temps de (re)voir les bases de la syntaxe CSS :


selecteur {
 propriété : valeurs;
 propriété : valeurs;
 propriété : valeurs;
}

selecteur {
 propriété : valeurs;
 propriété : valeurs;
 propriété : valeurs;
}

etc...
BalooCantalou a écrit :

Mais je comprends pas tres bien pourquoi on ferme l'accolade avant la ligne:
a img {border: 0;}
J'avais cru comprendre que les infos de mises en page devaient se trouver entre { et }





img /*c'est le [b]sélecteur[/b]*/
{border: 0;}/*les accolades encadre la déclaration des styles qui contiennent des couples composés de [b]propriétés[/b] munies de [b]valeurs[/b] séparées par ":" et d'un ";" à la fin de chaque couple*/

Modifié par Igor (01 Jun 2005 - 23:32)