Bannière

Bannière

Imprimer une partie d'article en html

Utliser "media print" dans le code css.
Bloquer l'appartion des blocs css avec display:none.
Voici mon code css :

@media print {.s239070, .p239070 form, .p239070 img, footer, .post-header, #HTML5, #header-inner, #HTML1, .post-footer, #comments, #navbar, #blog-pager, .c239070 hr {display: none;} .c239070 {width: 1160px;}}

Pour lien utilise href="#" et onclick="window.print()"

Cliquer ici pour imprimer

Comment afficher un code html sur le web

Il suffit de copier votre code html et de coller là où vous l'afficher et les remplacer les ouvrets les guillemets < des balises par :
.
Et fermer les guillememts > des balises par :

Bouton ou lien pour Imprimer uniquement votre Article

imprimer le cadre du message
valentin


On va crée par exemple le paragraphe à imprimer :

<div id="ca1">valentin</div>

On mettre un peu de css (style) ou vous mettre une image ou un bonton

<style>#ca1 {border: 1px solid black; width: 100px; height: 100px;}</style>

En suite en va crée le lien, le bouton, ou une image pour faire la demande d'impresson.

<a href="#ca1" onclick="window.print()">imprimer</a>

voila comment faire pour imprimer un message dans blogger par exemple

essais :before css

le mots Valentin en bleu à était mis avant ce texte avec la fonction :before et content: en css

essais hover image

Créer un Menu déroulant à 3 branches avec la fonction Javascript

Barre menu css

Connaissez-vous le code couleur du dentifrice ?

On s’en sert tous les jours sans y faire bien attention… et pourtant. Jules nous a fait une observation que je voudrais partager avec vous. Il s’agit du code couleur affiché sur les tubes de dentifrice.

Le code couleur du dentifrice

Avez-vous déjà remarqué qu’il y a une couleur distincte au bas de chaque tube de dentifrice ?

Connaissez-vous la signification des couleurs ?


Vert : naturel
Noir : Pur produit chimique
Bleu : Naturel + médecine
Rouge : Naturel + composition chimique
 (source)

Agrandissement d'une image sur la même page.

Code html pour l'image et l'agrandissement au clique sur l'image :
Utiliser target="_self" pour l'ouverture de l'agrandisssement de l'image au-dessous de la même page.
Utiliser target="_blank" pour l'ouverture de l'agrandisssement de l'image dans une autre page.
Utiliser target="_top" ou rien pour l'ouverture de l'agrandisssement de l'image dans la même page.

<a href="http://1.bp.blogspot.com/-bzlB7LCDZC0/Up-S70E_0EI/AAAAAAAABgI/55ZyQ6wGC1I/s1600/56.jpg" target="_self"> <img src="http://1.bp.blogspot.com/-bzlB7LCDZC0/Up-S70E_0EI/AAAAAAAABgI/55ZyQ6wGC1I/s1600/56.jpg" width="320" /></a>

Raccourci clavier des caractère spéciaux

Maintenir Alt enfoncé et :

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: ▼
140: î
141: ì
142: Ä
143: Å
144: É
145: æ
146: Æ
147: ô
148: ö
149: ò
150: û
151: ù
152: ÿ
153: Ö
154: Ü
155: ø
156: £
157: Ø
158: ×
159: ƒ
160: á
161: í
162: ó
163: ú
164: ñ
165: Ñ
166: ª
167: º
168: ¿
169: ®
170: ¬
171: ½
172: ¼
173: ¡
174: «
175: »
176: ░
177: ▒
178: ▓
179: │
180: ┤
181: Á
182: Â
183: À
184: ©
185: ╣
186: ║
187: ╗
188: ╝
189: ¢
190: ¥
191: ┐
192:└
193: ┴
194: ┬
195:├
196: ─
197: ┼
198: ã
199: Ã
200: ╚
201: ╔
202: ╩
203: ╦
204: ╠
205: ═
206: ╬
207: ¤
208: ð
209: Ð
210: Ê
211: Ë
212: È
213: ı
214: Í
215: Î
216: Ï
217: ┘
218:┌
219: █
220: ▄
221: ¦
222: Ì
223: ▀
224: Ó
225: ß
226: Ô
227: Ò
228: õ
229: Õ
230: µ
231: þ
232: Þ
233: Ú
234: Û
235: Ù
236: ý
237: Ý
238: ¯
239: ´
241: ±
242: ‗
243: ¾
244: ¶
245: §
246: ÷
247: ¸
248: °
249: ¨
250: ·
251: ¹
252: ³
253: ²
254: ■

positionner un texte vertical et horizontalez dans un div

position du texte avec vertical-align + display: table-cell et text-align. Voir le code : dans afficher le code html puis chercher la ligne "dir="ltr" style="text-align: left;" trbidi="on" "
carré

cadre avec bulle 2

More informations...

ArtistryLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur orci metus, suscipit non gravida eget. Vestibulum metus quam, tristique in posuere et Ut vitae ipsum porta justo feugiat semper. Etiam ac tellus in lectus consectetur vestibulum. Vivamus mollis fringilla sapien, eget ornare est iaculis at. Nullam in nisl in orci ultrices fringilla. Duis iaculis purus ut lorem fermentum adipiscing.

essais volets cachée

Lorem Elsass ipsum réchime amet sed bissame so libero. DNA, leo Richard Schirmeck tellus

Wurscht elementum semper tellus s'guelt Pfourtz !

Ouvrir ! fermer !

essais menu maison 2

Essai formaulaire css javascript

Essais iframe produit Amway

texte

Code pour supprimer le colonne de droit blogger

#CustomSearch1{display:none;} Code à placer entre les balise <style></style>dans votre code source Html

Comment mettre un texte sur une image


Poele Icook by Amway
Texte place sur image en jouant margin et position absolute

essais z-index

Z-index 1
Z-index 2
Z-index 3
Z-index 4
Pour le code du message à partir de la ligne 758 à 775

4 images

  • Fragrances
  • Artistry
  • Amway Home
  • Xs power drink

essais infobulle css

Passer la sourris ici! Super, vous avez passer la sourris ici...

Retrouver le code du message dans le code source de la ligne 758 à 791.

Propriété Font-weight et Vertical-align


  • La propriété de feuille de style css font-weight permet de spécifier la graisse de la fonte (mettre en gras).

font-weight:bold;
font-weight:800;

La propriété de feuille de style css font-weight peut prendre la valeur de :
lighter, le texte est affiché en léger.
normal, le texte est affiché en normal.
bold, le texte est affiché en gras.
bolder, le texte est affiché en très gras.
100 (lighter), 200300400 (normal), 500600700 (bold), 800900 (bolder).




  • La propriété css vertical-align permet de gérer l'alignement vertical du texte.

identifiant{
  vertical-align:top;
}
identifiant{
  vertical-align:10%;
}

La propriété vertical-align css peut prendre la valeur de :
numérique positive ou négative suivie de px ou % ou ex ou em. Le point de départ sera baseline pour les valeurs fixes et pour les pourcentages dépend deline-height.
baseline, lignes de bases alignées, valeur par défaut.
sub, ligne de base de l'enfant aligné un peu plus bas que la ligne de base de son parent.
super, ligne de base de l'enfant aligné un peu plus bas que la partie la plus haute des caractères de son parent.
text-top, alignement sur les parties les plus hautes.
text-bottom, alignement sur les parties les plus basses.
middle, alignement par le milieu vertical.
top, le haut de l'enfant est aligné sur la partie la plus haute de la ligne.
bottom, le bas de l'enfant est aligné sur la partie la plus basse de la ligne (sauf ie).
inherit, hérite de la propriété de son parent (css 2)

Image de fond dans un message blogger


Poele Icook by Amway


















Pour mettre une image de fond sur un message, le plus simple est de chargé l'image sur le message

Code de l'image : 

<a href="http://1.bp.blogspot.com/-bzlB7LCDZC0/Up-S70E_0EI/AAAAAAAABgI/55ZyQ6wGC1I/s1600/56.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-bzlB7LCDZC0/Up-S70E_0EI/AAAAAAAABgI/55ZyQ6wGC1I/s1600/56.jpg" height="320" width="320" /></a> <br />

 Puis écrire votre message entre le code ci-dessous en réglant la marge à votre image en jouant avec " margin"

 <div style="background: transparent; color: black; margin: 20px 0px 0px 40px; position: absolute;"> Poele Icook by Amway</div>

Crée un tableau Html

Pour crée un tableau, il faut commencer les balise <table><tr><td></td></tr></table>
titre 1 titre 2 titre 3 titre 4
Donnée 1.1 Donnée 2.1 Donnée 3.1 Donnée 4.1
Donnée 1.2 Donnée 2.2 Donnée 3.2 Donnée 4.2
Donnée 1.3 Donnée 2.3 Donnée 3.3 Donnée 4.3


le TH sert à définir des en-têtes de colonnes. Pas de mise en forme nécessaire à la base, car le texte y est automatiquement centré et en gras. Evidement, tu peux mettre un align=right si tu veux. Le TD sert à l'affichage de données auxquelles la mise en forme est plus que nature. Voilà donc la différence : TH = en-tête (H= Head) et TD = données (D=data)... en bien sur le T signifiant Table, mais vous l'aviez deviné...
Code html du tableau :
 <style type="text/css">.tableautable {border-collapse: collapse;}.tableauth{border: 1px solid black;padding:5px;}
</style><br /> <div style="margin-left: 80px;"> <table class="tableautable"> <tbody>
<tr>
<th class="tableauth">titre 1</th>
<th class="tableauth">titre 2</th>
<th class="tableauth">titre 3</th>
<th class="tableauth">titre 4</th>
</tr>
<tr>
<th class="tableauth">Donnée 1.1</th>
<th class="tableauth">Donnée 2.1</th>
<th class="tableauth">Donnée 3.1</th>
<th class="tableauth">Donnée 4.1</th>
</tr> <tr>
<th class="tableauth">Donnée 1.2</th>
<th class="tableauth">Donnée 2.2</th>
<th class="tableauth">Donnée 3.2</th>
<th class="tableauth">Donnée 4.2</th>
</tr> <tr>
<th class="tableauth">Donnée 1.3</th>
<th class="tableauth">Donnée 2.3</th>
<th class="tableauth">Donnée 3.3</th>
<th class="tableauth">Donnée 4.3</th>
</tr> </tbody></table> </div>

Supprimer le message "Inscription à : Messages (Atom)

Remarque : la méthode a été appliquée aux templates classiques modernisés à 2 ou 3 colonnes disponibles ici et qui peuvent donc être utilisés immédiatement.

1) Une première méthode pour supprimer ce lien consiste à ajouter le code qui suit dans un gadget HTML/Javascript (cela évite de modifier le "modèle" ou "template"):
<style type="text/css">.feed-links {display: none;}</style>
Pour savoir comment créer un gadget HTML/JavaScript : cliquer ici.

Remarque : d'autres instructions peuvent être ajoutées dans le même gadget entre <style type="text/css"> et </style>.