avatar
Sexe : Féminin
Date d'inscription : 22/08/2016
Messages : 127
Membre timide
Voir le profil de l'utilisateur
# Dépalcement sur un QEELle Dim 2 Déc 2018 - 14:27
Coucou Epicode, j'aurais besoin de votre aide pour régler un petit quelque chose sur une partie de mon codage s'il vous plait ^^


Quelle structure est concernée par votre problème ? QEEL
Qu'elle est l'adresse du forum concerné (sous hide si cela vous dérange) ? http://shadows-of-madness.forumactif.com/
Un screen du problème : éventuellement, si aide à la compréhension
Spoiler:
Expliquez précisément votre problème : je souhaiterai déplacer les cadres pour qu'ils correspondent aux emplacements réalisés par notre graphiste. Je sais pas quelle partie je dois toucher pour ça ou s'il y a quelque chose de plus simple à faire aussi
Les codes :

CSS
Code:
.testasta {
    background-image: url(https://nsa39.casimages.com/img/2018/11/25/181125075452255119.png);
    height: 225px;
    margin: 0 auto;
    outline: 1px solid ;
    width: 800px;
}
.catstaimg {
   
    float: left;
    height: 225px;
    width: 200px;
   
}
.catstaimg::after {
    border-left: 120px solid transparent;
    border-top: 225px solid ;
    content: "";
    height: 0;
    margin-left: 80px;
    position: absolute;
    width: 0;
}
.catstadeom {
  z-index:1;
  margin-left:110px;
  position:absolute;
  -ms-transform: rotate(-35deg);
  -webkit-transform: rotate(-35deg);
  transform: rotate(-30deg);
}
#cadre-qeel-header {
  font-size: 0;
 
  }
  #cadre-qeel-header strong {
    -ms-transform: rotate(30deg) scale(0.9);
    -webkit-transform: rotate(30deg) scale(0.9);
    background: ;
    border: 2px solid ;
    border-radius: 100%;
    color: #bbb;
    font-family: Arial;
    font-size: 13px;
    height: 48px;
    line-height: 13px;
    padding-top: 23px;
    transform: rotate(30deg) scale(0.9);
    width: 70px;
    text-align: center;
    }
#cadre-qeel-header strong:nth-child(1) {
bottom: -190px;
position: absolute;
right: -10px;
}
      #cadre-qeel-header strong:nth-child(1):before {   
        content: "messages";   
        position: absolute;   
        top: 36px; 
        left: 0;   
        width: 100%;   
        font-size: 12px;   
        font-weight: 100;
        }
#cadre-qeel-header strong:nth-child(2) {
    bottom: -112px;
    position: absolute;
    right: -12px;
}
  #cadre-qeel-header strong:nth-child(2):before {   
    content: "membres";   
    position: absolute;   
    top: 36px;   
    left: 0;   
    width: 100%;   
    font-size: 12px;   
    font-weight: 100;
    }
.castaontoom {
  float:left;
  width:250px;
  padding:10px;
  height:205px;
  margin-left:10px;
}
.castaonlis {
    border: solid 1px ;
    color: #aaa;
    font-family: Arial;
    font-size: 9px;
    height: 90px;
    line-height: 17px;
    margin-top: 7px;
    overflow: auto;
    padding: 0 5px;
    text-align: justify;
    text-transform: ;
}
.castaonlis .gensmall {
  font-size:0px !important;
  letter-spacing:0px;
}
.castaonlis .row1 {
    font-family: Arial;
    text-transform: ;
    background: #000 !important;
}
.castaonlis a {
    font-size: 9px;
    letter-spacing: 0px;
    margin: 2px;
}
.castaonlis::-webkit-scrollbar {
  width: 1px;
  background: ;
}
.castaonlis::-webkit-scrollbar {
  width: 3px;
}
.castaonlis::-webkit-scrollbar-thumb {
  background-color: ;
}
.castaonlis::-webkit-scrollbar-track {
  background-color: ;
  border: 1px solid #deb873;
}
.castaonov b {
  color:#669988;
}
.castaonov {
    background: ;
    border: 1px solid ;
    color: #bbb;
    font-family: Trebuchet MS;
    font-size: 14px;
    letter-spacing: 1px;
    margin-top: 5px;
    padding: 5px 0;
    text-transform: uppercase;
    text-align: center;
}
.castanew {
    background: ;
    border: 1px solid ;
    color: #bbb;
    font-family: Arial;
    font-size: 0;
    height: 28px;
    margin-top: 20px;
    padding: 10px 0;
    width: 247px;
    text-align: center;
}
.castanew strong a {
    font-size: 14px;
    margin-left: -124px;
    max-height: 46px;
    padding: 12px 0 5px;
    position: absolute;
    text-transform: ;
    width: 250px;
    text-align: center;
}
.castanew strong a:before {
    bottom: 20px;
    color: #eaeaea;
    content: "dernier arrivant :";
    font-size:14px; text-transform:uppercase; letter-spacing:1px; font-family:Trebuchet MS;
    left: 0px;
    position: absolute;
    top: -7px;
    width: 250px;
}
.castanowom {
    float: left;
    margin-left: 10px;
    width: 268px;
}
.castanowcount b {
  color:#669988;
}
.castanowcount {
border-bottom: 1px dashed #222;
    color: #deb873;
    font-family: Arial;
    font-size: 8px;
    letter-spacing: 1px;
    margin-top: 10px;
    padding-bottom: 5px;
    text-align: center;
    text-transform: uppercase;
    width: 270px;
}
.castanowlis {
    border: 1px solid ;
    color: #aaa;
    font-family: Arial;
    font-size: 0;
    font-weight: 900;
    height: 83px;
    margin-top: 15px;
    overflow: auto;
    padding: 0 20px;
    width: 200px;
    text-align: justify;
}
.castanowlis a {
    font-family: Arial;
    font-size: 9px;
    letter-spacing: 0;
    margin: 3px;
    position: relative;
    top: 5px;
}
.castanowlis::-webkit-scrollbar {
  width: 1px;
  background: #111;
}
.castanowlis::-webkit-scrollbar {
  width: 2px;
}
.castanowlis::-webkit-scrollbar-thumb {
  background-color: ;
}
.castanowlis::-webkit-scrollbar-track {
  background-color: ;
  border: 1px solid #111;
}
.castalin {
    background:;
    border: 1px solid ;
    color: #aaa;
    display: inline-block;
    font-family: Arial;
    font-size: 7px;
    height: 39px;
    left: 0px;
    padding-top: 4px;
    line-height: 17px;
    margin-right: 5px;
    margin-top: 26px;
    text-align: center;
    position: relative;
    text-shadow: 2px 2px #333;
    text-transform: uppercase;
    width: 37px;
}
.castalin span {
  font-size:17px;
  color:#deb873;
}

Template
Code:
{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span> 
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/> </td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
         <!-- END switch_delete_cookies -->
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="right" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span> 
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/> </td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<div class="testasta">
<div class="catstaimg">
<div class="catstadeom">
<div id="cadre-qeel-header">
<div>{TOTAL_POSTS} {TOTAL_USERS}</div></div></div></div>
<div class="castaontoom"><div class="castaonov">les derniers connectés</div>
<div class="castaonlis"><table><script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('onlineuh').innerHTML.replace(/Utilisateurs enregistrés :/," ") .replace(/test/," ");</script>{L_CONNECTED_MEMBERS}</table></div>
  <div class="castanew">{NEWEST_USER}</div></div>
<div class="castanowom"><div class="castanowcount">{TOTAL_USERS_ONLINE}</div>
<div class="castanowlis">{LOGGED_IN_USER_LIST}</div>
      <div class="castalin"><span class="icon-mouse"></span><br>groupe</div>
<div class="castalin"><span class="icon-chart-1"></span><br>groupe</div>
<div class="castalin"><span class="icon-chart-1"></span><br>groupe</div>
<div class="castalin"><span class="icon-chart-1"></span><br>groupe</div>
<div class="castalin"><span class="icon-chart-1"></span><br>groupe</div></div></div>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td> &nbsp;</td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

Merci beaucoup pour votre aide ^^
avatar
Sexe : Féminin
Date d'inscription : 27/10/2018
Messages : 40
Newbie
Voir le profil de l'utilisateur
# Re: Dépalcement sur un QEELle Lun 3 Déc 2018 - 4:35
Hello Mesmeralda !

Alors dans ce genre de cas, c'est du positionnement au pixel près qu'il faut faire XD Et on ne positionne PAS avec des marges.

Déjà pour commencer la partie de ton code correspondant au Qui Est En Ligne c'est celle entre les commentaires <!--BEGIN disable_viewonline --> et <!-- END disable_viewonline -->, du coup comme j'aime quand un code est propre et lisible, voilà une version plus propre :
Code:
<!-- BEGIN disable_viewonline -->
<div class="testasta">
    <div class="catstaimg">
        <div class="catstadeom">
            <div id="cadre-qeel-header">
                <div>{TOTAL_POSTS} {TOTAL_USERS}</div>
            </div>
        </div>
    </div>
    <div class="castaontoom">
        <div class="castaonov">les derniers connectés</div>
        <div class="castaonlis">
            <table>{L_CONNECTED_MEMBERS}</table>
        </div>
        <div class="castanew">{NEWEST_USER}</div>
    </div>
    <div class="castanowom">
        <div class="castanowcount">{TOTAL_USERS_ONLINE}</div>
        <div class="castanowlis">{LOGGED_IN_USER_LIST}</div>
        <div class="castalin"><span class="icon-mouse"></span><br>groupe</div>
        <div class="castalin"><span class="icon-chart-1"></span><br>groupe</div>
        <div class="castalin"><span class="icon-chart-1"></span><br>groupe</div>
        <div class="castalin"><span class="icon-chart-1"></span><br>groupe</div>
        <div class="castalin"><span class="icon-chart-1"></span><br>groupe</div>
    </div>
</div>

<script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('onlineuh').innerHTML.replace(/Utilisateurs enregistrés :/," ") .replace(/test/," ");</script>
<!-- END disable_viewonline -->

(A propos ce script va pas marcher s'il reste en l'état, le pauvre)

Pour commencer il faut que l'image de fond (en réalité, le bloc qui la contient) serve de "référence" à tous les autres éléments qu'on va placer dedans, donc on doit la positionner en relatif. Ce qui donne :
Code:
.testasta {
    (...)
    position:relative;
}

Si tu veux retirer le cadre "les derniers connectés" ce n'est pas difficile, il est dans le code HTML, il faut retirer la ligne :
Code:
<div class="castaonov">les derniers connectés</div>
Ce qui, du coup, te permet de retirer la classe .castaonov du CSS (un truc en moins dans ce CSS fouillis).

Maintenant il va falloir positionner les différents blocs, et comme je suis une casse pieds (et surtout parce qu'on apprend en s'exerçant), je vais t'indiquer quels sont les blocs, comment en positionner un, et tu feras les autres :p

Le bloc de la liste des derniers connectés, c'est celui ci :
Code:
      <div class="castaonlis">
            <table>{L_CONNECTED_MEMBERS}</table>
        </div>
Tu peux constater que la classe associée est .castaonlis

Le bloc du dernier arrivant c'est celui-ci :
Code:
    <div class="castanew">{NEWEST_USER}</div>
Sa classe associée est .castanew

Le bloc du total de membres connectés est :
Code:
      <div class="castanowcount">{TOTAL_USERS_ONLINE}</div>
Sa classe associée est .castanowcount

Le bloc contenant la liste des membres connectés est :
Code:
      <div class="castanowlis">{LOGGED_IN_USER_LIST}</div>
Sa classe associée est .castanowlis

Les blocs de groupe sont :
Code:
      <div class="castalin"><span class="icon-mouse"></span><br>groupe</div>
        <div class="castalin"><span class="icon-chart-1"></span><br>groupe</div>
        <div class="castalin"><span class="icon-chart-1"></span><br>groupe</div>
        <div class="castalin"><span class="icon-chart-1"></span><br>groupe</div>
        <div class="castalin"><span class="icon-chart-1"></span><br>groupe</div>
Ils n'ont qu'une classe commune, peut-être faudra t-il leur en donner une différente, ou alors tous les mettre dans une div globale que l'on positionnera.

Maintenant, pour ce qui est du positionnement... (ou du moins, de ma solution, que je trouve la plus simple, mais on pourra me contredire XD) Comme je disais, je pense qu'il est plus avisé de positionner chaque bloc par rapport à l'image, plus exactement par rapport à ses coins.

Mais du coup, tu as peut être remarqué, mais on a des div qui englobent ceux que j'ai mentionnés plus haut, à savoir le
Code:
  <div class="castaontoom">
        (Titre derniers connectés, à retirer)
        (Bloc liste derniers connectés)
        (Bloc dernier inscrit)
    </div>
Je suggèrerais de virer le div (et la classe associée, .castaontoom, faut juste prendre note des dimensions à retranscrire aux autres blocs)

Et pareil pour l'autre suite de blocs avec la classe .castanowom :
Code:
  <div class="castanowom">
        (Bloc total membres connectés)
        (Bloc liste des connectés)
        (Les blocs de groupes)
    </div>

Maintenant on devrait avoir un code vachement épuré du style
Code:
<div class="testasta">
    (Section .catstaimg avec le nombre de membres et de messages)
    (Bloc .castaonlis liste derniers connectés)
    (Bloc .castanew dernier inscrit)
    (Bloc .castanowcount total membres connectés)
    (Bloc .castanowlis liste des connectés)
    (Les blocs de groupes)
</div>

Et maintenant, comment faire pour positionner un bloc ? =D

On va prendre celui de la liste des derniers connectés comme exemple.

On récupère les propriétés intéressantes de la classe .castaontoom (en l'occurence, sa largeur, soit 250px, que j'ai réduit à 220px avec mes ajustements) pour l'appliquer à la classe .castaonlis, et surtout, il faut que la div de classe .castaonlis ait une position absolue (par rapport à son conteneur, qu'on a placé en relatif plus haut) :
Code:
.castaonlis {
    border: solid 1px ;
    color: #aaa;
    font-family: Arial;
    font-size: 9px;
    height: 90px;
    width:220px; /*on précise sa largeur */
    line-height: 17px;
    /* j'ai viré la marge elle ne sert pas */
    overflow: auto;
    padding: 0 5px;
    text-align: justify;
    text-transform: ;
    position:absolute; /* positionnement absolu */
    top:40px; /*40px de distance par rapport au haut de l'image de fond */
    left:263px; /*263px de distance par rapport à la gauche de l'image de fond */
    box-sizing: border-box; /*pour éviter que les padding déforment la "boite" */
}

Il faudra faire de même avec les différents autres éléments. Je te laisse cogiter un peu dessus ça a l'air complexe à première vue mais en réalité il ne s'agit que de placer des boites dans une boite en bidouillant la distance par rapport aux bords. Le plus compliqué ça sera potentiellement les blocs de groupe vu qu'ils ont tous la même classe, faudra leur en donner une nouvelle ou tous les mettre dans un bloc positionné.

A noter qu'en plus de top (distance par rapport au haut de l'image) et left (distance par rapport à la gauche de l'image) il y a aussi bottom (distance par rapport au bas de l'image) et right (distance par rapport au bord droit de l'image). Tu n'as besoin que d'une position verticale et une position horizontale pour fixer ton bloc (donc top/left, ou top/right, ou bottom/left, ou bottom/right).

Voilà voilà, mes explications étaient longues mais j'espère que t'as tout compris @_@

(Note aussi que j'ai précisé en début de post qu'on ne positionne PAS avec une marge :D ça veut dire que quelque part dans ton CSS, il y a des positionnements absolus qui ont été calés avec un margin, il te faudra changer ça par des top/left ou assimilé)
avatar
Sexe : Féminin
Date d'inscription : 22/08/2016
Messages : 127
Membre timide
Voir le profil de l'utilisateur
# Re: Dépalcement sur un QEELle Mer 5 Déc 2018 - 17:47
Merci @'Christa pour tes explications qui sont super claires =) je vais me pencher sur la façon de tout ça ^^
avatar
Sexe : Féminin
Date d'inscription : 27/10/2018
Messages : 40
Newbie
Voir le profil de l'utilisateur
# Re: Dépalcement sur un QEELle Jeu 6 Déc 2018 - 16:44
Fais moi signe si tu rencontres un os ! :)
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1817
Designer
Voir le profil de l'utilisateur
# Re: Dépalcement sur un QEELle Ven 7 Déc 2018 - 0:42
Merci Christa de ton aide ! Si tout est bon, on peut archiver ^^ ?


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

avatar
Sexe : Féminin
Date d'inscription : 27/10/2018
Messages : 40
Newbie
Voir le profil de l'utilisateur
# Re: Dépalcement sur un QEELle Ven 7 Déc 2018 - 13:48
Non, je lui ai juste donné des pistes, je n'ai pas résolu son problème moi-même, si elle a des soucis il faut qu'elle puisse demander un dépannage ;)
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1817
Designer
Voir le profil de l'utilisateur
# Re: Dépalcement sur un QEELle Ven 7 Déc 2018 - 15:24
Ah sorry ! J'archive pas alors xD


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

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