Mettre le style CSS inline

**thais781** · 20/12/2014, 15h49

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 :

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
<!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

**Muchos** · 20/12/2014, 18h03

Bonjour,

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

Code html :

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

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

**thais781** · 20/12/2014, 19h19

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

Ci-dessous le code modifié :

Code :

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
<!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>

**thais781** · 20/12/2014, 21h42

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

Code :

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
<!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

Invité · 21/12/2014, 02h21

Bonjour,
le code semble correct.

Par contre :

Code :

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

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 :

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

url("img/logo.png");

**NoSmoking** · 21/12/2014, 09h28

Bonjour,
lorsque tu écris

Code :

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

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 html :

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

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><!-- C'EST ICI qu'il faut mettre le STYLE -->
    </li>
</ul>

par contre il te faut oublier les effets sur le hover.

**thais781** · 21/12/2014, 11h16

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 :

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

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

**NoSmoking** · 21/12/2014, 11h36

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

Code html :

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

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>

**thais781** · 21/12/2014, 11h54

PERFECT ......

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 :

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

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

**thais781** · 21/12/2014, 12h16

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 .....

Thais

Mettre le style CSS inline

CSS

Discussions similaires

Partager

Partager