Placer le texte du qeel

[marazo]

Bonjour!

J'ai un problème avec mon qui est en ligne. Je n'arrive pas à placer le texte au bon endroit sur mon image. Je ne comprends tout simplement pas comment faire. Je sais que j'ai déjà vu un tutoriel sur le sujet mais je ne le retrouve plus .

Donc voilà à quoi ressemble mon qui est en ligne présentement.

Spoiler:

Je voudrais évidement que les statistique du forum soit dans l'encadré du même nom, même chose pour les anniversaires, le reste serait placé sous l'image.

Voici mon template index body modifié

Code:



<!-- BEGIN disable_viewonline -->
<center><div class="qeel"> 
        <div class="qeelgroupes"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></div>
        <div class="qeelstats"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></div>
        </div>
   
  <br />
      
      
  <br />
  <br />
      <span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span>
  <br />
  <center><table class="trans">{L_CONNECTED_MEMBERS}</table></center>
  <center><table class="trans">{L_WHOSBIRTHDAY_TODAY}
    {L_WHOSBIRTHDAY_WEEK}</table></center>
  <br />
      
  <br />
   <!-- BEGIN switch_chatbox_activate -->
  <br />
      
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
         </span>
      
  <br />
   <!-- END switch_chatbox_activate -->
</div></center>
<!-- END disable_viewonline -->


et mon css

Code:

body {
background-color: #;
background-image: url("http://i44.servimg.com/u/f44/09/04/11/14/fond-c11.jpg");
scrollbar-face-color: #;
scrollbar-highlight-color: #;
scrollbar-shadow-color: #;
scrollbar-3dlight-color: #;
scrollbar-arrow-color: #;
scrollbar-track-color: #;
scrollbar-darkshadow-color: #;
}
font,th,td,p {
 font-family: Verdana,Arial,Helvetica,sans-serif }
a:link,a:active,a:visited {
 color : #FFFFFF;
 }
a:hover{
 text-decoration: none;
  text-shadow: 2px 2px 2px white;
 color : #000000;
 }
hr{
 height: 0px;
 border: solid #351a00 0px;
 border-top-width: 1px;
}
.bodyline{
 background-color: #;
 
      #wrap{
        border-radius: 20px;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;}
  }
.bodylinewidth {
width:65%}
.forumline{
 background-color: #;
#wrap{
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;}
 }
td.row1{
 background-color: #3A3122;
 }
td.row2{
 background-color: #3A3122;
 }
td.row3{
 background-color: #3A3122;
 }
td.rowpic {
background-color: #dee3e7;
background-image: url("http://i44.servimg.com/u/f44/09/04/11/14/barre-10.png");
}
th {
color: #FFFFFF;
 font-size: 12px;
 font-weight : bold;
background-color: #006699;height: 25px;ackground-image: url("http://i44.servimg.com/u/f44/09/04/11/14/barre-10.png");}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url("http://i44.servimg.com/u/f44/09/04/11/14/barre-10.png");
background-color:#000000;
 border: #000000;
 border-style: solid;
 height: 28px;
}
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold;
 border: #000000;
 border-style: doted;
 height: 28px;
}
       
td.row3Right,td.spaceRow

td.pourcentback {
 background-color : #3A3122;
 }
th.thHead,td.catHead {
 font-size: 13px;
 border-width: 1px 1px 0px 1px;
 }
th.thSides,td.catSides,td.spaceRow {
 border-width: 0px 1px 0px 1px;
 }
th.thRight,td.catRight,td.row3Right {
 border-width: 0px 1px 0px 0px;
 }
th.thLeft,td.catLeft {
 border-width: 0px 0px 0px 1px;
 }
th.thBottom,td.catBottom {
 border-width: 0px 1px 1px 1px;
 }
th.thTop {
 border-width: 1px 0px 0px 0px;
 }
th.thCornerL {
 border-width: 1px 0px 0px 1px;
 }
th.thCornerR {
 border-width: 1px 1px 0px 0px;
 }
.maintitle{
font-weight: bold;
 font-size: 22px;
 font-family: TrebuchetMS,Verdana,Arial,Helvetica,sans-serif;
text-decoration: none;
 line-height : 120%;
 color : #000000;
}
.gen {
 font-size : 13px;
 }
.genmed {
 font-size : 12px;
 }
.gensmall {
 font-size : 11px;
 }
.gen,.genmed,.gensmall {
 color : #FFFFFF;
 }
a.gen,a.genmed,a.gensmall {
 color: #FFFFFF;
 text-decoration: none;
 }
a.gen:hover,a.genmed:hover,a.gensmall:hover{
 color: #000000;
 text-decoration: text-shadow:#ffffff;
 }
.mainmenu{
 font-size : 12px;
 color : #000000 }
a.mainmenu{
 text-decoration: none;
 color : #000000;
}
a.mainmenu:hover{
 text-decoration: underline;
 color : #000000;
 }
.cattitle{
 font-weight: bold;
 font-size: 13px ;
 letter-spacing: 1px;
 color : #000000}
a.cattitle{
 text-decoration: none;
 color : #000000;
 }
a.cattitle:hover{
 text-decoration: none;
 }
.forumlink{
 font-weight: bold;
 font-size: 13px;
 color : #000000;
 }
a.forumlink {
 text-decoration: none;
 color : #000000;
 }
a.forumlink:hover{
 };
 color : #3A3122;
text-shadow: #ffffff
text-decoration:none
 
.nav{
 font-weight: bold;
 font-size: 12px;
 color : #FFFFFF;
 }
a.nav{
 text-decoration: none;
 color : #FFFFFF;
 }
a.nav:hover{
 text-decoration:none
    text-shadow:#ffffff;
 }
.topictitle,h1,h2{
 font-weight: bold;
 font-size: 12px;
 color : #000000;
 }
a.topictitle:link{
 text-decoration: none;
 color : #000000;
 }
a.topictitle:visited{
 text-decoration: none;
 color : #000000;
 }
a.topictitle:hover{
 text-decoration: none
 color : #000000;
 }
.name{
 font-size : 12px;
 color : #000000;
}
.postdetails{
 font-size : 11px;
 color : #FFFFFF;
 }
.postbody{
 font-size : 13px;
 line-height: 18px}
a.postlink:link{
 text-decoration: none;
 color : #FFFFFF }
a.postlink:visited{
 text-decoration: none;
 color : #FFFFFF;
 }
a.postlink:hover{
  text-decoration: none;
 #h2:hover
{
cursor:pointer;
font-size:24px;
text-shadow: 2px 2px 20px #000000;
width:400px;
};
 color : #3A3122}
.code{
 font-family: Courier,'CourierNew',sans-serif;
 font-size: 12px;
 color: #3A3122;
background-color: #000000;
 border: #000000;
 border-style: solid;
border-left-width: 1px;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px}
.quote{
 font-family: Verdana,Arial,Helvetica,sans-serif;
 font-size: 12px;
 color: #000000;
 line-height: 125%;
background-color: #000000;
 border: #000000;
 border-style: solid;
border-left-width: 1px;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px}
.copyright{
 font-size: 11px;
 font-family: Verdana,Arial,Helvetica,sans-serif;
 color: #000000;
 letter-spacing: -1px;
}
a.copyright{
 color: #000000;
 text-decoration: none;
}
a.copyright:hover {
 color: #000000;
 text-decoration: underline;
}
.coloradmin {
 color: #000000}
.colormod {
 color: #9900cc}
img{
border:0}
input,textarea, select {
color : #000000;
font: normal 12px Verdana,Arial,Helvetica,sans-serif;
border-color : #000000;
}
input.post, textarea.post, select {
background-color : #000000;
}
input {
 text-indent : 2px;
 }
input.button {
background-color : #000000;
color : #000000;
font-size: 12px;
 font-family: Verdana,Arial,Helvetica,sans-serif;
}
input.mainoption {
background-color : #000000;
font-weight : bold;
}
input.liteoption {
background-color : #000000;
font-weight : normal;
}
.helpline {
 background-color: #442201;
 border-style: none;
 }
input {
 background-color: #442201;
 }
@import url("form_ie.css");
''
">


.spanstyle {
   position:absolute;
   visibility:visible;
   top:-50px;
   font-size:10pt;
   font-family:comic sans ms;
      font-weight:bold;
   color:black;
}

        .forumtitle{text-shadow : 1px 1px 5px #ffffff;}

     


var x,y
var step=20
var flag=0


var message="chevaliers d'Émeraude "
message=message.split("")

var xpos=new Array()
for (i=0;i

        /*IMAGE INDEX*/
        #i_icon_mini_index{
          background-image:url('http://i44.servimg.com/u/f44/09/04/11/14/forum10.png'); /*image si la souris ne survole pas*/
          width:173px; /*Largeur de l'image*/
          height:137px; /*Hauteur de l'image*/
        }
        #i_icon_mini_index:hover{
          background-image:url('http://i44.servimg.com/u/f44/09/04/11/14/forum210.png'); /*image si la souris survole*/
          width:100px; /*Largeur de l'image*/
          height:100px; /*Hauteur de l'image*/
        }
        /*IMAGE PORTAIL*/
        #i_icon_mini_portal{
          background-image:url('URL'); /*image si la souris ne survole pas*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_portal:hover{
          background-image:url('URL'); /*image si la souris survole*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE CALENDRIER*/
        #i_icon_mini_calendar{
          background-image:url('URL'); /*image si la souris ne survole pas*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_calendar:hover{
          background-image:url('URL'); /*image si la souris survole*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE FAQ*/
        #i_icon_mini_faq{
          background-image:url('URL'); /*image si la souris ne survole pas*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_faq:hover{
          background-image:url('URL'); /*image si la souris survole*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE RECHERCHE*/
        #i_icon_mini_search{
          background-image:url('URL'); /*image si la souris ne survole pas*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_search:hover{
          background-image:url('URL'); /*image si la souris survole*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE LISTE MEMBRES*/
        #i_icon_mini_members{
          background-image:url('URL'); /*image si la souris ne survole pas*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_members:hover{
          background-image:url('URL'); /*image si la souris survole*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE GROUPES*/
        #i_icon_mini_groups{
          background-image:url('URL'); /*image si la souris ne survole pas*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_groups:hover{
          background-image:url('URL'); /*image si la souris survole*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE PROFIL*/
        #i_icon_mini_profile{
          background-image:url('URL'); /*image si la souris ne survole pas*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_profile:hover{
          background-image:url('URL'); /*image si la souris survole*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE MP (pas de nouveaux messages)*/
        #i_icon_mini_message{
          background-image:url('URL'); /*image si la souris ne survole pas*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_message:hover{
          background-image:url('URL'); /*image si la souris survole*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE MP (nouveaux messages)*/
        #i_icon_mini_new_message{
          background-image:url('URL'); /*image si la souris ne survole pas*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_new_message:hover{
          background-image:url('URL'); /*image si la souris survole*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE DECONEXION*/
        #i_icon_mini_logout{
          background-image:url('URL'); /*image si la souris ne survole pas*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_logout:hover{
          background-image:url('URL'); /*image si la souris survole*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE S'ENREGISTRER*/
        #i_icon_mini_register{
          background-image:url('URL'); /*image si la souris ne survole pas*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_register:hover{
          background-image:url('URL'); /*image si la souris survole*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        /*IMAGE CONNEXION*/
        #i_icon_mini_login{
          background-image:url('URL'); /*image si la souris ne survole pas*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        #i_icon_mini_login:hover{
          background-image:url('URL'); /*image si la souris survole*/
          width:??px; /*Largeur de l'image*/
          height:??px; /*Hauteur de l'image*/
        }
        .fondqeel {
        background-color : #;
        }
/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */


.cate
{
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 0px solid #000000;
  background-color: #3A3122;
}
.cate_img
{
  position: relative;
  z-index: 2;
  width: 200px;
  height: 200px;
  margin-left: 0px;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 200px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate_description
{
  position: relative;
  z-index: 1;
  width: 200px;
  height: 200px;
  margin-top: -200px;
  text-align: justify;
  font-size: 10px;
  color: #000000;
  padding: 2px;
  overflow: auto;
}

/*Modif qui est en ligne*/
.qeel {
background-image : url("http://i.picasion.com/resize50/e815d18deb38aa70f3463abac67e7df8.png");
width: 800px;
height :472px;
background-repeat : no-repeat;
text-align : center;
padding-left :10 px;
padding-top : 10 px;
padding-bottom : 10 px;
padding-right : 10px;
}
.qeelgroupes {
width : 400px;
height : 200 px;
margin-bottom : 100 px;
}
.qeestats {
width : 400px;
height : 200 px;
padding-left:10px
padding-right:790px
overflow : auto;
}

Un énorme merci d'avance à la personne qui pourra me venir en aide!

[Hell-eonore]

Bonjour

Pour vous aider, il faut savoir que pour déplacer un texte, vous pouvez utiliser les marges indiquées dans des div par "margin-top; margin-bottom; margin-right; margin-left" selon la position de la marge que vous voulez, suivies par le nombre de pixels que vous voulez.
Ainsi, par exemple, ce code-ci déplacera votre texte de 150 px vers la droite, puisqu'il y a une marge sur le coté gauche:

Code:

<div style="margin-left:150px"> blablabla </div>

J'ai donc modifié votre template, que voici:

Code:

<!-- BEGIN disable_viewonline -->
<div class="qeel"><br><br>
        <div class="qeelstats"><span class="gensmall">{TOTAL_POSTS}<br />
      {TOTAL_USERS}<br />
      {NEWEST_USER}</span></div>
        </div>
 
  <br />
      <div class="qeelbirthday"><table class="trans">{L_WHOSBIRTHDAY_TODAY}
        {L_WHOSBIRTHDAY_WEEK}</table></div>
     
  <br />
  <br />
    <center> <span class="gensmall">{TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}<br />
      <br />
      {LOGGED_IN_USER_LIST}</span>
  <br />
  <table class="trans">{L_CONNECTED_MEMBERS}</table>

      <div class="qeelgroupes"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></div></center>
  <br />
     
  <br />
  <!-- BEGIN switch_chatbox_activate -->
  <br />
     
        <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup -->
        </span>
     
  <br />
  <!-- END switch_chatbox_activate -->
</div></center>
<!-- END disable_viewonline -->

Et le code à modifier dans le CSS:

Code:

.qeel {
background-image : url("http://i.picasion.com/resize50/e815d18deb38aa70f3463abac67e7df8.png");
width: 800px;
height :472px;
background-repeat : no-repeat;
text-align : center;
padding-left :10 px;
padding-top : 10 px;
padding-bottom : 10 px;
padding-right : 10px;
}
.qeelgroupes {
width : 400px;
height : 200 px;
margin-bottom : 100 px;
}
.qeelstats {
width : 400px;
height : 200 px;
overflow : auto;
margin-left:450px;
}
.qeelbirthday {
width:410px;
height:46px;
overflow:auto;
margin-left:15px;
margin-top:-90px;
}

Les marges sont réglables directement dans le CSS, puisque sur votre forum, cela ne donnera peut-être pas la même chose que sur mon forum test, donc à vous de faire varier le nombre de pixels.

J'ai aussi remarqué que vous aviez fait une erreur. Dans votre QEEL, vous aviez mis une balise <div class="qeelstats">, alors que dans le CSS, vous aviez mis "qeestats" donc quoi que vous fassiez, ça n'aurait eu aucune conséquence. Donc faites attention à écrire le même nom de div

Pour toute question, je suis à disposition,
Cordialement.

[marazo]

Genial!

Merci beaucoup pour l'explication, je comprends mieux maintenant!

J'aurais toutefois une dernière petite question. Sais-tu comment je peux faire disparaître le fond de couleur qui se trouve sous les anniversaires et sous les membres connectés au cours des x heures?

Spoiler:

J'ai réussi à le faire pour les autres partie du texte grâce à un tutoriel, mais pour ces deux parties ça ne fonctionne pas.

Merci beaucoup

[Hell-eonore]

Alors, pour les cadres...
Tu as déjà dans ton template les bonnes balises <table class="trans">
Il ne te reste plus qu'à ajouter ceci au CSS pour mettre un fond transparent:

Code:

.trans .row1{background-color : transparent;}

[marazo]

Wow!

Merci Beaucoup! Tout fonctionne à merveille!