Aligner les "liens"

[Argimpasa]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 29/08/2023
Lien du forum : https://darkpixel.forumactif.com

Description du problème

Bonjour, je viens vous ennuyer encore une fois.
J'ai changé ma PA et j'ai un léger souci. Comme vous pouvez le voir sur l'image, les liens s'alignent les uns après les autres. J'aimerai changer ce point pour qu'ils s'alignent les uns à côté des autres.
J'ai tenté de changer le display mais ça n'a rien donné. Merci.
Je vous envoie les codes :

CSS:

Code:

/* CATEGORIES - ARTEMIS */
:root
{
 --couleur-fond: #42c19a;
 --couleur-fond2: #bd6bc0;
}

a:hover
{
 text-decoration: none !important;
}

a
{
 text-decoration: none !important;
}

a:link
{
 text-decoration: none;
}

a:visited
{
 text-decoration: none;
}

.title_cate_salva
{
 width: 830px;
 height: 120px;
 margin: 10px auto;
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 outline: 1px solid white;
 outline-offset:-10px;
 background: url(https://data.whicdn.com/images/294508291/original.png);
 -webkit-filter: grayscale(1);
 filter: grayscale(1);
 background-size: 100%;
 background-position: center top;
 background-repeat: no-repeat;
}

.title_cate_salva h2
{
 text-align: center;
 margin: 0 auto;
 color: white;
 font: 50px barlow condensed;
 text-transform: uppercase;
}

.categories_content
{
 width: 830px;
 height: 125px;
 margin: auto;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
 background: #f5f5f5;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 border: 1px solid #C5C5C5;
 margin-top: 10px;
 padding: 10px;
 position: relative;
}

.description_img_block
{
 width: 220px;
 height: 100px;
 background: #fafafa;
 border: 1px solid #e8e8e8;
 position: relative;
 z-index: 3;
}

.title_and_desc
{
 width: 415px;
 height: 100px;
}

.title_and_desc > a
{
 width: 100%;
 text-align: left;
 text-decoration: none;
 display: block;
 background: -webkit-linear-gradient(var(--couleur-fond), var(--couleur-fond2));
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 font: 25px barlow condensed;
 text-transform: uppercase;
 font-style: oblique;
 height: 35px;
 margin-top: -5px;
 line-height: 35px;
}

.title_and_desc > a:before
{
 content: "||";
 margin-right: 5px;
}

.title_and_desc p
{
 width: 100%;
 margin: 0;
 font: 12px calibri;
 height: 70px;
 overflow: auto;
 line-height: 12px;
 text-align: justify;
 color: #8E8E8E;
}

.title_and_desc > p img
{
 width: 199px;
 height: 80px;
 position: absolute;
 top: 20px;
 left: 22px;
 -o-object-fit: cover;
 object-fit: cover;
 -webkit-filter: grayscale(1);
 filter: grayscale(1);
 z-index: 99;
}

.title_and_desc > p img:hover
{
 -webkit-filter: none;
 filter: none;
}

.stats_salva
{
 width: 160px;
 height: 100px;
 background: #fafafa;
 border: 1px solid #e8e8e8;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 text-align: center;
 padding-top: 15px;
}

.last_message
{
 box-sizing: border-box;
 width: 100%;
 height: 65px;
 font: 10px calibri;
 color: gray;
 text-transform: lowercase;
 font-style: oblique;
 padding-top: 5px;
}

.last_message a
{
 text-transform: uppercase;
 text-decoration: none;
 font-size: 10px;
 color: var(--couleur-fond2);
 font-style: normal;
}

.mess_topic
{
 width: 100%;
 height: 20px;
 margin-top: -5px;
 text-align: center;
 font: 8px calibri;
 text-transform: uppercase;
 /* font-weight: bold;
 */
 line-height: 20px;
 border-top: 1px solid #e8e8e8;
 color: gray;
}

.img_etat_salva
{
 position: absolute;
 left: 0px;
 top: 0px;
 z-index: 2;
}

.subforums_salva
{
 width: 830px;
 height: 23px;
 background: -webkit-gradient(linear, left top, left bottom, from(var(--couleur-fond)), to(var(--couleur-fond2)));
 background: -o-linear-gradient(var(--couleur-fond), var(--couleur-fond2));
 background: linear-gradient(to left, var(--couleur-fond), var(--couleur-fond2));
 margin: auto;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 padding: 0 5px;
 font-size: 0;
}

.subforums_salva a
{
 color: var(--couleur-fond2);
 text-decoration: none;
 font: 10px calibri;
 text-transform: uppercase;
 font-style: oblique;
 background: #fafafa;
 display: block;
 padding: 0 5px;
 margin: 0 2px;
}

.descFRM
{
 display: none;
}
/**** QEEL MYRDDIN ****/


.welcometoi {
    font: 55px Hamilton;
    text-align: center;
    color: #c07c59;
    margin: 80px 0px -10px 0px;
}
#dernier_membre {
    text-align: center;
}
#dernier_membre strong {
    font: 30px DM Serif Display;
    text-transform: uppercase;
}
#dernier_membre a {
  color: #262929;
}
.totalqeel {
  background: #f1f0f4;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: stretch;
  margin-top: 27px;
}
.blokco {
    width: 300px;
}
.blokco h1 {
    color: #262929;
    font: 20px DM Serif Display;
    text-transform: uppercase;
}
.totalusers{
    font: 8px roboto;
    color: #c07c59;
}
#jambon {
    width: 300px;
    padding: 10px 10px 10px 0px;
    height: 90px;
    overflow: auto;
    text-align: justify;
    font-size: 11px;
}
#jambon br {
display:none;
}
.bloklast {
  flex-grow: 1;
}
.premier {
    width: 64px;
    height: 64px;
    padding: 16px 10px 10px 10px;
    background: #c07c59;
    text-align: center;
    color: #f6f5f8;
    margin: -35px auto;
    font: 10px roboto;
    vertical-align: middle;
    border-radius: 100%;
    transition: 1.2s linear;
    border: solid 2px #f6f5f8;
    box-shadow: 1px 1px 10px #f1f1f1;
}
#avatar_dernier_membre {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 100%;
    opacity: 0;
    margin: -42px -30px -30px -30px;
    position: absolute;
    transition: 1.2s linear;
}
.premier:hover #avatar_dernier_membre {
  opacity:1;
  transition-duration: 1s;
  transition-timing-function: ease;
}
#avatar_dernier_membre img {
  width:100%;
}
.groupsqeel {
    padding: 10px;
    text-align: center;
    margin-top: 40px;
}
.groupsqeel img {
  padding:0px 5px 0px 5px;
}
.bloklastco {
    width: 300px;
}
.bloklastco h1 {
    color: #262929;
    font: 20px DM Serif Display;
    text-transform: uppercase;
}
#mayonnaise {
    width: 300px;
    padding: 0px 10px 10px 0px;
    height: 90px;
    overflow: auto;
    text-align: justify;
}

#mayonnaise a {
font-size: 11px;
}

#jambon a {
font-size: 11px;
/**** FIN QEEL MYRDDIN ****/
}
a{text-decoration:none;}
a:hover{text-decoration:none !important;}
body {
    overflow-x: hidden;
    padding: 0;
    margin-left: 62px !important;
}
::-webkit-scrollbar-thumb {
    background-color:#cb8a48;
}
::-webkit-scrollbar {
    width: 7px;
    height: 8px;
    border: 3px solid #eeeeee;
    background-color: #cb8a48;
}
.panel {
    box-shadow: none !important;
}
@font-face {
  font-family: ptlight;
  src:url('https://files.jcink.net/uploads/noctuary/Skin___Historia/FuturaPTLight.otf');
  format("opentype");
}
#s-m-t-tooltip {
max-width:300px;
z-index: 999;
margin:24px 14px 7px 12px;
padding:5px 12px 5px 12px;
background-color: #2e2c29;
  letter-spacing:1px;
font:9px arial;
text-transform: uppercase; 
color:#eeeeee;
box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
}
#page-footer {
  margin: auto;
  background: #eee;
}
#page-footer a {
    color: black;
    font: 9px calibri;
    text-transform: uppercase;
}
.memberlist_t {
      width: 850px !important;
    height: 50px;
    background: #cbcbcb;
    border-radius: 10px;
    margin: auto !important;
    text-align: center;
    color: white !important;
    font: 11px roboto !important;
    text-transform: uppercase;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 20px;
    margin-bottom: 10px;
}


.panelarte {
  -webkit-box-shadow: none;
          box-shadow: none;
  width: 850px;
  margin: auto;
  background: none;
}

.panelarte h2 {
  border: none;
  color: #cbcbcb;
}

.memberlist_arte {
  width: 850px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: auto;
  padding: 0;
 
}

.one_member {
  width: 275px;
  height: 120px;
  background: #95b8d9;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px;
  position: relative;
  margin-bottom: 12px;
  overflow: hidden;
}

.one_member a, .one_member a:hover {
  text-decoration: none;
  color: white !important;
}

.one_member:before {
  content: " ";
  width: 120px;
  height: 180px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(251,251,251,0.2);
  z-index: 0;
  -webkit-clip-path: circle(50% at 29% 22%);
          clip-path: circle(50% at 29% 22%);
}

.avatar_member_list {
  width: 70px;
  height: 70px;
  z-index: 99;
}

.avatar_member_list img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 5px solid white;
  -o-object-fit: cover;
    object-fit: cover;
}


.pseudo_memberlist {
  margin: 0;
  width: 155px;
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 99;
}

.pseudo_memberlist > h2 {
  color: white;
  font: 12px roboto;
  text-transform: uppercase;
  font-weight: 500;
  border-left: 2px solid white;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 5px;
  width: 100%;
}

.pseudo_memberlist div {
      color: white;
    font: 9px roboto;
    font-weight: 400;
    margin-top: -40px;
    font-style: oblique;
    margin-bottom: -5px;
    text-transform: lowercase;
 
 
}

.pseudo_memberlist > h2 strong {
  color: white;
  font-weight: 500;
}

.stats_link_members {
  width: 155px;
  margin-left: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -5px;
}

.stats_link_members span {
  display: block;
  font: 9px source code pro;
  color: white;
  text-transform: uppercase;
  margin: 0 0px;}

.one_member a[href^="/privmsg"]:before{
  content:'MP';
}

.stats_link_members a[href^="/privmsg"] img{
    display: none;
}

.stats_link_members span:after {
  content: "|";
    margin: 0 3px;
}

.stats_link_members span:last-child:after {
  content: " ";
}
:root {--color-pink: #d85eb1;}

.pa_arte {
  width: 800px;
  height: 500px;
  background: #EFEFEF;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px 10px 5px 10px;
}

.pa_arte > h1 {
  width: 100%;
  height: 50px;
  border-bottom: 2px solid #c2c2c2;
  font: 40px roboto;
  text-transform: lowercase;
  font-style: oblique;
  margin: 0;
  color: #c2c2c2;
  letter-spacing: -2px;
  position: relative;
  margin-bottom: 5px;
  text-align: left;
}

.pa_arte > h1:after {
  width: 100%;
  content: " ";
  height: 2px;
  background: var(--color-pink);
  position: absolute;
  bottom: -7px;
  left: 0;
}

.pa_arte > h1 > span {
  color: var(--color-pink);
}

.pa_arte > p:first-of-type {
  background: #f4f4f4;
  width: 530px;
  height: 180px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #cfcfcf;
  padding: 25px;
  overflow: auto;
  font: 11px roboto;
  text-align: justify;
  color: #979797;
  margin: 0;
  overflow: auto;
 
}

.pa_arte > p:nth-of-type(2) {
  background: var(--color-pink);
  height: 130px;
  width: 190px;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font: 11px calibri;
  color: white;
  text-align: justify;
  line-height: 11px;
  letter-spacing: 0.2px;
}

.pa_arte > p:nth-of-type(2) span {
  display: block;
  text-align: right;
  position: relative;
  font-size: 14px;
  font-style: oblique;
  margin-right: 5px;
  text-transform: lowercase;
  margin-bottom: 10px;
 
}

.pa_arte> p:nth-of-type(2) span:before {
  width: 120px;
  height: 1px;
  background: white;
  content: " ";
  position: absolute;
  left: 0;
  top: 6px;
  opacity: 0.8;

}

.pa_arte> p:nth-of-type(2) a {
  text-decoration: none;
  color: white;
}

.staff_block {
  width: 315px;
  height: 116px;
  background: #cccccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
 
}

.img_staff {
  width: 95px;
  height: 95px;
  background: #f4f4f4;
  border: 1px solid #b5b5b5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}

.img_staff img {
  width: 80px;
  height: 80px;
  display: block;
  margin: auto;
}

.img_staff div {
  width: 100%;
  height: 100%;
  background: rgba(251,251,251,0.8);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: absolute;
  top: 10x;
  left: 0;
  font: 11px calibri;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-transform: uppercase;
  font-weight: bold;
  opacity: 0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
 
 
}

.img_staff div span {
  display: block;
  margin: auto;
  color: var(--color-pink);
}

.img_staff div span strong {
  font-weight: normal;
  font: 10px calibri;
  color: #858585;
}

.img_staff:hover div {
  opacity: 1;
}

.top_sites_liens {
  width: 114px;
  height: 121px;
  display: -webkit-box;
  display: -ms-flexbox;
  display:flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
          justify-content: space-between;
 
}

.top_sites_liens a {
  display: block;
  width: 55px;
    height: 55px;
  background: var(--color-pink);
  text-align: start;
  text-decoration: none;
  color: white;
  font: 30px arial;
  line-height: 55px;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;

}
.top_sites_liens a:hover {
  border-radius: 50%;
}


.nouveautes_block {
  height: 116px;
  width: 230px;
  background: #f4f4f4;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #cfcfcf;
  padding: 15px;
  overflow: auto;
  font: 11px roboto;
  text-align: justify;
  color: #979797;
  line-height: 10px;
  overflow: auto;
}

.nouveautes_block span {
  color: var(--color-pink);
  float: left;
  margin: 0 5px 0 0;
}

.nouveautes_block span:after {
  content: "—";
  margin-left: 3px;
}

.nouveautes_block hr {
  opacity: 0.2;
}

.liens_importants {
  width: 155px;
  height: 116px;
}

.liens_importants a {
  display: block;
  width: 100%;
  border: 1px solid var(--color-pink);
  height: 18px;
  margin-bottom: 3.8px;
  text-align: center;
  text-decoration: none;
  font:10px roboto;
  text-transform: uppercase;
  line-height: 18px;
  position: relative;
  overflow: hidden;
  color: #d85eb1;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.liens_importants a:before {
  content: " ";
  width: 100%;
  height: 18px;
  background: var(--color-pink);
  position: absolute;
  left: -100%;
  top: 0;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  z-index: 1;
 
}

.liens_importants a:hover:before {
  left: 0;
}

.liens_importants a:hover {
  color: white;
}
.liens_importants a span {
  z-index: 3;
  position: static;
}
.partos_pa {
  width: 100%;
  height: 55px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: -5px;
}


PA

Code:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet" />
<div class="pa_arte">
                
   <h1>
            Bienvenue, <span>{USERNAME}</span>     
   </h1>
                
   <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut pulvinar arcu, quis sodales orci. Morbi nisl orci, sodales vitae facilisis ac, vestibulum a est. Sed congue lacus ac dolor posuere condimentum. Curabitur nulla nulla, ultricies hendrerit urna vel, pulvinar mollis ante. Vivamus massa mi, convallis ac dolor sed, tristique iaculis turpis. Vivamus lacinia tempor orci, non semper lacus sagittis sed. Suspendisse ullamcorper justo id laoreet fringilla. Praesent vitae facilisis quam. Fusce sit amet urna metus.Fusce vitae risus quis ipsum consectetur dapibus. Proin gravida, massa sed hendrerit fringilla, felis mauris venenatis lectus, ac tempus mi mauris ac nulla. Ut in erat neque.         
   </p>
                
   <p>
            <span>Crédits</span> Le forum a été fondé par  <strong>pseudo</strong>  et est administré par  <strong>pseudo</strong> . La page d'accueil a été designée et codée par  <strong>Artemis</strong>  sur  <a href="https://artifices.forumactif.com/">Artifices</a> . Le codage du reste du forum a été codé par  <strong>pseudo</strong> . L'intégralité des textes appartiennent au staff et aux membres.       
   </p>
                
   <div class="staff_block">
                   
      <div class="img_staff">
               <img src="https://via.placeholder.com/100" />     
         <div>
                  <span>Pseudo <strong>Administrateur</strong></span>     
         </div>
                      
      </div>
                   
      <div class="img_staff">
               <img src="https://via.placeholder.com/100" />     
         <div>
                  <span>Pseudo <strong>Administrateur</strong></span>     
         </div>
                      
      </div>
                   
      <div class="img_staff">
               <img src="https://via.placeholder.com/100" />     
         <div>
                  <span>Pseudo <strong>Administrateur</strong></span>     
         </div>
                      
      </div>
                   
   </div>
                
   <div class="top_sites_liens">
            <a href="#">V</a> <a href="#">O</a> <a href="#">T</a> <a href="#">E</a>     
   </div>
                
   <div class="nouveautes_block">
            <span>00.00.00</span>  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut pulvinar arcu, quis sodales orci. Morbi nisl orci, sodales vitae facilisis ac, vestibulum a est     
      <hr />
                   
   </div>
                
   <div class="liens_importants">
              <a href="#">Lien</a><a href="#">Lien</a><a href="#">Lien</a><a href="#">Lien</a><a href="#">Lien</a><a href="#">Lien</a>   
   </div>
      
</div>

[Toryudo]

Bonjour !

Il y a 3 choses à changer pour que ça fonctionne :
- la class .liens_importants doit avoir un width plus grand : pour l'instant, les a ne peuvent être les uns à côtés des autres puisque le conteneur est trop petit
- les .liens_importants a doivent être en display inline-block pour, comme son nom l'indique, être "inline" et donc se suivre
- enfin, les .liens_importants a ne doivent pas être en width 100% mais en longueur prédéfinie, sinon, ils ne s'aligneront pas mais seront juste plus grands

Cela pourrait donc donner par exemple :

Code:

.liens_importants {
  width: 100%;
  height: 116px;
}
.liens_importants a {
  display: inline-block;
  width: 130px;
  border: 1px solid var(--color-pink);
  height: 18px;
  margin-bottom: 3.8px;
  text-align: center;
  text-decoration: none;
  font: 10px roboto;
  line-height: normal;
  text-transform: uppercase;
  line-height: 18px;
  position: relative;
  overflow: hidden;
  color: #d85eb1;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

Et les voilà tous les uns à côtés des autres.

[Argimpasa]

J'avais essayé le inline mais ça n'avait pas fonctionné. Peut-être était-ce du au fait que le width devait être plus grand ?

Dans tous les cas ça marche, je vous remercie

[Toryudo]

C'est bien ça, il fallait absolument modifier ces 3 éléments pour que ça fonctionne !

Afin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à : éditer votre premier message, cocher l'icône résolu et enregistrer Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton