rectangle autour de bouton

**kaselander** · 03/02/2009, 13h29

bonjour,
j'aimerais avoir votre aide pour enlever le rectangle autour d'un bouton car je na sais comment faire.Je veux juste les bords arrondis.
l'image est dispo ici:

Merci davance

**Erwan31** · 03/02/2009, 13h35

Bonjour,
ça ressemble à un background noir.
Un bout de code ou mieux une page en ligne serait le bienvenue.
D'autre part tu dois préciser sur quel navigateurs (et version) tu as ce problème.

**kaselander** · 03/02/2009, 14h37

Envoyé par Erwan31

Bonjour,
ça ressemble à un background noir.
Un bout de code ou mieux une page en ligne serait le bienvenue.
D'autre part tu dois préciser sur quel navigateurs (et version) tu as ce problème.

j'ai fait une capture d'une partie de la page, la partie ou se trouve les menus avec ce contour noir et le pbm est le même sur tous les navigateurs que j'utilise:
sous firefox v 3.0.5, ça donne ceci:

sous IE v 6.0 , voici le resultat avec une autre couleur de contour:

sous Opéra v 9.62:

Une partie du code HTML:
<div id="menu">
<div class="element_menu">
<a href="maintenance.html"><IMG src="button1over.gif"></a>
<a href="depannage.html"><IMG src="button2over.gif"></a>
<a href="reseau.html"><IMG src="button3over.gif"></a>
<a href="securite.html"><IMG src="button4over.gif"></a>
<a href="conseils.html"><IMG src="button5over.gif"></a>
<a href="contacts.html"><IMG src="button6over.gif"></a>
</div>

**Erwan31** · 03/02/2009, 14h42

A défaut d'une page en ligne tu dois aussi fournir sur le code CSS correspondant (au minimum) et si possible la totalité du code HTML.

**Macmillenium** · 03/02/2009, 15h09

Bonjour,

C'est les bordures par défaut sur les liens images.
Ajoute dans ton CSS :

Code CSS :

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

1
2
 
.element_menu img { border:0 }

**kaselander** · 03/02/2009, 15h11

Envoyé par Erwan31

A défaut d'une page en ligne tu dois aussi fournir sur le code CSS correspondant (au minimum) et si possible la totalité du code HTML.

Voici l'intégralité de mon code source et je t'avertis qu'il n'est pas encore au point:

Code HTML :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
	<head>
		<title>Maintenance</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" CONTENT="mot-clé1,mot-clé2,mot-clé3,...">
<meta name="description" CONTENT="une brève description de la page">
<meta name="author" CONTENT="nom de l'auteur">
<meta name="Distribution" CONTENT="Global ou Local">
<link rel="stylesheet" media="screen" type="text/css" title="banniere.gif" href="design.css" />
 
	</head>
 
<body background="http://fonds.toutimages.com/fo_bleucla/bleucla_314.jpg">
 
        <div id="en_tete"><IMG src="generateur.php.gif"></div>
	<div id><marquee direction="left" scrollamount="3" height="30" bgcolor="#DDDDDD" width="900">
			<font face="Verdana" size="2">Mon texte !!!</font>
			</marquee>	
	</div><br>
 
	<div id="menu">
			<div class="element_menu">
<a href="maintenance.html"><IMG src="button1over.gif"></a>
<a href="depannage.html"><IMG src="button2over.gif"></a>
<a href="reseau.html"><IMG src="button3over.gif"></a>
<a href="securite.html"><IMG src="button4over.gif"></a>
<a href="conseils.html"><IMG src="button5over.gif"></a>
<a href="contacts.html"><IMG src="button6over.gif"></a>	
			</div>
 
	<div class="element_menu">
<a href="tarifs.html"><IMG src="button7over.gif" align= left></a>
	</div><br>
 
	<div align= "left">
	<p>
<a href="notre boutique.html"><IMG src="animation.gif" border="0" title="Visitez notre boutique!"/></a>
	</p>
    </div>	
 
 
	<div id="corps">
 
 
 
<CENTER><table>
<tr><td><DIV align= right><li><a href="depannage.html">> Dépannage</a></li></DIV></td></tr>
</table></CENTER>
 
	</div> 
 
      <div id="pied_de_page">
<p>Liens partenaires - Mentions légales - Maintenance informatique © Tous droits<br> réservés 2009 Versus Computech</p>
	</div>
</body>
</html>

Code CSS :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
body
	{
	  width: 900px;
	  margin: auto; 
      margin-top: 25px; 
      margin-bottom: 25px; 
	  background-color: "http://fonds.toutimages.com/fo_bleuclair/bleucla_314.jpg">;
	}
 
#en_tete
	{
	  width: 895px;
      height:114px;
      background-image: <"generateur.php.gif">;
      background-repeat: no-repeat;
      margin-bottom: 10px;
	  border: 2px thin blue;
	}
 
#menu
	{
	  float: left; 
      width: 130px; 
    }	
div#menu 
{
	color: #9b2 ;
 
}
 
.element_menu 
        {
     margin-bottom: 25px; 
	 width: 130px;
	}	
 
a
        {
	 text-decoration: none;
    }
 
.element_menu a /* Tous les liens se trouvant dans un menu */
        {
     color: #000000;
    }
 
.element_menu a:hover /* Quand on pointe sur un lien du menu */
       {
 
     color: none;
    }	
 
#corps
    {
     margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
     margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
     padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
 
     color: #B3B3B3;
     background-color: white; /* Une couleur de fond pour le corps */
     border: 2px solid blue; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
	}
 
#corps h3 /* Tous les titres h3 du corps */
        {
     color: blue;
     text-align: center;
     font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
    }
 
#corps h4 /* Tous les titres h4 du corps */
        {
     height: 30px;
     padding-left: 30px;
     color: blue;
     text-align: left;
    }	
 
h5
	{
	 color: black;
	} 
 
 
input, textarea
     {
     font-family: "Times New Roman", Times, serif; /* On modifie la police du   texte tapé l'intérieur des champs */
    }
 
     input:focus, textarea:focus /* Quand le curseur est sur un champ (ne marche pas sur IE) */
        { 
     background-color: #FFFF99;
    }
 
input.bouton
	{
	 border:2px outset black;
     font-weight:bold;
     cursor:pointer;
    }
input.bouton:hover
     {
        border:2px outset white;
        background-color:white;
       color:none;
    }
input.bouton:active
    {
      border:2px inset none;
      background-color:none;
      color:white;
    }
p	
     {
	 font_family: Arial, "Arial Black", "Times New Roman", Times, serif;
	 font-size: 16px;
	 color: black;
	 text_align: none;
    }
 
#pied_de_page
   {
     padding: 1px;
     text-align: center;
     border: 2px solid blue;
   }

**beeboo** · 03/02/2009, 15h12

Salut,
Je crois simplement que l'image que tu utilises a un fond noir. Il faudrait que tu vérifies avec un éditeur graphique et éventuellement crées un fond transparent à ton image de bouton.
Utilise aussi un format graphique qui supporte les fonds transparents (GIF et PNG)

**AJemni** · 03/02/2009, 15h24

Ellimine l'element IMG, soit :
.element_menu { border:0 }

**kaselander** · 03/02/2009, 15h32

Envoyé par Macmillenium

Bonjour,

C'est les bordures par défaut sur les liens images.
Ajoute dans ton CSS :

Code CSS :

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

1
2
 
.element_menu img { border:0 }

Salut Macmillenium,
j'ai ajouté le code donné dans mon code css mais aucun effet

**kaselander** · 03/02/2009, 15h37

Envoyé par beeboo

Salut,
Je crois simplement que l'image que tu utilises a un fond noir. Il faudrait que tu vérifies avec un éditeur graphique et éventuellement crées un fond transparent à ton image de bouton.
Utilise aussi un format graphique qui supporte les fonds transparents (GIF et PNG)

Salut beeboo,
quel éditeur graphique me proposes-tu pour cela?

**(Benoit)** · 03/02/2009, 15h52

Tu peux télécharger Paint.Net
- Tu utilises l'outil "baquette magique" pour sélectionner un angle du fond noir
- Touche Suppr -> ce sera remplacé par des pixels "transparents"
- Exporte le résultat en .gif

**kaselander** · 03/02/2009, 16h03

Envoyé par (Benoit)

Tu peux télécharger Paint.Net
- Tu utilises l'outil "baquette magique" pour sélectionner un angle du fond noir
- Touche Suppr -> ce sera remplacé par des pixels "transparents"
- Exporte le résultat en .gif

OK merci
je m'y met tout de suite et je vous tiendrai informer du résultat.

**kaselander** · 04/02/2009, 08h25

Envoyé par kaselander

OK merci
je m'y met tout de suite et je vous tiendrai informer du résultat.

bonjour tout le monde,
je n'y arrive pas avec Paint.Net , c'est peut-être moi qui m'y prend mal alors pouvez-vous m'en dire un peu plus sur les étapes à suivre.
Merci

rectangle autour de bouton

CSS

Discussions similaires

Partager

Partager