problème de css + décalage code à l'ajout de la page d'accueil
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
problème de css + décalage code à l'ajout de la page d'accueil
Détails techniques
Version du forum : phpBB2Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : ajout du code de la page d'accueil dans généralités >> page d'accueil et du CSS liée à la PA dans la feuille de style
Lien du forum : http://whatsuprosehill.forumactif.com
Description du problème
Bonjour, c'est encore moiJ'ai ajouté une page d'accueil à mon forum et comme le montre la capture d'écran, le contenu est décalé sur la droite... Je n'arrive pas à trouver l'origine du problème dans le css.
De plus, depuis l'ajout de la page d'accueil (probablement son CSS) certains changements / bugs sont apparus sur le reste du forum:
- police des pseudos du dernier message posté
- décalage de l'avatar dans son cadre sur l'avatar du dernier à avoir posté
- Spoiler:
et l'avatar est normalement centré dans le cadre avec un léger espace autour.
- fond du forum blanc au lieu d'être de cette couleur: #7F9881
Voici le code mis dans affichage >> page d'accueil - généralités :
- Spoiler:
- Code:
<link crossorigin="anonymous" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /><script crossorigin="anonymous" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<div class="tableau">
<div class="bloc-contexte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="etoiles">
<a href="#"><img src="https://zupimages.net/up/19/30/l782.png" class="top-site" /></a> <a href="#"><img src="https://zupimages.net/up/19/30/rxq9.png" class="top-site" /></a> <a href="#"><img src="https://zupimages.net/up/19/30/l782.png" class="top-site" /></a> <a href="#"><img src="https://zupimages.net/up/19/30/rxq9.png" class="top-site" /></a> <a href="#"><img src="https://zupimages.net/up/19/30/l782.png" class="top-site" /></a>
</div>
<div class="flex">
<div class="liens">
<div class="bloc-lien1">
<a href="lien">Règlement</a>
</div>
<div class="bloc-lien1">
<a href="lien">Contexte</a>
</div>
<div class="bloc-lien1">
<a href="lien">Groupes</a>
</div>
<div class="bloc-lien1">
<a href="lien">Evenement</a>
</div>
</div>
<div class="liens2">
<div class="bloc-lien1">
<a href="lien">Publicité</a>
</div>
<div class="bloc-lien1">
<a href="lien">Invité</a>
</div>
<div class="bloc-lien1">
<a href="lien">Evenement</a>
</div>
<div class="bloc-lien1">
<a href="lien">Evenement</a>
</div>
</div>
</div>
<div class="carousel-item">
<img src="..." alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>
...
</h5>
<p>
...
</p>
</div>
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://zupimages.net/up/19/30/u0jm.png" alt="First slide" />
<div class="carousel-caption d-none d-md-block">
<h5>
Splash Dream
</h5>
<p class="title">
Watashi wa anata o mamoru
</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://zupimages.net/up/19/30/u0jm.png" alt="Second slide" />
<div class="carousel-caption d-none d-md-block">
<h5>
Ever green
</h5>
<p class="title">
Watashi wa anata o mamoru
</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://zupimages.net/up/19/30/u0jm.png" alt="Third slide" />
<div class="carousel-caption d-none d-md-block">
<h5>
Lunamaria
</h5>
<p class="title">
Watashi wa anata o mamoru
</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
<div class="predef">
<a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a><a href="#"><img src="https://zupimages.net/up/19/24/7qua.png" class="icon" /></a>
</div>
<div class="bloc3">
<div class="nouveaute">
<span class="date">xx/xx/xxxx</span> → Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="nouveaute">
<span class="date">xx/xx/xxxx</span> → Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="nouveaute">
<span class="date">xx/xx/xxxx</span> → Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="nouveaute">
<span class="date">xx/xx/xxxx</span> → Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<a href="#"><img src="https://zupimages.net/up/19/39/6llh.png" class="discord" /></a>
<p class="credit">
:copyright: made by champi
</p>
</div>
Voici l'intégralité de mon CSS sur mon forum:
- Spoiler:
- Code:
/*RETIRER SOULIGNEMENT DES LIENS*/
a:link
{
text-decoration:none!important;
}
body {
text-align: justify;
}
/*MESSAGES*/
.postbody {
text-align: justify;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
width: 470px;
}
.bodyline {
padding: 0px;
border-left: 4px solid #aab8a3;
border-right: 4px solid #aab8a3;
}
.genmed {
color: #4B4937;
text-align: center;
}
/*BARRE NAVIGATION*/
a.mainmenu {
font-family: 'Kaushan Script', cursive;
font-size: 15px;
font-weight: bold;
letter-spacing: -1px;
text-transform: uppercase;
}
a.mainmenu:hover {
color: #674d2a;
}
/*CATEGRORIES*/
.secondarytitle h2 {
font-family: 'Kaushan Script', cursive;
font-size: 10px;
margin-left: 300px;
text-align: center;
letter-spacing: 3px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 0px 0px 2px #D7E2C3;
}
/*NOMS SOUS FORUMS*/
a.sousforums {
text-transform: lowercase;
font-size: 16px;
margin: 10px;
padding: 2px 5px 2px 5px;
opacity: 0.7;
padding: -8px 5px 5px 5px;
font-family: 'Kaushan Script', cursive;
}
a.sousforums:hover {
color: #674d2a;
}
/*LIENS SOUS-FORUMS/LIEUX*/
.forumlink {
font-family: 'Fjalla One', cursive;
margin:10px 25px 10px 25px;
font-size: 10px;
padding-bottom: 0px;
letter-spacing: 1px;
text-transform: lowercase;
opacity: 5;
background-color: #aab8a3;
text-align: center;
}
.forumlink:hover {
opacity: 1;
color: #674d2a
}
.sousforums_stats {
font-family: 'Fjalla One', sans-serif;
color: #674d2a;
text-transform: uppercase;
font-size: 9px;
opacity: 1;
padding-left: 45px;
}
/*LIGNE DANS CATEGORIES*/
.line2 {
border-top: 1px dotted #7F9881;
width: 395px;
opacity: 0.5;
margin-left: 170px;
margin-top: -10px;
}
/*sous forum petite intro*/
.d1 {
display: inline;
font-family: 'Fjalla One', sans-serif;
color: #674d2a;
text-transform: uppercase;
font-size: 9px;
opacity: 1;
font-weight: bold;
}
/*sous forum description*/
.d2 {
display: inline;
text-align: justify;
font-family: 'Fjalla One', sans-serif;
font-size: 10px;
color: #674d2a;
}
.lastpost-avatar {
border: 1px solid #43492C;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
height: 64px;
opacity: .8;
overflow: hidden;
padding: 2px;
width: 40px;
}
.lastpost-avatar:hover {
opacity: 1;
}
.lastpost-avatar img {
width:40px;
height:64px;
}
/*avatar sujets*/
.lastpost-avatar2 {
border: 1px solid #43492C;
display: inline-block;
height: 51px;
opacity: .8;
overflow: hidden;
padding: 2px;
width: 32px;
margin: 4px;
float: left;
}
.lastpost-avatar2:hover {
opacity: 1;
}
.lastpost-avatar2 img {
width:32px;
height:51px;
}
/*PROFIL*/
/* DEBUT PROFIL*/
.avatar_profil {
border: 1px solid #43492C;
padding: 2px;
margin-top: 15px;
margin-left: 0px;
margin-right: 7px;
overflow:hidden;
-webkit-border-radius:55px;
-moz-border-radius:55px;
border-radius:0px;
width:200px;
height:320px;
opacity: 0.8;
}
.avatar_profil:hover {
opacity: 1;
}
.poster_rank {
color: #7F9881;
font-size: 10px;
text-transform: lowercase;
letter-spacing: 1px;
font-family: 'Fjalla One', sans-serif;
margin-top: -10px;
text-align: center;
}
.poster_name {
font-family: 'Fjalla One', cursive;
font-size: 12px;
letter-spacing: 3px;
text-align: center;
text-transform: lowercase;
}
.champ_profil {
margin-left: 1px;
margin-top: -2px;
display: inline;
line-height: 1px;
text-transform: lowercase;
font-size: 10px;
font-family: 'Fjalla One', sans-serif;
}
.profil_contenu {
display: inline;
font-family: 'Fjalla One', sans-serif;
font-size: 10px;
text-transform: lowercase;
}
.symbole_profil {
display: inline;
font-size:11px;
color: rgba(0,0,0,0.4);
}
.profil_online {
margin-left: 117px;
position: absolute;
}
/*FIN PROFIL*/
/*TOPIC CODE*/
.postbody {
text-align: justify;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
.line {
border-bottom: 1px dotted #7F9881;
width: 450px;
text-align: center;
opacity: 0.6;
margin-top: -11px;
}
.tittle1 {
color: #7F9881;
font-size: 23px;
text-align: center;
line-height: 50px;
font-family: 'Kaushan Script', cursive;
letter-spacing: 4px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 1px 1px 1px white;
}
.soustitre2 {
font-family: 'Bungee Hairline', cursive;
font-size: 13px;
font-weight: bold;
letter-spacing: 5px;
margin-top: -30px;
color: #4B4937;
text-align: center;
}
.topic {
width: 450px;
background-image:url(https://i.servimg.com/u/f53/20/30/36/13/fondto10.png);
opacity: 1;
margin: auto;
padding: 10px 30px 10px 30px;
}
.contenu {
padding: 10px 5px 10px 0px;
font-family: 'Fjalla One', sans-serif;
font-size: 11px;
color: #7F9881;
}
.bas {
width: 500px;
font-family: 'Fjalla One', sans-serif;
font-size: 8px;
color: #616983;
text-transform: lowercase;
letter-spacing: 5px;
text-align: center;
opacity: 0.6;
}
/*TAILLE GIF PROFIL DE MESSAGES*/
.postdetails img {
max-width:200px;
}
/* FICHE DE PRESENTATION */
/* BLOC INFORMATIONS & PHYSIQUE */
.topAEI {
box-shadow:0 0 5px rgba(0,0,0,0.1), inset 0 0 145px rgba(0,0,0,0.1); background:#aab8a3;
}
/* INFORMATIONS */
.abtAEI li {
background:#D7E2C3; color:#43492C;
}
/* BANDES PHYSIQUE */
.phyzAEI {
border-color:#7F9881 !important;
}
/* CONTENU PHYSIQUE */
.phyzAEI div {
background:#D7E2C3; color:#43492C;
}
/* BLOCS CARACTERE & HISTOIRE */
.boxAEI {
box-shadow:0 0 5px rgba(0,0,0,0.2);
}
/* TITRES CARACTERE & HISTOIRE */
.tleAEI {
background:#aab8a3; color:#43492C;
}
/* CONTENUS CARACTERE & HISTOIRE */
.boxAEI p {
background:#D7E2C3; color:#43492C;
}
/* PRESENTATION JOUEUR */
.UAEI {
box-shadow:0 0 5px rgba(0,0,0,0.2); background:#D7E2C3;
}
/* BANDES IMAGES PRESENTATION JOUEUR */
.imgUAEI {
border-color:#7F9881 !important;
}
/* INFORMATIONS PRESENTATION JOUEUR */
.abtUAEI div {
background:#aab8a3; color:#43492C;
}
/* COMMENTAIRE PRESENTATION JOUEUR */
.moreUAEI {
background:#aab8a3; color:#43492C;
}
/*QEEL*/
/* QEEL PAR AWFUL */
#qeel {
font-family: 'Oswald', sans-serif;
width: 800px;
margin:auto;
position: relative;
display: flex;
flex-wrap: wrap;
padding-bottom: 20px;
background: #e9e9e9;
}
#qeel a, #qeel a:hover, #qeel a:active, #index-links a, #index-links a:hover, #index-links a:active {
text-decoration: none!important;
}
/* Titre du QEEL */
#qeel-titre {
height: 50px;
background: #7F9881;
flex: 100%;
margin-bottom: 30px;
}
#qeel-titre h2 {
font-family: 'Kaushan Script', cursive;
color: #D7E2C3;
font: 900 18px ;
text-transform: uppercase;
text-align: right;
padding-right: 20px;
}
/* Case dernières 24 heures */
#qeel-connectes24 {
width: 140px;
border: 1px solid #e0e0e0;
background:#f9f9f9;
margin-left: 20px;
margin-right: 20px;
box-sizing: border-box;
height: 152px;
overflow: auto;
}
#qeel-connectes24 td.row1 {
background-color: #aab8a3;
font-family: 'Roboto', sans-serif;
padding: 5px;
}
#qeel-mid {
width: 250px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-right: 20px;
}
/* Dernier inscrit */
#qeel-dernier h3 {
text-align: center;
text-transform: uppercase;
font-size: 12px;
margin: 0;
font-family: 'Kaushan Script', cursive;
}
#qeel-dernier div {
text-align: center;
width: 100%;
background: #aab8a3;
height: 50px;
margin-top: 5px;
}
#qeel-dernier div a strong {
font-weight: 300;
text-transform: uppercase;
font-size: 20px;
line-height: 50px;
color: #aab8a3;
}
/* Case liste des connectés */
#qeel-connectes {
background: #aab8a3;
overflow: auto;
padding: 5px;
font-size: 11px;
flex: 1;
margin-right: 10px;
height: 110px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
/* Les groupes */
#qeel-groupes {
display: flex;
justify-content: space-between;
}
#qeel-groupes div {
border: 1px solid #c5c5c5;
text-transform: uppercase;
font-size: 8px;
text-align: center;
height: 35px;
width: 50px;
margin-top: -40px;
line-height: 35px;
color: #a7a7a7;
background: #fff;
box-shadow: 3px 0 0 #edecec inset,-3px 0 0 #edecec inset,0 3px 0 #edecec inset,0 -3px 0 #edecec inset;
}
#qeel-groupes div:nth-child(1) a {
color: #1E2052;
}
#qeel-groupes div:nth-child(2) a {
color: #153B08;
}
#qeel-groupes div:nth-child(3) a {
color: #8A2F7F;
}
#qeel-groupes div:nth-child(4) a {
color: #BA350D;
}
#qeel-groupes div:nth-child(5) a {
color: #520606;
}
#qeel-right {
flex: 1;
margin-right: 20px;
display: flex;
flex-wrap: wrap;
}
/* Statistiques messages et membres */
#qeel-stats2 {
display: flex;
flex-direction: column;
height: 110px;
}
#qeel-stats2 div{
background: #aab8a3;
width: 80px;
margin-bottom: 9px;
text-transform: uppercase;
font-size: 10px;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
font-weight: 300;
}
#qeel-stats2 div:last-child {
margin-bottom: 0px;
}
/* Statistique des membres en lignes (x membres, x invités, x invisibles) */
#qeel-stats {
text-transform: uppercase;
font-size: 10px;
font-weight: bold;
color: #aeaeae;
flex: 100%;
align-self: start;
}
#qeel-stats b {
color: #bbb657;
}
#qeel-stats i {
font-weight: 300!important;
font-style: inherit;
color: #000000;
}
#qeel-stats u {
text-decoration: none;
font-weight: 300;
color: #000;
}
/* Crédits du QEEL */
#qeel-credits {
font-size: 9px;
text-transform: uppercase;
color: #7a7a7a;
text-align: right;
flex: 100%;
align-self: end;
}
/*Les liens en dessous du QEEL */
#index-links {
width: 750px;
margin: auto;
display: flex;
justify-content: space-between;
margin-top: 10px;
}
#index-links a {
border: 1px solid #c5c5c5;
background: #fff;
flex: 1;
margin-right: 3px;
text-align: center;
text-transform: uppercase;
font-size: 9px;
padding: 10px 0;
font-family: "Oswald", sans-serif;
box-shadow: 3px 0 0 #edecec inset,-3px 0 0 #edecec inset,0 3px 0 #edecec inset,0 -3px 0 #edecec inset;
color: #ababab;
transition: color 0.3s;
}
#index-links a:hover {
color: #ccc;
}
#index-links a:last-child {
margin-right: 0px;
}
/*PA*/
.credit {
position:relative;
bottom:440px;
left:330px;
font-size:9px;
opacity:0.2;
}
.discord {
position:relative;
bottom:450px;
left:516px;
}
.date {
padding:1px;
font-size:10px;
font-weight:bold;
border: 1px solid #dadada;
}
.nouveaute {
margin-top:6px;
margin-left:10px;
font-size:10px;
text-align:justify;
font-size:9px;
color:#a7a7a7;
letter-spacing:-0.1em;
}
.bloc3 {
overflow:auto;
border: 3px solid #e5e5e5;
width:163px;
height:150px;
position:relative;
bottom:460px;
left:516px;
}
.tableau {
height: 250px;
width: 700px;
border: 1px solid #dadada;box-sizing: border-box;padding: 5px;background: #f3f3f3;
}
.bloc-contexte {
width:240px;
height:100px;
overflow:auto;
font-size:9px;
color:#a7a7a7;
text-align:justify;
border: 3px solid #e5e5e5;box-sizing: border-box;padding: 5px;background: #ffffff;
font-family: 'Pontano Sans', sans-serif;
}
.etoiles {
margin-top:5px;
width:240px;
text-align:center;
border: 1px solid #e5e5e5;box-sizing: border-box;padding: 5px;background: #f9f9f9;
}
.top-site {
width:15px;
height:15px;
margin-top:-7px;
margin-right:5px;
}
.liens a {
text-decoration:none;
font-size:9px;
color:white;
margin:0 auto;
}
.liens {
margin-left:2px;
}
.bloc-lien1 {
background-color:#e0e0e0;
width:118px;
margin-bottom:2px;
margin-right:2px;
text-align:center;
border: 1px solid #dadada;box-sizing: border-box;padding: -5px;
}
.liens2 a {
text-decoration:none;
font-size:9px;
color:white;
}
.lien {
display:flex;
flex-direction:column;
}
.flex {
display:flex;
margin-top:7px;
width:240px;
}
#carouselExampleControls {
width:254px;
height:146px;
position:relative;
bottom:215px;
left:250px;
}
.carousel-inner{
border: 3px solid #e5e5e5;
}
h5 {
color:white;
text-shadow:0px 0px 1px black;
font-family: 'Anton', sans-serif;
text-transform:uppercase;
font-weight:bold;
font-size:20px;
letter-spacing: .1rem;
}
.title {
color:white;
text-shadow:0px 0px 1px black;
font-family: 'Anton', sans-serif;
font-size:11px;
letter-spacing: .1rem;
}
.icon {
background-color:white;
box-shadow: 0px 0px 0px 1px rgba(153, 155, 155, 0.2);
margin-bottom:6px;
width:26px;
height:26px;
padding:2px;
margin-left:6px;
}
.predef {
width:258px;
height:100px;
position:relative;
bottom:205px;
left:247px;
}
Je tiens à préciser que mon forum est constitué de codes libres services pris sur diverses ressources en ligne... De ce fait, certains noms de classe peuvent paraître incohérents... ou peut-être créer des "courcuits" entre les codes?
Je vous remercie BEAUCOUP pour votre aide, toujours très efficace!
EDIT: à noter que les bugs n'apparaissent que sur la page d'accueil du forum, et plus quand on est dans les sous forums
Re: problème de css + décalage code à l'ajout de la page d'accueil
Bonjour,
- Concernant le positionnement de la page d'accueil, l'utilisation de positions relatives est loin d'être idéale, le mieux aurait été de refaire un code plus approprié.
Cependant, si cela n'est pas dans vos projets, vous pouvez replacer correctement le tableau dans son "cadre" de base en ajoutant dans votre css la propriété text-align:left; à l'élément .tableau : Le premier élément se placera alors bien à gauche et les autres à sa droite resteront dans le cadre.
- Concernant le fond de page blanc, celui-ci vient du css lié avec la page d'accueil. Il y a dedans (entre autres) un fond blanc appliqué au body. Comme cette css est liée dans votre page d'accueil, elle ne s'applique au forum que si la page d'accueil est affichée. Il faudrait à nouveau pouvoir reprendre cette css du début pour ne garder que ce qui est réellement utile....
En "pansement" sinon, vous pouvez écraser cette couleur de fond en rajoutant dans votre css la bonne couleur de fond : à l'élément body déjà présent dans votre css ligne 9, ajoutez la propriété :
background: #7F9881 !important;
- Difficile pour moi de dire ce qu'il en est pour le pseudo du dernier posteur, votre template semble modifié à cet endroit, donc les codes ne s'appliquent pas de la même façon sur mon forum test. Cela pourrait venir à nouveau du css lié dans la page d'accueil, comme le fond de page blanc.
- concernant l'avatar décalé, je ne vois pas de rapport avec la PA, simplement que dans votre css, à l'élément .lastpost-avatar (le cadre autour de l'avatar), vous avez appliqué une largeur de 40px et une hauteur de 64px ; et à l'élément .lastpost-avatar img (donc l'image à l'intérieur) vous avez appliqué exactement les mêmes dimensions, 40px de large et 64px de haut.
Sauf qu'il est sensé y avoir en plus, entre l'image et son cadre, un espace (padding) de 2px.... Donc si on fait le calcul de l'image + la marde de 2px, ça ne rentre plus dans le cadre ! L'image dépasse, et donc n'est plus centrée.
Pour corriger ce problème, localisez .lastpost-avatar dans votre css et appliquez lui une largeur de 46px (40px pour l'image, deux fois 2px de chaque côté pour les marges, et deux fois 1px pour les bordures) et une hauteur de 70px (même principe, je vous laisse faire le calcul par vous même).
- Concernant le positionnement de la page d'accueil, l'utilisation de positions relatives est loin d'être idéale, le mieux aurait été de refaire un code plus approprié.
Cependant, si cela n'est pas dans vos projets, vous pouvez replacer correctement le tableau dans son "cadre" de base en ajoutant dans votre css la propriété text-align:left; à l'élément .tableau : Le premier élément se placera alors bien à gauche et les autres à sa droite resteront dans le cadre.
- Concernant le fond de page blanc, celui-ci vient du css lié avec la page d'accueil. Il y a dedans (entre autres) un fond blanc appliqué au body. Comme cette css est liée dans votre page d'accueil, elle ne s'applique au forum que si la page d'accueil est affichée. Il faudrait à nouveau pouvoir reprendre cette css du début pour ne garder que ce qui est réellement utile....
En "pansement" sinon, vous pouvez écraser cette couleur de fond en rajoutant dans votre css la bonne couleur de fond : à l'élément body déjà présent dans votre css ligne 9, ajoutez la propriété :
background: #7F9881 !important;
- Difficile pour moi de dire ce qu'il en est pour le pseudo du dernier posteur, votre template semble modifié à cet endroit, donc les codes ne s'appliquent pas de la même façon sur mon forum test. Cela pourrait venir à nouveau du css lié dans la page d'accueil, comme le fond de page blanc.
- concernant l'avatar décalé, je ne vois pas de rapport avec la PA, simplement que dans votre css, à l'élément .lastpost-avatar (le cadre autour de l'avatar), vous avez appliqué une largeur de 40px et une hauteur de 64px ; et à l'élément .lastpost-avatar img (donc l'image à l'intérieur) vous avez appliqué exactement les mêmes dimensions, 40px de large et 64px de haut.
Sauf qu'il est sensé y avoir en plus, entre l'image et son cadre, un espace (padding) de 2px.... Donc si on fait le calcul de l'image + la marde de 2px, ça ne rentre plus dans le cadre ! L'image dépasse, et donc n'est plus centrée.
Pour corriger ce problème, localisez .lastpost-avatar dans votre css et appliquez lui une largeur de 46px (40px pour l'image, deux fois 2px de chaque côté pour les marges, et deux fois 1px pour les bordures) et une hauteur de 70px (même principe, je vous laisse faire le calcul par vous même).
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: problème de css + décalage code à l'ajout de la page d'accueil
Bonjour, Attention, cela fait 7 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu » |
Re: problème de css + décalage code à l'ajout de la page d'accueil
Bonjour,
Désolée du temps de réponse!
MlleAlys , Merci beaucoup pour les astuces!!! ça fait tout à fait sens et ça résout les problèmes!
Concernant le last post avatar, je ne comprends pas en quoi changer ma page d'accueil a créé ces soucis mais désormais tout est arrangé grâce à vos astuces et l'utilisation de nouveaux codes, merci!
Problème résolu
Désolée du temps de réponse!
MlleAlys , Merci beaucoup pour les astuces!!! ça fait tout à fait sens et ça résout les problèmes!
Concernant le last post avatar, je ne comprends pas en quoi changer ma page d'accueil a créé ces soucis mais désormais tout est arrangé grâce à vos astuces et l'utilisation de nouveaux codes, merci!
Problème résolu
Sujets similaires
» Affichage des visiteurs sur la page daccueil.
» Problème code catégorie avec décalage
» Problème décalage Page 1 sur 2
» Problème de décalage de la page d'accueil
» probléme de décalage de texte dans ma page d'accueill
» Problème code catégorie avec décalage
» Problème décalage Page 1 sur 2
» Problème de décalage de la page d'accueil
» probléme de décalage de texte dans ma page d'accueill
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum