Texte superposant une image

2 participants

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

Résolu Texte superposant une image

Message par Chertograd Lun 27 Fév 2012 - 21:07

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 !


Dernière édition par Chertograd le Mer 28 Mar 2012 - 16:37, édité 1 fois
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Automne Lun 27 Fév 2012 - 23:38

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;
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd Ven 2 Mar 2012 - 11:10

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

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd Dim 4 Mar 2012 - 21:17

Bonsoir,

Personne ? Smile
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Automne Dim 4 Mar 2012 - 23:57

bonjour,

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

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd Mer 7 Mar 2012 - 16:29

Bonjour,

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

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd Dim 11 Mar 2012 - 17:36

Je relance.
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Automne Dim 11 Mar 2012 - 22:56

Bonjour,

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

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd Jeu 15 Mar 2012 - 15:26

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

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd Sam 17 Mar 2012 - 11:37

Bonjour,

Je relance le sujet.

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

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd Dim 18 Mar 2012 - 17:37

Bonsoir,

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

Merci d'avance.
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Automne Sam 24 Mar 2012 - 11:05

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>




Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd Mar 27 Mar 2012 - 18:17

Bonsoir,

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

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Automne Mar 27 Mar 2012 - 20:14

Bonjour,

Vous le voulez ou se texte?
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd Mar 27 Mar 2012 - 20:27

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

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Automne Mar 27 Mar 2012 - 21:48

Bonjour,

Moi, j'ai mis ceci dans le css et çà fonctionne
Code:
        .textimg{
      position:relative;
  text-align: justify;
        top: -270px;
        left:600px;}
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd Mar 27 Mar 2012 - 22:28

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.
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Automne Mar 27 Mar 2012 - 23:51

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;
}

Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd Mer 28 Mar 2012 - 16:37

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 Wink

Je ferai autrement.

Sujet résolu.
Chertograd

Chertograd
**

Messages : 59
Inscrit(e) le : 08/02/2012

http://vampires-kingdom.jdrforum.com/
Chertograd a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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