Lien en image avec coin arrondi

Version imprimable

17/01/2010, 17h24
yooyoo

Lien en image avec coin arrondi
Bonjour, je cherche depuis un moment comment faire des liens en images, mais que ses images aient des coins arrondi, avec une largeur extensible.

J'avais trouver ceci :
http://www.developpez.net/forums/d65...oins-arrondis/

mais sa ne marche pas pour moi.

mon menu est horizontal, dans une div #menu :
Code:

1 2 3 4 5 6 7 8 #menu { width: 100%; height: auto; background-color: #55bbff; text-align: center; padding-top : 5px; padding-bottom: 5px; }
actuellements, mes liens dans mon menu sont de ce style <a href="#">mon lien</a>

sa ne me dérange pas de changer au cas ou.

Merci pour votre aide, et bonne journée
20/01/2010, 14h20
nsanabi

pour cela il te suffisait de passer par un moteur de recherche :

voila 1 premier lien puis un autre et y'en a plus sur la toile meme en video
20/01/2010, 19h00
yooyoo

merci je vais voir ca :ccool:
21/01/2010, 11h11
yooyoo

Bonjour, çà marche mais a l'affichage j'ai un souci, au lieu que mes bouton soit dans la div que j'ai cité plus haut, elle sont dessous :/
22/01/2010, 12h04
nsanabi

peut tu mettre le morceau de code html et css concerné?

partie du code html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
		<div id="page">
			<div id="barre_haut">
				<div class="element_barre">
					<img src="./images/rss1.png" />texte un, <img src="./images/rss2.png" />texte deux, <img src="./images/rss3.png" />texte trois <!-- image, et lien -->
				</div>
			</div>
			<div id="header">
				<img src="./images/game_script.jpg" height="90px" width="225px" alt="Game-Script" title="Game-Script" /> <img src="./images/pub_barre.jpg" height="90px" width="728px" />
			</div>
			<div id="barre_menu">
			<a class="button" href="#"><span>1er lien</span></a> <a class="button" href="#"><span>2eme lien</span></a> <a class="button" href="#"><span>3eme lien</span></a>
			</div>
			<div id="barre_sous_menu"></div>
			<div id="contenu">

avec son css :

Code:

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
body {
	margin: 0;
	background-color: #ddeeff;
}
 
#page {
 
}
 
#barre_haut {
	text-align: center;
	width: auto;
	height: auto;
	background-color: #000000;
	color: #FFFFFF;
}
 
#barre_haut img {
	padding-left: 20px;
	vertical-align: middle;
}
 
#header {
	width: 100%;
	height: 120px;
	background-color: #0077cc;
}
 
#header img {
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 10px;
}
 
#barre_menu {
	width: 100%;
	height: auto;
	background-color: #55bbff;
	text-align: center;
	padding-top : 5px;
	padding-bottom: 5px;
}
 
#barre_sous_menu {
	width: 100%;
	height: 4px;
	background-color: #000000;
}

23/01/2010, 01h35
nsanabi

tout me parait normal!
sauf que tu n'a pa mis le code css utilisé pour ta classe button

oops desolé !

j'avais suivi le lien qu'on m'a donner plus haut :

Code:

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
a.button {
    background: transparent url('images/bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px;
    text-decoration: none;
}
 
a.button span {
    background: transparent url('images/bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}
 
a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* 
}
 
a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px;
}

Je ne vois rien d'anormal sauf la mise en commentaire de ton code css avec le /*
c'est peut être du à ça

Code:

1
2
3
4
5
6
7
8
9
10
a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* 
}
 
a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px;
}

27/01/2010, 23h42
yooyoo

salut, non ce n'est pas du a ce commentaire, car dans mon code il y a le vrai commentaire : /* le commentaire */
je l'avais juste supprimer en postant sur le forum pour un affichage meilleur :?
mais j'ai du mal le supprimer :mrgreen:

sa ne marche toujours pas :/