Comment écrire sur une image qui sera en arrière plan ?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Comment écrire sur une image qui sera en arrière plan ?

Message par Tanukicoco le Mer 10 Fév 2010 - 17:25

Bonsoir,
Je pense que tous est dans le texte, je voudrais pouvoir écrire ma PA sur une backround avec différentes images dessus. Mais je ne connais pas le code, si quelqu'un l'avait pour moi ça m'arrangerait et par la même occasion, histoire que je ne poste pas deux topics pour un même sujet, comment à partir du code que je n'ai pas encore, peut-on placer correctement le texte ?
Je m'explique. Imaginons, mon fond est unis couleurs, et vers 33 % à droite j'ai un jolie cadre fait avec un logiciel graphique. Je veux écrire dedans, pas sur les contours, bien à l'intérieur. Y a t-il un code de position ? J'imagine que oui n_n

Je remercie ceux qui pourront me dépanner =)


Dernière édition par Tanukicoco le Mer 10 Fév 2010 - 23:20, édité 1 fois

Tanukicoco
**

Messages : 51
Inscrit(e) le : 06/02/2010

http://tsuite-seikatsu.forumactif.org/forum.htm
Tanukicoco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment écrire sur une image qui sera en arrière plan ?

Message par Invité le Mer 10 Fév 2010 - 20:01

Bonjour,

Tout d'abord il faut créer un tableau avec une image de fond, et ensuite des cellules "td" :
<table width="100%" align="center" style="background: url('adresse_image') fixed top left repeat;" border="0" cellspacing="0" cellpadding="0">
<tr style="color: code_couleur_texte; font-size: XXpx; font-etc...;"><td colspan="2" align="center">TEXTE</td><td align="center">TEXTE</td></tr>
<tr style="color: code_couleur_texte; font-size: XXpx; font-etc...;"><td align="center">TEXTE</td><td align="center">TEXTE</td><td align="center">TEXTE</td></tr>
<tr style="color: code_couleur_texte; font-size: XXpx; font-etc...;"><td rowspan="2" align="center">TEXTE</td><td align="center">TEXTE</td><td align="center">TEXTE</td></tr>
<tr style="color: code_couleur_texte; font-size: XXpx; font-etc...;"><td align="center">TEXTE</td><td align="center">TEXTE</td></tr>
</table>
En orange c'est le nombre de cellules comprises dans une seule sur une ligne (horizontalement)
En olive c'est le nombre de cellules comprises dans sur deux lignes (verticalement)
Exemple :
TEXTETEXTE
TEXTETEXTETEXTE
TEXTETEXTETEXTE
TEXTETEXTE

En rouge c'est le style en CSS concernant le texte, mais tu peux en mettre d'autre et s'il est dans la ligne "tr" c'est qu'il s'appliquera à toutes les cellules "td" qui s'y trouvent.
Tu peux aussi moduler en ajoutant du style CSS dans les cellules "td" indépendamment les unes des autres.

Dans le "table" le border est à "0" donc pas de bordure, mais je te suggère de créer d'abord le tableau avec une bordure de "1" histoire de bien voir, comme dans mon exemple. Wink

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment écrire sur une image qui sera en arrière plan ?

Message par Tanukicoco le Mer 10 Fév 2010 - 20:48

Merci Final-Blond. J'ai testé de faire mon tableau mais je crois qu'il doit y avoir des erreurs parce que le fond se mets pas bien, je te copie/colle °°

Code:
<table width="100%" align="center" style="background: url('http://i63.servimg.com/u/f63/14/83/36/00/sans_t10.jpg') fixed top left repeat;" border="0" cellspacing="0" cellpadding="0">
  <tbody><tr><td style="width: 40%; vertical-align: top;" colspan="3">Contexte
<br> ....
</td><td style="width: 45%; vertical-align: top;">Tableau d'affichage<br>
 ...</td><td style="width: 15%; vertical-align: top;">Navigation Rapide
<br>
blabla<br>
blabla<br>
blabla<br>
blabla<br>
blabla</td></tr></tbody></table>
<table style="text-align: left; width: 100%;" border="0"
 cellpadding="4" cellspacing="2">
  <tbody><td style="width: 30%; vertical-align: top;"><tr><td style="width: 30%;vertical-align: top;" colspan="3"
 rowspan="2">Images<br>
 ...</td><td style="width: 45%; vertical-align: top;">Vacant<br>
...</td><td rowspan="2"><td style="width: 25%; vertical-align: top;">Staff<br> ...<br><br>
Top site<br>...</td></td></tr></tbody></table>

Le fond test là, bouge avec le scroll. Je pense aussi que j'ai un soucis car j'ai créé deux tableaux faute de ne pas maitriser le html. Car je voulais :
Contexte - Panneau d'affichage - Navigation rapide
Espace vide avec l'image qui ressort du background - Postes vacant - Staff
x - x - Top site (en dessous du staff, donc en ligne en plus dans la colonne staff.)

Je pense que je me suis foiré XD

Tanukicoco
**

Messages : 51
Inscrit(e) le : 06/02/2010

http://tsuite-seikatsu.forumactif.org/forum.htm
Tanukicoco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment écrire sur une image qui sera en arrière plan ?

Message par Invité le Mer 10 Fév 2010 - 20:58

Oui parce que c'est en fait le bloc qui bouge, donc dans ce cas (à l'inverse d'un fond de page) il faut remplacer le "fixed" par "scroll" dans la table. Wink

Pour ce qui est du repeat, à toi de voir s'il le faut : "repeat" tout seul veut dire que l'image va se répéter verticalement et horizontalement.
"repeat-x" = horizontalement
"repeat-y" = verticalement
"no-repeat" = pas de répétition

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment écrire sur une image qui sera en arrière plan ?

Message par Tanukicoco le Mer 10 Fév 2010 - 21:09

Mais l'image elle s'applique que dans un bloc/tableau, elle peut pas se mettre sous mes deux tableaux ? Parce que je ne gère absolument pas la construction de tableaux, le pourquoi j'ai fais une ligne de trois rangée, coupé et refais un autre °°

Tanukicoco
**

Messages : 51
Inscrit(e) le : 06/02/2010

http://tsuite-seikatsu.forumactif.org/forum.htm
Tanukicoco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment écrire sur une image qui sera en arrière plan ?

Message par Invité le Mer 10 Fév 2010 - 21:41

Alors, je suis en train de corriger ton tableau, mais sache que le "colspan" ne sert à rien du tout si tu ne mets pas d'autres lignes avec d'autres cellules en dessous et le même nombre.
Regarde dans mon exemple, une ligne contiendra une cellule en moins, et une colonne contient une cellule en moins si c'est un "rowspan".
En fait c'est à ça que ça sert.
Tout en ayant un nombre différent de cellules à l'oeil, on en a le même nombre en les fusionnant. Wink

Maintenant si tu veux que ton image soit en fond pour les deux tableaux, il faut un grand tableau qui contienne les deux autres et qui aura pour fond cette image... Tu vois le bins ? Wink

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment écrire sur une image qui sera en arrière plan ?

Message par Tanukicoco le Mer 10 Fév 2010 - 21:52

Euh oui, je crois que j'ai compris, mais pour la pratique, là c'est tout autre chose XD
Au niveau images de background, je ne l'ai pas encore faite en faite, donc j'avais tester sur ma bannière. Le mieux serait un seul tableau avec tout mes colonnes et lignes comme ça c'est moins de chipotage au niveau du fond justement.
D'ailleurs, je ne sais pas bien si tu l'as expliquer, mais imaginons j'ai une feuille de papier sur mon fond. Je veux écrire dedans, sans que ça déborde, il y a un code ?
Si tu l'as déjà expliqué, je m'excuse, je suis pas très futée XD

Tanukicoco
**

Messages : 51
Inscrit(e) le : 06/02/2010

http://tsuite-seikatsu.forumactif.org/forum.htm
Tanukicoco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment écrire sur une image qui sera en arrière plan ?

Message par Invité le Mer 10 Fév 2010 - 21:56

Voilà déjà ton tableau revu et corrigé :
Code:
<table width="100%" align="center" style="background: url('http://i63.servimg.com/u/f63/14/83/36/00/sans_t10.jpg') scroll top left repeat;" border="0" cellspacing="0" cellpadding="0"><tr><td>
<table width="100%" align="center"border="0" cellspacing="0" cellpadding="0">
<tr><td style="width: 40%; vertical-align: top;">Contexte
<br /> ....
</td><td style="width: 45%; vertical-align: top;">Tableau d'affichage<br />
 ...</td><td style="width: 15%; vertical-align: top;">Navigation Rapide
<br />
blabla<br />
blabla<br />
blabla<br />
blabla<br />
blabla</td></tr></table>
<table style="text-align: left; width: 100%;" border="0"
 cellpadding="4" cellspacing="2">
<td style="width: 30%; vertical-align: top;"><tr><td style="width: 30%;vertical-align: top;">Images<br />
 ...</td><td style="width: 45%; vertical-align: top;">Vacant<br>
...</td><td><td style="width: 25%; vertical-align: top;">Staff<br /> ...<br /><br />
Top site<br />...</td></tr></table></td></tr></table>

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment écrire sur une image qui sera en arrière plan ?

Message par Tanukicoco le Mer 10 Fév 2010 - 22:03

Han mais c'est fantastique ça !
Merci beaucoup *o*
Faudra que je le remplise, mais bon, sans mon image, c'est chaud, mais au moins j'ai un bon truc qui fonctionne. Franchement, mille merci !
Me reste plus qu'à savoir/comprendre comment on positionne le texte où on voit sur une image de fond °°

Tanukicoco
**

Messages : 51
Inscrit(e) le : 06/02/2010

http://tsuite-seikatsu.forumactif.org/forum.htm
Tanukicoco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment écrire sur une image qui sera en arrière plan ?

Message par Invité le Mer 10 Fév 2010 - 22:28

Pour le texte, tu peux passer par du style CSS dans l'attribut div (bloc) ou span autour du texte ou dans le "td" (pour l'alignement et la largeur de la cellule, c'est mieux en HTML directement dans le "td"), par exemple :
<td align="center" valign="top" width="45%" style="color: #code_couleur_texte; font-family: new time roman, georgia, arial; font-size: XXpx; etc;">Tableau d'affichage<br />
...</td>
OU
<td align="center" valign="top" width="45%"><span style="color: #code_couleur_texte; font-family: new time roman, georgia, arial; font-size: XXpx; font-style: bold; etc;">Tableau d'affichage<br />
...</span></td>

EDIT : Essaie de demander à Google mon ami les différentes propriétés CSS concernant le texte. Wink

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment écrire sur une image qui sera en arrière plan ?

Message par Tanukicoco le Mer 10 Fév 2010 - 23:05

Pour les propriétés du texte, c'est pas un soucis.
Se que je demandais véritablement c'était de pouvoir choisir l'espace ou je vais écrire sur ma PA. Je vais cite ce forum : http://zestedecouleurs.forumactif.org/
Tu vois dans le cadre News là, il y a le texte écrit dessus et il est bien placé, et ne déborde pas. Je voulais savoir se que je dois faire pour pouvoir placer tip top le texte là ou je veux qu'il apparaisse à partir de mes colonnes °°

Tanukicoco
**

Messages : 51
Inscrit(e) le : 06/02/2010

http://tsuite-seikatsu.forumactif.org/forum.htm
Tanukicoco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment écrire sur une image qui sera en arrière plan ?

Message par Invité le Mer 10 Fév 2010 - 23:09

Pour cela il faut jouer sur l'alignement et le padding.
Voilà un petit aperçu (et encore corrigé après avoir vu qu\'une ou deux lignes n\'étaient pas refermées) de ce que l\'on peut faire en jouant sur le padding (espacement) :
Spoiler:
<table width=\"100%\" align=\"center\" style=\"background: url(\'http://i63.servimg.com/u/f63/14/83/36/00/sans_t10.jpg\') scroll top left repeat;\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td>
<table width=\"100%\" align=\"center\"border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr><td align=\"center\" valign=\"top\" width=\"40%\" style=\"padding-top: 10px; color: #ffffff; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;\">Contexte<br /> ....</td>
<td align=\"center\" valign=\"top\" width=\"45%\" style=\"padding-top: 30px; color: #ffffff; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;\">Tableau d\'affichage<br />...</td>
<td align=\"center\" valign=\"top\" width=\"15%\" style=\"padding-top: 10px; color: #ffffff; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;\">Navigation Rapide<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla</td></tr></table>
<table align=\"center\" width: 100%;\" border=\"0\" cellpadding=\"4\" cellspacing=\"2\"><tr>
<td colspan=\"2\" align=\"left\" valign=\"top\" width=\"30%\" style=\"color: #ffffff; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;\"></tr>
<tr><td align=\"left\" valign=\"top\" width=\"35%\" style=\"color: #ffffff; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;\">Images<br />...</td>
<td align=\"left\" valign=\"top\" width=\"40%\" style=\"color: #ffffff; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;\">Vacant<br />...</td>
<td align=\"right\" valign=\"top\" width=\"25%\" style=\"padding-right: 43px; color: #ffffff; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;\">Staff<br /> ...<br /><br />
<span style=\"padding-right: 43px; color: #ff3300; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;\">Top site</span><br /><span style=\"padding-right: 43px; color: #ff3300; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;\">...</span></td></tr></table></td></tr></table>

MOUAAH ! ça a mis des \ partout !!! Confused

Alors revoilou le code :
Code:
<table width="100%" align="center" style="background: url('http://i63.servimg.com/u/f63/14/83/36/00/sans_t10.jpg') scroll top left repeat;" border="0" cellspacing="0" cellpadding="0"><tr><td>
<table width="100%" align="center"border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top" width="40%" style="padding-top: 10px; color: #ffffff; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;">Contexte<br /> ....</td>
<td align="center" valign="top" width="45%" style="padding-top: 30px; color: #ffffff; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;">Tableau d'affichage<br />...</td>
<td align="center" valign="top" width="15%" style="padding-top: 10px; color: #ffffff; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;">Navigation Rapide<br />blabla<br />blabla<br />blabla<br />blabla<br />blabla</td></tr></table>
<table align="center" width: 100%;" border="0" cellpadding="4" cellspacing="2"><tr>
<td colspan="2" align="left" valign="top" width="30%" style="color: #ffffff; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;"></tr>
<tr><td align="left" valign="top" width="35%" style="color: #ffffff; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;">Images<br />...</td>
<td align="left" valign="top" width="40%" style="color: #ffffff; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;">Vacant<br />...</td>
<td align="right" valign="top" width="25%" style="padding-right: 43px; color: #ffffff; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;">Staff<br /> ...<br /><br />
<span style="padding-right: 43px; color: #ff3300; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;">Top site</span><br /><span style="padding-right: 43px; color: #ff3300; font-family: lucida grande, georgia, arial; font-size: 12px; font-style: blod;">...</span></td></tr></table></td></tr></table>

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment écrire sur une image qui sera en arrière plan ?

Message par Tanukicoco le Mer 10 Fév 2010 - 23:19

Merci beaucoup n__n
Je vais essayer ça, mais tout d'abord je dois créer mon image *serait temps XD*
Je te remercie énormément, je vais passer ce topic en résolu et si jamais je rencontre un soucis, je t'enverrai un petit MP, mais je pense que cette fois-ci c'est bon, j'arriverai sans doute à me débrouiller pour la suite. Un grand merci encore, franchement, tu me sauves <3

Tanukicoco
**

Messages : 51
Inscrit(e) le : 06/02/2010

http://tsuite-seikatsu.forumactif.org/forum.htm
Tanukicoco a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment écrire sur une image qui sera en arrière plan ?

Message par Invité le Mer 10 Fév 2010 - 23:20

On peut aussi aligner ainsi :
padding: 5px 10px 5px 10px;
c'est une façon d'aligner verticalement et horizontalement.

Le principe va dans le sens des aiguilles d'une montre :
top (haut 5px)> right (droite 10px)> bottom (bas 5px)> left (gauche 10px)

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment écrire sur une image qui sera en arrière plan ?

Message par Tanukicoco le Mer 10 Fév 2010 - 23:24

Ça me sera fort utile.
Merci =)

Tanukicoco
**

Messages : 51
Inscrit(e) le : 06/02/2010

http://tsuite-seikatsu.forumactif.org/forum.htm
Tanukicoco a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum