jojosterlitz | Bonjour à tous.
N'étant pas très aguerri aux arcanes de la programmation, c'est un néophyte qui s'avance vers vous. Humblement 
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"><!-- PAGE D'ACCUEIL --><div class="DOR"><!-- STAFF & LIENS --><div class="boxDOR"><!-- TITRE STAFF --><div class="tleDOR">Staff</div><!-- STAFF --><div class="staffDOR"><!-- I --><div><!-- CONTENU I --><p>Pseudonyme<!-- FONCTION & DISPONIBILITE I --><span class="onDOR">Fonction</span><!-- LIEN PROFIL I --><a href="..." target="_blank">Profil</a></p><!-- IMAGE I 90*90 --><img src="http://www.aht.li/2776945/9090.png" /></div><!-- II --><div><!-- CONTENU II --><p>Pseudonyme<!-- FONCTION & DISPONIBILITE II --><span class="offDOR">Fonction</span><!-- LIEN PROFIL II --><a href="..." target="_blank">Profil</a></p><!-- IMAGE II 90*90 --><img src="http://www.aht.li/2776945/9090.png" /></div></div><!-- 5 LIENS --><div class="lksDOR"><!-- I --><a href="..." target="_blank">Lien</a><!-- II --><a href="..." target="_blank">Lien</a><!-- III --><a href="..." target="_blank">Lien</a><!-- IV --><a href="..." target="_blank">Lien</a><!-- V --><a href="..." target="_blank">Lien</a></div></div><!-- BLOC ACTUALITES --><div class="newsDOR"><!-- ACTUALITES --><div>▬ 00/00/00 : ...<br/>▬ 00/00/00 : ...<br/>▬ 00/00/00 : ...</div><!-- IMAGE 200*300 --><img src="http://www.aht.li/2776411/200300.png" /></div><!-- CONTEXTE & PARTENAIRES --><div class="boxDOR"><!-- CONTEXTE --><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><!-- TITRE PARTENAIRES --><div class="tleIIDOR">Partenaires</div><!-- 5 PARTENAIRES - IMAGES EN 50*50 --><div class="partDOR"><!-- I --><a href="..." target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><!-- II --><a href="..." target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><!-- III --><a href="..." target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><!-- IV --><a href="..." target="_blank"><img src="http://www.aht.li/2859284/5050C.png" /></a><!-- V --><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.
Message édité par jojosterlitz le 24-09-2018 à 08:31:50
|
