Ma demande
Bonjour à tous, je suis codeur débutant et malheureusement je fais encore beaucoup d'erreurs... cependant, je souhaiterais rapidement ouvrir mon forum Marvel avec un ami, il est donc nécessaire pour nous qu'il soit propre visuellement. Je ne peux pas me permettre de m'entraîner éternellement sur la page d'accueil du forum qui affiche des éléments totalement décalés les uns par rapport aux autres et ce malgré ma bonne volonté... Je souhaiterais donc demander à quelqu'un le codage HTML et CSS de ma page d'accueil. En même temps, peut-être apprendrais-je à travers votre code ce qui ne va pas dans le mien ?
Voici le lien qui mène à mon forum : https://marveldimensions.forumactif.com/
Voici le lien qui mène à mon forum : https://marveldimensions.forumactif.com/
Schéma(s) et Eléments
Schémas : Schéma positionnement des blocs : 
Schéma rendu final :
Tailles des éléments : Je souhaiterais que la taille des blocs soit la même que celle présentée sur le schéma ci-dessus. Les cases pour les photos des membres du staff doivent être parfaitement alignées, de même que celles pour les photos de prédéfinis, et doivent avoir un espacement identique.
Effets voulus : Je souhaiterais obtenir une transition sur les photos des membres du staff avec leur pseudo, leur fonction et un lien vers leur messagerie (MP). Pour le moment nous ne sommes que deux membres du staff : Jarvis (Compte Administrateur) et Erik Lehnsherr (Co-fondateur).
Je souhaiterais obtenir des carrés et rectangles à bords arrondis pour le staff et les prédéfinis (avec bordures noires très légères en pointillés).
J'aimerais également que le gif de la dernière recrue (dernier membre à s'être inscrit) renvoie vers sa fiche de présentation lorsque l'on clique dessus (ce serait un rectangle à bords arrondis)
Pour les images de prédéfinis, j'aimerais qu'elles renvoient vers leur fiche directement (lien des fiches prédéfinis sur le forum) : pour le moment, cela ne serait que des carrés vides car nous n'avons pas encore écrits nos fiches de prédéfinis sur le forum.
Les boutons Top-Sites sont des pierres d'infinités (les fans de Marvel reconnaitront
) qui seront cliquables et renverront vers un top site (pour le moment, les top sites n'ont pas encore été définis). Les boutons devront faire la même taille et être relativement petits car ils devront tous pouvoir s'insérer dans le bloc.
Pour le bloc météo, je souhaiterais simplement écrire moi-même le texte et insérer l'image PNG correspondante (pluie ou beau temps) : c'est une météo fictive qui sera liée au temps qu'il fait dans notre RPG
Pour le bloc calendrier, il s'agit également d'un calendrier fictif, c'est à dire liée à la trame temporelle de notre RPG (et donc qui n'a rien à voir avec la date d'aujourd'hui IRL ^^) : j'aimerais également pouvoir le modifier assez simplement (peut-être une image ?)
Pour le bloc Latest News : je souhaiterais une barre de défilement à droite car la taille de ce bloc est relativement petite et toutes les infos ne pourront pas rentrer sans barre de défilement ^^
Enfin, l'ensemble des blocs devront comporter un fond transparent et les écritures devront être lisibles (le fond PA est violet).
Version de votre forum : PHPBB3
Schéma rendu final :
Tailles des éléments : Je souhaiterais que la taille des blocs soit la même que celle présentée sur le schéma ci-dessus. Les cases pour les photos des membres du staff doivent être parfaitement alignées, de même que celles pour les photos de prédéfinis, et doivent avoir un espacement identique.
Effets voulus : Je souhaiterais obtenir une transition sur les photos des membres du staff avec leur pseudo, leur fonction et un lien vers leur messagerie (MP). Pour le moment nous ne sommes que deux membres du staff : Jarvis (Compte Administrateur) et Erik Lehnsherr (Co-fondateur).
Je souhaiterais obtenir des carrés et rectangles à bords arrondis pour le staff et les prédéfinis (avec bordures noires très légères en pointillés).
J'aimerais également que le gif de la dernière recrue (dernier membre à s'être inscrit) renvoie vers sa fiche de présentation lorsque l'on clique dessus (ce serait un rectangle à bords arrondis)
Pour les images de prédéfinis, j'aimerais qu'elles renvoient vers leur fiche directement (lien des fiches prédéfinis sur le forum) : pour le moment, cela ne serait que des carrés vides car nous n'avons pas encore écrits nos fiches de prédéfinis sur le forum.
Les boutons Top-Sites sont des pierres d'infinités (les fans de Marvel reconnaitront
) qui seront cliquables et renverront vers un top site (pour le moment, les top sites n'ont pas encore été définis). Les boutons devront faire la même taille et être relativement petits car ils devront tous pouvoir s'insérer dans le bloc.Pour le bloc météo, je souhaiterais simplement écrire moi-même le texte et insérer l'image PNG correspondante (pluie ou beau temps) : c'est une météo fictive qui sera liée au temps qu'il fait dans notre RPG
Pour le bloc calendrier, il s'agit également d'un calendrier fictif, c'est à dire liée à la trame temporelle de notre RPG (et donc qui n'a rien à voir avec la date d'aujourd'hui IRL ^^) : j'aimerais également pouvoir le modifier assez simplement (peut-être une image ?)
Pour le bloc Latest News : je souhaiterais une barre de défilement à droite car la taille de ce bloc est relativement petite et toutes les infos ne pourront pas rentrer sans barre de défilement ^^
Enfin, l'ensemble des blocs devront comporter un fond transparent et les écritures devront être lisibles (le fond PA est violet).
Version de votre forum : PHPBB3
Ressources
Icônes Top-Sites (PNG): 
Autres précisions ?
Voici les codes que j'ai utilisé pour ma page d'accueil (je précise qu'ils ne s'affichent pas correctement), si ça peut servir :Code HTML actuellement utilisé pour la PA (onglet généralités de la page d'accueil) :
- Code:
<div class="conteneurPA">
<div class="headerPA">
Bienvenue sur Marvel Dimensions
</div>
<div class="navPA">
<div class="blocliensPA">
<a rel="nofollow" target="_blank" href="https://marveldimensions.forumactif.com/t7-reglement-du-forum" class="lienspa">Règlement•</a> <a rel="nofollow" target="_blank" href="https://marveldimensions.forumactif.com/f3-contexte" class="lienspa">Contexte et Chronologie</a>• <a rel="nofollow" target="_blank" href="https://marveldimensions.forumactif.com/f5-les-groupes" class="lienspa">Groupes</a>• <a rel="nofollow" target="_blank" href="https://marveldimensions.forumactif.com/f7-predefinis" 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
</div>
<div class="contenuPA">
<div class="PA-colonne1">
<div class="blocContexte">
Contexte : blablabla...
</div>
<div class="blocStaff">
Le staff
<div class="Staff-PA">
<img src="https://64.media.tumblr.com/af28003508149306750c8cf2b5689981/3e9cfb3298a327e8-7c/s100x200/8b5e22640b8121139667a98c9cf13f22dc3a3d04.jpg" />
<div>
<strong>Jarvis</strong><br /><em>Compte Admin</em><br /><a href="https://marveldimensions.forumactif.com/privmsg?mode=post&u=1" target="_blank">MP</a><br />
</div>
<img src="https://64.media.tumblr.com/2bea0398f3c9905b642cb50b630e0fe1/ee0173475482a75d-4c/s100x200/0b046a495592b23abc87ba7dfb550855c8e22190.jpg" />
<div>
<strong>Erik Lehnsherr</strong><br /><em>Co-fondateur</em><br /><a href="https://marveldimensions.forumactif.com/privmsg?mode=post&u=4" target="_blank">MP</a><br />
</div>
<div class="blocVide1">
Bloc vide
<div align="left">
<p>
Blablabla
</p>
</div>
</div>
</div>
<div class="PA-colonne2">
<div class="blocRecrue">
Dernière recrue
<div align="left">
<p>
Blablabla
</p>
</div>
</div>
<div class="blocTops">
Top Sites
<div align="left">
<p>
Blablabla
</p>
</div>
</div>
<div class="blocVide2">
Bloc vide
<div align="left">
<p>
Blablabla
</p>
</div>
</div>
</div>
<div class="PA-colonne3">
<div class="blocPredefs">
les prédefs
</div>
<div class="blocMeteoCalendrier">
<div class="blocMeteo">
Météo
<div align="left">
<p>
Blablabla
</p>
</div>
</div>
<div class="blocCalendrier">
Calendrier
<div align="left">
<p>
Blablabla
</p>
</div>
</div>
</div>
<div class="blocNews">
Latest News
<div align="left">
<p>
Blablabla
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code CSS actuellement utilisé pour la PA :
- Code:
.conteneurPA {
width:1000px; margin:auto;
background: url(https://64.media.tumblr.com/b83fbb570335f75ef20acdb54e125fe8/16d0733d742e2d66-89/s1280x1920/404c10f35491ddad1b6097b7aae25c63ff8e4c75.jpg) center center no-repeat;
background-size:cover;
height:510px;
color:#fff;
}
.headerPA { width: auto;
height: 40px;
position: relative;
background: #FFFFF;
background-image: url("https://64.media.tumblr.com/69fc0c791e9eee0a1aee0282a52a63c9/e426514bc62bf2e1-87/s1280x1920/17048a02762f0a02efece79bc82f45e4ae5841e5.jpg");
background-size: cover;
color: #FFFFF;
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;
}
.navPA { 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: static;
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;
}
.contenuPA { display:flex;
gap:10px;
width:100%;
}
.PA-colonne1, .PA-colonne2, .PA-colonne3 { flex: 1;
display: flex;
gap:10px;
flex-direction:column;
}
.blocContexte, .blocStaff, .blocVide1 { flex: 1;
display: flex;
gap:10px;
flex-direction:column;
background:rgba(255, 255, 255, 0.75);
}
.blocRecrue, .blocTops, .blocVide2 { flex: 1;
display: flex;
gap:10px;
flex-direction:column;
background:rgba(255, 255, 255, 0.75);
}
.blocPredefs, .blocNews { flex: 1;
display: flex;
gap:10px;
flex-direction:column;
background:rgba(255, 255, 255, 0.75);
}
:is(.blocContexte, .blocStaff, .blocVide1, .blocRecrue, .blocTops, .blocVide2, .blocPredefs, .blocNews) > div:not(.blocMeteoCalendrier)
.PA-colonne3 .blocMeteoCalendrier > div {
background:rgba(255, 255, 255, 0.75);
padding:10px;
flex:1;
}
.PA-colonne3 .blocMeteoCalendrier { display:flex;
gap:10px;
}
.blocContexte { width: 300px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 2px;
position: static;
top: 60px;
left: 10px;
text-align: justify;
overflow-x: auto;
overflow-y: auto;
font-family: 'Bebas Neue';
font-weight: 100px;
font-size: 13px;
}
.blocStaff { width: 300px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
position: static;
text-align: center;
top: 172px;
left: 10px;
}
.Staff-PA div { position: static;
display: in-line block;
width: 65px;
height: 65px;
margin-left: 6px;
margin-top: 5px;
top: 10px;
left: 0px;
z-index: 2;
width: 55px;
font-size: 8px;
font-family: 'Calibri', sans-serif;
opacity: 0;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
text-align: center;
visibility: hidden;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
color: black;
}
.blocVide1 { width: 300px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
position: absolute;
text-align: center;
top: 172px;
left: 10px;
}
.blocRecrue { width: 300px;
text-align: justify;
position: static;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
top: 60px;
left: 330px;
overflow-x: auto;
overflow-y: auto;
}
.blocTops { width: 300px;
height: 120px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
font-size: 18px;
text-align: center;
position: static;
top: 195px;
left: 330px;
letter-spacing: 1px;
font-family: 'Bebas Neue';
font-weight: 600;
text-transform: uppercase;
line-height: 1.2em;
}
.blocVide2 { width: 300px;
height: 120px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
font-size: 18px;
text-align: center;
position: static;
top: 195px;
left: 330px;
letter-spacing: 1px;
font-family: 'Bebas Neue';
font-weight: 600;
text-transform: uppercase;
line-height: 1.2em;
}
.blocPredefs { width: 300px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
position: static;
text-align: center;
top: 60px;
left: 510px;
z-index: 1px
}
.blocMeteo { width: 150px;
height: 105px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
position: static;
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: 150px;
height: 114px;
position: static;
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;
}
.blocNews {
width: 300px;
height: 113px;
padding: 5px;
font-size: 10.5px;
text-align: justify;
position: static;
top: 375px;
left: 510px;
overflow: auto;
font-family: 'Oswald';
font-size: 12px;
font-weight: 100;
line-height: 1.3em;
}
Je reste bien entendu disponible si vous avez des questions !
Dernière édition par Darkoos le Mer 27 Juil 2022 - 18:50, édité 1 fois
