problème largeur PA
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
Re: problème largeur PA
Bonsoir.
Votre code me donne la chair de poule. Si vous n'arrivez pas à coder avec des tableaux, ne codez pas avec, surtout que ça n'est pas fait pour ça ! Cela vous dérange-t-il que je nettoie votre code ? Il fonctionnera certainement mieux !
1) panneau > modules > gestion des pages JavaScript > nouvelle page javascript
° sur l'index
° titre : comme vous voulez
2) le CSS
A la classe .navig, rajoutez
A la classe .bmdm, rajoutez :
et rajoutez ça dans votre code CSS :
Et voici pour le code HTML :
Et le CSS ça donne ça, au cas où :
Donc plutôt que de mettre des tables, on met display: inline-block; à une balise de type block (div, p, par exemple).
Votre code me donne la chair de poule. Si vous n'arrivez pas à coder avec des tableaux, ne codez pas avec, surtout que ça n'est pas fait pour ça ! Cela vous dérange-t-il que je nettoie votre code ? Il fonctionnera certainement mieux !
1) panneau > modules > gestion des pages JavaScript > nouvelle page javascript
° sur l'index
° titre : comme vous voulez
- Code:
function patonglet1() { document.getElementById('onglet1').style.display='block'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='none'; document.getElementById('onglet5').style.display='none';}
function patonglet2() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='block';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='none'; document.getElementById('onglet5').style.display='none';}
function patonglet3() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='block'; document.getElementById('onglet4').style.display='none'; document.getElementById('onglet5').style.display='none';}
function patonglet4() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='block'; document.getElementById('onglet5').style.display='none';}
function patonglet5() { document.getElementById('onglet1').style.display='none'; document.getElementById('onglet2').style.display='none';
document.getElementById('onglet3').style.display='none'; document.getElementById('onglet4').style.display='none'; document.getElementById('onglet5').style.display='block';}
2) le CSS
A la classe .navig, rajoutez
- Code:
list-style: none;
display: inline-block;
A la classe .bmdm, rajoutez :
- Code:
display: inline-block;
vertical-align: top;
margin-left: 6px;
et rajoutez ça dans votre code CSS :
- Code:
.onglet {
display: inline-block;
}
.blocs_position {
display: inline-block;
vertical-align: top;
}
Et voici pour le code HTML :
- Code:
<div id="panneau_accueil" style="width: 780px;">
<ul style="margin-top: 0;"><li class="navig">règlement</li><li class="navig">annexes</li><li class="navig">groupes</li><li class="navig">familles</li><li class="navig">bottin</li><li class="navig">scénarios</li><li class="navig">invités</li></ul>
<br />
<div class="blocs_position" style="width: 180px;">
<div class="badmins">
<div class="onglet" onclick="javascript:patonglet1()"><img class="imgadmin" src="https://78.media.tumblr.com/1d1832815999b40ca9182f22c4c048a3/tumblr_osuix3SoqP1ro8nmyo2_400.gif" /></div><div class="onglet" onclick="javascript:patonglet2()"><img class="imgadmin" src="https://78.media.tumblr.com/9ef45ff3716838bcf5ad4eda3bdadbb5/tumblr_inline_o7g9q7Zb8s1t6da4c_400.gif" /></div><div class="onglet" onclick="javascript:patonglet3()"><img class="imgadmin" src="https://78.media.tumblr.com/7bd595437cd6befc577149d33d08a417/tumblr_oykb26Exyn1ro8nmyo3_400.gif" /></div>
<div style="display: block;" id="onglet1">
<div class="barreadmin">nom prénom - pseudo</div>
<div class="machinadm">fondatrice - présente - <a href="http://macity.forumactif.com/privmsg?mode=post&u=2">MP</a> - <a href="http://macity.forumactif.com/u2">profil </a></div>
</div>
<div style="display: none;" id="onglet2">
<div class="barreadmin">nom prénom - pseudo</div><div class="machinadm">fondatrice - présente - <a href="http://macity.forumactif.com/privmsg?mode=post&u=3">MP </a>- <a href="http://macity.forumactif.com/u3">profil</a></div>
</div>
<div style="display: none;" id="onglet3">
<div class="barreadmin">nom prénom - pseudo</div><div class="machinadm">fondatrice - présente - <a href="http://macity.forumactif.com/privmsg?mode=post&u=3">MP </a>- <a href="http://macity.forumactif.com/u3">profil</a></div>
</div>
</div>
<div class="binfos"><cv>aucun</cv> nombre de lignes min demandé. ≽ <cc>rps courts</cc>. ≽ avatars <ct> réservables</ct> pendant cinq jours.</div>
</div>
<div class="blocs_position">
<div class="fcontexte">
<div class="bcontexte"><st>atlantis, année 590 ::</st> L'Atlantis, maudite par les Dieux, rayée des cartes, condamnée à vivre à huit clos dans une bulle qui n'appartient qu'à elle. La belle cité, autrefois reine de la mer et reine des alliances politiques, provocatrice et méprisante envers les Dieux n'est aujourd'hui plus que poussière dans l'imaginaire collectif d'un monde avec lequel elle ne prendra plus jamais en contact. Les Atlantes, descendants des Dieux, occupent leurs millénaires à la recherche du pardon, attirant leurs parents à regarder vers eux « nous sommes purs et nous vous demandons pardon ». Millénaires d'offrandes pour un ciel sans réponse. Pourtant, tout ceci n'est que pureté artificielle dans cette île où le gouvernement n'est que corruption, et où les grandes familles se sont accaparées le pouvoir autrefois possédé par tous. Tous n'est qu'illusion, les Dieux, les lois et la liberté. Au bord du précipice, à l'aube d'une nouvelle guerre provoquée par la cupidité et la convoitise des hommes, les Dieux semblent enfin prêts sortir de leur silence : l'oracle parle, et telle Cassandre, ses mots ne font pas échos.</div>
</div>
</div>
<div class="blocs_position">
<div class="b2"><ct> 00/00/00 </ct> ≽ ouverture officielle de nom du forum ! bienvenue à vous ! <ct> 11/07/18 </ct> ≽ création du forum.</div>
<div class="b2"><st>intrigue ::</st> à venir.</div>
</div>
<br />
<br />
<div class="blocs_position">
<div class="bpart"><center><img src="https://78.media.tumblr.com/tumblr_lnvurxvJ8i1qepbs7.png" style="width:10px;" /> <img src="https://78.media.tumblr.com/tumblr_lnvurxvJ8i1qepbs7.png" style="width:10px;" /> <img src="https://78.media.tumblr.com/tumblr_lnvurxvJ8i1qepbs7.png" style="width:10px;" /> <img src="https://78.media.tumblr.com/tumblr_lnvurxvJ8i1qepbs7.png" style="width:10px;" /><br /><select class="partenaires" onchange="location = this.value"> <option selected="selected">nos partenaires</option> <option value="http://totallyspiesbitch.forumactif.com/">you?</option><option value="http://totallyspiesbitch.forumactif.com/">you?</option><option value="http://totallyspiesbitch.forumactif.com/">you?</option><option value="http://totallyspiesbitch.forumactif.com/">you?</option><option value="http://totallyspiesbitch.forumactif.com/">you?</option><option value="http://totallyspiesbitch.forumactif.com/">you?</option> </select>
<div class="ptn">allions-nous ≽ more</div></center></div>
</div>
<div class="blocs_position">
<div class="br blocs_position"><img src="https://images2.imgbox.com/e0/9f/vzcm0ZrX_o.png" class="imgmdm" /> <img src="https://images2.imgbox.com/b1/e7/jQ10QYqa_o.png" class="imgmdm" /><span class="bmdm">rpgistes du mois</span></div>
<div class="br blocs_position"><img src="https://images2.imgbox.com/3d/6d/hRIiFynf_o.png" class="imgmdm" /> <img src="https://images2.imgbox.com/e0/9f/vzcm0ZrX_o.png" class="imgmdm" /><span class="bmdm">floodeurs du mois</span></div>
</div>
<div class="blocs_position">
<div class="bdroite"><cv>SING GODDESS</cv> est administré par pseudo, pseudo et pseudo sous une idée originale de <cv>bangdione</cv> ≽ le forum est <cc>optimisé</cc> pour <ct>google chrome</ct> ≽ l'ensemble des <cc>codes</cc> ont été réalisés par <cv>aries moon</cv>, le design est une création de <cv>pseudo</cv>, le contexte a été rédigé par <cv>bangdione</cv> ≽ toute reproduction partielle ou totale est <ct>INTERDITE</ct>.</div>
</div>
</div>
Et le CSS ça donne ça, au cas où :
- Code:
/*PA*/
.navig { border: 3px double #DCD3D3; box-shadow: inset 0 0 11px 0 #e3dada; color: #6e6969; font-size: 7; font-family: abril fatface; color: #000; letter-spacing: .5; margin: 0 4 -5; padding: 3px; text-align: center; text-shadow: 1px 1px #FFF; text-transform: uppercase; width: 80px; list-style: none;display: inline-block;}
.bcontexte { text-align:justify; background: #ffffffb5; height: 85px; overflow: auto; font-size: 9; font-family: arial; letter-spacing: .1; color: #777; padding: 5px; border: 1px double #FFF; }
.imgadmin { border: 3px double #fff; border-radius: 100%; height: 40px; object-fit: cover; padding: 2px; opacity: .8; width: 40; }
.fcontexte { border: 6px double #FFFFFFb5; height: 100px; padding: 10px; width: 350px; background: 50% 50% url(https://image.noelshack.com/fichiers/2018/44/7/1541329095-2po9tffg-o.png); }
.barreadmin { border: 3px double #dcd3d3; box-shadow: inset 0 0 11px 0 #e3dada; font-size: 7; font-family: abril fatface; color: #000; letter-spacing: .5; padding: 2; text-transform: uppercase; text-shadow: 1px 1px #fff; }
.machinadm { font-size: 6px; text-transform: uppercase; font-family: muli; margin: 2px; color: #b89c19; font-weight: 900; }
.badmins { padding: 5; margin: 5; text-align: center; }
.b2 { color: #808080; text-align:justify; width: 180px; font-size: 9; background: #f1efef; margin: 5px; overflow: auto; padding: 6px; border: 3px double #fff; height: 45px; }
.b2::-webkit-scrollbar-track {width: 2px;height: 2px; background-color: transparent;} .b2::-webkit-scrollbar-track {background-color: transparent;} .b2::-webkit-scrollbar-thumb {background-color: transparent;}
.binfos { background-color:#FAF9F9; text-align:justify; border: 3px double #ebeaea; font-size: 8px; height: 25px; margin-bottom: 10px; padding: 5px; margin-top: -7px; }
.imgmdm { height: 30px; object-fit: cover; margin: 1; opacity: .8; width: 30px;}
.bmdm { padding: 10; font-size: 8; text-align: center; background: #ffffff99; width: 65px; border: 3px double #ffffff96; display: inline-block; vertical-align: top; margin-left: 6px;}
.br { background: 50% 50% url(https://image.noelshack.com/fichiers/2019/09/4/1551370470-fond-petit.png); border: 3px double #fff; margin-left:7px; margin-top:-5px; padding: 5px; width: 168px; position: relative; right: 2; }
.bpart { width: 160; background: #f1efef; font-size: 9px; height: 45; right: 3; position: relative; padding: 5; bottom: 8; }
.bdroite { background-color:#FAF9F9; border: 1px double #e7e7e7; bottom: 8px; font-size: 9px; height: 45px; padding: 5px; position: relative; text-align: justify; width: 184; overflow: auto; margin-left: 7; }
.partenaires { background: 50% 50% url(https://image.noelshack.com/fichiers/2019/09/4/1551370470-fond-petit.png); border: 3px double #ffffffba!important; color: #4a4a4a; font-family: abril fatface; font-size: 7px; font-weight: 700; letter-spacing: 2px; margin-bottom: 2px!important; padding: 2px!important; text-transform: uppercase; width: 130px!important; }
.ptn { font-family: muli; text-transform: uppercase; font-size: 6px; letter-spacing: 1.8; font-weight: 900; color: #bdbab8; }
/*DECOS*/
ct, cv {font-weight: 900;}
ct {font-family: elsie;color: #b89c19; } cc { border-bottom: 1px solid #c2c2c2; font-style: italic; color: #a5a5a5; }
cv { color: #bdbab8; font-size: 6; font-family: muli; text-transform: uppercase; letter-spacing: .5 }
.onglet { display: inline-block;}
.blocs_position {display: inline-block; vertical-align: top;}
Donc plutôt que de mettre des tables, on met display: inline-block; à une balise de type block (div, p, par exemple).
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: problème largeur PA
Bonjour.
Merci beaucoup de votre aide et d'avoir pris le temps de nettoyer mon code, effectivement ça marche bien mieux comme ça !
Par contre votre message n'est vraiment pas très agréable.. j'essaye tant bien que mal d'apprendre toute seule dans mon coin. Je fais ça sur mon temps libre, par plaisir, et en essayant de progresser de mes erreurs. (Par exemple, je ne savais pas qu'une PA ne faisait pas en tableau, au moins maintenant je le sais).
Maintenant je réfléchirai à deux fois avant de demander de l'aide, ou même mieux, je suivrai votre conseil en arrêtant de coder
Merci beaucoup de votre aide et d'avoir pris le temps de nettoyer mon code, effectivement ça marche bien mieux comme ça !
Par contre votre message n'est vraiment pas très agréable.. j'essaye tant bien que mal d'apprendre toute seule dans mon coin. Je fais ça sur mon temps libre, par plaisir, et en essayant de progresser de mes erreurs. (Par exemple, je ne savais pas qu'une PA ne faisait pas en tableau, au moins maintenant je le sais).
Maintenant je réfléchirai à deux fois avant de demander de l'aide, ou même mieux, je suivrai votre conseil en arrêtant de coder
Re: problème largeur PA
Bonjour,
Je ne vois pas en quoi mon message "n'est pas agréable". Je vous donne un conseil : ne pas utiliser de tableau. Je nettoie le code et le fait fonctionner. En quoi est-ce désagréable ?
Je ne sais pas si vous avez remarqué, mais vous aviez tellement d'erreurs que la PA a modifié votre code et a répété d’innombrables fois des HEAD, TR, et TD pour essayer de les corriger... En général ça met la puce à l'oreille !
M'enfin, bon courage pour la suite.
Je ne vois pas en quoi mon message "n'est pas agréable". Je vous donne un conseil : ne pas utiliser de tableau. Je nettoie le code et le fait fonctionner. En quoi est-ce désagréable ?
Je ne sais pas si vous avez remarqué, mais vous aviez tellement d'erreurs que la PA a modifié votre code et a répété d’innombrables fois des HEAD, TR, et TD pour essayer de les corriger... En général ça met la puce à l'oreille !
M'enfin, bon courage pour la suite.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Sujets similaires
» Problème de largeur!
» Problème de largeur
» Problème de largeur ...
» probléme de largeur!
» Problème de largeur
» Problème de largeur
» Problème de largeur ...
» probléme de largeur!
» Problème de largeur
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