problème page d'accueil

Sam 7 Oct - 17:34
Bonjour Skaemp,

Je tenais tout d'abord à chaudement vous remercier pour votre travail, grâce à vos œuvres en libre service nous sommes bientôt en mesure d'ouvrir notre forum

Je me permets de vous contacter pour un petit souci de PA + une légère modification que nous souhaiterions apporter au code initial.

Voici celui que nous avons séléctionné : https://i.imgur.com/GbiPs6t.png

Or lorsque je le mets en place, aucun problème, mais quand j'y apporte des modifications (ajoute des images ) ... : https://i.imgur.com/S4hQkE1.png

Aussi je viens vers vous pour savoir si il était possible de retirer l'onglet contexte afin de le placer sur l'image (d'une faible opacité), comme ceci : https://i.imgur.com/ygQLp4t.png

Je vous joint notre CSS et le code utilisé :

PA :

Code:
<link href="http://sd-1.archive-host.com/membres/up/211183412958130190/RP/SOIN_PA.css" rel="stylesheet" type="text/css" />
<div id="SOIN">
        
 <div class="lksSOIN">
        
 <!--       5 LIENS       --><a href="" target="_blank">Règlement</a>    
 <!--       II       --><a href="" target="_blank">Annexes</a>    
 <!--       III       --><a href="" target="_blank">Prédéfinis</a>    
 <!--       IV       --><a href="" target="_blank">Bottin</a>    
 <!--       V       --><a href="" target="_blank">Partenariat</a>    
 </div>
        
 <!--       EVENEMENT EN COURS/MEMBRE DU MOIS       -->    
 <div class="evmSOIN">
        
 <!--       IMAGE 125*125       --><img src="http://68.media.tumblr.com/c9ddc2d4119a65b95d9b248b34d57997/tumblr_ob3eenUKVW1rixdqmo1_500.gif" />    
 <!--       LIEN       -->    
 <div>
     plus d'informations <a href="" target="_blank">ici</a>    
 </div>
        
 </div>
        
 <!--       9 TOP PARTENAIRES EN 50*50       -->    
 <div class="partSOIN">
        
 <!--       I       --><a href="" target="blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a>    
 <!--       II       --><a href="" target="blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a>    
 <!--       III       --><a href="" target="blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a>    
 <!--       IV       --><a href="" target="blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a>    
 <!--       V       --><a href="" target="blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a>    
 <!--       VI       --><a href="" target="blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a>    
 <!--       VII       --><a href="" target="blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a>    
 <!--       VIII       --><a href="" target="blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a>    
 <!--       IX       --><a href="" target="blank"><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/5050.png" /></a>    
 <!--       3 TOP-SITES       -->    
 <div class="topSOIN">
     Top-sites    
 <p>
        
 <!--       CONTENU       --><a href="" target="_blank">1</a><a href="" target="_blank">2</a><a href="" target="_blank">3</a>    
 </p>
        
 </div>
        
 <!--       ACTUALITES       -->    
 <div class="newsSOIN">
     Actualités    
 <!--       CONTENU       -->    
 <div>
     <strong>♦ 00/00/00</strong> ▬ ...<br /><strong>♦ 00/00/00</strong> ▬ ...<br /><strong>♦ 00/00/00</strong> ▬ ...    
 </div>
        
 </div>
        
 </div>
        
 <!--       CONTEXTE       -->    
 <div class="ctxtSOIN">
        
 <!--       IMAGE 350*175       --><img src="http://data.whicdn.com/images/253153874/original.gif" />    
 <!--       STAFF - IMAGES EN 100*55       -->    
 <div class="staffSOIN">
        
 <!--       I       -->    
 <div>
     <img src="https://78.media.tumblr.com/b96b5f3741feb25082866cdd644a5e09/tumblr_ope08rH2Lj1va9vvro7_400.gif" />    
 <p>
     Pseudonyme<br />Rang<a href="" target="_blank">MP</a>    
 </p>
        
 </div>
        
 <!--       II       -->    
 <div>
     <img src="https://78.media.tumblr.com/4abd7df6bb6ddbf41f84f19f234a0efc/tumblr_ope08rH2Lj1va9vvro6_400.gif" />    
 <p>
     Pseudonyme<br />Rang<a href="" target="_blank">MP</a>    
 </p>
        
 </div>
        
 <!--       III       -->    
 <div>
     <img src="https://78.media.tumblr.com/4abd7df6bb6ddbf41f84f19f234a0efc/tumblr_ope08rH2Lj1va9vvro6_400.gif" />    
 <p>
     Pseudonyme<br />Rang<a href="" target="_blank">MP</a>    
 </p>
        
 </div>
        
 <!--       IV       -->    
 <div>
     <img src="https://78.media.tumblr.com/fb51e0686e80b72ee3146603db598bd2/tumblr_ope08rH2Lj1va9vvro3_400.gif" />    
 <p>
     Pseudonyme<br />Rang<a href="" target="_blank">MP</a>    
 </p>
        
 </div>
        
 <!--       V       -->    
 <div>
     <img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/10055.png" />    
 <p>
     Pseudonyme<br />Rang<a href="" target="_blank">MP</a>    
 </p>
        
 </div>
        
 <!--       VI       -->    
 <div>
     <img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/10055.png" />    
 <p>
     Pseudonyme<br />Rang<a href="" target="_blank">MP</a>    
 </p>
        
 </div>
        
 </div>
        
 <!--       TRIANGLE       -->    
 <div class="triSOIN">
        
 <div>
        
 <!--       CONTENU CONTEXTE       -->    
 <p>
     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 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 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    
 </p>
        
 </div>
        
 </div>
        
 </div>
</div>

Code:
/*PA*/

/* FOND PA */
#SOIN {
background:#E5E5E5 !important;
}
/* LIENS */
.lksSOIN a{
background:white !important; color:#C3C6E9 !important;
}
/* EVENEMENT EN COURS/MEMBRE DU MOIS */
.evmSOIN{
background:rgba(250,250,250,0.6) !important;
}
/* CONTENU EVENEMENT EN COURS/MEMBRE DU MOIS */
.evmSOIN div{
background:rgba(250,250,250,0.8) !important;
}
/* BANDE PARTENAIRES */
.partSOIN{
background:#C3C6E9 !important;
}
/* TOP-SITES */
.topSOIN {
background:white !important; color:#E5E5E5 !important;
}
/* LIENS TOP-SITES */
.topSOIN a{
background:#E5E5E5 !important; color:white !important;
}
/* TITRE ACTUALITES */
.newsSOIN{
background:white !important; color:#E5E5E5 !important;
 }
 /* CONTENU ACTUALITES */
.newsSOIN div {
background:white !important;
}
/* STAFF */
.staffSOIN {
background:r#C3C6E9 !important;
}
/* CONTENU STAFF */
.staffSOIN p{
background:#C3C6E9 !important; color:#E5E5E5 !important;
}
/* TRIANGLE */
.triSOIN{
border-bottom-color:#899259 !important;
}
/* FOND CONTENU CONTEXTE */
.triSOIN div{
background:#E5E5E5 !important;
}
/* CONTENU CONTEXTE */
.triSOIN div p{
background:white !important; color:black !important;
}

En vous remerciant.
Revenir en haut Aller en bas
Dim 8 Oct - 0:00
Bonjour,

Skaemp a écrit:
Votre problème provient certainement des sauts de ligne qu'impose Forumactif à chaque enregistrement de la page d'accueil et qui exigent en conséquence la mise en place de la manœuvre suivante - telle que rédigée dans la notice :

I. Copiez le code de la page d'accueil
II. Créez un nouveau sujet « Page d'accueil » dans la partie réservée aux membres de l'équipe administrative de votre forum et collez-y le code
III. Ouvrez Notepad++ et appliquez ici aussi le code sur un nouveau document
IV. Effectuez les diverses modifications nécessaires
∟ Assurez-vous de ne pas ajouter de sauts de ligne
V. Copiez ce nouvel ensemble
VI. Retournez au sujet « Page d'accueil » et actualisez le code
VII. Collez le code dans la partie correspondante du panneau d'administration
∟ Affichage > Page d'accueil > Généralités
∞ Répétez les étapes III à VI à chaque modification

Aucune manipulation des éléments de la page d'accueil ne peut s'effectuer directement à partir du panneau d'administration.

Concernant la modification, employez désormais ce code :
Code:
<link href="http://sd-1.archive-host.com/membres/up/211183412958130190/RP/SOIN_PA.css" rel="stylesheet" type="text/css" /><div id="SOIN"><!-- 5 LIENS --><div class="lksSOIN"><!-- I --><a href="" target="_blank">Règlement</a><!-- II --><a href="" target="_blank">Annexes</a><!-- III --><a href="" target="_blank">Prédéfinis</a><!-- IV --><a href="" target="_blank">Bottin</a><!-- V --><a href="" target="_blank">Partenariat</a></div><!-- EVENEMENT EN COURS / MEMBRE DU MOIS --><div class="evmSOIN"><!-- IMAGE 125*125 --><img src="http://68.media.tumblr.com/c9ddc2d4119a65b95d9b248b34d57997/tumblr_ob3eenUKVW1rixdqmo1_500.gif" /><!-- LIEN --><div>plus d'informations <a href="..." target="_blank">ici</a></div></div><!-- 9 TOP PARTENAIRES EN 50*50 --><div class="partSOIN"><!-- I --><a href="" target="blank"><img src="https://www.aht.li/2776947/5050.png" /></a><!-- II --><a href="" target="blank"><img src="https://www.aht.li/2776947/5050.png" /></a><!-- III --><a href="" target="blank"><img src="https://www.aht.li/2776947/5050.png" /></a><!-- IV --><a href="" target="blank"><img src="https://www.aht.li/2776947/5050.png" /></a><!-- V --><a href="" target="blank"><img src="https://www.aht.li/2776947/5050.png" /></a><!-- VI --><a href="" target="blank"><img src="https://www.aht.li/2776947/5050.png" /></a><!-- VII --><a href="" target="blank"><img src="https://www.aht.li/2776947/5050.png" /></a><!-- VIII --><a href="" target="blank"><img src="https://www.aht.li/2776947/5050.png" /></a><!-- IX --><a href="" target="blank"><img src="https://www.aht.li/2776947/5050.png" /></a><!-- 3 TOP-SITES --><div class="topSOIN">Top-sites<p><!-- CONTENU --><a href="..." target="_blank">1</a><a href="..." target="_blank">2</a><a href="..." target="_blank">3</a></p></div><!-- ACTUALITES --><div class="newsSOIN">Actualités<!-- CONTENU --><div><b>♦ 00/00/00</b> ▬ ...<br/><b>♦ 00/00/00</b> ▬ ...<br/><b>♦ 00/00/00</b> ▬ ...</div></div></div><!-- CONTEXTE --><div class="ctxtSOIN"><div class="txtSOIN"><!-- IMAGE 350*175 --><img src="http://data.whicdn.com/images/253153874/original.gif" /><!-- CONTENU CONTEXTE --><p>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 contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte</p></div><!-- STAFF - IMAGES EN 100*55 --><div class="staffSOIN"><!-- I --><div><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/10055.png" /><p>Pseudonyme<br/>Rang<a href="" target="_blank">MP</a></p></div><!-- II --><div><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/10055.png" /><p>Pseudonyme<br/>Rang<a href="" target="_blank">MP</a></p></div><!-- III --><div><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/10055.png" /><p>Pseudonyme<br/>Rang<a href="" target="_blank">MP</a></p></div><!-- IV --><div><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/10055.png" /><p>Pseudonyme<br/>Rang<a href="" target="_blank">MP</a></p></div><!-- V --><div><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/10055.png" /><p>Pseudonyme<br/>Rang<a href="" target="_blank">MP</a></p></div><!-- VI --><div><img src="http://sd-1.archive-host.com/membres/images/211183412958130190/Codage/10055.png" /><p>Pseudonyme<br/>Rang<a href="" target="_blank">MP</a></p></div></div></div></div>

Et remplacez :
Code:
/* STAFF */
.staffSOIN {
background:r#C3C6E9 !important;
}
/* CONTENU STAFF */
.staffSOIN p{
background:#C3C6E9 !important; color:#E5E5E5 !important;
}
/* TRIANGLE */
.triSOIN{
border-bottom-color:#899259 !important;
}
/* FOND CONTENU CONTEXTE */
.triSOIN div{
background:#E5E5E5 !important;
}
/* CONTENU CONTEXTE */
.triSOIN div p{
background:white !important; color:black !important;
}

Par :
Code:
/* CONTEXTE */
.txtSOIN {
width:350px; height:175px; text-align:center;
}
/* CONTENU CONTEXTE */
.txtSOIN p {
position:absolute; margin-top:-175px;
width:340px; height:165px; padding:5px; overflow:auto;
font-size:11px; text-align:justify;
background:rgba(255,255,255,0.7); color:black; /* MODIFIABLE */
opacity:0; transition:opacity 0.55s ease; -webkit-transition:opacity 0.55s ease;
}
.txtSOIN:hover p {
opacity:1;
}
/* STAFF */
.staffSOIN {
background:#C3C6E9 !important;
}
/* CONTENU STAFF */
.staffSOIN p{
background:#C3C6E9 !important; color:#E5E5E5 !important;
}
Revenir en haut Aller en bas
Dim 8 Oct - 0:37
Merci beaucoup tout fonctionne à merveille !
Revenir en haut Aller en bas
Revenir en haut Aller en bas
Vous ne pouvez pas répondre aux sujets dans ce forum