personnalisation button css

Version imprimable

Voir 40 message(s) de cette discussion en une page

Solution 1, avec span

Code:

1
2
3
4
5
 
		<div class="image">
			<img src="images/3.gif" />
			<span>texte centré</span>
		</div>

css

Code:

1
2
3
4
5
6
7
8
 
				.image {
					text-align: center;
				}
				.image span {
					display: block;
					clear: both;
				}

Solution 2 avec un p

Code:

1
2
3
4
5
 
		<div class="image">
			<img src="images/3.gif" />
			<p>texte centré</p>
		</div>

css

Code:

1
2
3
4
 
				.image {
					text-align: center;
				}

A toi de choisir, je préfère la 2

07/10/2010, 22h10
redah75

hehe, je pense qu'on s'est mal compris. desolé!
je voulais savoir comment centrer verticalement. c'est a dire:

Code:

<img src="drapeau-france.png" height="40">Français

j'aimerais que le texte "Français" soit sur la meme ligne que l'image mais centré verticalement. j'espere etre clair ;)
08/10/2010, 00h02
Michel Rotta
Tu garde le code de la partie1 et tu change la CSS pour :
Code:

1 2 3 4 5 6 7 .image { float: left; } .image img { vertical-align: middle; }
Le float: left; permet de limité la porté, à droite, du div.

Le vertical-align permet de centrer (entre autre possibilité) l'élément inline suivant.
08/10/2010, 12h37
redah75

j'avais pensé au vertical-align mais il n'est pas bien interpreté par ie!!
je cherchais au fait une solution avec un margin-top ou paddind-top qui permet de gerer l'alignement au pixel pres.
je pense que la solution c'est de mettre l'image et le text dans 2 div separés??

et sinon qu'en est il de l'attribut align="absmiddle" de la balise <img> ?? est il deconseillé a utiliser?

On atteins mes limites en css là...

Bon, un autre essai.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Page de test</title>
			<style type="text/css">
				.image {
					background-color: #eee;
					display: table;
					overflow: hidden;
					float: left;
				}
				.image div {
					display: table-cell;
					vertical-align: middle;
				}
				.image img {
					float: left;
				}
				.image span {
					background-color: #bbb;
					float: right;
				}
			</style>
	</head>
	<body>
		<div class="image">
			<img src="images/3.gif" />
			<div>
				<span>texte centré</span>
			</div>
		</div>
	</body>
</html>

J'en conviens, c'est un peu (beaucoup ?) tordu, mais cela marche sous ie8 (j'ai pas d'autre versions sur ce poste).

Autre solution, un peu moins propre (quoique) et qui pourrait marcher hors strict (pas testé)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Page de test</title>
			<style type="text/css">
				.image .img_txt {
					vertical-align: middle;
				}
			</style>
	</head>
	<body>
		<table class="image">
			<tr>
				<td class="img_img"><img src="images/3.gif" /></td>
				<td class="img_txt">texte centré</td>
			</tr>
		</table>
	</body>
</html>

C'est sur que côté css c'est plus simple mais... a voir.

08/10/2010, 16h05
redah75

merci ;) je vais tester
13/10/2010, 22h54
redah75

Hello,
juste pour info, et ca peut peut etre aider d'autres personnes.
pour faire ce que je t'ai demandé, voici le code que j'ai adopté:

Code:

<img src="photo.png" style="height: 20px; vertical-align: -3px;">Ici mon texte</img>

bien evidemment le style est dans une .css, c'est curieux mais ca marche.
testé avec ie6 ie7 ie8, FF3.6 PC et safari5, FF4 Mac
y a t il d'autres navigateurs sur lesquels il faut tester?
j'ai entendu dire que chrome a le meme moteur que FF, donc pas la peine de l'installer...
14/10/2010, 11h20
Michel Rotta

Il faudra que je teste.

Chrome n'a pas le même moteur (a ma connaissance) que FF.

Et tu peux rajouter Opéra dans la liste.

Personnellement, j'ai supprimé ie6 de la liste. Mais je ne fais pas de boutiques donc j'ai un peu plus de latitude pour choisir mes cibles...
14/10/2010, 12h58
redah75

OK, tu testeras et tu me diras ;)

je suis sur que chrome a le meme moteur qu'un autre navigateur mais je ne sais plus lequel du coup!! opera peut etre??

je rajoute Opera Mac ou PC ou les deux??

je suis un peu pareil que toi, je teste sur ie6 juste pour garder un maximum d'utilisateurs mais l'affichage, transparence png par exemple, ou encore ajax de jquery, ne sont pas bien gerés et je ne me prends pas trop la tete...
14/10/2010, 12h59
nawbacan

j'ai moi aussi supprimé IE6 de la liste des navigateur à tester.
Nos principaux clients sont tous passés à IE 7 ou 8.
14/10/2010, 13h01
redah75

je vais peut etre vous surprendre mais sachez que beaucoup d'entreprises sont encore en ie6. EDF par exemple. j'ai un ami qui y travaille et ils sont encore sous windows 2000...
14/10/2010, 19h00
Michel Rotta

Je sais, c'est pourquoi je précise pour mes cibles...

Qui peut le plus peut le moins, mais ie6... :(

Voir 40 message(s) de cette discussion en une page