Insérer du texte dans une image

[Trodatt]

Bonjour,
Ma question concerne le texte qui apparaît au milieu d'une image.
Je souhaiterais pouvoir insérer du texte dans une image insérée dans un effet de défilement d'image.
A aujourd'hui, j'ai bien suivi le tutoriel Jimdo, j'ai de jolies images qui défilent mais sans texte au milieu de ces images.
Pourriez vous me donner svp un exemple de code html et où l'insérer dans le code html pour le défilement?

2ème question : je souhaiterais aussi mettre du texte au milieu d'une image mais cette fois ci dans une page classique, sans défilement. Est-ce le même code et à quel endroit le mettre SVP?

Merci beaucoup pour votre aide!

[FredVig]

Je ne connais pas ce tuto jimdo, mais s'il s'agit du texte figurant en regard de chaque image de la galerie d'image, vous pouvez utiliser quelques balises html simples pour formater le texte, ou directement récupérer l'identifiant du texte et changer son style en CSS.
Pour mettre du texte sur une image, vous devriez essayer de déplacer le titre de l'image à l'aide du css. (voir les tutos de ce forum "http://www.jimdoforum.fr/t746-apprendre-a-modifier-le-head-les-bases-actualisees-2016

[Trodatt]

Bonsoir et merci pour votre aide.
Pour le tuto c'est celui-ci : https://aide.jimdo.com/aller-plus-loin-avec-jimdo/cr%C3%A9er-un-effet-de-d%C3%A9filement-d-image/
Ma 1ère question est liée au code HTML à ajouter dans le widget utilisé pour le défilement d'image : j'aimerais intégrer du texte, au centre de l'image et je pense qu'il y a un code spécifique à entrer et où?

Par ailleurs, vous répondez à ma 2ème question qui concerne une page classique, mais je ne saisis pas car si je créé une image et y met un sous-titre, puis vais dans le CSS et essaye de choisir un style, il n'est pas indiqué de mise au centre du texte (qui se situe en bas de l'image).

Merci pour votre aide, et votre patience.

[FredVig]

Dans le cas du tuto que vous indiquez, ce n'est pas une galerie d'image. il faut tout faire en html (tuto + texte sur l'image) et l'insérer dans le widget html.
Le tuto vous explique comment créer une image, il suffit de rajouter du texte dans une div. Ce sont des manipulations qu'il ne faut entreprendre qu'après avoir étudié les bases de l'html.
ça, c'est les 2 div du tutojimdo qui contiennent l'image. Il faut rajouter du texte dans une div, après celle de l'image.

Code:


<div style="display: block!important;margin-left: -1000px;margin-right: -1000px;">
        <div style=
        "background-image: url(http://www.meduana.fr/app/download/9921424998/panodev.jpg?t=1423782118); background-size: cover; background-attachment: fixed; background-position: center; width: 100%!important; max-width: 100%; margin: 25px 0;height:500px;">
    </div>
<div>
            <p style=" [ici le style du texte]">
Le texte
            </p>
        </div>
</div>



   
Le texte est à "remonter" sur l'image à l'aide du style. Cela fait intervenir diverses propriétés, qui différent selon ce que vous voulez obtenir. (display, position, margin et padding, principalement) C'est à la fois assez simple, mais il existe beaucoup de possibilités pour parvenir au résultat.

Pour l'aspect du texte, une des méthodes consiste à le créer à l'aide d'un module texte, et copier son html à l'aide du dernier outil de la liste "modifier le html". Il suffit de coller le tout entre les balises <div> et >/div>, dans l'autre module.

[Trodatt]

J'ai du mal, à priori il faudrait que j'intègre ceci : img {
 vertical-align:top;
}
Mais où et avec quelles virgules, points, parenthèses.....
J'ai essaye de le mettre à la suite du code que vous m'avez transmis, code que j'avais déjà utilisé jusqu'à ....n: 25px 0;height:500px;"> conformément au tuto Jimdo.
J'ai aussi utilisé le code <p style="margin:150px"> mais le texte reste en bas.
Pourriez vous me donner, svp, si cela vous est possible, un exemple de code pour l'alignement horizontal et vertical du texte, ajouté à mon code actuel (ci-dessous) que je recopierai, je souhaite simplement que le texte soit situé au milieu de l'image verticalement et horizontalement et rien d'autre....
Mon code entier est :
<div style="display: block!important;margin-left: -1000px;margin-right: -1000px;">
   <div style=
   "background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Carri%C3%A8res_d%27Ocre%2C_Roussillon%2C_Vaucluse.jpg); background-size: cover; background-attachment: fixed; background-position: center; width: 100%!important; max-width: 100%; margin: 25px 0;height:500px;">
   </div>
           <p style="text-align: center;"><span style="font-size: 34px;">Ceci est un test</span></p>
   </p>
</div>

Je vous demande juste 1 petite ligne de code car là c'est un peu dur et je souffre en ce Dimanche soir....

[tachi300]

Moi j'ai du texte avec bouton de lien si ça peut aider

<div style="display: block!important;margin-left: -335px;margin-right: -335px;">
   <div style=
   "background-image: url(https://image.jimcdn.com/app/cms/image/transf/dimension=origxorig:format=jpg/path/s7f509d59e0e1454c/image/i7896b11efc0c888a/version/1495028775/image.jpg);
    background-size: cover; background-attachment: fixed; background-position: center; background-position: center; box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.9); width: 100%!important; max-width: 100%; margin: 25px 0;height:500px;">
   <div class="j-calltoaction-wrapper j-calltoaction-align-2 centragebouton">
           <a class="j-calltoaction-link j-calltoaction-link-style-2 centragebouton" data-action="button" href="/news" data-title="news">NEWS</a>
       </div>

[Trodatt]

Super merci beaucoup c'est très sympa, j'ai changé le lien de destination pour celui-ci : href="/boutique-en-ligne" au lieu de "news" pour mon site web.
En revanche petit souci, le bouton de lien est situé tout en haut de l'image : sais tu quelle valeur de "px" dois-je changer?
Merci beaucoup
Par contre tu devrais pas le faire un peu plus grand le bouton de lien sur ton site pour qu'il soit + visible?

[tachi300]

<div style="display: block!important;margin-left: -335px;margin-right: -335px;">
  <div style=
  "background-image: url(https://image.jimcdn.com/app/cms/image/transf/dimension=origxorig:format=jpg/path/s7f509d59e0e1454c/image/i7896b11efc0c888a/version/1495028775/image.jpg);
   background-size: cover; background-attachment: fixed; background-position: center; background-position: center; box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.9); width: 100%!important; max-width: 100%; margin: 25px 0;height:500px;">
  <div class="j-calltoaction-wrapper j-calltoaction-align-2 centragebouton">
          <a class="j-calltoaction-link j-calltoaction-link-style-2 centragebouton" data-action="button" href="/news" data-title="news">NEWS</a>
      </div>

le centragebouton souligné tu l'as mis ...

[Trodatt]

Tout à fait, j'ai fait copier/coller de tout le code html et le bouton reste tout en haut de l'image.
J'ai essayé sur un autre site que j'ai créé et c'est pareil.

[tachi300]

<div class="j-calltoaction-wrapper j-calltoaction-align-2 centragebouton">
         <a class="j-calltoaction-link j-calltoaction-link-style-2 centragebouton" data-action="button" href="/news" data-title="news">NEWS</a>
     </div>

Le nom de mes boutons ... les tiens ne doivent pas s'appeler de la même manière !

Sur ton site c'est plutôt : j-calltoaction-link j-calltoaction-link-style-3

[Trodatt]

J'ai essayé toujours pas.
Quand je change <div class="j-calltoaction-wrapper j-calltoaction-align-2 centragebouton">
Et y met 1 à la place de 2 le bouton se met en haut à gauche et si je mets 3 ils e met en haut à droite.
Bon, c'est pas grave, pour le texte au milieu de l'image, je créerai une image avec texte dans un logiciel de retouche d'images et pour le bouton je ferai sans mais c'est vrai que ça peut apporter un plus.
Merci quand même pour ton aide!

[tachi300]

Non c'est pas ça ...

met à la place de <div class="j-calltoaction-wrapper j-calltoaction-align-2 centragebouton">

j-calltoaction-link j-calltoaction-link-style-3 centragebouton

[Contenu sponsorisé]