Problème d'affichage page d'accueil sur forum codes CSS et HTML

2 participants

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

Résolu Problème d'affichage page d'accueil sur forum codes CSS et HTML

Message par Spencer73 Mer 20 Juil 2022 - 15:29

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis l'insertion de codes dans la page CSS et de HTML dans généralités de la page d'accueil
Lien du forum : https://marveldimensions.forumactif.com/

Description du problème

Bonjour, je rencontre actuellement un problème d'affichage sur ma page d'accueil forum : en effet, j'ai rentré plusieurs codes CSS ainsi que codes HTML afin d'aboutir à une belle apparence, cependant les écritures sont en vrac sur la page d'accueil et ne sont pas dans des cases, comme je l'aurais souhaité.

Je suppose que cela a à voir avec le Javascript, sauf que étant novice dans le milieu, je n'ai aucune idée de comment m'y prendre pour faire apparaître correctement les différents onglets.

Voici mes différents codes utilisés pour les "blocs" que je souhaiterais afficher (bloc contexte PA, bloc staff PA, bloc infos recrues, bloc top sites, bloc prédéfinis, bloc météo, bloc calendrier, bloc news)

Pour le code HTML dans onglet généralité page d'accueil :

Code:
<link href="https://fonts.googleapis.com/css?family=Oswald|Raleway:400,500&display=swap" rel="stylesheet" />    
<div class="titlePA">
         Bienvenue sur Marvel Dimensions      
</div>
<div class="fondPA">
             
   <div class="menuPA">
                
      <div rel="nofollow" target="_blank" href="lien règlement Marvel Dimensions" <a="" class="blocliensPA">
               Règlement• <a rel="nofollow" target="_blank" href="lien contexte Marvel Dimensions" class="lienspa">Contexte et Chronologie</a>• <a rel="nofollow" target="_blank" href="lien groupe Marvel Dimensions" class="lienspa">Groupes</a>• <a rel="nofollow" target="_blank" href="lien prédéfinis Marvel Dimensions" class="lienspa">Prédéfinis</a>      
      </div>
                
   </div>
             
   <div class="blocinfos">
            Forum déconseillé aux -16 ans • Avatars 200*320 pixels • 1 RP/mois demandé • 100 mots/RP <br />      
   </div>
           
   <div clas="bloccontPA">
           Contexte du forum<a href="lien vers la suite du contexte du forum" target="_blank" rel="nofollow">Suite ici...</a>    
   </div>
           
   <div class="blocstaffPA">
              
      <div class="staff-PA">
            <img src="lien de l'image Jarvis" />    
         <div>
               <strong>Jarvis</strong><br /><em>Compte Admin</em><br /><a target="_blank" href="lien message privé Jarvis">MP</a><br />  
         </div>
             
      </div>
          
      <div class="staff-PA">
           <img src="lien de l'image Magnéto" />  
         <div>
              <strong>Erik Lehnsherr</strong><br /><em>Co-fondateur</em><br /><em>Dc : Ryu Tatsumoto</em>  
         </div>
             
      </div>
          
   </div>
       
   <div class="blocinfosrecrue">
          
      <div class="recruePA">
            Dernière recrue<br /><a href="lien de la fiche de la dernière recrue" target="_blank"></a>  
         <div class="img" personnage");"="" présentation="" fiche="" la="" de="" haut="" en="" gif="" du="" lien="" style="background-image: url(">
                
         </div><a href="lien de la fiche de la dernière recrue" target="_blank"></a>  
      </div>
          
   </div>
     
   <div class="bloctopsite">
        Top sites<br />  
   </div>
     
   <div class="blocpredefinis">
        
   </div>
     
   <div class="blocmeteo">
        En jeu, nous sommes <br />le 01.01.2022 <br />Il fait : 12°C <br /><img src="image png soleil et nuages" />  
   </div>
   
   <div class="bloccalendrier">
      
   </div>
   
   <div class="blocnews">
      
   </div>
</div>

Pour le code CSS :

Code:
.titlePA { width: auto;
  height: 40px;
  position: relative;
  background: #FDF7EC;
  background-image: url("https://64.media.tumblr.com/69fc0c791e9eee0a1aee0282a52a63c9/e426514bc62bf2e1-87/s1280x1920/17048a02762f0a02efece79bc82f45e4ae5841e5.jpg");
  background-size: cover;
  color: #FDF7EC;
  font-size: 36px;
  text-align: center;
  letter-spacing: 5px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-family: 'Bebas Neue';
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  }

.fondPA { width: auto;
  height: 510px;
  background-image: url("https://64.media.tumblr.com/b83fbb570335f75ef20acdb54e125fe8/16d0733d742e2d66-89/s1280x1920/404c10f35491ddad1b6097b7aae25c63ff8e4c75.jpg");
  background-size: cover;
  background-position-x: center;
  background-position-y: center;
  position: relative;
  font-family: calibri;
  font-size: 11px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  }

.menuPA { width: auto;
  height: 25px;
  color: #FFFFF;
  font-size: 20px;
  text-align: center;
  letter-spacing: 1px;
  padding-top: 5px;
  font-family: 'Bebas Neue';
  text-transform: upper-case;
  border-top-color: black;
  border-top-style: solid;
  border-top-width: 2px;
  }

.blocinfos { width: auto;
  border-top-color: black;
  border-top-style: solid;
  border-top-width: 2px;
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  text-align: center;
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
  font-size: 14px;
  padding-top: 3px;
  padding-right: 0px;
  padding-bottom: 3px;
  padding-left: 0px;
  font-family: 'Bebas Neue';
  text-transform: uppercase;
  }

.bloccontPA { width: 300px;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 2px;
  position: absolute;
  top: 60px;
  left: 10px;
  text-align: justify;
  overflow-x: auto;
  overflow-y: auto;
  font-family: 'Bebas Neue';
  font-weight: 100px;
  font-size: 13px;
   }

.blocstaffPA { width: 300px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  position: absolute;
  text-align: center;
  top: 172px;
  left: 10px;
  }

.blocinfosrecrue { width: 160px;
  text-align: justify;
  position: absolute;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  top: 60px;
  left: 330px;
  overflow-x: auto;
  overflow-y: auto;
  }

.bloctopsite { width: 160px;
  height: 120px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  font-size: 18px;
  text-align: center;
  position: absolute;
  top: 195px;
  left: 330px;
  letter-spacing: 1px;
  font-family: 'Bebas Neue';
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.2em;
    }

.blocpredefinis { width: 275px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  position: absolute;
  text-align: center;
  top: 60px;
  left: 510px;
  z-index: 1px
    }

.blocmeteo { width: 133px;
  height: 105px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  position: absolute;
  font-size: 16px;
  text-align: center;
  font-family: 'Bebas Neue';
  font-weight: 100;
  top: 250px;
  left: 510px;
  overflow-x: auto;
  overflow-y: auto;
  }

.bloccalendrier { width: 130px;
  height: 114px;
  position: absolute;
  top: 250px;
  left: 664px;
  text-align: center;
  overflow-x: auto;
  overflow-y: auto;
  background-image: url(image à insérer);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  }

Vous remerciant par avance pour vos réponses Smile


Dernière édition par Spencer73 le Lun 25 Juil 2022 - 23:52, édité 1 fois
Spencer73

Spencer73
Nouveau membre

Messages : 15
Inscrit(e) le : 18/07/2022

Voir le profil de l'utilisateur https://marveldimensions.forumactif.com/
Spencer73 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage page d'accueil sur forum codes CSS et HTML

Message par Lixyr Mer 20 Juil 2022 - 21:41

Bonsoir,

Avez-vous retirer une partie de votre code de votre forum ? Je ne vois pas le mauvais affichage de mon côté, toute la partie à partir de <div clas="bloccontPA"> n'apparait pas dans le code source.
Si vous l'avez enlevé, il faut le remettre pour que nous puissions voir ce qui ne va pas avec votre code.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Problème d'affichage page d'accueil sur forum codes CSS et HTML 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Problème d'affichage page d'accueil sur forum codes CSS et HTML 3592387030 pour prévenir la modération.

Problème d'affichage page d'accueil sur forum codes CSS et HTML Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

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

Résolu Re: Problème d'affichage page d'accueil sur forum codes CSS et HTML

Message par Spencer73 Mer 20 Juil 2022 - 21:50

Bonjour, je viens de remettre toute la partie du code HTML que j'avais mis dans mon premier post (effectivement je l'avais retiré temporairement pour effectuer d'autres tests mais rien ne va) dans la partie généralité de la page d'accueil. L'affichage est donc bien celui d'origine (tel que celui montré dans la photo de capture d'écran de mon premier post).

Les écritures sont en vrac alors que j'aimerais plutôt qu'elles figurent dans des blocs ^^"
Spencer73

Spencer73
Nouveau membre

Messages : 15
Inscrit(e) le : 18/07/2022

Voir le profil de l'utilisateur https://marveldimensions.forumactif.com/
Spencer73 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage page d'accueil sur forum codes CSS et HTML

Message par Lixyr Jeu 21 Juil 2022 - 15:06

Bonsoir,

Oui, effectivement, mais c'est normal. Ca fait exactement ce que vous avez demandé, car vous avez mis les bloc en position absolue. Il faudrait nous faire un schéma ou quelque chose qui permettrait de nous montrer ce que vous souhaiteriez comme affichage/disposition pour vos blocs.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Problème d'affichage page d'accueil sur forum codes CSS et HTML 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Problème d'affichage page d'accueil sur forum codes CSS et HTML 3592387030 pour prévenir la modération.

Problème d'affichage page d'accueil sur forum codes CSS et HTML Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

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

Résolu Re: Problème d'affichage page d'accueil sur forum codes CSS et HTML

Message par Spencer73 Jeu 21 Juil 2022 - 15:45

Bonjour, merci pour votre réponse ! Effectivement, cela m'éclaire un peu plus.

Voici le schéma de disposition des blocs (pour le fond des blocs zone de texte/image/vidéo je préférerais de couleur blanche, je garde bien entendu le background violet déjà installé dans mon code) :

Problème d'affichage page d'accueil sur forum codes CSS et HTML Forum_10
Spencer73

Spencer73
Nouveau membre

Messages : 15
Inscrit(e) le : 18/07/2022

Voir le profil de l'utilisateur https://marveldimensions.forumactif.com/
Spencer73 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage page d'accueil sur forum codes CSS et HTML

Message par Spencer73 Ven 22 Juil 2022 - 16:15

Up, ma demande d'aide pour faire apparaître les blocs est toujours d'actualité Smile
Spencer73

Spencer73
Nouveau membre

Messages : 15
Inscrit(e) le : 18/07/2022

Voir le profil de l'utilisateur https://marveldimensions.forumactif.com/
Spencer73 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage page d'accueil sur forum codes CSS et HTML

Message par Spencer73 Lun 25 Juil 2022 - 23:52

Finalement en bidouillant un peu j’ai réussi a trouver un code
Spencer73

Spencer73
Nouveau membre

Messages : 15
Inscrit(e) le : 18/07/2022

Voir le profil de l'utilisateur https://marveldimensions.forumactif.com/
Spencer73 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'affichage page d'accueil sur forum codes CSS et HTML

Message par Lixyr Mar 26 Juil 2022 - 0:55

Bonsoir,

Si vous avez fini par réussir la page d'accueil (j'ai vu que 'Christa vous a donné un coup de main et que vous avez trouvé un libre-service intéressant), alors n'oubliez pas d'aller indiquer vos sujets comme résolus sur Never Utopia également. Wink


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Problème d'affichage page d'accueil sur forum codes CSS et HTML 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Problème d'affichage page d'accueil sur forum codes CSS et HTML 3592387030 pour prévenir la modération.

Problème d'affichage page d'accueil sur forum codes CSS et HTML Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

Voir le profil de l'utilisateur 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