problème largeur PA

2 participants

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

Résolu problème largeur PA

Message par Juillet Lun 4 Mar 2019 - 13:45

résolu


Dernière édition par Juillet le Dim 24 Mar 2019 - 12:06, édité 1 fois
Juillet

Juillet
*

Féminin
Messages : 43
Inscrit(e) le : 26/06/2011

http://ucloremipsum.forumactif.com/
Juillet a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème largeur PA

Message par Juillet Jeu 7 Mar 2019 - 16:04

up
Juillet

Juillet
*

Féminin
Messages : 43
Inscrit(e) le : 26/06/2011

http://ucloremipsum.forumactif.com/
Juillet a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème largeur PA

Message par Juillet Ven 8 Mar 2019 - 20:38

up
Juillet

Juillet
*

Féminin
Messages : 43
Inscrit(e) le : 26/06/2011

http://ucloremipsum.forumactif.com/
Juillet a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème largeur PA

Message par Juillet Lun 11 Mar 2019 - 22:12

up
Juillet

Juillet
*

Féminin
Messages : 43
Inscrit(e) le : 26/06/2011

http://ucloremipsum.forumactif.com/
Juillet a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème largeur PA

Message par Juillet Sam 16 Mar 2019 - 13:15

up
Juillet

Juillet
*

Féminin
Messages : 43
Inscrit(e) le : 26/06/2011

http://ucloremipsum.forumactif.com/
Juillet a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème largeur PA

Message par Juillet Mar 19 Mar 2019 - 15:17

up
Juillet

Juillet
*

Féminin
Messages : 43
Inscrit(e) le : 26/06/2011

http://ucloremipsum.forumactif.com/
Juillet a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème largeur PA

Message par Lixyr Ven 22 Mar 2019 - 19:20

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

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 problème largeur PA 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu problème largeur PA 3592387030 pour prévenir la modération.

problème largeur PA Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème largeur PA

Message par Juillet Dim 24 Mar 2019 - 12:06

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 Very Happy
Juillet

Juillet
*

Féminin
Messages : 43
Inscrit(e) le : 26/06/2011

http://ucloremipsum.forumactif.com/
Juillet a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème largeur PA

Message par Lixyr Dim 24 Mar 2019 - 12:27

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.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez problème largeur PA 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu problème largeur PA 3592387030 pour prévenir la modération.

problème largeur PA Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr 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