Image de fond pour un code

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

Résolu Image de fond pour un code

Message par CryingToYourHeart le Mar 12 Juin 2012 - 19:04

Bonjour,
J'aimerais pouvoir mettre un code sur une image, soit le code de cette page:
Code:
http://thewerewolfpack.forumgratuit.org/h1-home
sur cette image
Code:
http://img11.hostingpics.net/pics/295715TIPA.png

J'ai mis ce code ci:
Code:
<img src="http://img11.hostingpics.net/pics/295715TIPA.png"  width="700" height="700px" class="image">
<iframe  name="staff" src="http://thewerewolfpack.forumgratuit.org/h1-home" scrolling="no" height="600" width="730" FRAMEBORDER="no"></iframe>

Mais ça ne marche pas, es-ce que quelqu'un aurait une idée pour que ça puisse se faire ?
Merci Smile


Dernière édition par CryingToYourHeart le Mar 12 Juin 2012 - 20:56, édité 1 fois

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond pour un code

Message par KaraV3 le Mar 12 Juin 2012 - 20:05

Bonjour/Bonsoir,

Pouvez vous me donner le code de la page html pour faire une modifications avec et mettre l'image dedans puis je vous dirrais en détail comment j'ai procéder!!

KaraV3
*

Masculin
Messages : 45
Inscrit(e) le : 21/12/2011

http://karavision.fra.co/
KaraV3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond pour un code

Message par CryingToYourHeart le Mar 12 Juin 2012 - 20:25

@KaraV3 a écrit:Bonjour/Bonsoir,

Pouvez vous me donner le code de la page html pour faire une modifications avec et mettre l'image dedans puis je vous dirrais en détail comment j'ai procéder!!

Bonsoir,

Oui bien sur, mais on ne peut pas mettre directement le code de la page sur l'image, car j'aimerais faire des onglets par la suite et je pense que plus simple ?

Spoiler:
Code:
<HTML> 
<HEAD><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <style type="text/css">

.titree{
letter-spacing: -2px;
font-family:rockwell;color:7b4c64;
font-size:22px;
font-weight:lighter;
text-align:center;
text-transform:uppercase;
text-shadow: #000000 2px 5px 5px;
}

.nom{
letter-spacing: 0px;
font-family:rockwell;color:7b4c64;
font-size:16px;
font-weight:lighter;
text-align:center;
text-transform:uppercase;
text-shadow: #000000 2px 5px 5px;
}
.celeb {
font-family:arial;
font-size:11px;
}
.navig{
font-family:arial;font-size:10px;width:90px;text-transform:uppercase;color:#91776b;font-weight:bold;text-align:center;}

a:link, a:active, a:visited{color:#ad948a;
text-decoration: none !important;}

a:hover{
color:#ad948a;}

/* ----------- STAFF --------------- */

/* PARTIE SLIDE */

.tfa_staff_code{
width: 200px;
margin: 0 auto;
padding: 0;
position: relative;
overflow: hidden;
}

.tfa_staff_code div{
width: 200px;
margin: 0 auto;
padding: 0;
text-align: center;
position: relative;
}

/* STAFF */

/* BLOC DE CONTENU */

#staff_code_TFA{
width: 200px;
margin: 0 auto;
padding: 5px;
background: #f8eee9;
border: 0px solid #004956;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}



/* CADRE AFFICHANT LES INFOS DU STAFF */

.info_staff{
width: 145px;
height:80px;
margin: 0 auto;
padding-right: 8px;
padding-top:2px;
padding-bottom:2px;
padding-left:8px;
border: 0px solid #126f74;
background-color:#f8eee9;
text-align:center;
color: #91776b;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}




 </style>

</HEAD>

                <table><tr><td><div style="background-color:#f8eee9;-moz-border-radius:10px;font-size:11px;font-family:arial;color:#91776b;width:200px;text-align:justify;"><img src="http://img854.imageshack.us/img854/2329/98497925.png" width="60" style="position:absolute;margin-top:-5px;margin-left:-10px;"><span class="titree"><div style="margin-left:20px;">Contexte</div></span><div style="-moz-border-radius:10px;border-radius:10px;-webkit-border-radius:10px;background-color:#f8eee9;padding:5px;"><img src="http://i40.tinypic.com/snmkq8.jpg" style="float:left;padding-right:15px;padding-bottom:3px;"></a> « Après une année de dure labeur il est temps de prendre un peu de repos, pourquoi ne pas aller sur Temptation Island histoire de ce ressourcer ? N'est-il pas agréable de pouvoir se baigner dans les lagons bleus turquoise de cette île ou encore de passer s'acheter quelques souvenirs dans les boutiques du coin ou tout simplement profiter de la chaleur et prendre un bain de soleil. Cette île est idéale si vous désirez passer quelques temps sans parler de travail, de famille, de peine de coeur... »<br><br><center><font color="darkred">Optimisé pour Google Chrome. </font></center> </div></div><br><span class="titree"><center>Navigation<div style="position:absolute;margin-left:180px;margin-top:-40px;"><img src="http://img825.imageshack.us/img825/3074/59598943.png"/></div></center></span><div style="-moz-border-radius:10px;border-radius:10px;-webkit-border-radius:10px;background-color:#f8eee9;padding:5px;"><table><tr><td><div class="navig"><a href="http://temptationisland.forum.st/t2-contexte-du-forum" target="_blank">Contexte</a></div></td><td> <div class="navig"><a href="http://temptationisland.forum.st/t1-reglement-du-forum" target="_blank">Règlement</a></td></tr>
<tr><td><div class="navig"><a href="http://temptationisland.forum.st/t101-les-groupes#231" target="_blank">Groupes</a></div></td><td><div class="navig"><a href="http://temptationisland.forum.st/t153-intrigues-du-forum#992" target="_blank">Intrigue</a> </div></td></tr>
<tr><td><div class="navig"><a href="http://temptationisland.forum.st/t18-bottin-des-avatars" target="_blank">Bottin</a></div></td><td><div class="navig"><a href="http://temptationisland.forum.st/f4-scenarios" target="_blank">Scénarios</a></div> </td></tr>
<tr><td> <div class="navig"><a href="http://thetemptationisland.tumblr.com/" target="_blank">Tumblr du forum</a></div></td><td> <div class="navig"><a href="http://temptationisland.forum.st/f5-presentation"  target="_blank">Présentation</a></div></td></tr>
<tr><td><div class="navig"><a href="http://temptationisland.forum.st/f6-coin-invite" target="_blank">Invités</a></div></td><td><div class="navig"><a href="http://temptationisland.forum.st/f60-partenaires" target="_blank">Partenariat</a> </div></td></tr></table></div></div><br><br>

</td><td><div style="margin-left:250px;">


<!-- DEBUT CODES STAFF --> <div id="staff_code_TFA">

              <!-- LE TITRE -->

    <center><span class="titree">Dream Team</span></center>

              <!-- DEBUT SLIDE (ONGLETS) AVATARS -->

    <div class="tfa_staff_code">

              <!-- ICI TU METS 4 AVATARS -->

      <div>

        <a href="#" onclick="Monter_Cacher('staff1'); return false"><img src="http://desmond.imageshack.us/Himg72/scaled.php?server=72&filename=sanstitre2dgw.png&res=landing" width=50 height=50 class="opacity_8"></a>

        <a href="#" onclick="Monter_Cacher('staff2'); return false"><img src="http://desmond.imageshack.us/Himg818/scaled.php?server=818&filename=sanstitre3ss.png&res=landing" width=50 height=50 class="opacity_8"/></a>

      <a href="#" onclick="Monter_Cacher('staff6'); return false"><img src="http://desmond.imageshack.us/Himg190/scaled.php?server=190&filename=sanstitre4fv.png&res=landing" width=50 height=50 class="opacity_8"/></a>
     
 </div>
       

<!-- ICI TU METS 4 AVATARS -->

      <div>  <a href="#" onclick="Monter_Cacher('staff3'); return false"><img src="http://desmond.imageshack.us/Himg809/scaled.php?server=809&filename=sanstitre5w.png&res=landing" width=50 height=50 class="opacity_8"/></a>

<a href="#" onclick="Monter_Cacher('staff4'); return false"><img src="http://desmond.imageshack.us/Himg854/scaled.php?server=854&filename=sanstitre7r.png&res=landing" width=50 height=50 class="opacity_8"/></a>     

<a href="#" onclick="Monter_Cacher('staff5'); return false"><img src="http://desmond.imageshack.us/Himg812/scaled.php?server=812&filename=sanstitre6ep.png&res=landing" width=50 height=50 class="opacity_8"/></a>       


           

    </div>

             

</div>

              <!-- FIN SLIDE (ONGLETS) AVATARS -->



              <!-- DEBUT DU CONTENU DES ONGLETS (AVATARS) --> <div  id="container_tfa_code">

              <!-- CONTENU 1 CORRESPOND A L AVATAR 1 -->

    <div id="staff1">
        <div class="info_staff">
        <span class="nom">KAITLYN S. BRIDGES</span><br/>
            <span class="celeb">Fondatrice<br/></span>
          <a href="http://temptationisland.forum.st/privmsg?mode=post&u=2" target="_blank">MP</a> ♦ <a href="http://temptationisland.forum.st/u2" target="_blank">Profil</a> ♦ <font color="forestgreen">Dispo</font>
        </div></div>

              <!-- CONTENU 2 CORRESPOND A L AVATAR 2 -->

    <div id="staff2">
            <div class="info_staff">
        <span class="nom">LEILA M. G. ADDAMS</span><br/>
            <span class="celeb">Administratrice<br/></span>
          <a href="http://temptationisland.forum.st/privmsg?mode=post&u=10" target="_blank">MP</a> ♦ <a href="http://temptationisland.forum.st/u10" target="_blank">Profil</a> ♦ <font color="forestgreen">Dispo</font>
        </div></div>

<!-- CONTENU 2 CORRESPOND A L AVATAR 2 -->

    <div id="staff3">
            <div class="info_staff">
        <span class="nom">MARLEY J. CALLAWAY</span><br/>
            <span class="celeb">Modératrice </span><br>
          <a href="http://temptationisland.forum.st/privmsg?mode=post&u=4" target="_blank">MP</a> ♦ <a href="http://temptationisland.forum.st/u4" target="_blank">Profil</a> ♦ <font color="forestgreen">Dispo</font>
        </div></div>

              <!-- CONTENU 3 CORRESPOND A L AVATAR 3 -->

    <div id="staff6">
            <div class="info_staff">
        <span class="nom">SKYLER-ECHO B. ROSLYAKOVA</span><br/>
            <span class="celeb"> Administratrice<br/></span>
          <a href="http://temptationisland.forum.st/privmsg?mode=post&u=11" target="_blank">MP</a> ♦ <a href="http://temptationisland.forum.st/u11" target="_blank">Profil</a>  ♦ <font color="forestgreen">Dispo</font>
        </div></div>

                       
              <!-- CONTENU 7 CORRESPOND A L AVATAR 7 -->

    <div id="staff4">
            <div class="info_staff">
        <span class="nom">NATHAN S. MCANDERSON</span><br/>
          <span class="celeb"> Modérateur<br/></span>
          <a href="http://temptationisland.forum.st/privmsg?mode=post&u=12" target="_blank">MP</a> ♦ <a href="http://temptationisland.forum.st/u12" target="_blank">Profil</a> ♦ <font color="forestgreen">Dispo</font>
        </div></div>

              <!-- CONTENU 7 CORRESPOND A L AVATAR 7 -->

    <div id="staff5">
            <div class="info_staff">
        <span class="nom">PÊCHE R. ANGELES</span><br/>
          <span class="celeb"> Modératrice<br/></span>
          <a href="http://temptationisland.forum.st/privmsg?mode=post&u=13" target="_blank">MP</a> ♦ <a href="http://temptationisland.forum.st/u13" target="_blank">Profil</a> ♦ <font color="forestgreen">Dispo</font>
        </div></div>


           

</div>

              <!--  FIN DU CONTENU DES ONGLETS (AVATARS) -->
</div>

              <!-- FIN CODES STAFF -->

    <script type="text/javascript">
    function Monter_Cacher(id)
    {
        for(var i=1;i<=6;i++)
        {
            document.getElementById('staff'+i).style.display='none';
        }
        if(document.getElementById(id).style.display =='none')
        {
            document.getElementById(id).style.display = 'block';
        }
    }
    Monter_Cacher('staff1');
    </script> </div>

<br><div style="margin-left:270px;"><script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 10,
  width: 200,
  height: 50,
  theme: {
    shell: {
      background: '#f8eee9',
      color: '#91776b'
    },
    tweets: {
      background: '#f8eee9',
      color: '#dec0b4',
      links: '#ad948a'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: true,
    behavior: 'all'
  }
}).render().setUser('TheIslandBaby').start();
</script>
</div>
     
</td></tr></table>
</HTML>

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image de fond pour un code

Message par KaraV3 le Mar 12 Juin 2012 - 20:36

Merci beaucoup, j'ai pue faire un petit test et j'en ai conclu une chose, au lieu de modifier directement la page ou il y a tous les codes, ont fait une nouvelle pages qui ressemblerais a sa:
http://pandora-ile.forumactif.pro/h7-fiche-cryingtoyourheart
Les codes sont la:
Code:
<table class="marge" background="http://img11.hostingpics.net/pics/295715TIPA.png"  border="0" cellspacing="0" height="700" width="700"  >
<td ><br><br><br><br><br><br><br><br>
<center><iframe  name="staff" src="http://thewerewolfpack.forumgratuit.org/h1-home" scrolling="no" height="540" width="700" FRAMEBORDER="no"></iframe></center>
</table>
Enfaite se que sa va faire c'est que vous aurez une page ou tous est regrouper au lieu de plussieur codes ou ont se perd facilement, il vous suffit juste de faire les petites modifications dans les codes de basse pas dan sle codages final.
Alors je vais vous expliquez comment j'ai pue faire pour mettre l'image en fond, ba c'est accés simple,
il suffit de vous servir des balises
Code:
<table></table>
et en modifiant la première, vous pouvez obtenir cela:
Code:
<table class="marge" background="http://img11.hostingpics.net/pics/295715TIPA.png"  border="0" cellspacing="0" height="700" width="700"  >
surtout ne modifiez pas le derniers codes
Code:
</table>
je vous le fait en plus clair:
Code:
<table class="@1" background="VOTRE LIEN D'IMAGE"  border="0" cellspacing="0" height="©2" width="©2"  >
A la place de @1 vous mettez le code qui administre votre CSS, après nous avons le lien de l'image et puis nous avons les ©2 qui sont vos mesures.
Pour plus de questions je suis présent ici,sur skype, sur hotmail et sur mon forum.

Cordialement, KaraV3

KaraV3
*

Masculin
Messages : 45
Inscrit(e) le : 21/12/2011

http://karavision.fra.co/
KaraV3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image de fond pour un code

Message par CryingToYourHeart le Mar 12 Juin 2012 - 20:49

Merci beaucoup c'est exactement ce que je souhaitais, ça marche très bien Smile

CryingToYourHeart
****

Féminin
Messages : 404
Inscrit(e) le : 18/01/2012

http://thewerewolfpack.forumgratuit.org/
CryingToYourHeart 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