Texte superposant une image

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

Résolu Texte superposant une image

Message par Chertograd le 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
**

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 le 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
+ Hyperactif +

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

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd le 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
**

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 le Dim 4 Mar 2012 - 21:17

Bonsoir,

Personne ? Smile

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 le Dim 4 Mar 2012 - 23:57

bonjour,

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

Automne
+ Hyperactif +

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

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd le Mer 7 Mar 2012 - 16:29

Bonjour,

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

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 le Dim 11 Mar 2012 - 17:36

Je relance.

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 le Dim 11 Mar 2012 - 22:56

Bonjour,

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

Automne
+ Hyperactif +

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

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd le 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
**

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 le Sam 17 Mar 2012 - 11:37

Bonjour,

Je relance le sujet.

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

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 le Dim 18 Mar 2012 - 17:37

Bonsoir,

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

Merci d'avance.

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 le 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
+ Hyperactif +

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

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd le 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
**

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 le Mar 27 Mar 2012 - 20:14

Bonjour,

Vous le voulez ou se texte?

Automne
+ Hyperactif +

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

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd le 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
**

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 le 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
+ Hyperactif +

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

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd le 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
**

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 le 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
+ Hyperactif +

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

http://gilles570.forumactif.info/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Texte superposant une image

Message par Chertograd le 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
**

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


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