Texte superposant une image

[Chertograd]

Bonsoir,


J'aimerais savoir s'il était possible de superposer le texte sur une image de fond.
Je voudrais que la description empiète sur l'image, à sa droite, pour davantage d'harmonie.

http://vampires-kingdom.jdrforum.com/

C'est dans le premier onglet de la page d'accueil que j'aimerais cet effet. Est-ce possible, une telle manipulation ?



Merci d'avance !

[Automne]

Bonjour,

Il faudrait faire quelque chose de se genre. Dans le message page accueil

Code:

<div id="image">
<img src="LIEN IMAGE" />
<h1 class="textimg">TEXTE </h1>
</div>

Dans pa << affichage << couleur << feuille de style css

Code:

.textimg{
position:relative;
top: 00px;
left: 00px;}

Mettre les valeurs top et left pour déplacer le texte. Vous pouvez mettre une valeur négative pour monter, par exemple top:-90px;

[Chertograd]

Bonjour,

Ça marche très bien, merci !

Par contre, est-il possible de justifier le texte ? J'ai bien mis les balises sur la page d'accueil et ça fonctionnait jusqu'à ce que je change la largeur du texte. Depuis que je l'ai rétrécie - juste avec des <br> - le texte ne s'aligne plus comme je le voudrais.
Par ailleurs, le texte est en gras maintenant... Comment retirer ça ?

Merci d'avance.

[Chertograd]

Bonsoir,

Personne ?

[Automne]

bonjour,

il suffit de le signaler dans le css text-align:justify;

[Chertograd]

Bonjour,

Je viens d'entrer cela dans le CSS, mais ça ne change rien...

[Chertograd]

Je relance.

[Automne]

Bonjour,

Vous l'avez rentré comment, je peux avoir le code. Merci.

[Chertograd]

Bonjour,

Toutes mes excuses, je n'avais pas vu la réponse. En fait, j'ai mis des espaces pour arriver à aligner à quelques pixels.
Voici le code.

Code:

<div align="center"><select style="width: 200px;" onchange="location = this.value">
          <option selected="selected">Le Grimoire de Vampires' Kingdom</option>
          <option value="http://www.vampires-kingdom.com/t2-le-reglement">Réglement</option>
          <option value="http://www.vampires-kingdom.com/t10-le-contexte">Contexte</option>
          <option value="http://www.vampires-kingdom.com/f1-listing-des-avatars-prenoms-et-noms">Liste des avatars et noms</option>
          <option value="http://www.vampires-kingdom.com/f7-le-contexte">Description des castes</option></select></div><br><br><div align="center">        <div id="image">
        <img src="http://i47.servimg.com/u/f47/14/07/18/78/victor10.jpg" />
        <h1 class="textimg"><div align="justify">Hiver 2014.  Tout n’est plus que chaos un peu<br> partout sur cette terre. La violence prédomine <br>pour le plaisir de certains.  Dans une  contrée<br> reculée de  l’Angleterre, un  monarque a bâti <br>un royaume et règne en maître absolu sur un<br> territoire, depuis  son château qui abrite  des<br>vampires.<br><br>
          Vous êtes sur le territoire<br>                         de Vampire’s Kingdom.<br><br>
                        Vampires ? Dévots ?<br>               Humains asservis ? Résidents ?<br>
                       Quel sera votre rôle ?</div></h1></div>
        </div></div>

Espaces étant définis par : &nbsp*;   Mais ça ne se voit pas là, dans les balises code.

[Chertograd]

Bonjour,

Je relance le sujet.

Preuve en image : http://vampires-kingdom.jdrforum.com/

[Chertograd]

Bonsoir,

Je cherche toujours le moyen de régler mon problème

Merci d'avance.

[Automne]

Bonjour,

En mettant textjustify peut etre

Code:

    <div align="center"><select style="width: 200px;" onchange="location = this.value">
                  <option selected="selected">Le Grimoire de Vampires' Kingdom</option>
                  <option value="http://www.vampires-kingdom.com/t2-le-reglement">Réglement</option>
                  <option value="http://www.vampires-kingdom.com/t10-le-contexte">Contexte</option>
                  <option value="http://www.vampires-kingdom.com/f1-listing-des-avatars-prenoms-et-noms">Liste des avatars et noms</option>
                  <option value="http://www.vampires-kingdom.com/f7-le-contexte">Description des castes</option></select></div><br><br><div align="center">        <div id="image">
                <img src="http://i47.servimg.com/u/f47/14/07/18/78/victor10.jpg" />
                <h1 class="textimg"><div align="textJustify">Hiver 2014.  Tout n’est plus que chaos un peu<br> partout sur cette terre. La violence prédomine <br>pour le plaisir de certains.  Dans une  contrée<br> reculée de  l’Angleterre, un  monarque a bâti <br>un royaume et règne en maître absolu sur un<br> territoire, depuis  son château qui abrite  des<br>vampires.<br><br>
                  Vous êtes sur le territoire<br>                        de Vampire’s Kingdom.<br><br>
                                Vampires ? Dévots ?<br>              Humains asservis ? Résidents ?<br>
                              Quel sera votre rôle ?</div></h1></div>
                </div></div>


[Chertograd]

Bonsoir,

Non, ça ne fonctionne toujours pas... Ça a recentré le texte d'un seul coup et l'a décalé sur la droite.

[Automne]

Bonjour,

Vous le voulez ou se texte?

[Chertograd]

A côté de l'image, à sa droite. Mais ne dépassant pas du cadre du tableau. Cela en justifié.

[Automne]

Bonjour,

Moi, j'ai mis ceci dans le css et çà fonctionne

Code:

        .textimg{
      position:relative;
  text-align: justify;
        top: -270px;
        left:600px;}

[Chertograd]

Bonsoir,

Il doit peut-être y avoir un code qui bloque... Parce que ce n'est toujours pas justifié ici.

Page d'accueil :

Code:

<div align="center"><select style="width: 200px;" onchange="location = this.value">
                          <option selected="selected">Le Grimoire de Vampires' Kingdom</option>
                          <option value="http://www.vampires-kingdom.com/t2-le-reglement">Réglement</option>
                          <option value="http://www.vampires-kingdom.com/t10-le-contexte">Contexte</option>
                          <option value="http://www.vampires-kingdom.com/f1-listing-des-avatars-prenoms-et-noms">Liste des avatars et noms</option>
                          <option value="http://www.vampires-kingdom.com/f7-le-contexte">Description des castes</option></select></div><br><br><div align="center">        <div id="image">
                        <img src="http://i47.servimg.com/u/f47/14/07/18/78/victor10.jpg" />
                        <h1 class="textimg"><div align="justify">Hiver 2014.  Tout n’est plus que chaos un peu<br> partout sur cette terre. La violence prédomine <br>pour le plaisir de certains.  Dans une  contrée<br> reculée de  l’Angleterre, un  monarque a bâti <br>un royaume et règne en maître absolu sur un<br> territoire, depuis  son château qui abrite  des<br>vampires.</div><br><br>
                          Vous êtes sur le territoire<br>                        de Vampire’s Kingdom.<br><br>
                                        Vampires ? Dévots ?<br>              Humains asservis ? Résidents ?<br>
                                      Quel sera votre rôle ?</div></h1></div>
                        </div></div>

       

</div>

Et partie du CSS qui va bien :

Code:

/****Tableau de la page d'accueil****/
         
.mon_onglet{
          display: block;
          padding: 5px;
          margin: 4px;
          color: #A19789;
          background: #38322D;
          border: 1px solid #82795F;}
       
        .mon_onglet:hover{
          background: #4d4b46;} 
         
        .mon_onglet_selected{
          display: block;
          padding: 5px;
          margin: 4px;
          color: #A19789;
          background: #4d4b46;
          border: 1px solid #82795F;}
               
        .clear{
          clear: both;}
       
        .mon_contenu{
          color: #A19789;
          background: #38322D;
          border: 1px solid #82795F;
          padding: 50px;
          margin: 10 px;
          height: 450px;
          line-height: normal;
          font-size: 11px;}
       
        #mes_contenus, #mes_onglets{
          height: 100%;
          width:100%;}

/****Texte superposant l'image sur la page d'accueil****/
             
        .textimg{
      position:relative;
  text-align: justify;
        top: -270px;
        left:220px;}

Merci.

[Automne]

bon, j'ai refais que le tableau de l'image et le texte

Code:

<div style="width: 429px; height: 300px; border: 1px solid #000; margin: 0; padding: 0;">
  <img src="http://i47.servimg.com/u/f47/14/07/18/78/victor10.jpg" style="position: relative; width:429px; height:300px">
 <div class="textimg"><p style="width: 150px; height: 150px; top: 455px; left: 602px; margin: 0; position: absolute">
Hiver 2014. Tout n’est plus que chaos un peu partout sur cette terre. La violence prédomine pour le plaisir de certains. Dans une contrée reculée de l’Angleterre, un  monarque a bâti un royaume et règne en maître absolu sur un territoire, depuis son château qui abrite des vampires. Vous êtes sur le territoire de Vampire’s Kingdom.
Vampires? Dévots? Humains asservis? Résidents? Quel sera votre rôle?
</p></div>
</div>


css

Code:

.textimg{
  text-align: justify;
}

[Chertograd]

Merci pour tout ce que vous avez fait.
Mais ça ne fonctionne toujours pas. Ce pourquoi je ne vais pas continuer à vous faire perdre votre temps et votre patience

Je ferai autrement.

Sujet résolu.