Page d'accueil - aggrandir zone texte

[Mikki]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : 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 : en modifiant le texte de la PA
Lien du forum : me le demander merci

Description du problème

Bonjour,

J'ai un petit soucis avec ma page d'accueil. J'ai modifier le texte des liens "Règlement, Contexte & Annexes..." et je vois que le texte ce met correctement, mais le cadre/fond ne se modifie pas automatiquement.

J'ai bien compris que c'est un code du CSS qu'on peut modifier, mais je n'arrive pas à savoir quel code il faut modifier :

Mon CSS :

Code:

/******** PAGE D'ACCUEIL ********/
/* PA */
.LST {
background:#E17A66; /* MODIFIABLE */
}
/* BLOC CONTEXTE PA */
.ctxtLST {
background:rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* CONTENU CONTEXTE PA */
.ctxtLST div {
background:white; color:#E17A66; /* MODIFIABLE */
}
/* BLOC LIENS PA */
.lksLST {
background:rgba(255,255,255,0.6); /* MODIFIABLE */
}
/* LIENS PA */
.lksLST a {
background:#E17A66; color:white; /* MODIFIABLE */
}
/* BLOC EVENEMENT PA */
.eventLST {
background:#E17A66; color:white; /* MODIFIABLE */
}
/* TRIANGLE BLOC EVENEMENT PA */
.eventLST::before {
border-left-color:#E17A66 !important; /* MODIFIABLE */
}
/* LIEN EVENEMENT PA */
.eventLST a {
background:white; color:#E17A66; /* MODIFIABLE */
}
/* BLOC NOUVELLES PA */
.newsLST {
background:white; /* MODIFIABLE */
}
/* CONTENU NOUVELLES PA */
.newsLST div {
background:white; color:#E17A66; /* MODIFIABLE */
}
/* PREDEFINIS PA */
.pfLST {
background:rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* PARTENAIRES PA */
.partLST {
background:rgba(255,255,255,0.6); /* MODIFIABLE */
}
/* BANDE STAFF & DISCLAIMER */
.bandLST {
background:rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* CONTENUS STAFF PA */
.staffLST div p {
background:rgba(255,255,255,0.9); color:#E17A66; /* MODIFIABLE */
}
/* DISPONIBLE PA */
.onLST {
background:lightgreen; color:#E17A66; /* MODIFIABLE */
}
/* INDISPONIBLE PA */
.offLST {
background:#E17A66; color:white; /* MODIFIABLE */
}
/* LIENS PROFILS STAFF PA */
.staffLST div p a {
color:#E17A66; /* MODIFIABLE */
}
/* DISCLAIMER PA */
.disLST {
background:rgba(0,0,0,0.2); color:white; /* MODIFIABLE */
}
/* COULEUR LIENS DISCLAIMER PA */
.disLST a {
color:#E17A66; /* MODIFIABLE */
}

Ma page d'accueil :

Code:

<link href="https://www.aht.li/3191038/LST_PA.css" rel="stylesheet" type="text/css" />
<!--                     PAGE D'ACCUEIL                     -->
<div class="LST">
                                       
   <!--                     CONTEXTE / LIENS / EVENEMENT EN COURS / NOUVELLES / PREDEFINIS / PARTENAIRES                     -->                  
   <div class="boxLST">
                                          
      <!--                     CONTEXTE                     -->                  
      <div class="ctxtLST">
                                             
         <!--                     CONTENU                     -->                  
         <div>
                               Contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte                  
         </div>
                                             
      </div>
                                          
      <!--                     LIENS / EVENEMENT EN COURS                     -->                  
      <div class="boxLST">
                                             
         <!--                     6 LIENS                     -->                  
         <div class="lksLST">
                                                
            <!--                     I                     --><a href="..." target="_blank">RÉGLEMENT</a>                  
            <!--                     II                     --><a href="..." target="_blank">CONTEXTE & ANNEXES</a>                  
            <!--                     III                     --><a href="..." target="_blank">LES GROUPES</a>                  
            <!--                     IV                     --><a href="..." target="_blank">LES BOTTINS</a>                  
            <!--                     V                     --><a href="..." target="_blank">SYSTEME DE POINTS</a>                  
            <!--                     VI                     --><a href="..." target="_blank">EVENT EN COURS</a>                                          
            <!--                     VII                     --><a href="..." target="_blank">QUESTIONS & INVITES</a>                              
         </div>
                                             
         <!--                     RESUME EVENEMENT EN COURS                     -->                  
         <div class="eventLST">
                                                
            <!--                     RESUME                     -->                  
            <p>
                                  “ Résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé résumé                  
            </p>
                                                
            <!--                     LIEN                     --><a href="..." target="_blank">plus d'informations ici</a>                  
         </div>
                                             
         <!--                     IMAGE EVENEMENT EN COURS 200*150 - VEILLER A LAISSER LA CLASS                     --><img class="imgLST" src="https://i.postimg.cc/8zbGF6dd/PA-200x150.png" />                  
      </div>
                                          
      <!--                     NOUVELLES                     -->                  
      <div class="newsLST">
                                             
         <!--                     CONTENU                     -->                  
         <div>
                               ▬ ../07/24 : FORUM EN CONSTRUCTION<br />▬ 00/00/00 : ...<br />▬ 00/00/00 : ...<br />▬ 00/00/00 : ...<br />▬ 00/00/00 : ...                  
         </div>
                                             
      </div>
                                          
      <!--                     6 PREDEFINIS - IMAGES EN 55*55                     -->                  
      <div class="pfLST">
                                             
         <!--                     I                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093470/5555C.png" /></a>                  
         <!--                     II                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093470/5555C.png" /></a>                  
         <!--                     III                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093470/5555C.png" /></a><br />                  
         <!--                     IV                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093470/5555C.png" /></a>                  
         <!--                     V                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093470/5555C.png" /></a>                  
         <!--                     VI                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093470/5555C.png" /></a>                  
      </div>
                                          
      <!--                     14 PARTENAIRES EN 40*40                     -->                  
      <div class="partLST">
                                             
         <!--                     I                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093141/4040BW.png" /></a>                  
         <!--                     II                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093141/4040BW.png" /></a>                  
         <!--                     III                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093141/4040BW.png" /></a>                  
         <!--                     IV                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093141/4040BW.png" /></a>                  
         <!--                     V                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093141/4040BW.png" /></a>                  
         <!--                     VI                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093141/4040BW.png" /></a>     <br />                  
         <!--                     VIII                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093141/4040BW.png" /></a>                  
         <!--                     IX                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093141/4040BW.png" /></a>                  
         <!--                     X                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093141/4040BW.png" /></a>                  
         <!--                     XI                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093141/4040BW.png" /></a>                  
         <!--                     XII                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093141/4040BW.png" /></a>                  
         <!--                     XIII                     --><a href="..." target="_blank"><img src="https://www.aht.li/3093141/4040BW.png" /></a>                    
      </div>
                                          
   </div>
                                       
   <!--                     STAFF & DISCLAIMER                     -->                  
   <div class="bandLST">
                                          
      <!--                     5 MEMBRES DU STAFF - IMAGES EN 125*50                     -->                  
      <div class="staffLST">
                                             
         <!--                     I                     -->                  
         <div>
                                                
            <!--                     IMAGE I                     --><img src="https://i.postimg.cc/g2172cQy/PA-Admin-01.png" />                  
            <!--                     CONTENU I                     -->                  
            <p>
                                  LA GAZETTE                  
               <!--                     FONCTION & DISPONIBILITE I                     --><span class="onLST">PNJ</span>                  
               <!--                     LIEN PROFIL I                     --><a href="..." target="_blank">Profil</a>                  
            </p>
                                                
         </div>
                                             
         <!--                     II                     -->                  
         <div>
                                                
            <!--                     IMAGE II                     --><img src="https://www.aht.li/3092806/12550BW.png" />                  
            <!--                     CONTENU II                     -->                  
            <p>
                                  Pseudonyme                  
               <!--                     FONCTION & DISPONIBILITE II                     --><span class="offLST">Fonction</span>                  
               <!--                     LIEN PROFIL II                     --><a href="..." target="_blank">Profil</a>                  
            </p>
                                                
         </div>
                                             
         <!--                     III                     -->                  
         <div>
                                                
            <!--                     IMAGE III                     --><img src="https://www.aht.li/3092806/12550BW.png" />                  
            <!--                     CONTENU III                     -->                  
            <p>
                                  Pseudonyme                  
               <!--                     FONCTION & DISPONIBILITE III                     --><span class="onLST">Fonction</span>                  
               <!--                     LIEN PROFIL III                     --><a href="..." target="_blank">Profil</a>                  
            </p>
                                                
         </div>
                                             
         <!--                     IV                     -->                  
         <div>
                                                
            <!--                     IMAGE IV                     --><img src="https://www.aht.li/3092806/12550BW.png" />                  
            <!--                     CONTENU IV                     -->                  
            <p>
                                  Pseudonyme                  
               <!--                     FONCTION & DISPONIBILITE IV                     --><span class="onLST">Fonction</span>                  
               <!--                     LIEN PROFIL IV                     --><a href="..." target="_blank">Profil</a>                  
            </p>
                                                
         </div>
                                             
         <!--                     V                     -->                  
         <div>
                                                
            <!--                     IMAGE V                     --><img src="https://www.aht.li/3092806/12550BW.png" />                  
            <!--                     CONTENU V                     -->                  
            <p>
                                  Pseudonyme                  
               <!--                     FONCTION & DISPONIBILITE V                     --><span class="onLST">Fonction</span>                  
               <!--                     LIEN PROFIL V                     --><a href="..." target="_blank">Profil</a>                  
            </p>
                                                
         </div>
                                             
      </div>
                           <br />  <br />   <br />  <br />   <br />              
      <!--                     DISCLAIMER                     -->                  
      <div class="disLST">
                            Forum optimisé pour Mozilla Firefox & Google Chrome. Forum ouvert le 00/00/0000. Avatars en 200*320. Contexte par Pseudonyme. Graphisme par Pseudonyme. Codage par Pseudonyme.                  
      </div>
                                          
   </div>
               
</div>

Voici un shéma de ce que j'aimerais modifier : PHOTO

J'ai compris que c'était le " .lksLST & .lksLST a " qui est a modifier, mais comment ? J'ai essayé de mettre "with:auto;" mais ça change rien. Du coup je sais pas où modifier...

Pouvez-vous m'aider ? Merci d'avance !

['Christa]

Ah, ça faisait longtemps que je n'avais pas vu de code de CCCrush XD

Le problème de ce code est qu'il est conçu "au pixel près" du coup dès qu'on a des bouts qui dépassent c'est la galère. En plus de ça, comme le CSS du forum est placé avant qui est importé dans le code de la PA, ben il faut mettre des !important partout (une question de priorité des règles CSS, la dernière à être définie est celle qui est utilisée).

Pour modifier la hauteur des liens, tu peux utiliser la propriété height (qui signifie "hauteur") :

Code:

.lksLST a {
    height:30px !important;
}

Mais changer la hauteur des liens va prendre plus de hauteur en général, ce qui peut avoir une influence sur le reste de la PA et te forcer à régler tout ça détail par détail, ce qui est infernal.

Comme tu as moins de neuf liens, une solution est de changer la longueur des liens au lieu de leur hauteur. Cette fois, au lieu de fixer la dimension, on retire le réglage fixe pour laisser les liens prendre l'espace dont ils ont besoin :

Code:

.lksLST a {
    width:unset !important;
}

[Mikki]

Oh je comprend mieux !! Donc c'est pas forcément la PA qui ira.

Mais la seconde solution est la plus adapté ! Merci beaucoup !! Je comprend mieux comment ça marche !