Problème de décalage (margin-top et absolute/relative)

2 participants

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

Résolu Problème de décalage (margin-top et absolute/relative)

Message par ssamiiex Lun 26 Mar 2018 - 14:48

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 26 mars 2018
Lien du forum : www.rosscreek.forumactif.com

Description du problème

Bonjour à vous tous et toutes I love you

Vous êtes toujours super pour me répondre lorsque j'expose l'un de mes problèmes, donc je reviens vers vous.

Sur mon navigateur (Google Chrome) mon codage est parfait, mais l'une de mes amis qui naviguent avec Firefox a remarqué du décalage sur la PA et sur le QEEL. Normalement, elle dit que sur le QEEL tout est bon avec Chrome, mais la PA reste la même avec les deux navigateurs.

Voici ce que je vois et est censé être : https://2img.net/image.noelshack.com/fichiers/2018/13/1/1522068426-screen-shot-2018-03-26-at-8-46-13-am.png

https://2img.net/image.noelshack.com/fichiers/2018/13/1/1522068426-screen-shot-2018-03-26-at-8-46-22-am.png

Voici ce qu'elle voit : https://scontent-yyz1-1.xx.fbcdn.net/v/t35.0-12/29632851_10155264019236932_1693134813_o.png?oh=c229625527cd95f423136f7d89e84b49&oe=5ABB76BA

https://scontent-frx5-1.xx.fbcdn.net/v/t34.0-0/p280x280/29549969_10155264023076932_5064195_n.png?_nc_cat=0&_nc_ad=z-m&_nc_cid=0&oh=60509bfdbcb00bc0e28347488e50fb74&oe=5ABB703F

J'ai joué avec margin-top sur les deux codages, mais avant de commettre une boulette, j'aimerais en apprendre plus sur les absolute et relative et lesquels devraient s'appliquer.

Merci infiniment de consulter ce message, de le prendre en considération et d'y répondre Mr. Green ,

ssamiiex
ssamiiex

ssamiiex
**

Féminin
Messages : 65
Inscrit(e) le : 30/01/2013

http://blackwaters.forumactif.com/
ssamiiex a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème de décalage (margin-top et absolute/relative)

Message par Scoubifitz Mar 27 Mar 2018 - 18:47

ssamiiex a écrit:J'ai joué avec margin-top sur les deux codages, mais avant de commettre une boulette, j'aimerais en apprendre plus sur les absolute et relative et lesquels devraient s'appliquer.

Merci infiniment de consulter ce message, de le prendre en considération et d'y répondre Mr. Green ,

ssamiiex

Chrome corrige les erreurs , Firefox corrige moins les erreurs ...

* Supprimez tous les <tbody></tbody> superflus de votre code de PA , ça résoudra le décalage .

* pour le QEEL , mettez les images en width:100% au lieu de width:220px pour supprimer la barre du bas .
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de décalage (margin-top et absolute/relative)

Message par ssamiiex Mer 28 Mar 2018 - 14:01

Coucou @Scoubifitz ! I love you

Merci énormément d'être passé ici et surtout de t'avoir penché sur mon problème Very Happy !
La PA fonctionne à merveille merci beaucoup à toi !! cheers

Pour ce qui est du QEEL, je vois toujours un petit décalage de différence entre les deux navigateurs. Je me demande si ce n'est pas à cause du table ou du forumline Surprised. Je te montre mon code, parce que les balise finissant une entrée (</>) sont en rouges dans le template :/. Peut-être n'est-ce qu'un <tr> mal placé ?

Code:
<!-- BEGIN disable_viewonline -->
    <center>    <div style="background-image: url('http://image.noelshack.com/fichiers/2018/12/1/1521496653-qeel.png'); height: 300px; width:95%; padding: 20px; border-radius: 20px;"><center><span class="gensmall">{TOTAL_POSTS}.
          {TOTAL_USERS}.<br />
                      {NEWEST_USER}.<br /><br /><div style="background-color: #191919;opacity:0.6; width:400px; height: 50px; overflow: auto; text-align: justify !important;">{LOGGED_IN_USER_LIST}</div></span></center>
      <br/><br/><br/><br/><br/><center><table style="position: relative; top: -5em;" class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
        <tr><td><div style="background-color: transparent; width: 150px; height: 100px; overflow: auto; padding: 15px; text-align: center; font-size: 11px; margin-left: 30px;"><div class="groupeonglets"><div class="fondgroupe">
          <center><span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe1" onmouseover="javascript:change_groupeonglet('groupe1');"><div style="color: #59190a;">Mythiques</div></span><br />
            <span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe2" onmouseover="javascript:change_groupeonglet('groupe2');"><div style="color:#594c21;">Humains</div></span><br />
                  <span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe3" onmouseover="javascript:change_groupeonglet('groupe3');"><div style="color:#415932;">Chasseurs</div></span><br />
                  <span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe4" onmouseover="javascript:change_groupeonglet('groupe4');"><div style="color:#345953;">Créatures</div></span><br />
                  <span class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe5" onmouseover="javascript:change_groupeonglet('groupe5');"><div style="color:#3f3259;">Sorciers</div></span><br />
                  </center></div>

        </div></div>
        </td><td><div class="contenu_groupeonglets">
               
          <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe1"><div style="width: 230px; height: 85px; margin-top: 7px; overflow: auto; text-align: justify;">Sirènes, cerbères, phénix, succubes, ce sont les mythes. Vous retrouverez de tout par ici, spécialement de l'orginialité. Pour visiter les races de ce groupe, c'est dans <a href="http://rosscreek.forumactif.com/t27-iv-les-mythes"><i>ce sujet</i></a>.<br/><img src="http://image.noelshack.com/fichiers/2018/12/2/1521500937-mermaid.gif" style="width: 220px;"></div></div>
               
            <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe2"><div style="width: 230px; height: 85px; margin-top: 7px; overflow: auto; text-align: justify;">L'espèce destructrice et ignorante de ce monde : ces petits mortels. Ils marchent dans Ross Creek sans se soucier de ce qui les guette. Pour visiter ce groupe, c'est <a href="http://rosscreek.forumactif.com/t25-ii-les-humains-et-chasseurs"><i>par là</i></a>.<br/><img src="http://image.noelshack.com/fichiers/2018/12/2/1521502564-human.gif" style="width: 220px;"></div></div>
               
  <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe3"><div style="width: 230px; height: 85px; overflow: auto; margin-top: 7px; text-align: justify;">Ils vivent d'un code ou par vengeance. Ils ne sont pas commodes et font rarement confiance. Pour en apprendre plus sur eux c'est <a href="http://rosscreek.forumactif.com/t25-ii-les-humains-et-chasseurs"><i>ici</i></a>.<br/><img src="http://image.noelshack.com/fichiers/2018/12/2/1521502572-hunter.gif" style="width: 220px;"></div></div>
   
  <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe4"><div style="width: 230px; height: 85px;margin-top: 7px; overflow: auto; text-align: justify;">Ce monde est loin d'être parfait et est parsemé de créatures dangereuses voulant se délecter de votre chair ou de votre sang. Loups-garous, métamorphes et même vampire, c'est à vous de choisir. Visitez-les <a href="http://rosscreek.forumactif.com/t26-iii-les-creatures-sorcieres"><i>là</i></a>.<br/><img src="http://image.noelshack.com/fichiers/2018/12/2/1521502827-creature.gif" style="width: 220px;"></div></div>

    <div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe5"><div style="width: 230px; height: 85px; overflow: auto;margin-top: 7px; text-align: justify;">Ils ne sont pas à sous-estimer et sont préparés à toutes éventualités. Ayant des pouvoirs puissants, ils sont dangereux et imprévisibles. Pour voir leur particularités rendez-vous <a href="http://rosscreek.forumactif.com/t26-iii-les-creatures-sorcieres"><i>ici</i></a>.<br/><img src="http://image.noelshack.com/fichiers/2018/12/2/1521503107-witch.gif" style="width: 220px;"></div></div>
               


              </div>
        <script type="text/javascript">
                //<!--
                        function change_groupeonglet(name)
                        {
                                document.getElementById('groupeonglet_'+anc_groupeonglet).className = 'groupeonglet_0 groupeonglet';
                                document.getElementById('groupeonglet_'+name).className = 'groupeonglet_1 groupeonglet';
                                document.getElementById('contenu_groupeonglet_'+anc_groupeonglet).style.display = 'none';
                                document.getElementById('contenu_groupeonglet_'+name).style.display = 'block';
                                anc_groupeonglet = name;
                        }
                //-->
                </script><script type="text/javascript">
                //<!--
                        var anc_groupeonglet = 'groupe1';
                        change_groupeonglet(anc_groupeonglet);
                //-->
                </script>
                </td>
         
      <td><div class="les24h"><table id="kaboum">{L_CONNECTED_MEMBERS}</table></div>
        </td></tr>
        </table><br/><div class="titreq">
                Qui rode a ross creek ?       
   </div></center></div></center><link href='http://fonts.googleapis.com/css?family=Carrois+Gothic+SC' rel='stylesheet' type='text/css'>
    <!-- END disable_viewonline -->

Sous chrome : https://2img.net/image.noelshack.com/fichiers/2018/13/1/1522068426-screen-shot-2018-03-26-at-8-46-22-am.png

Sous firefox : https://2img.net/image.noelshack.com/fichiers/2018/13/3/1522238482-screen-shot-2018-03-28-at-8-00-39-am.png

Merci Very Happy
ssamiiex

ssamiiex
**

Féminin
Messages : 65
Inscrit(e) le : 30/01/2013

http://blackwaters.forumactif.com/
ssamiiex a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème de décalage (margin-top et absolute/relative)

Message par Scoubifitz Jeu 29 Mar 2018 - 7:46

Bon ... on va tenter de résumer votre QEEL ...

On a un cadre qui doit faire la largeur du forum , avec une image de fond centrée dont on doit voir le haut , et qui est plus grande que le cadre .

Sur cette image de fond sont dessinées des cases qui servent de repère d'emplacement .

Pour le haut , on reste dans le positionnement classique , une div pour {TOTAL_POSTS} {TOTAL_USERS} {NEWEST_USER}
et une div pour {LOGGED_IN_USER_LIST}

Pour les 3 cases (groupes , description , membres connectés) , le plus simple est d'oublier le tableau , et de faire un positionnement absolu pour chaque case .
(positionner un tableau en mettant 5 retour à la ligne , et une marge négative de 5em , était de toute façon une mauvaise idée)
L'avantage de ce choix est que si vous modifiiez les cases du haut (en hauteur , padding ou autre) les 3 cases ne bougeront pas .

Pour la ligne de texte du bas , autant la coller au bas du cadre , aussi en absolu . Si vous décidez de jouer sur la hauteur du cadre principal , le texte suivra le mouvement .

Warning  Faites une SAUVEGARDE de votre template et de votre CSS avant toute modification .

Passons aux choses sérieuses ...

Le QEEL :
Code:
<!-- BEGIN disable_viewonline -->
<div style="background: url('http://image.noelshack.com/fichiers/2018/12/1/1521496653-qeel.png') top center; height: 340px;position:relative; border-radius: 20px;width:833px">
<div style="margin:auto;text-align:center;padding:15px"><span class="gensmall">{TOTAL_POSTS}. {TOTAL_USERS}.<br />
{NEWEST_USER}.</span>
</div>
<div class="gensmall" style="margin:auto;background-color: #191919;opacity:0.6; width:400px; height: 50px; overflow: auto; text-align: justify !important;">
{LOGGED_IN_USER_LIST}
</div>
<div style="position:absolute;top:145px;left:60px;width: 140px; height: 80px; overflow: auto; text-align: center; font-size: 11px;">
<div class="groupeonglets fondgroupe">
<span style="color: #59190a;" class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe1" onmouseover="javascript:change_groupeonglet('groupe1');">
Mythiques</span>
<span style="color:#594c21;" class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe2" onmouseover="javascript:change_groupeonglet('groupe2');">
Humains</span>
<span style="color:#415932;" class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe3" onmouseover="javascript:change_groupeonglet('groupe3');">
Chasseurs</span>
<span style="color:#345953;" class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe4" onmouseover="javascript:change_groupeonglet('groupe4');">
Créatures</span>
<span style="color:#3f3259;" class="groupeonglet_0 groupeonglet" id="groupeonglet_groupe5" onmouseover="javascript:change_groupeonglet('groupe5');">
Sorciers</span>
</div>
</div>
<div class="contenu_groupeonglets" style="position:absolute;top:145px;left:240px;">
<div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe1">
Sirènes, cerbères, phénix, succubes, ce sont les mythes. Vous retrouverez de tout par ici, spécialement de l'orginialité. Pour visiter les races de ce groupe, c'est dans <a href="http://rosscreek.forumactif.com/t27-iv-les-mythes"><i>ce sujet</i></a>.<br /><img src="http://image.noelshack.com/fichiers/2018/12/2/1521500937-mermaid.gif" style="width:100%;" />
</div>
<div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe2">
L'espèce destructrice et ignorante de ce monde : ces petits mortels. Ils marchent dans Ross Creek sans se soucier de ce qui les guette. Pour visiter ce groupe, c'est <a href="http://rosscreek.forumactif.com/t25-ii-les-humains-et-chasseurs"><i>par là</i></a>.<br /><img src="http://image.noelshack.com/fichiers/2018/12/2/1521502564-human.gif" style="width:100%;" />
</div>
<div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe3">
Ils vivent d'un code ou par vengeance. Ils ne sont pas commodes et font rarement confiance. Pour en apprendre plus sur eux c'est <a href="http://rosscreek.forumactif.com/t25-ii-les-humains-et-chasseurs"><i>ici</i></a>.<br /><img src="http://image.noelshack.com/fichiers/2018/12/2/1521502572-hunter.gif" style="width: 100%;" />
</div>
<div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe4">
Ce monde est loin d'être parfait et est parsemé de créatures dangereuses voulant se délecter de votre chair ou de votre sang. Loups-garous, métamorphes et même vampire, c'est à vous de choisir. Visitez-les <a href="http://rosscreek.forumactif.com/t26-iii-les-creatures-sorcieres"><i>là</i></a>.<br /><img src="http://image.noelshack.com/fichiers/2018/12/2/1521502827-creature.gif" style="width: 100%;" />
</div>
<div class="contenu_groupeonglet" id="contenu_groupeonglet_groupe5">
Ils ne sont pas à sous-estimer et sont préparés à toutes éventualités. Ayant des pouvoirs puissants, ils sont dangereux et imprévisibles. Pour voir leur particularités rendez-vous <a href="http://rosscreek.forumactif.com/t26-iii-les-creatures-sorcieres"><i>ici</i></a>.<br /><img src="http://image.noelshack.com/fichiers/2018/12/2/1521503107-witch.gif" style="width: 100%;" />
</div>
</div><!-- fermeture description -->
<script type="text/javascript">
//<!--
function change_groupeonglet(name)
{
document.getElementById('groupeonglet_'+anc_groupeonglet).className = 'groupeonglet_0 groupeonglet';
document.getElementById('groupeonglet_'+name).className = 'groupeonglet_1 groupeonglet';
document.getElementById('contenu_groupeonglet_'+anc_groupeonglet).style.display = 'none';
document.getElementById('contenu_groupeonglet_'+name).style.display = 'block';
anc_groupeonglet = name;
}
//-->
</script>
<script type="text/javascript">
//<!--
var anc_groupeonglet = 'groupe1';
change_groupeonglet(anc_groupeonglet);
//-->
</script>
<div class="les24h" style="position:absolute;top:145px;left:520px;">
<table id="kaboum">
{L_CONNECTED_MEMBERS}
</table>
</div>
<div class="titreq">
Qui rode a ross creek ?
</div>
</div>
<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic+SC' rel='stylesheet' type='text/css' />
<!-- END disable_viewonline -->
J'ai volontairement supprimé tout retour à la ligne inutile , ainsi que les margin et padding ...

et j'ai volontairement laissé une partie en style et une partie en class ...

Il faut aussi remplacer une partie de votre CSS par ceci :
Code:

.groupeonglet {
 display:block;
}
.contenu_groupeonglet {
 background-color:transparent;
 display:none;
 font-size:11px;
 height:85px;
  text-align: justify;
  overflow: auto;
  margin:0 7px;
 width:240px;
}
.les24h {
 background-color:transparent;
 height:85px;
 overflow:auto;
 width:250px;
}
.titreq {
  position:absolute;
  width:100%;
  bottom:0px;
 color:#212121;
 font-family:edition;
 font-size:40px;
 letter-spacing:3px;
 text-align:center;
 text-shadow:1px 1px 2px #8A8A8A
}
Dernier point : les balises en rouge sont généralement des balises auto-fermantes mal fermées . ( br , img , link ... )
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème de décalage (margin-top et absolute/relative)

Message par ssamiiex Jeu 29 Mar 2018 - 15:22

Mais comme tu es gentil d'avoir modifié le template au préalable :O ! C'est vraiment apprécié merci beaucoup I love you !

SINON CELA FONCTIONNE :O je vais retenir tes trucs en oubliant les table, les padding et les margin pour être optimisé partout Bizz !

Merci beaucoup Scoubifitz de t'avoir penché sur mon problème et de l'avoir réglé ! De gros bisous sur ta bouille Very Happy!
ssamiiex

ssamiiex
**

Féminin
Messages : 65
Inscrit(e) le : 30/01/2013

http://blackwaters.forumactif.com/
ssamiiex 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