ICI header("Location: http://www.mytesting.fr ");

FAIRE UN CADRE ET METTRE DU TEXTE A L'INTERIEUR.

par André Marini 3 Janvier 2015, 19:00 Texte

FAIRE UN CADRE ET METTRE DU TEXTE A L'INTERIEUR.

A la différence du texte encadré, il s'agit ici de faire un cadre de couleur et d'écrire à l'intérieur.

 

Très pratique pour faire des commentaires ou apporter des compléments d'information auxquels le lecteur se reportera seulement s'il en a besoin.

 

Pour faire un cadre dans lequel on peut mettre du texte, voici le code html de base.

 

CODE

 

<div style="width: 600px;  padding-top:10px; padding-bottom:10px;border: 3px solid #A0A0A0; text-align: center;background: #C0C0C0;"> Vous pouvez écrire votre texte à l'intérieur</div>

 

RESULTAT

Vous pouvez écrire votre texte à l'intérieur

Dans <div style=".....> vous introduisez toutes les caractéristiques.

 

"widht:600px;" indique la largeur du cadre.

 

padding-top et paddind-bottom indiquent l'espace entre le texte et le haut (top), le texte et le bas (bottom) du cadre.

 

border indique la largeur du trait qui borde le cadre puis apparait sa couleur #A0A0A0; 

 

text-align: center; indique que le texte est centré. On peut mettre "right" ou "left" pour l'aligner à doite ou à gauche.

 

Il ne manque que la couleur du texte. Ici #AOAOAO.

 

Voici un exemple avec le texte en rouge

 

Vous pouvez écrire votre texte à l'intérieur

 

Le code couleur <span style="color:#FF0000;"> 

 

Vous pouvez écrire votre texte à l'intérieur

 

Le même texte avec le code couleur rouge mais en gras <strong></strong>

 

Passons maintenant au cadre qui gardera sa longueur initiale et définie dans le code (Ici 600px;) et restera fixe mais dont la hauteur sera fonction de la quantité de texte écrite à l'intérieur. 

 

"width:600px;" que l'on pourrait également écrire  widht="600px;"

 

Mais il s'agit surtout de la couleur définie par la formule "background: #C0C0C0;" que l'on retrouve dans le code initial et que l'on peut modifier.

 

Exemple en jaune dont le code est le suivant "background: #FFFF00 que l'on pourrait écrire

<background="color:#FFFF00;">

<div style="width: 600px; padding-top:10px; padding-bottom:10px;border: 3px solid #A0A0A0; text-align: center;background: #FFFF00;"> Vous pouvez écrire votre texte à l'intérieur sans risquer de dépasser en haut ou en bas puisque la hauteur du cadre suivra votre frappe sans que la longueur définie dans votre code ne soit modifiée. Toutefois, vous pouvez aussi la modifer si vous ne voulez pas occuper toute la largeur de la page.</div>

 

 Vous pouvez écrire votre texte à l'intérieur sans risquer de dépasser en haut ou en bas puisque la hauteur du cadre suivra votre frappe sans que la longueur définie dans votre code ne soit modifiée. Toutefois, vous pouvez aussi la modifer si vous ne voulez pas occuper toute la largeur de la page.

 

EXEMPLE AVEC 400px; 

 

Vous pouvez écrire votre texte à l'intérieur sans risquer de dépasser en haut ou en bas puisque la hauteur du cadre suivra votre frappe sans que la longueur définie dans votre code ne soit modifiée. Toutefois, vous pouvez aussi la modifer si vous ne voulez pas occuper toute la largeur de la page.

commentaires

Haut de page