Codage bouleversé par une image ?

Marsh Posté le 24-09-2018 à 08:31:06

Bonjour à tous.

N'étant pas très aguerri aux arcanes de la programmation, c'est un néophyte qui s'avance vers vous. Humblement :jap:

J'ai suivi les indications à la lettre d'un forum qui offrait des P.A (Panneau d'accueils) pour garnir mon forum hébergé chez forumactif. Je copie-colle tout ce qu'il y a copier-coller, les HTML, le CSS : aucun souci.

Les codes ont été trouvé ici : http://crushcrushcrush.actifforum. [...] -d-accueil

Voici les codes en question :

Le HTML d'abord.

Code :

<link href="https://www.aht.li/3203417/DOR_PA.css" rel="stylesheet" type="text/css"><div class="DOR"><div class="boxDOR"><div class="tleDOR">Staff</div><div class="staffDOR"><div><p>Pseudonyme<span class="onDOR">Fonction</span><a href="..." target="_blank">Profil</a></p><img src="http://www.aht.li/2776945/9090.png" /></div><div><p>Pseudonyme<span class="offDOR">Fonction</span><a href="..." target="_blank">Profil</a></p><img src="http://www.aht.li/2776945/9090.png" /></div></div><div class="lksDOR"><a href="..." target="_blank">Lien</a><a href="..." target="_blank">Lien</a><a href="..." target="_blank">Lien</a><a href="..." target="_blank">Lien</a><a href="..." target="_blank">Lien</a></div></div><div class="newsDOR"><div>▬ 00/00/00 : ...<br/>▬ 00/00/00 : ...<br/>▬ 00/00/00 : ...</div><img src="http://www.aht.li/2776411/200300.png" /></div><div class="boxDOR"><div class="ctxtDOR">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 class="tleIIDOR">Partenaires</div><div class="partDOR"><a href="..." target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><a href="..." target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><a href="..." target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><a href="..." target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><a href="..." target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a></div></div></div>

Le CSS enfin.

Code :

/* PA */
.DOR {
background:grey; /* MODIFIABLE */
}
/* TITRE STAFF PA */
.tleDOR {
background:rgba(250,250,250,0.3); color:white; /* MODIFIABLE */
}
/* BORDURES BLOCS STAFF PA */
.staffDOR div {
border-color:rgba(250,250,250,0.3) !important; /* MODIFIABLE */
}
/* CONTENUS STAFF PA */
.staffDOR div p {
background:rgba(250,250,250,0.9); color:black; /* MODIFIABLE */
}
/* DISPONIBLE PA */
.onDOR {
background:lightgreen; color:black; /* MODIFIABLE */
}
/* INDISPONIBLE PA */
.offDOR {
background:crimson; color:white; /* MODIFIABLE */
}
/* LIENS PROFILS STAFF PA */
.staffDOR div p a {
color:black; /* MODIFIABLE */
}
/* LIENS PA */
.lksDOR a {
background:rgba(0,0,0,0.5); color:white; /* MODIFIABLE */
}
/* BORDURE ACTUALITES PA */
.newsDOR {
border-color:rgba(250,250,250,0.3) !important; /* MODIFIABLE */
}
/* CONTENU ACTUALITES PA */
.newsDOR div {
background:rgba(250,250,250,0.1); color:black; /* MODIFIABLE */
}
/* CONTEXTE PA */
.ctxtDOR {
border-color:rgba(250,250,250,0.3) !important; background:rgba(250,250,250,0.5); color:black; /* MODIFIABLE */
}
/* TITRE PARTENAIRES PA */
.tleIIDOR {
background:rgba(250,250,250,0.3); color:white; /* MODIFIABLE */
}
/* PARTENAIRES PA */
.partDOR {
background:rgba(0,0,0,0.7); /* MODIFIABLE */
}

J'insiste pour dire que le rendu ne pose au départ aucun problème sur mon forum, en voici une capture d'écran :

http://image.noelshack.com/fichier [...] itre-1.png

Tout va bien dans le meilleur des mondes jusqu'à ce que j'ajoute une image (en respectant les dimensions prescrites) :

http://image.noelshack.com/fichier [...] itre-1.png

Comme vous pouvez le voir, les deux images en 90*90 à gauche qui étaient alignées l'une à côté de l'autre se retrouve superposées avec un décalage de quelque pixels quant à l'alignement vertical. Je précise que je n'ai fait que modifier une seule image et n'ai touché à rien d'autre. De même, quelque soit l'image que je change en premier dans le codage, cette superposition advient, j'ai testé plusieurs fois en reprenant le code original.
De même, si je remets l'image originale fournie dans le codage initial, les deux images 90*90 ne s'alignent pas à nouveau.

Mes compétences en codage étant ce qu'elles sont, j'ai vite été désemparé. J'ai bien tenté de mettre un display:inline-block; pour les deux images 90*90 à gauche, mais sans succès.

Aussi je me tourne vers vous pour identifier le souci. Serait-ce parce que j'utilise noelshack comme hébergeur d'image ?

En vous remerciant si vous trouvez le temps de trouver l'anomalie. :jap:

Message édité par jojosterlitz le 24-09-2018 à 08:31:50

Marsh Posté le 24-09-2018 à 08:31:06

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed

Name *

Email *

URL

Message *