Mettre le style CSS inline

Version imprimable

Bonjour,

Je suis en train de me faire ma signature en html sous mail.app (Mac OS)
Ca marche pas mal, sauf que l'on ne peux pas mettre les style dans le head mais in line.

Et la ...... je coince
Une idée de comment faire ?

Ci-dessous mon code :

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type">
		<title>Signature</title>
	   <style>
			 /*Social Media Divs*/
			ul#navigation {
			  margin:0;
			  padding:0;
			}
			ul#navigation li {
			  list-style: none;
			  background: none; 
			  float:left;
			}
 
			ul#navigation li a {
			  background-image: url("MyLogo.png") !important;
			  background-repeat: no-repeat;
			  overflow:hidden;
			  display: block;
			  width: 30px;
			  height: 30px;    
			}
 
			ul#navigation .nav_facebook a {background-position: 0px -148px;}
			ul#navigation .nav_facebook a:hover {background-position: 0px -178px;}
	    </style>
	</head>
	<body>
		<font color="black" face="helvetica" font-size="9pt">Cordialement,<br \></font>
		<hr color="6c3306" align = "left" width = "370px" size = "3"></hr>  
 
	    <ul id="navigation">
	      <li class="nav_facebook"><a href="https://www.facebook.com/" title="Facebook"></a></li>
    	</ul>
	</body>
</html>

Merci pour votre aide

Thais

20/12/2014, 18h03
Muchos
Bonjour,

Vous avez simplement à remplacer l'usage de FONT par le code CSS correspondant, puis à tout mettre à l'intérieur de :
Code:

1 2 3 4 5 6 <body style=" /*** Votre code CSS ici ***/ "> </body>

Merci pour ton aide .... mais marche pas .... ou alors j'ai pas bien fais la manip ...:oops:

Ci-dessous le code modifié :

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type">
		<title>Signature</title>
	</head>
	<body style="
			ul#navigation {
			  margin:0;
			  padding:0;
			}
			ul#navigation li {
			  list-style: none;
			  background: none; 
			  float:left;
			}
 
			ul#navigation li a {
			  background-image: url("Logo.png") !important;
			  background-repeat: no-repeat;
			  overflow:hidden;
			  display: block;
			  width: 30px;
			  height: 30px;    
			}
 
			ul#navigation .nav_facebook a {background-position: 0px -148px;}
			ul#navigation .nav_facebook a:hover {background-position: 0px -178px;}
	">		
 
	    <ul id="navigation">
	      <li class="nav_facebook"><a href="https://www.facebook.com/" title="Facebook"></a></li>
    	</ul>
	</body>
</html>

J'aie reussi a simplifie la partie CSS, mais toujours pas à l'intégrer dans le html avec "style" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type">
		<title>Signature</title>
		   <style>
			ul#navigation .nav_facebook a {float:left;background-image: url("logo.png");display: block;background-position: -150px -148px;width: 30px;height: 30px;}
			ul#navigation .nav_facebook a:hover {background-position: -150px -178px;}
	    </style>
	</head>
	<body>		
 
	    <ul id="navigation" style ="margin:0;padding:0;">
	      <li class="nav_facebook" style ="margin:0;padding:0;"><a href="https://www.facebook.com/" title="Facebook"></a></li>
    	</ul>
	</body>
</html>

Si vous avez une idée ....;

En résumé, je cherche juste à faire du Sprites sans utiliser de fichier CSS, mais en le mettant directement dans l'HTML via du style ...

Thais

21/12/2014, 02h21
Invité

Bonjour,
le code semble correct.

Par contre :

Code:

url("logo.png");

il faut y mettre le chemin relatif entre ce fichier (contenant le style) et l'image.

Ex. : si le fichier est à la racine et l'image dans le dossier images :

Code:

url("img/logo.png");

Bonjour,
lorsque tu écris

Code:

ul#navigation .nav_facebook a {float:left;background-image: url("logo.png");display: block;background-position: -150px -148px;width: 30px;height: 30px;}

pose-toi la question quel élément est ciblé, ensuite mets le style inline dans cet élément
Code:

1 2 3 4 5 <ul id="navigation" style ="margin:0;padding:0;"> <li class="nav_facebook" style ="margin:0;padding:0;"> <a href="https://www.facebook.com/" title="Facebook"></a> </li> </ul>
par contre il te faut oublier les effets sur le hover.

Le soucis, c'est que je ne suis pas encore prete à oublier le Hover ..:?

Je me suis donc orienté vers le onmouseover qui me permet de conserver le hover
Mon soucis maintenant est de pouvoir utiliser seulement une partie de mon image en indiquant la selection, un truc du style (mais bien codé ) :
Code:

1 2 3 4 5 <img src="logo.png" style="position: 0px 0px;width:180px; height:74px; onmouseover="this.src='logo.png' ;this.style.backgroundPosition='0px 0px'" onmouseout="this.src='logo.png' ;this.style.backgroundPosition='0px -150px'" />
Une idée ?

Thais

:koi: le hover tu le veux sur une image ou sur un lien, bien que le traitement soit le même
Code:

1 2 3 4 5 <a href="#" style="background-image:url(images/logo.png);" onmouseover="this.style.backgroundPosition='-20px -10px'" onmouseout ="this.style.backgroundPosition='0 0'"> le lien</a>

PERFECT ......:mrgreen:

Le lien est sur une image.

J'ai un peu modifié le code pour selectionner la partie de l'image a afficher dans chaque cas et ca marche nickel.

Merci beaucoup
Code:

1 2 3 4 5 6 <a href="https://www.facebook.com/" style="background-image:url('images/logo.png');display: block;width:180px; height:74px;background-position: 0px -74px;" onmouseover="this.style.backgroundPosition='0px 0px'" onmouseout ="this.style.backgroundPosition='0px -74px'"> </a>
Thais

21/12/2014, 12h16
thais781

8O8O8O8O8O8O8O8O
:aie::aie::aie::aie:

Les onmouseover ne semble pas marcher dans les signatures de mail.app ......

Donc si on peut pas faire de CSS, pas de hover et si pas de mouseover dans le html, on fait comment pour avoir ce rendu dans les signature de mail.app .....:calim2:

Thais