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

choq 29/10/2020 12:11

Comment faire pour le déplacer vers la gauche o u droite svp ?

website city 16/10/2020 17:17

c'est bien.
Merci beaucoup.

Clara 09/04/2020 19:12

j'ai besoin d'aide, (j'espère que on me répondra avant demain c'est un DM et c'est demain la deadline) dans le cadre comment change t-on la taille du texte ? parce que de ce que j'ai compris la taille du cadre est ajustable mais et le texte ?

Jean-Pierre 26/03/2020 10:24

Comment faire un cadre en bordure fantaisie

website city 16/10/2020 17:25

wep pour changer la taille du texte ,il va te faloir utiliser

font-size dans le style(css).

ano 26/01/2020 17:58

comment centrer le cadre dans la page ?

Jean-Pierre 26/03/2020 10:15

"........"

anonyme 13/01/2020 14:50

cool

Jean-Pierre 26/03/2020 10:12

..............

PERARD 09/12/2019 09:54

Je n'ai rien compris - J'ai mis une bordure fantaisie tout autour de ma feuille et je voudrais mettre un texte au milieu

wesh 16/01/2020 09:44

T'ai null frére maime moi gai conprie

TINTO 26/06/2019 17:36

Merci!!!

Haut de page