Hey !

Je peux tenter je pense, pas certaine d'y arriver, mais j'aime les défis *-*

Par contre sur ton schéma tu as plusieurs trais dans le bloc qui apparait au clic, et dans ta description du parles d'image ... donc il y a une illustration puis les liens qui suivent ? Ou bien une image pour chaque lien ? Il en faut combien dans chaque cadre ? Concrètement, si je veux intégrer ta barre de navigation, ce serait dans quel code ?

J'ai pas bien compris quels liens tu mets où en fait =3

Hey, merci de cette réponse rapide !

Enfaite, ce serait un bloc ou je peu rajouter des images rectangle de la même taille renvoyant à un lien quand on clique dessus.

Concernant le nombre, il varie celons les rond, te faut il un nombre exact ?
Pour ce qui est de la barre de navigation, j'aimerais que tout soit dans un rond , dans un des bloc et que bien sur je puisse mettre des images rectangle ...

C'est un peu confus, je ne sais pas comment bien l'expliquer, désolé ^^'

Donc toute la navigation dans un seul bloc, c'est bien ça ? Il me faudrait aussi la taille des images s'il te plait, et je m'y mets =3

D'accord !

Pour les rond, 100X100 en carré, je ferais l'image de rond en transparent ect, pour les rectangles 175x35 serait parfait. Pour ce qui est de la barre de navigation, apres avoir réfléchis, pourrais-je les mettre dans des bloc différents ?

Oui, il faut simplement me dire dans lesquels ^^

Je ne pourrais pas l'organiser moi même ? ce serait plus simple .. Ayant des bases en codage si tu m'explique je pense être en mesure de les placer moi même.

Je crois que c'est bon : www

Mhhmm, juste un truc concernant le cadre en noir, est-ce possible de le supprimer en haut et en bas, et d'en faire un vraiment léger sur les cotés?

Il s'agissait du fond. C'est modifié.

c'est parfait !

Donc voici le CSS :

Code:

/* --------------------------------- NAVIGATION --------------------------------- */

/* Contient les cercles */
.bloc_onglet {
  position: fixed;
  top: 5em;
}

/* Triangle noir */
.angle {
  border: 0 solid transparent;
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-right: 11px solid black;
  position: relative;
  top: -2.5em;
  left: 0.2em;
}

/* Info-bulles */
nav.info{
  z-index: 24;
  text-decoration: none;
  position: relative;
}
 
nav.info:hover{
  z-index: 26;
}
 
nav.info span{
  display: none
}
 
nav.info:hover span{
  display: block;
  position: absolute;
  top: 0.5em;
  left: 11em;
  height: 170px;
  background: none;
  text-align: center;
  font-weight: none;
  padding: 5px;
}

/* --------------------------------- FIN NAVIGATION --------------------------------- */

Dans le template overall_header, tu mets ceci tout en haut :

Code:

<div class="bloc_onglet">
  <nav class="info"><img src="http://www.dreamwidth.org/userpic/432854/331767" style="border-radius: 100%; padding: 10px;" /><span><table><tr><td><div class="angle"></div></td><td style="border-left: 1px solid #000000; border-right: 1px solid #000000; width: 185px; height: 140px; overflow: auto;"><center><a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a></center></td></tr></table></span></nav>
  <nav class="info"><img src="http://i908.photobucket.com/albums/ac285/YoungEarlPhantomhive/Kuroshitsuji%20Icons/CielSebastian2.png" style="border-radius: 100%; padding: 10px;" /><span><table><tr><td><div class="angle"></div></td><td style="border-left: 1px solid #000000; border-right: 1px solid #000000; width: 185px; height: 140px; overflow: auto;"><center><a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a></center></td></tr></table></span></nav>
  <nav class="info"><img src="http://fc03.deviantart.net/fs70/f/2011/073/a/2/naruto_uzumaki_icon_by_meteora94-d3bn8in.png" style="border-radius: 100%; padding: 10px;" /><span><table><tr><td><div class="angle"></div></td><td style="border-left: 1px solid #000000; border-right: 1px solid #000000; width: 185px; height: 140px; overflow: auto;"><center><a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a></center></td></tr></table></span></nav>
  <nav class="info"><img src="http://i671.photobucket.com/albums/vv76/lostinlabyrinths/apr01/fmafa25_lavaliere.png" style="border-radius: 100%; padding: 10px;" /><span><table><tr><td><div class="angle"></div></td><td style="border-left: 1px solid #000000; border-right: 1px solid #000000; width: 185px; height: 140px; overflow: auto;"><center><a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a></center></td></tr></table></span></nav>
  <nav class="info"><img src="http://img-cache.cdn.gaiaonline.com/b1a39fb45e14d686b5100316b6040a60/http://i1181.photobucket.com/albums/x438/crashLANDINGx/MISCELLANEOUS/BreakAvatar.png" style="border-radius: 100%; padding: 10px;" /><span><table><tr><td><div class="angle"></div></td><td style="border-left: 1px solid #000000; border-right: 1px solid #000000; width: 185px; height: 140px; overflow: auto;"><center><a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a><br />
    <a href="#"><img src="http://i39.servimg.com/u/f39/18/43/33/39/55610.png" /></a></center></td></tr></table></span></nav>
</div>

Toujours dans le même template, tu vires ceci :

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>

Et pour les liens de navigation, dans l'ordre tu as l'accueil, la faq, rechercher, membres, groupes, profil, messagerie, connexion, déconnexion et s'inscrire.

Code:

<a href="ADRESSE FORUM"><img src="TON IMAGE" /></a>
<a href="ADRESSE FORUM/faq"><img src="TON IMAGE" /></a>
<a href="ADRESSE FORUM/search"><img src="TON IMAGE" /></a>
<a href="ADRESSE FORUM/memberlist"><img src="TON IMAGE" /></a>
<a href="ADRESSE FORUM/groups"><img src="TON IMAGE" /></a>
<a href="ADRESSE FORUM/profile?mode=editprofile"><img src="TON IMAGE" /></a>
<a href="ADRESSE FORUM/privmsg?folder=inbox"><img src="TON IMAGE" /></a>
<a href="ADRESSE FORUM/login"><img src="TON IMAGE" /></a>
<a href="ADRESSE FORUM/login?logout"><img src="TON IMAGE" /></a>
<a href="ADRESSE FORUM/register"><img src="TON IMAGE" /></a>

impec, si j'ai un problème je reviens vers toi, est-ce possible de ne pas cloturer pour le moment ? Je viendrais reposter une fois que ce sera bon. ^^'

Désolé du double post, j'ais une question ^^" comment puis'je change la couleur du cadre et du triangle noir ? Merci !

Pour le triangle, c'est ici :

Code:

/* Triangle noir */
.angle {
  border: 0 solid transparent;
  border-top-width: 10px;
  border-bottom-width: 10px;
  border-right: 11px solid black;
  position: relative;
  top: -2.5em;
  left: 0.2em;
}

Le :

Code:

  border-right: 11px solid black;

Il me semble. Et pour les bordures dans le template :

Code:

<td style="border-left: 1px solid #000000; border-right: 1px solid #000000;

Impec !
Maintenant j'ai un peu plus compliqué ^^' Est-ce possible de supprimer un des bloc (donc garder juste le rond,) et mettre la CB à la place ?

Désolé de t'en demander tant ..

Aussi, est-ce possible q'une fois cliquer se soit permanent et non juste un survol ?

Il n'était pas question de ça au départ ... non désolée, je suis incapable de placer la chatbox dans un des blocs, j'ai tenté mais ça ne donne rien. De même pour les info-bulles au clic, j'ai bien trouvé ce script :

Code:

<script type="text/javascript">
function hide(that) { that.style.display = "none"; }
function show(that) { that.style.display = "block"; }

function cliquer(that)
{
 var node = that.querySelector("span");

 if (node.style.display == "none") show(node);
 else hide(node);
}

function info()
{
 var node = document.querySelectorAll(".info");
 
 for (var i=0; i<node.length; i++)
 {
 hide(node[ i ].querySelector("span"));

 node[ i ].onclick = function () { cliquer(this); };
 }
}

window.onload = function ()
{
 info();
}
</script>

Mais il déplace le bloc qui apparait donc ... si tu y tiens vraiment tu trouveras peut-être de l'aide ici, mais ça dépasse mes compétences =/

Pas de soucis ! je te remercie, c'est déjà énorme !

Vraiment désolée =/
Bonne continuation ^^