Pages :
bonjour.
en allant sur cette page https://msdn.microsoft.com/fr-fr/library/jj680149%28v=vs.85%29.aspx#Thetext-shadowpropertyssyntax j'ai vu qu'on pouvait mettre des effets sur un texte dans une page. Je suis débutant, je travaille avec kompozer, et je ne trouve pas, dans la page en question, une explication pour savoir comment selectionner le texte sur lequel je veux poser un effet.
est ce qu'il faut faire un fichier css séparé ? est ce qu'on peut plutot l'incorporer à la page ( ce que je prefererais) ? si le fichier doit etre séparé, quel code utiliser dans la page pour appeler le lien cers ce fichier css ?
dans ce code donné sur la page
.myselector {
...
text-shadow: 0.1em 0.1em 0.15em #333;
}
est ce que myselector est le texte en question ?si oui, donc, si j'incorpore mon texte à la place de myselector, est-ce que ça fonctionnera ? comment l'integrer exactement dans le code de ma page ?
j'ai deja essayé pas mal de choses, mais.... ça ne marche pas. je tatonne trop sur ce point précis pour essayer tout et n'importe quoi...
merci de vos réponses
merci beaucoup
je vais essayer le html
mais pour le css, je ne sais pas comment integrer mon texte dedans....
Modifié par brian-storming (19 Nov 2016 - 13:23)
Si si ça marche très bien, à condition que le fichier HTML appelle le fichier CSS
Je pense que ce n'est pas le cas,
Je crois qu'il vous faut revoir les bases, le fichier .html appelant la feuille de styles .css, notamment

Donnez nous le code qui ne marche pas
comme je vous disais, je ne sais pas comment appeler la fichier css, et je n'en ai pas créé, parce que sur la page que vous m'avez donnée, j'ai pensé qu'il s'agissait d'un choix, qu'on pouvait faire entre html et css. il y a des sites ou c'est un choix, et là, ce n'est pas mentionné qu'il faut créer aussi le css. maintenant, quand je l'aurai créé, comment l'appeler ? avec quel code, comme je vous le demandais ?
voici le code, qui ne marche pas parce qu'il n'y a pas d'appel
<html template="true">
<head>
<link href="https://fonts.googleapis.com/css?family=Handlee"
rel="stylesheet">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>qui</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylequi.css" type="text/css"
media="screen">
</head>
<body>
<p class="texte_ombre">Alsacréations est une communauté dédiée à
l'apprentissage des standards web (W3C, HTML, CSS, JavaScript) ainsi
qu'à l'accessibilité numérique.</p>
<span style="text-decoration: underline;"></span><span
style="text-decoration: underline;">
</span>
<table
style="text-align: left; height: 1262px; width: 1713px; margin-left: 169px;"
border="0" cellpadding="50" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; height: 81px; width: 183px;"><big
style="font-weight: bold; color: rgb(255, 204, 153);"><a
href="index.html"><big><span style="font-family: Handlee;">Accueil</span></big></a></big></td>
<td
style="vertical-align: top; font-family: Handlee; height: 81px; width: 175px;"><a
href="pourquoi.html"><big><big style="font-weight: bold;">Pourquoi ?</big></big></a></td>
<td
style="vertical-align: top; font-family: Handlee; height: 81px; width: 226px;"><big><big
style="font-weight: bold;"><a href="comment.html">Comment ?</a></big></big></td>
<td
style="vertical-align: top; font-weight: bold; font-family: Handlee; height: 81px; width: 127px;"><a
href="ou.html"><big><big>Où ?</big></big></a></td>
<td colspan="1" rowspan="1"
style="vertical-align: top; height: 81px;"><audio controls="controls">&nbsp;<source
src="fin.mp3" type="audio/mp3"><source src="fin.aac" type="audio/aac"><source
src="fin.ogg" type="audio/ogg"></source></source></source></audio><br>
<br>
<br>
</td>
<td style="vertical-align: top; height: 81px;"><br>
</td>
<td style="vertical-align: top; height: 81px;"><br>
</td>
</tr>
<tr>
<td colspan="7" rowspan="1"
style="vertical-align: top; text-align: center; width: 127px; height: 1103px;"><big
style="font-weight: bold; color: rgb(255, 204, 153);"><a
href="cle2.html"><big><span style="font-family: Handlee;"></span></big></a></big>
<table style="text-align: left; width: 1274px; height: 677px;"
border="0" cellpadding="50" cellspacing="2">
<tbody>
<tr>
<td colspan="1" rowspan="4"
style="vertical-align: top; height: 107px; width: 1609px;">
<div style="text-align: center;"> </div>
<div
style="text-align: center; margin-top: 0px; height: 47px;"><span
style="font-size: 12pt; font-family: &quot;Century Gothic&quot;,&quot;sans-serif&quot;;"><span
style=""></span><big
style="font-weight: bold; font-family: Handlee; color: white;"><big><big><big>Avec
qui ? </big></big></big></big></span><big style="color: white;"><br>
<br style="font-family: Handlee;">
<span style="font-size: 12pt; font-family: Handlee;"></span></big>
</div>
<big style="color: white;"><span
style="font-family: Handlee;"><span style="font-weight: bold;"> </span></span></big>
<p class="MsoNormal"
style="margin-bottom: 0.0001pt; text-align: justify; line-height: normal; font-family: Handlee; color: white;"><big><span
style="font-size: 12pt;"><big style="font-weight: bold;"><big>&nbsp;
Je suis un
«&nbsp;cielapeute&nbsp;». Clin
d’œil au vocable «&nbsp;thérapeute&nbsp;». <br>
</big></big></span></big></p>
<p class="MsoNormal"
style="margin-bottom: 0.0001pt; text-align: justify; line-height: normal; font-family: Handlee; color: white;"><big><span
style="font-size: 12pt;"><big style="font-weight: bold;"><big>&nbsp;
Le cielapeute
(j’ai inventé ce mot
pour qu’entre nous, les choses puissent commencer avec un sourire),
c’est
quelqu’un qui, avec votre concours, déniche la lumière du ciel bleu qui
est en
vous, y a toujours été, y restera toujours, pour qu’enfin vous ne vous
entendiez plus jamais dire ou penser : «&nbsp;Mes souffrances, il faut
bien que
je vive avec...&nbsp;».<o:p></o:p></big></big></span></big></p>
<p class="MsoNormal"
style="margin-bottom: 0.0001pt; text-align: justify; line-height: normal; font-weight: bold; color: white; font-family: Handlee;"><big><big><big><span
style="font-size: 12pt;"><big><big><span style="">&nbsp; </span>Depuis
plus de 20 ans, Je soigne avec
l’intuition, comme tant d’autres soignants. A cette différence que
beaucoup
d’entre eux ne s’en rendent pas compte ou ne la voient pas comme la
chose
capitale qu’elle est. Ou n’en parlent pas, par crainte de quitter le
cadre
cartésien de leur profession. Mais<span style=""> </span>sans
l’intuition, on ne peut que donner des médicaments, suivant des
connaissances
scientifiques qui, pour respectables qu’elles soient, ne font que
corriger des
symptômes. Or le corps, quand il se laisse aller à souffrir, le fait le
plus souvent
pour attirer notre attention sur un problème non résolu, qui se trouve
dans
notre esprit et que les médicaments ne peuvent qu’endormir et non
soigner. Alors
qu’avec l’intuition, on va chercher le problème à la source et, sauf
grave
impossibilité, on se donne les moyens de le régler.</big></big> <o:p></o:p></span></big></big></big></p>
<p class="MsoNormal"
style="margin-bottom: 0.0001pt; text-align: justify; line-height: normal; font-family: Handlee; color: white;"><big><span
style="font-size: 12pt;"><big style="font-weight: bold;"><big><span
style="">&nbsp; </span>L’intuition,
c’est cette sensibilité que nous
avons tous et que nous choisissons de travailler ou non. J’ai choisi de
la
travailler. De chercher la lumière que vous ne voyez plus en vous, mais
qui y
est toujours, et de vous la faire redécouvrir, pour vous montrer
qu’elle est à
vous, que vous pouvez en reprendre possession.</big></big></span></big></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="color: white;" align="center">
</tr>
<tr style="color: white;" align="center">
</tr>
<tr style="color: white;" align="center">
</tr>
</tbody>
</table>
<span style="text-decoration: underline; color: white;">
</span><noscript style="color: white;"><big><a
href="http://www.statcounter.com/" target="_blank"><img
src="http://c11.statcounter.com/counter.php?sc_project=1172642&java=0&security=3e394d3c&invisible=1"
alt="html hit counter" border="0" height="1" width="1"></a> </big></noscript><big
style="color: white;"><!-- End of StatCounter Code --></big>
<p class="MsoBodyText" style="text-align: left; color: white;"
align="left"><big><a href="cle2.html"><b style=""><span
style="font-size: 10pt; font-family: &quot;Franklin Gothic Book&quot;;"></span></b></a></big></p>
<font style="color: white;" color="#ffffff"><a
href="http://www.xiti.com/xiti.asp?s=90302"
title="Mesurez votre audience">
<script type="text/javascript">
<!--
Xt_param = 's=90302&p=';
Xt_r = document.referrer;
Xt_h = new Date();
Xt_i = '<img width="39" height="25" border="0" ';
Xt_i += 'src="http://logv19.xiti.com/hit.xiti?'+Xt_param;
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Analyse d\'audience">');
//-->
</script><noscript><p>Mesure d'audience ROI frequentation par <img
src="http://logv19.xiti.com/hit.xiti?s=90302&p=" alt="Analyse
d'audience" height="25" width="39"> </p>
</noscript></a> </font>
</body>
</html>
On a un fichier contenant le code HTML, appelons-le index.html
On a un fichier appelé styles.css, c'est la feuille de style à appliquer au fichier html, ce fichier styles.css contient le code qui permet de gérer le design de la page en HTML


le fichier styles.css :

.texte_ombre {text-shadow: 0.1em 0.1em 0.15em #333;}


l'appel de ce fichier dans le fichier index.html :

<head>
...
<link rel="stylesheet" href="styles.css">
...
</head>


Le texte ombré dans le corps de la page html :


<body>
...
<p class="texte_ombre">Alsacréations est une communauté dédiée à l'apprentissage des standards web (W3C, HTML, CSS, JavaScript) ainsi qu'à l'accessibilité numérique.</p>
</body>
</html>


Il faut absolument utiliser un fichier css externe, votre code est à revoir entièrement !
quand vous mettez "... "
ça veut dire que je dois mettre <link rel="stylesheet" href="styles.css"> entre head et head, c'est bien ça ?
Modifié par brian-storming (19 Nov 2016 - 14:23)
oui l'appel au fichier styles.css se fait entre <head> et </head>
"... " signifie qu'il y a quelque chose d'autre avant, sans préciser quoi

le fichier styles.css doit bien entendu être au même niveau que le fichier html, dans le même répertoire ou dossier sinon il ne sera pas trouvé et donc pas lu
c'est vraiment tres aimable à vous de me donner ces précisions.
j'ai créé le css ( "ombre.ccs" parce que j'ai d'autres fichiers css sur mon site, que j'ai appelé en copiant des codes selon les methodes trouvées sur le net, sans savoir comment faire d'autres appels. j'ai iinséré le code <link rel="stylesheet" href="ombres.css"> dans ma page html, en mettant le fichier ombre.css bien sur au bon endroit, c'est à dire a la racine du site, pour qu'il soit retrouvé.
j'ai ensuite collé votre autre code entre body et body
<p class="texte_ombre">XXXXXXXX</p>
XXXXX étant mon texte, que je voudrais voir apparaitre ombré. et ça ne marche pas. désolé de vous prendre du temps
si la feuille de styles s'appelle ombre.ccs et qu'on appelle ombres.css, on va avoir des problèmes ...

Sinon si les deux noms sont identiques, vérifier que ombre.css est bien au même niveau que la page html (c'est qui.html ?)

Le site est bien http://wppk.fr/cle2.html ?

pas une bonne idée de multiplier les fichiers .css, ils doivent contenir beaucoup de code en commun, gros bocson pour s'y retrouver et faire des modifs ...

Passez en UTF-8 plutôt que ISO-8859-1 sur certaines pages

Les images de fond sont énormes et mettent du temps à charger, elles doivent être plus petites et moins rectangulaires

Il ne faut plus utiliser les <table>, et autres <tr> et <td>

Il ne faut plus styler les balises, ce qui suit est absolument interdit, très très mauvaise pratique,
à modifier d'urgence, à proscrire, c'est Komposer qui produit ce genre de fouillis incompréhensible et bourré d'erreurs ? laissez tomber cet outil, un editeur de texte suffit


<p class="MsoNormal" style="margin-bottom: 0.0001pt; line-height: normal; text-align: center;"><span style="font-size: 12pt; font-family: &quot;Century Gothic&quot;,&quot;sans-serif&quot;;"><big><big style="font-weight: bold; color: rgb(255, 232, 163); font-family: Handlee;"><big><big>Pourquoi,</big>


mais utiliser une feuille de style,

Toutes les pages sont à refaire à mon avis

Commencez par faire une page simple, avec un feuille de style, et sans Komposer, et tout ira bien
oui, j'avais bien mis les bon noms, ombre et pas ombre, c'est en recopiant ici que j'ai ajouté un s. donc, j'ai bien appelé le bon css.
on peut mettre plusieurs mises en formes dans le meme css ? et toujours appeller le meme css ?
pour écrire sans kompozer, c'est impossible pour moi. je n'ai pas les connaissances.
pour les images, je sais et comme j'ai dit, c'est un brouillon. c'est aussi une adresse provisoire.
je viens de prendre l'hebergeur et de tout mettre en ligne, avec des images moins lourdes.
voici l'adresse du site definitive
http://cielapeute.com/index.html
et la page sur laquelle je fais mes tests en ce moment, c'est http://cielapeute.com/qui.html
je suis obligé, je crois, de faire plusieurs css, au moins une par page ayant un fond différent. Pour que l'image soit identique sur tous les affichages, j'ai trouvé ce code
html {
margin:0;
padding:0;
background: url(images/image.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
}

"image.jpg "devant etre changé dans chaque css selon l'image de fond, et selon la page qui va avec. si je mets tous les codes pour toutes les images dans le meme css, ça ne va pas aller. du moins, c'est ce qui paraitrait logique, non ?
On peut mettre dans la css :

html { 
  margin:0;
  padding:0;
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}

.background-index { 
  background: url(images/clemodele.png) no-repeat center fixed; 
}

.background-pourquoi { 
  background: url(images/pourquoi.png) no-repeat center fixed; 
}


et sur la page index.html :

<html class="background-index">

et sur la page pourquoi.html :

<html class="background-pourquoi">


et ainsi de suite pour chaque page, pas besoin de plusieurs feuilles de style, au contraire, bien plus facile à corriger et faire évoluer.
oui, mais est ce que les images de fond des autres pages continueront a etre etirés automatiquement ? puisqu'il n'y a plus ensuite la mention cover ?
merci
Pages :