Page D'accueil

[mama3802]

Bonjour =)

J'aimerais changer ma page d'accueil mais je ne sais pas du tout comment faire le code pour.
Voici mon shéma: https://i.servimg.com/u/f45/15/15/84/77/explic10.png
J'aimerais avoir 3 pages changeantes ( de même structure ) quand on passe sur les onglets à droites.

Merci d'avance

[Invité]

Bonjour,
Pour cela il faut allier 2 codes. D'abord il vous faut un tableau pour l'intérieur de vos 3 "pages". Ensuite, il vous faut un système permettant de changer les "pages", un système d'onglets.
Une fois ces 2 codes trouvés, réalisez vos tableaux et gardez-les de coté( à l'aide de Notepad ++ ou du bloc note windows, d'un logiciel de traitement de texte...), puis installez votre système d'onglets et incluez chaque tableau réalisé comme un contenu.

Je vous laisse effectuer quelques recherches .
> onglets en page d'accueil
> tableau en page d'accueil
Faites quelques essais, et si cela ne fonctionne pas, donnez nous vos codes que l'on puisse vous expliquer ce qui pose soucis.

Cordialement.

[mama3802]

Ok merci, je vais regarder

[mama3802]

Bonjour,

Est ce que ces codes là pourrait aller ?
Je suis un peu perdu et surtout pour le code Javascript. Faut l'héberger en ".js" je crois, et après je sais plus...

Code:

<table><tr><td>
<div id="mes_onglets">
    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</span>
        <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
        </div></td>
<td>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    </div></div></td></tr></table>

Le Code Javascript :

Code:

function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('span');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }   
}

Le CSS:

Code:

.mon_onglet{
  display: block;
  padding: 5px;
  margin: 4px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}
.mon_onglet:hover{
  background: #b8efa1;
}       
.mon_onglet_selected{
  display: block;
  padding: 5px;
  margin: 4px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}         
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
  margin: 10 px;
  height: 120px;}
#mes_contenus, #mes_onglets{
  height: 100%;
  width:100%;}

[Invité]

Bonjour,

Vous avez le code pour placer vos 3 pages . Pour le code Javascript, depuis la dernière mise à jour c'est plus simple. Collez le dans Panneau d'admin > Modules > Gestion des codes javascript. Il faut créer un nouveau code javascript, le nommer comme vous le souhaitez, cocher "Sur l'index", coller le code en dessous puis valider.
Le CSS va dans la feuille de style CSS .
Et le code Html va dans votre message d'accueil. C'est dans cette partie qu'il va falloir intégrer vos 3 pages. Remplacez "Onglet 1" par le nom que vous voulez (ou une image), et faite correspondre la page qui doit s'afficher en mettant votre code de la page 1 à la place de "Mon contenu 1".
Mon contenu 1 sera remplacé par un tableau, quelque chose ressemblant à ceci:

Code:

<img src="adresse de l'image du haut" /><br /><table width="100%"><tr><td> blabla 1 </td><td> blabla2 </td></tr>
<tr><img src="adresse de l'image du bas" /></td><td> blabla 3</td></tr></table>

Il faudra ajouter un peu de CSS pour améliorer l'apparence .

Cordialement.

[mama3802]

D'accord merci =) j'ai compris la base ^^ parcontre comment je peux faire les cadres arrondi dans le contenu comme je vous ai décrit avant: https://i.servimg.com/u/f45/15/15/84/77/explic10.png

[Invité]

Bonsoir,

Appliquez du CSS sur les cellules contenant du texte. Vous donnez une class à ces cellules et vous lui donnez les propriétés nécessaires. Exemple:
On choisit la class "contour" . Vous modifiez la première cellule comme ceci:

Code:

<td class="contour">blabla 1</td>

Dans votre feuille CSS, vous placez la class:

Code:

.contour{}

Entre les accolades {} vous placez les propriétés voulues:

Code:

border: 1px solid #000; /*contour fin continu et noir*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px; /*arrondir les angles pour différents navigateurs*/
border-radius: 15px;
...etc ...

Une même class peut être appliquée à plusieurs éléments .

Cordialement.

[mama3802]

Désolé =/ mais j'ai pas compris ou l'on mettait ce code:

Code:

<td class="contour">blabla 1</td>

dans celui ci:

Code:

<table><tr><td><div id="mes_onglets">
    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</span>
        <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
        </div></td>
<td>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    </div></div></td></tr></table>

[Invité]

Je vous fait l'exemple pour la première page, elle vous servira de modèle pour les 2 autres .
Le code Html:

<table><tr><td><div id="mes_onglets">
<span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Page 1</span>
<span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
<span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
</div></td>
<td>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu"><img src="adresse de l'image du haut" /><br /><table width="100%"><tr><td class="contour"> blabla 1 </td><td class="contour"> blabla2 </td></tr>
<tr><img src="adresse de l'image du bas" /></td><td class="contour"> blabla 3</td></tr></table></div>
<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
<div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
</div></div></td></tr></table>

j'ai remplacé Mon contenu 1 par le tableau de la première page.

Dans la feuille de style CSS, on ajoute :

Code:

.contour{
border: 1px solid #000; /*contour fin continu et noir*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px; /*arrondir les angles pour différents navigateurs*/
border-radius: 15px;
min-width: 200px;/*largeur*/
min-height: 150px;/*hauteur*/}

Cordialement.

[mama3802]

Bonsoir,

Je voulais vous demandez si c'était possible de faire mon fond pour les 3 pages ( avec les emplacements, les titres, les images ... ) et après de rajouter juste le texte dessus. Parcontre pour les onglets sur le coté ça me parait un peu difficile de faire ça non?

Parce que là je n'arrive pas à tout faire avec des codes, surtout que je veux un fond avec pas mal de choses et je ne suis pas assez forte pour faire ce que j'aimerais =/

[Invité]

Bonsoir,

Ne partez pas battue d'avance, sinon c'est sûr que vous ne reussirez pas. Pour commencer, avez vous un forum test pour essayer vos codes? Si oui, essayez déjà les éléments que je vous ai donné.

Le message d'accueil incomplet mais fonctionnel:

Code:

<table cellPadding="0" cellSpacing="0"><tr>
<td><div class="clear"><div id="mes_contenus"><div id="co_1" class="mon_contenu"><img src="adresse de l'image du haut" /><br /><table width="100%"><tr><td class="contour"> blabla 1 </td><td class="contour"> blabla2 </td></tr>
<tr><td><img src="adresse de l'image du bas" /></td><td class="contour"> blabla 3</td></tr></table></div><div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div><div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
</div></div></td>
<td ><div id="mes_onglets">
<span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Page 1</span>
<span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
<span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
</div></td></tr></table>

Ce qui change par rapport au précédent: j'ai placé les onglets du bon coté.

La partie CSS:

Code:

.mon_onglet{
  display: block;
  padding: 5px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}
.mon_onglet:hover{
  background: #b8efa1;
}       
.mon_onglet_selected{
  display: block;
  padding: 5px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}         
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
  margin: 10 px;
  height: 400px;}
#mes_contenus, #mes_onglets{
  height: 100%;
  width:100%;}

.contour{
border: 1px solid #000; /*contour fin continu et noir*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px; /*arrondir les angles pour différents navigateurs*/
border-radius: 15px;
width: 200px;/*largeur*/
height: 150px;/*hauteur*/}

Ce qui change, j'ai mis des hauteurs et des largeurs fixes, j'ai supprimé les marges extérieures gênantes.

Le code Javascript:

Code:

function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('span');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }   
}

Il n'a pas changé.

Vous pouvez voir le résultat ici. Il me semble qu'on s'approche du résultat souhaité, ou alors je suis totalement à coté de la plaque et je n'ai pas compris ce que vous voulez.
Donnez moi les images pour la page 1, je vous donnerai le code qui correspond, avec toutes les explications de réalisation pour que vous réalisiez les 2 autres . L'important c'est d'essayer, quitte à ce que je vous aide à corriger ensuite

Cordialement.

[mama3802]

Oui j'ai ré-ouvert un forum pour en avoir un de test: http://forum-castle-tv.forumactif.com/

J'ai mis un code pour mettre un fond derrière le tableau, mais ça ne me l'affiche pas entièrement je crois. Voila mes codes:

Dans le CSS:

Code:

.fondaccueil {
background-image:url("http://img67.xooimage.com/files/8/3/d/fond-autre-2-2b5889e.png");
background-repeat:no-repeat;
border: 0px solid #ACA899;
}

Et dans le message d'accueil:

Code:

<table class="fondaccueil" width="760" height="476" border="0" cellpadding="0" cellspacing="0"><tr>
<td><div class="clear"><div id="mes_contenus"><div id="co_1" class="mon_contenu"><img src="http://img66.xooimage.com/files/6/2/0/forum-pm-2b586c9.png" /><br /><table width="100%"><tr><td class="contour">blabla1</td><td class="contour"> blabla2 </td></tr>
<tr><td><img src="adresse de l'image du bas" /></td><td class="contour"> blabla 3</td></tr></table></div><div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div><div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
</div></div></td>
<td ><div id="mes_onglets">
<span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Page 1</span>
<span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
<span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
</div></td></tr></table>

Vous pouvez aller voir sur le forum de test.

[Invité]

Bonjour,

Bel essai ! Ce qui pose soucis, c'est que vous avez mis l'image dans le tableau, donc elle s'adapte aux dimensions du tableau. C'est une solution si votre image doit faire exactement la même taille que votre tableau à onglets, mais dans notre cas, il faut faire autrement et placer l'image derrière le tableau .
J'ai donc repris votre class "fondaccueil" et je l'ai placé à l'extérieure du tableau. Puis j'ai ajouté une seconde div pour décaler le tableau à onglet vers la droite ( je trouvais dommage de cacher ce beau Dr House!) .

Code:

<div class="fondaccueil"><div align="right">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
   <div class="clear"><div id="mes_contenus">
      <div id="co_1" class="mon_contenu">
         <img src="http://img66.xooimage.com/files/6/2/0/forum-pm-2b586c9.png" /><br />
            <table width="100%" align="center">
            <tr>
            <td align="center">
               <div class="contour">blabla 1</div>
            </td>
            <td align="center">
               <div class="contour"> blabla 2</div>
            </td>
            </tr>
            <tr>
            <td align="center">
               <img src="adresse de l'image du bas" />image du bas
            </td>
            <td align="center">
               <div class="contour"> blabla 3 </div>
            </td>
            </tr>
            </table>
      </div>

   <div id="co_2" class="mon_contenu" style="display: none;">
         <img src="adresse de l'image" /><br />
            <table width="100%" align="center">
            <tr>
            <td align="center">
               <div class="contour">blabla 1</div>
            </td>
            <td align="center">
               <div class="contour"> blabla 2</div>
            </td>
            </tr>
            <tr>
            <td align="center">
               <img src="adresse de l'image du bas" />image du bas
            </td>
            <td align="center">
               <div class="contour"> blabla 3 </div>
            </td>
            </tr>
            </table>
      </div>
      <div id="co_3" class="mon_contenu" style="display: none;">
         <img src="adresse de l'image" /><br />
            <table width="100%" align="center">
            <tr>
            <td align="center">
               <div class="contour">blabla 1</div>
            </td>
            <td align="center">
               <div class="contour"> blabla 2</div>
            </td>
            </tr>
            <tr>
            <td align="center">
               <img src="adresse de l'image du bas" />image du bas
            </td>
            <td align="center">
               <div class="contour"> blabla 3 </div>
            </td>
            </tr>
            </table>
      </div>
   </div></div>
</td>
<td>
      <div id="mes_onglets">
         <span id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Titre 1</span>
         <span id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Titre 2</span>
         <span id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Titre 3</span>
      </div>
</td>
</tr>
</table>
</div>
</div>

J'ai complété les pages 2 et 3 puisque vous avez compris le principe. Les onglets changent au survol, car j'ai remplacé onclick par onmouseover. Pour permettre d'espacer vos différentes boites de texte, j'ai déplacé la class, elle n'est plus liée à la cellule du tableau, mais à une div à l'intérieur de ces cellules.
Pour la partie CSS, je l'ai modifiée un peu pour améliorer le rendu, mais vous aurez des ajustements à faire. Je me suis basée sur mon forum pour les dimensions, et rien ne dit qu'elles vont être bonnes sur le votre, il faudra peut-être augmenter ou diminuer le nombre de px un peu partout.

Code:

.mon_onglet{
  display: block;
  padding: 5px;
  margin-left: 0px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #000;
  background: #ffffff;
  border: 1px solid #000;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px; /*arrondir les angles pour différents navigateurs*/
  border-radius: 6px;}
.mon_onglet:hover{
  background: #b8efa1;
}       
.mon_onglet_selected{
  display: block;
  padding: 5px;
  margin-left: 0px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #000;
  background: #ffffff;
  border: 1px solid #000;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px; /*arrondir les angles pour différents navigateurs*/
  border-radius: 6px;}         
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: transparent;
  border: 1px solid #000;
  padding: 10px;
  margin: 10 px;
  height: 406px;
  width: 650px;}

#mes_contenus, #mes_onglets{
  height: 100%;
  width:100%;}

.contour{
background-color: #fff; /*couleur de fond*/
border: 1px solid #000; /*contour fin continu et noir*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px; /*arrondir les angles pour différents navigateurs*/
border-radius: 15px;
text-align: left;
padding: 5px;
width: 250px;/*largeur*/
height: 150px;
overflow-y: auto;/*hauteur*/}


.fondaccueil {
background-image:url("http://img67.xooimage.com/files/8/3/d/fond-autre-2-2b5889e.png");
background-repeat:no-repeat;
border: 0px solid #ACA899;
margin: auto;
 width:917px;
 height:428px;}

Il faudra créer des images pour les titres pour mettre le texte à la verticale .

N'hésitez pas si vous avez des questions.

Cordialement.

[mama3802]

Merci =) Et oui je suis d'accord, ça aurait été bête de cacher Hugh ^^
Autre petite question pour le fond des boites de textes, j'aimerais mettre aussi un fond différent dedans, mais je suis perdu du coup avec toutes les "div" .

Edit:

Pendant que j'y pense, je voulais savoir aussi comment on fait pour introduire les derniers sujets d'un forum qui défilent, comme sur ce forum.

Merci encore =)

[Invité]

Pour le fond des contenus, 2 possibilités:
1. le même fond pour les 3 contenus => on l'ajoute dans le code CSS dans cette partie, à la place du fond transparent:

.mon_contenu{
color: #000;
background-image: url('adresse de l'image');
border: 1px solid #000;
padding: 10px;
margin: 10 px;
height: 406px;
width: 650px;}

2. Un fond différent pour chaque contenu. Il faut repérer ceci pour le premier contenu:

Code:

<div id="co_1" class="mon_contenu">

et ajouter style="background-image: url('adresse du fond');" comme ceci:

Code:

<div id="co_1" class="mon_contenu" style="background-image: url('adresse du fond');">

Pour les contenus 2 et 3 c'est le même principe sauf qu'il y a déjà style="display: none;" donc on ajoute le fond juste après le point virgule, comme ceci:

Code:

<div id="co_2" class="mon_contenu" style="display: none;background-image: url('adresse du fond');">

Pour votre seconde question, vous parlez du widget derniers sujets qui se trouvent sur la gauche du forum? Si oui, vous pouvez activer les widgets et sélectionner ceux que vous voulez dans :
Panneau d'admin' > Modules > gestion des widget du forum.

Cordialement.

[mama3802]

Désolé je me suis mal exprimé, je ne parlais pas de ce fond là enfaite, je parlais des fonds ou j'ai laissé pour l'instant "blabla 1", "blabla 2" etc...

Pour le widget oui, c'est de celui là que je parle : http://img75.xooimage.com/files/e/f/8/derniers-sujets-2b606f0.png
Et ce que je voulais, c'était pouvoir l'insérer dans mes cadres mais pas sur le coté du forum.

[Invité]

Bonjour,

Alors, pour les fonds des zones de texte, la class qui correspond est "contour", si le fond est le même pour toute les zones, ajoutez le dans la feuille CSS. Si, vous mettez des fonds différents, alors, il faut repérer les class "contour" dans le tableau et ajouter ensuite style="background: url('adresse du fond');" comme ceci:

Code:

<div class="contour" style="background: url('adresse du fond');">

Concernant les derniers sujets, vous voulez quelquechose comme sur ce forum (clic!) par exemple? Si oui, il s'agit d'un code à intégrer dans votre message d'accueil:

Code:

<table style="height: 240px;">
   <tr>
   <th>Derniers sujets </th>
   </tr>
   <tr>
   <td  align="left" id="comments_scroll_div" valign="middle" rowspan="6">
   <iframe name="ifr" style="visibility: hidden; width: 0px; height: 0px;" src="/portal.forum" onLoad="var ifr=window.ifr.document.getElementById('comments_scroll_div');document.getElementById('comments_scroll_div').innerHTML=ifr.innerHTML;"></iframe>
   </td>
   </tr>
   </table>

Pour que cela fonctionne il faut que le portail de votre forum soit créé, et activé ( pas forcément affiché par contre). Pour les dimensions, agissez directement sur le widget du portail .

Cordialement.

[mama3802]

Bonjour,

Merci parcontre je ne sais pas si ça fonctionne, ça charge et ça affiche rien pour le widget "derniers messages" : http://forum-castle-tv.forumactif.com/
C'est à la 3ème page.

[mama3802]

Bonsoir,

J'ai une autre petite question pour la mise en place dans le tableau:

Je n'arrive pas à placer une partie de mon texte sur la droite dans mon carré ( c'est ce que j'ai entouré en noir que je voudrais mettre à droite des liens facebook et Twitter): https://i.servimg.com/u/f45/15/15/84/77/captur12.jpg

Voici mon code:

Code:

<div class="fondaccueil"><div align="right">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
  <div class="clear"><div id="mes_contenus">
      <div id="co_1" class="mon_contenu" style="background-image: ">
        <img src="http://img67.xooimage.com/files/2/1/4/sans-titre-7-2b74cd0.gif" /><br />
            <table width="100%" align="center">
            <tr>
            <td align="center">
              <div class="contour"><center><img src="http://img71.xooimage.com/files/9/2/4/contexte-2b7432f.png" /></center><font face="georgia"><span style="font-size: 10px; line-height: normal">Forum consacré aux deux brillants acteur/actrice Hugh Laurie et Lisa Edelstein, célèbre grâce à la série Dr House.  Bien qu'ils ne soient maintenant plus beaucoup vu tous les deux, suite au départ de Lisa, je continue à beaucoup aimer ces deux acteurs donc j'ai décidé de consacré ce forum à eux deux : séparément ... ou presque ^^ Retrouvez toutes les informations les concernant: leur rôles, leur passions mais aussi leur amitié etc... Retrouvez également toutes les informations sur la série Dr House (les spoilers etc...), et bien sûr venez discuter avec nous des ships Huddy/Huli. </span></font></div>
            </td>
            <td align="center">
              <div class="contour"><center><img src="http://img72.xooimage.com/files/d/b/9/le-forum-2b74786.png"/></center><br><img src="http://img69.xooimage.com/files/e/b/4/info-2b74ac5.gif"/></br>Ouverture : Le 29 avril 2010.
<br>Design : Version 8 par Marine.</br><br><img src="http://img73.xooimage.com/files/e/e/5/nouveau-2b74ae6.gif"/></br>Merci de vous présentez avant de poster sur le forum et de signer le règlement ;)
</div>
            </td>
            </tr>
            <tr>
            <td align="center">
              <img src="adresse image bas" /> Image du bas
</td>
            <td align="center">
              <div class="contour"><center><img src="http://img70.xooimage.com/files/a/e/8/sans-titre-8-2b74dbb.gif"/></center><br>Merci à toute l'équipe du forum: les modératrices Jennibi et [B]rooklyn, les invités, et bien sûr les membres fidèles sans quoi ce forum ne serait plus là.<br></br><br> Bonne Visite ! xx</br>
</br></div>
            </td>
            </tr>
            </table>
      </div>

  <div id="co_2" class="mon_contenu" style="display: none;">
        <img src="http://img67.xooimage.com/files/2/1/4/sans-titre-7-2b74cd0.gif" /><br />
            <table width="100%" align="center">
            <tr>
            <td align="center">
              <div class="contour"><center><img src="http://img68.xooimage.com/files/2/3/8/suivre-2-2b7d016.gif"/></center><br><left><img src="http://img71.xooimage.com/files/1/8/6/cliquez-2b7d22e.gif"/><br><a href="http://twitter.com/#!/_perfectmatch_" class="postlink" target="_blank"><img src="http://img53.xooimage.com/files/f/a/1/twitter-2800ae3.png" border="0" alt="" /></a></br> <a href="http://www.facebook.com/pages/Perfect-Match/161535563905543?sk=wall#!/pages/Perfect-Match/161535563905543?v=wall" target="_blank"><img src="http://img52.xooimage.com/files/b/c/8/facebook-2800b17.png" border="0" alt="" /></a></left></br><img src="http://img68.xooimage.com/files/c/d/9/nos-boutons-2b7d269.gif"/><br><img src="http://img49.xooimage.com/files/2/8/5/img-123111wpmfu-1e15deb.gif" border="0" /></br> <img src="http://i23.servimg.com/u/f23/11/03/70/20/perfec10.gif" border="0" /><br> <b><a href="http://perfectmatch.max2forum.com/partenariat-f26/nos-boutons-t4.htm"class="postlink">Plus?</a></b></br></div>
            </td>
            <td align="center">
              <div class="contour"><center><img src="http://img72.xooimage.com/files/7/8/f/team-2b7d42a.gif"/></center></div>
            </td>
            </tr>
            <tr>
            <td align="center">
              <img src="adresse image" />♥ « Lisa is an absolute joy ..» - Hugh Laurie<br>
♥ « I think he’s hot. He’s a sex bomb !» - Lisa Edelstein </br>
            </td>
            <td align="center">
              <div class="contour"><center><img src="http://img70.xooimage.com/files/1/c/a/top-elite-2b7d45e.gif"/></center><br></br><center><a href="http://hugh-laurie.us./" class="postlink" target="_blank"><img src="http://img66.xooimage.com/files/9/6/b/etoile-2b818d8.gif" border="0" alt="" /></a>
<a href="http://www.lisaedelsteinclips.com/" class="postlink" target="_blank"><img src="http://img66.xooimage.com/files/9/6/b/etoile-2b818d8.gif" border="0" alt="" /></a>
<a href="http://graph-commande.forumactif.com/forum.htm" class="postlink" target="_blank"><img src="http://img66.xooimage.com/files/9/6/b/etoile-2b818d8.gif" border="0" alt="" /></a>
<a href="http://sela-ward.net/" class="postlink" target="_blank"><img src="http://img66.xooimage.com/files/9/6/b/etoile-2b818d8.gif" border="0" alt="" /></a>
<a href="http://hetaliafanforum.un concurrent.com/index.php" class="postlink" target="_blank"><img src="http://img66.xooimage.com/files/9/6/b/etoile-2b818d8.gif" border="0" alt="" /></a>
 <br><a href="http://animals-land.forumactif.biz/forum" class="postlink" target="_blank"><img src="http://img66.xooimage.com/files/9/6/b/etoile-2b818d8.gif" border="0" alt="" /></a>
        <a href="http://girlyacademy.allgoo.net/forum" class="postlink" target="_blank"><img src="http://img66.xooimage.com/files/9/6/b/etoile-2b818d8.gif" border="0" alt="" /></a>
        <img src="http://img73.xooimage.com/files/9/1/7/star-gri-2b8187f.png" border="0" alt="" />
<img src="http://img73.xooimage.com/files/9/1/7/star-gri-2b8187f.png" border="0" alt="" />
<img src="http://img73.xooimage.com/files/9/1/7/star-gri-2b8187f.png" border="0" alt="" /></center> <br><br><b><center><a href="http://perfectmatch.max2forum.com/partenariat-f26/nos-partenaires-forums-t2.htm"class="postlink">Plus Forums? - </a><a href="http://perfectmatch.max2forum.com/partenariat-f26/nos-partenaires-sites-t3.htm"class="postlink">Plus Sites? - </a><a href="http://perfectmatch.max2forum.com/partenariat-f26/demande-de-partenariat-a-suivre-t1.htm"class="postlink">Vous?</a></center></b></div>
            </td>
            </tr>
            </table>
      </div>
      <div id="co_3" class="mon_contenu" style="display: none;">
        <img src="http://img67.xooimage.com/files/2/1/4/sans-titre-7-2b74cd0.gif" /><br />
            <table width="100%" align="center">
            <tr>
            <td align="center">
              <div class="contour"><table style="height: 240px;">
  <tr>
  <th>Derniers sujets </th>
  </tr>
  <tr>
  <td  align="left" id="comments_scroll_div" valign="middle" rowspan="6">
  <iframe name="ifr" style="visibility: hidden; width: 0px; height: 0px;" src="/portal.forum" onLoad="var ifr=window.ifr.document.getElementById('comments_scroll_div');document.getElementById('comments_scroll_div').innerHTML=ifr.innerHTML;"></iframe>
  </td>
  </tr>
  </table>
</div>
            </td>
            <td align="center">
              <div class="contour"> blabla 2</div>
            </td>
            </tr>
            <tr>
            <td align="center">
              <img src="adresse de l'image du bas" />image du bas
            </td>
            <td align="center">
              <div class="contour"> blabla 3 </div>
            </td>
            </tr>
            </table>
      </div>
  </div></div>
</td>
<td>
      <div id="mes_onglets">
        <span id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Général</span>
        <span id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Partenaires et Co'</span>
        <span id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">News et Infos</span>
      </div>
</td>
</tr>
</table>
</div>
</div>

[Invité]

Bonjour,

Ca fonctionne bien en faisant un petit tableau dans la div, comme ceci:

Code:

<div class="contour"><center><img src="http://img68.xooimage.com/files/2/3/8/suivre-2-2b7d016.gif"/></center><br><table width="100%"><tr><td align="left"><img src="http://img71.xooimage.com/files/1/8/6/cliquez-2b7d22e.gif"/><br><a href="http://twitter.com/#!/_perfectmatch_" class="postlink" target="_blank"><img src="http://img53.xooimage.com/files/f/a/1/twitter-2800ae3.png" border="0" alt="" /></a></br> <a href="http://www.facebook.com/pages/Perfect-Match/161535563905543?sk=wall#!/pages/Perfect-Match/161535563905543?v=wall" target="_blank"><img src="http://img52.xooimage.com/files/b/c/8/facebook-2800b17.png" border="0" alt="" /></a></td><td align="right"><img src="http://img68.xooimage.com/files/c/d/9/nos-boutons-2b7d269.gif"/><br><img src="http://img49.xooimage.com/files/2/8/5/img-123111wpmfu-1e15deb.gif" border="0" /></br> <img src="http://i23.servimg.com/u/f23/11/03/70/20/perfec10.gif" border="0" /><br> <b><a href="http://perfectmatch.max2forum.com/partenariat-f26/nos-boutons-t4.htm"class="postlink">Plus?</a></b></br></td></tr></table></div>

Cordialement.

[mama3802]

Merci =)
J'ai encore un petit problème =/ Je voudrais remettre mes infobulles, mais le problème c'est qu'il a deux balises "div" : <div class="contour"> et <div class="infobulle"> et ça ne fonctionne pas.

[Invité]

Et en mettant les infobulles dans une petit tableau?

Code:

<table><tr><td><div class="infobulle"><img src="lien image ou apparait l'infobulle"><span>Contenu de la bulle</span></div></td></tr></table>

Il suffit de répéter <td><div class="infobulle"><img src="lien image ou apparait l'infobulle"><span>Contenu de la bulle</span></div></td> autant de fois qu'il y a d'infobulle a mettre sur la même ligne .

Cordialement.

[mama3802]

Ah oui faut que j'y pense à ces tableaux ^^ Merci =)

Parcontre les infobulles s'ouvrent sur la gauche donc on ne voit pas l'intérieur car ça sort du cadre. Pour qu'elles s'ouvrent sur la droite comment je peux faire? Je supose que c'est dans le CSS non?

Et une autre petite chose, j'ai essayer de faire pareil que précédemment. C'est à dire ici je veux mettre deux de mes infobulles à gauche et une à droite, mais ça ne fonctionne pas. Voici mon code:

Code:

<td align="center">
            <div class="contour"><center><img src="http://img72.xooimage.com/files/7/8/f/team-2b7d42a.gif"/></center><table><tr><td align="left"><div class="infobulle"><img src="http://img11.hostingpics.net/pics/517858Lisa2.png"/><span><center><font color="#000000">Fondatrice/Admin</font> </center><img src="http://img11.hostingpics.net/pics/379401Lisa.png" /><center><font color="#000000"> Marine</font></center></span></div></td></tr></table>
<table><tr><td align="left"><div class="infobulle"><img src="http://img66.xooimage.com/files/b/1/3/bouton-jennibi-29b6996.png"/><span><center><font color="#000000"> Modératrice </font></center><img src="http://img53.xooimage.com/files/f/6/e/112-54-25aad47.jpg" /> <center><font color="#000000">Jennibi</font></center></span></div></td></tr></table>
<table><tr><td align="right"><div class="infobulle"><img src="http://img71.xooimage.com/files/3/b/b/bouton-brooklyn-29b6984.png"><span><center><font color="#000000">Modératrice</font></center><img src="http://img40.xooimage.com/files/2/0/d/11-43-1de5708.jpg" /><center><font color="#000000"> [B]rooklyn </font></center></span></div></td></tr></table>
</div></td>

[Invité]

Bonjour,

Pour les sujets récents, j'ai fait un oubli dans les manipulations, c'est pour cela que ça ne fonctionne pas.
1. panneau d'admin'> module > configuration du portail> Afficher le portail: Oui.
2. panneau d'admin' > affichage > Généralités > "L'adresse de votre forum dirige vers": choisissez, l'index de votre forum.
3.panneau d'admin'> module > configuration du portail> Afficher le portail: Non.

---

Pour les infobulles, c'est la faute à l'overflow si on ne les voit pas. Le meilleur moyen pour résoudre le soucis est de changer la class de la case contenant les bulles. Par exemple on la nomme "contour2" et on colle les mêmes propriétés que pour "contour" sauf "overflow-y: auto;"

Pour le placement de la bulle sur l'image, dans la partie CSS vous devez avoir les propriétés "left" et "top", cela permet de positionner la bulle sur l'image. Le nombre de pixel donne la distance entre le bord de l'image et le bord de la bulle. vous pouvez tout à fait mettre left: 1px; et top: 1px;, ainsi la bulle sera presque superposée à l'image.

Enfin, pour vos infobulles, vous avez répété le tableau pour chacune des infobulles, la case comprise en <td> et </td> etait suffisante . Un tableau avec 2 lignes et 2 colonnes, comme ceci:

Code:

<td align="center">
            <div class="contour2"><center><img src="http://img72.xooimage.com/files/7/8/f/team-2b7d42a.gif"/></center><table><tr><td align="left"><div class="infobulle"><img src="http://img11.hostingpics.net/pics/517858Lisa2.png"/><span><center><font color="#000000">Fondatrice/Admin</font> </center><img src="http://img11.hostingpics.net/pics/379401Lisa.png" /><center><font color="#000000"> Marine</font></center></span></div></td><td align="right"><div class="infobulle"><img src="http://img71.xooimage.com/files/3/b/b/bouton-brooklyn-29b6984.png"><span><center><font color="#000000">Modératrice</font></center><img src="http://img40.xooimage.com/files/2/0/d/11-43-1de5708.jpg" /><center><font color="#000000"> [B]rooklyn </font></center></span></div></td></tr><tr><td align="left"><div class="infobulle"><img src="http://img66.xooimage.com/files/b/1/3/bouton-jennibi-29b6996.png"/><span><center><font color="#000000"> Modératrice </font></center><img src="http://img53.xooimage.com/files/f/6/e/112-54-25aad47.jpg" /> <center><font color="#000000">Jennibi</font></center></span></div></td></tr></table>

</div></td>

Cordialement.

[mama3802]

Bonsoir,

Pour les deniers sujets, ça ne fonctionne pas non plus malgré la manip =/

Et j'ai mis le code pour déplacer mon infobulle mais ça me supprime le cadre autour: http://forum-castle-tv.forumactif.com/

Edit: Enfaite si ça marche les derniers sujets. D'un coup ça à marché

[Invité]

Bonjour,

Contente que les sujets récents fonctionnent. Pour le code des infobulles, avez-vous ajouter la class contour2 dans la feuille CSS?

Code:

.contour2{
background-image: url('http://img74.xooimage.com/files/7/e/3/fond-5-2b5e384.png'); /*image de fond*/
border: 1px solid #000; /*contour fin continu et noir*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px; /*arrondir les angles pour différents navigateurs*/
border-radius: 15px;
text-align: left;
padding: 5px;
width: 250px;/*largeur*/
height: 150px;}

Cordialement.

[mama3802]

Ah non j'avais oublié Merci =)
Pour les sujets récents ça marche, mais c'est long défois à s'afficher et sous firefox ça ne s'affiche pas du tout. C'est normal? Par exemple quand je vais sur votre forum ça s'affiche de suite.

Un autre petit truc aussi, j'ai mis des balises <marquee> mais sous firefox ça ne fonctionne pas. Comment je peux faire?

Merci

[mama3802]

Up =)

[Invité]

Bonjour,

Concernant les balises marquee, elles fonctionnent bien chez moi avec firefox 5 .

Le délai, ça me le fait aussi de temps en temps, donc c'est normal.

Pour les sujets récents, ils fonctionnent sous firefox à condition d'actualiser la page en étant sur le 3ème onglet. Je n'ai pas encore trouvé comment modifier ça. Sur le forum de mon profil, les sujets récents sont en dehors des onglets,et fonctionnent sans soucis, donc donc il doit y avoir une incompatibilité quelque part entre les deux codes. Je continue à chercher une solution.

Cordialement.

[mama3802]

D'accord.
Mais pour balises marquee c'est bizard, ça marche pas chez moi. ça peut venir du code ou pas?

Edit:

Bon j'ai essayer d'installer mon code sur mon vrai forum, mais ça pose problème. Quand je passe sur les onglets ça n'affiche pas les autres pages, et le fond est vert. Même si j'ai rajouter ce qu'on a fait, je sais pas trop ce qui coince.

Voila ce que ça change :

https://i.servimg.com/u/f45/15/15/84/77/captur15.jpg

Et au niveau de mes catégories ça me met un fond derrière les liens : https://i.servimg.com/u/f45/15/15/84/77/captur14.png

Voici le CSS de mon vrai forum ( avec les changements ) :

Code:

 a
{
text-decoration: none;
}

 body { background-attachment: scroll; background-repeat: no-repeat; background-position: top center;}

.pointille{
border-bottom: 3px dotted #ff0000;
font-family:font; verdana
padding-right:20px;
color:#couleurtext;
font-size: px;
display:block;

}


a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}



.bodyline {
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
}
    .forumline{-moz-border-radius:6px;}



body {background-repeat: no-repeat;}

Body { background-attachment: scroll; background-repeat: no-repeat; background-position: top center;}



a.forumlink{
border-bottom: 3px double #2c191a;
font-family:font; verdana
padding-right:20px;
color:#couleurtext;
font-size: px;
display:block;

}
a.forumlink:hover{
border-bottom: 3px double #2c191a;
font-family:font; verdana
padding-right:20px;
color:#couleurtext;
font-size: px;
display:block;
}


a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}

a.forumlink {
 text-transform: uppercase;
 font-size: 12px;
 color: ;
 font-family: 'verdana';
 }

ul, li{
  list-style: none;
}
           
div.infobulle {
  position: relative;
  float: middle;}

div.infobulle span {
  display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}

div.infobulle:hover span {
display: inline;
position: absolute;
top: 25px;
left: -60px;
border: 3px solid #2C413E;
background-color: #AF9684}

div.infobulle img {
filter:alpha(opacity=70);
-moz-opacity:1.00;
-khtml-opacity: 1.00;
opacity: 1,00;}

div.infobulle img:hover {
filter:alpha(opacity=100);
-moz-opacity:1.00;
-khtml-opacity: 1.00;
opacity: 1,00;}

div.infobulle span img{
filter:alpha(opacity=100);
-moz-opacity:1.00;
-khtml-opacity: 1.00;
opacity: 1,00;}

div.infobulle span img:hover{
filter:alpha(opacity=100);
-moz-opacity:1.00;
-khtml-opacity: 1.00;
opacity: 1,00;}

#i_logo{
margin-bottom: 120px;
}


.postdetails.poster-profile a img {
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border: 3px solid #5684A3;
}

.contour {
-moz-border-radius: 0px;
background-color: #E0DDDA;
border-right : 4px solid #5684A3;
border-top: 1px solid #5684A3;
border-left: 4px solid #5684A3;
border-bottom: 1px solid #5684A3;
padding-left: 2px;
padding-right: 2px;
padding-top: 1px;
padding-bottom: 1px;
}

.texte {
 height: 70px;
 border: 1px solid rgb(8, 7, 7);
 background-color: Marron;
 text-align: center;
 font-size: 35pt;
 font-family: georgia;
 text-shadow: rgb(0, 0, 0) 1px 1px 1px;
 letter-spacing: 2px;
 color: #6A3E22;
}

.texte:hover {
 color: Pink;
 background-color: Black;
}

.post {background-color: #DFDEDA;}

.cadrestat
{background-color: #E6E6E6;
border: 1px solid #5684A3;
}

.statistiques{
border:0px;
background-image: url("http://img67.xooimage.com/files/4/d/2/new-1-2b18bca.png");
background-repeat: no-repeat;
background-position: center;
height:320px;}

.groupes{
background-color:#FFFFFF;border: 1px #44769A dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;}

.bodyline{
  border-left: 8px solid #623617;
  border-right: 8px solid #623617;
}

BODY {
  background-color: #EAEAEA;
  background-image:url("http://img75.xooimage.com/files/6/9/9/header-pm-2b3d20f.png");
  background-position:top;
  background-repeat:no-repeat;
  margin-top: 553px;
}

.mon_onglet{
  display: block;
  padding: 5px;
  margin-left: 0px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #6A3E22;
  background: #ffffff;
  border: 1px solid #6A3E22;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px; /*arrondir les angles pour différents navigateurs*/
  border-radius: 6px;}
.mon_onglet:hover{
  background: #b8efa1;
}       
.mon_onglet_selected{
  display: block;
  padding: 5px;
  margin-left: 0px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #6A3E22;
  background: #ffffff;
  border: 1px solid #6A3E22;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px; /*arrondir les angles pour différents navigateurs*/
  border-radius: 6px;}         
.clear{
  clear: both;
}

.mon_contenu{
color: #000;
border: 0px solid #000;
padding: 10px;
margin: 10 px;
height: 406px;
width: 650px;}

#mes_contenus, #mes_onglets{
  height: 100%;
  width:100%;}

.contour{
background-image: url("http://img74.xooimage.com/files/7/e/3/fond-5-2b5e384.png");
border: 1px solid #6A3E22; /*contour fin continu et noir*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px; /*arrondir les angles pour différents navigateurs*/
border-radius: 15px;
text-align: left;
padding: 5px;
width: 250px;/*largeur*/
height: 150px;
overflow-y: auto;/*hauteur*/}


.fondaccueil {
background-image:url("http://img67.xooimage.com/files/8/3/d/fond-autre-2-2b5889e.png");
background-repeat:no-repeat;
border: 0px solid #ACA899;
margin: auto;
 width:917px;
 height:428px;}

.contour2{
background-image: url('http://img74.xooimage.com/files/7/e/3/fond-5-2b5e384.png'); /*image de fond*/
border: 1px solid #000; /*contour fin continu et noir*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px; /*arrondir les angles pour différents navigateurs*/
border-radius: 15px;
text-align: left;
padding: 5px;
width: 250px;/*largeur*/
height: 150px;}