Problème de décalage (margin-top et absolute/relative)
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Problème de décalage (margin-top et absolute/relative)
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 toutesVous ê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 ,
ssamiiex
Re: Problème de décalage (margin-top et absolute/relative)
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 ,
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 .
Re: Problème de décalage (margin-top et absolute/relative)
Coucou @Scoubifitz !
Merci énormément d'être passé ici et surtout de t'avoir penché sur mon problème !
La PA fonctionne à merveille merci beaucoup à toi !!
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 . 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é ?
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
Merci énormément d'être passé ici et surtout de t'avoir penché sur mon problème !
La PA fonctionne à merveille merci beaucoup à toi !!
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 . 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
Re: Problème de décalage (margin-top et absolute/relative)
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 .
Faites une SAUVEGARDE de votre template et de votre CSS avant toute modification .
Passons aux choses sérieuses ...
Le QEEL :
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 :
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 .
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 -->
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
}
Re: Problème de décalage (margin-top et absolute/relative)
Mais comme tu es gentil d'avoir modifié le template au préalable :O ! C'est vraiment apprécié merci beaucoup !
SINON CELA FONCTIONNE :O je vais retenir tes trucs en oubliant les table, les padding et les margin pour être optimisé partout !
Merci beaucoup Scoubifitz de t'avoir penché sur mon problème et de l'avoir réglé ! De gros bisous sur ta bouille !
SINON CELA FONCTIONNE :O je vais retenir tes trucs en oubliant les table, les padding et les margin pour être optimisé partout !
Merci beaucoup Scoubifitz de t'avoir penché sur mon problème et de l'avoir réglé ! De gros bisous sur ta bouille !
Sujets similaires
» problème margin image vs texte
» Problème avec l'attribut "margin" dans le css de base
» Problème de décalage !
» Problème de décalage..
» Problème de Décalage
» Problème avec l'attribut "margin" dans le css de base
» Problème de décalage !
» Problème de décalage..
» Problème de Décalage
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum