Sujets similaires

Bonjour a vous,
Je suis entrain refaire mon Panneau d'accueil de mon forum,
mais je rencontre un problème avec la navigation rapide.
Elle est en ligne et sans le décor que je voudrais.

Voici une capture d'écran :
Probléme avec la forme de ma navigation Pa_bmp10

Probléme avec la forme de ma navigation Pa_bmp10

Je voudrais avoir une navigation de ce genre là.
Suivre la flèche bleu.

MOn Template :

Spoiler:

Code:: {JAVAscript}

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<tr>
   <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>


<tr>
   <td class="row1" rowspan="3" align="center" valign="middle">
   <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}

<div style="height:3px"></div><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"><tr><td class="row1" rowspan="3" align="center" valign="middle"><div class="gensmall"><div>
<div style="margin-top:-8px; background-color: green; -moz-box-shadow: red 0px 1px 1px; -moz-border-radius : 0px 0px 10px 10px;font-size: 5px; line-height: normal;color:white; border:1px solid white;border-bottom:3px solid white; border-top:0px solid white;">..</div>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');">Accueil</span>
<span class="onglet_0 onglet" id="onglet_qui" onmouseover="javascript:change_onglet('qui');">Nouveauté(s)</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onmouseover="javascript:change_onglet('pourquoi');">L'alliance</span>
<span class="onglet_0 onglet" id="onglet_comment" onmouseover="javascript:change_onglet('comment');">Information</span>
</div>
</div>
<br>
<table style="width: 100%; border-collapse:collapse; border:0px ridge #F2371B;">
<tr style="border:0px dotted #5EDAFF;">

   <td style="border:0px groove;class="block">
<tr><td width="38%" >
<span class="navig"><a href="#"><a href="http://lesgendresbeta5.forumactif.org/portal.htm" class="postlink">Portail</a></a></span>
<span class="navig"><a href="#"><a href="http://lesgendresbeta5.forumactif.org/presentations-candidature-c1/" class="postlink">Présentation & Candidature</a></a></span>
<span class="navig"><a href="#"><a href="http://lesgendresbeta5.forumactif.org/taverne-c2/" class="postlink">Taverne</a></a></span>
<span class="navig"><a href="#"><a href="http://lesgendresbeta5.forumactif.org/partie-externe-c6/" class="postlink">Partie Externe</a></a></span>
<span class="navig"><a href="#"><a href="http://lesgendresbeta5.forumactif.org/partie-privee-c4/" class="postlink">Partie Privée</a></a></span>
<span class="navig"><a href="#"><a href="http://lesgendresbeta5.forumactif.org/statistiques-c5/" class="postlink">statistiques</a></a></span>
<span class="navig"><a href="#"><a href="http://lesgendresbeta5.forumactif.org/combat-c7/" class="postlink">Combat</a></a></span>
<span class="navig"><a href="#"><a href="http://lesgendresbeta5.forumactif.org/archives-c3/" class="postlink">Archives</a></a></span>
<span class="navig"><a href="#"><a href="http://login.e-univers.org/" class="postlink" target="_blank">E-univers</a></a></span>
<span class="navig"><a href="#"><a href="http://lesgendres.unispy.org/" class="postlink" target="_blank">Cartographie</a></a></span>
<span class="navig"><a href="#"><a href="http://lesgendresbeta5.forumactif.org/Musique-h2.htm" class="postlink" target="_blank">Playsist</a></a></span>
</td>
</td>

   <td style="border:0px groove;">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un système d'onglet en javascript</title>
<script type="text/javascript">
//
</script>
</head>
<body>

<div class="contenu_onglets">

<div class="contenu_onglet" id="contenu_onglet_quoi">
<h1>Bienvenue dans l'Univers des Gendres</h1>
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<span style="font-size: 11px; line-height: normal"><div style="margin:auto;text-align:center;width:100%">Bienvenue <span class="USERNAME"></span>,
<ul>L'alliance a fête ces 1 an de création, le 26 avril 2010</ul>
<ul>Nous recrutons des membres !</ul>
<ul>On vous invite sur notre nouveau forum =D </ul>
<ul>Cordialement le staff du forum</ul></div></span>
</div>

<div class="contenu_onglet" id="contenu_onglet_qui">
<h1>Pour être au courant de tout </h1>
<div class="block"><div class="news"><div class="scrollbar"><div class="textscroll">
<font color="cyan">Le 6 Mai 2010 :</font><li>Page d'accueil de l'alliance <br>
<br>Salut a vous tous,
<br>J'ai l'honneur de vous invité d'aller visité notre page d'accueil Complètement refaite =D
<br>Une page qui ramènera des Membres j'espère,
<br><a href="http://beta5.e-univers.org/index.php?action=alliance&subaction=" class="postlink">Cliquez Pour la voir =D</a>
</div></div></div></div>
</div>

<div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Administration</h1>
<a href="#" class="infobulle"><img src="http://lesgendresbeta5.forumactif.org/users/1211/19/72/85/avatars/1-40.png"width="60" height="60" class="top"/>
<span>Fondateur & Gendre<p>
<font color="red"><strong>لιβεη</strong></font>
<div><a href="http://lesgendresbeta5.forumactif.org/msg.forum?mode=post&u=1" target="_blank">Lui envoyer un MP</a></div><p>
<div><a href="http://lesgendresbeta5.forumactif.org/profile.forum?mode=viewprofile&u=1" target="_blank">Visiter son profil</a></div></span></a>

<a href="#" class="infobulle"><img src="http://forum.e-univers.org/uploads/av-10381.png"width="60" height="60" class="top"/>
<span>Administrateur <p>
<font color="red"><strong>Şσηις</strong></font>
<div><a href="http://lesgendresbeta5.forumactif.org/msg.forum?mode=post&u=3" target="_blank">Lui envoyer un MP</a></div><p>
<div><a href="http://lesgendresbeta5.forumactif.org/profile.forum?mode=viewprofile&u=3" target="_blank">Visiter son profil</a></div></span></a>

<h2>Alliance</h2>
<a href="#" class="infobulle"><img src="http://lesgendresbeta5.forumactif.org/users/1211/19/72/85/avatars/7-97.jpg"width="60" height="60" class="top"/>
<span>Gendre <p>
<font color="cyan"><strong>Agen Kolar</strong></font>
<div><a href="http://lesgendresbeta5.forumactif.org/msg.forum?mode=post&u=7" target="_blank">Lui envoyer un MP</a></div><p>
<div><a href="http://lesgendresbeta5.forumactif.org/profile.forum?mode=viewprofile&u=7" target="_blank">Visiter son profil</a></div></span></a>

<a href="#" class="infobulle"><img src="http://lesgendresbeta5.forumactif.org/users/1211/19/72/85/avatars/9-64.jpg"width="60" height="60" class="top"/>
<span>Gendre <p>
<font color="cyan"><strong>El Nino</strong></font>
<div><a href="http://lesgendresbeta5.forumactif.org/msg.forum?mode=post&u=9" target="_blank">Lui envoyer un MP</a></div><p>
<div><a href="http://lesgendresbeta5.forumactif.org/profile.forum?mode=viewprofile&u=9" target="_blank">Visiter son profil</a></div></span></a>

<a href="#" class="infobulle"><img src="http://forum.e-univers.org/uploads/av-10381.png"width="60" height="60" class="top"/>
<span>Gendre <p>
<font color="cyan"><strong>Jd06</strong></font>
<div><a href="http://lesgendresbeta5.forumactif.org/msg.forum?mode=post&u=12" target="_blank">Lui envoyer un MP</a></div><p>
<div><a href="http://lesgendresbeta5.forumactif.org/profile.forum?mode=viewprofile&u=12" target="_blank">Visiter son profil</a></div></span></a>

<a href="#" class="infobulle"><img src="http://lesgendresbeta5.forumactif.org/users/1211/19/72/85/avatars/8-37.jpg"width="60" height="60" class="top"/>
<span>Gendre <p>
<font color="cyan"><strong>Roronoa Zorro</strong></font>
<div><a href="http://lesgendresbeta5.forumactif.org/msg.forum?mode=post&u=8" target="_blank">Lui envoyer un MP</a></div><p>
<div><a href="http://lesgendresbeta5.forumactif.org/profile.forum?mode=viewprofile&u=8" target="_blank">Visiter son profil</a></div></span></a>

<a href="#" class="infobulle"><img src="http://lesgendresbeta5.forumactif.org/users/1211/19/72/85/avatars/10-15.png"width="60" height="60" class="top"/>
<span>Gendre <p>
<font color="cyan"><strong>Tony Tony Chopper</strong></font>
<div><a href="http://lesgendresbeta5.forumactif.org/msg.forum?mode=post&u=10" target="_blank">Lui envoyer un MP</a></div><p>
<div><a href="http://lesgendresbeta5.forumactif.org/profile.forum?mode=viewprofile&u=10" target="_blank">Visiter son profil</a></div></span></a>

<a href="#" class="infobulle"><img src="http://forum.e-univers.org/uploads/av-10381.png"width="60" height="60" class="top"/>
<span>Gendre <p>
<font color="cyan"><strong>Vincent</strong></font>
<div><a href="http://lesgendresbeta5.forumactif.org/msg.forum?mode=post&u=" target="_blank">Lui envoyer un MP</a></div><p>
<div><a href="http://lesgendresbeta5.forumactif.org/profile.forum?mode=viewprofile&u=" target="_blank">Visiter son profil</a></div></span></a>

<a href="#" class="infobulle"><img src="http://forum.e-univers.org/uploads/av-10381.png"width="60" height="60" class="top"/>
<span>Gendre <p>
<font color="cyan"><strong>wakka</strong></font>
<div><a href="http://lesgendresbeta5.forumactif.org/msg.forum?mode=post&u=" target="_blank">Lui envoyer un MP</a></div><p>
<div><a href="http://lesgendresbeta5.forumactif.org/profile.forum?mode=viewprofile&u=" target="_blank">Visiter son profil</a></div></span></a>
</div>

<div class="contenu_onglet" id="contenu_onglet_comment">
<h1><strong>Fondateur : </strong><font color="red">Jiben</font></h1>

<br><font color="cyan">Forum optimisé pour Mozilla Firefox.</font><img src="http://sd-1.archive-host.com/membres/images/142586199450897653/LFD/logo-firefox.png" border="0" alt="" /></br>
<br>Nous vous déconseillons les autres navigateurs car ils ne peuvent afficher le forum correctement.</br><br>
<h2><strong>Copyright</strong></h2>
<font color="red"><strong> Copyright</font> "Les Gendres"</strong>, tous droits réservés.</br>
<br>Toute reproduction est strictement interdite.</br><br>
<A HREF="http://www.copyscape.com/plagiarism-detection/"><IMG SRC="http://banners.copyscape.com/images/cs-gr-234x16.gif" ALT="Protected by Copyscape Web Plagiarism Detection" TITLE="Protected by Copyscape Plagiarism Checker - Do not copy content from this page." WIDTH="234" HEIGHT="16" BORDER="0"></A>
</div>

</div>
</div>
<script type="text/javascript">
//
</script>
</body>
</html>

</td>

</tr>
</table>

</table></div>
   </td>
</tr>

</table>



<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
   <td width="100%" valign="top" align="center" class="row1">
      <label><span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" size="10" name="username" /></label>
      <label><span class="genmed">{L_PASSWORD}:</span> <input class="post" type="password" size="10" name="password" /></label>
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />

      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>

   </td>
</tr>
</table>
</form>


{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
   <td width="50%" valign="top">
      
      <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
      
      

<a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
      
      </span>
   </td>
   <td width="50%" align="right">
      <span class="gensmall">
         <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a>

         <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a>

         <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
         
            

<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
            
         
      </span>
   </td>
</tr>
</table>


<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
   <td width="100%" valign="top" align="center" class="row1">
      <span class="genmed">{L_USERNAME}:</span>
      <input class="post" type="text" size="10" name="username"/>
      <span class="genmed">{L_PASSWORD}:</span>
      <input class="post" type="password" size="10" name="password"/>
      {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />

      <span class="gensmall">{L_AUTO_LOGIN}</span>
      <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
   </td>
</tr>
</table>
</form>



<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
   <td class="catHead" colspan="2" height="28"><span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span></td>
</tr>
<tr>
   <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
   <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}

   {TOTAL_USERS}

   {NEWEST_USER}</span></td>
</tr>
<tr>
   <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}

   {RECORD_USERS}



   {LOGGED_IN_USER_LIST}</span></td>
</tr>
{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
<tr>
   <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
</tr>

<tr>
   <td class="row1">
      <span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}

         
         <div id="chatbox_popup"></div>
         <script type="text/javascript">
         //<![CDATA[
         insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
         //]]>
         </script>
         
      </span>
   </td>
</tr>

</table>

{CHATBOX_BOTTOM}
<br clear="all" />

<table border="0" cellspacing="3" cellpadding="0" align="center">
<tr>
   <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
   <td><span class="gensmall">{L_NEW_POSTS}</span></td>
   <td></td>
   <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
   <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
   <td> </td>
   <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
   <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
</tr>
</table>


{AUTO_DST}

Mon Css :

Spoiler:

Code:: .top {
border: 4px double #F7F7F7;
background: none;
-moz-border-radius : 20px 20px 20px 20px;
padding:4px;
}

a.infobulle {
position: relative;
color: white;
text-decoration: none;
border-bottom: 0px white solid;
padding-right:10px;
}

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

}
a.infobulle:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;

white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

top: 5px; /* on positionne notre infobulle */
left: 15px;

background: #295359; /* arrière-plan de l'infobulle */

color: white; /* texte dans l'infobulle */
padding: 3px;

/* bordures de votre infobulle*/
border: 1px dotted black;
border-left: 1px dotted black;
}

.onglet
{ display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
padding-right: 10px;
padding-left: 10px;
font-weight: bold;
-moz-border-radius : 0px 0px 20px 20px;
font-size: 12px;
cursor:pointer;
text-shadow: 3px 3px 2px black;
}

.onglet_0
{ background: transparent;
filter:alpha(opacity=65);
opacity:0.65;
background-color: #1D3C40;
border-bottom:1px inset black;
}

.onglet_1
{ color:#1D3C40;
background-color: #bbbbbb;
border-bottom:1px inset black;
padding-bottom:4px;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
box-shadow: 5px 5px 2px black;
}

.contenu_onglet
{ background: transparent;
filter:alpha(opacity=65);
opacity:0.65;
background-color: #1D3C40;
border:1px inset black;
-moz-border-radius : 10px 10px 10px 10px;
margin-top:-1px;
padding:5px;
display:none;
}

ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}

.main {
background: transparent
filter:alpha(opacity=80);
opacity:0.80;
background-color: #1D3C40;
padding-right: 10px;
font-weight: lighter!important;
-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
text-transform: capitalize;
color : #23aa9c;
font-size: 12px;}

.main:hover{
background-color: #ffffff;
font-weight: lighter!important;
-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
text-transform: capitalize;
color : #1D3C40;
font-size: 12px;}

.navi{
padding-right: 5px;
padding-left: 5px;
-moz-border-radius : 0px 0px 30px 30px;
border-left:3px dotted #DADADA;
border-right:3px dotted#DADADA;
border-bottom: 1px dashed #FFFFFF;
margin-left:2px;
margin-right:2px;
color:#F7F7F7 ;
background-color:#295359;
text-transform: capitalize;
font-size:12px;}

.navi:hover{
padding-right: 5px;
padding-left: 5px;
-moz-border-radius : 0px 0px 30px 30px;
border-left:5px dotted #1D3C40;
border-right:5px dotted#1D3C40;

border-bottom: 1px solid #1D3C40;
margin-left:20px;
margin-right:20px;
color: #295359;
background-color: #F7F7F7;
font-size:12px;}

.complet{
text-align:center;
color:;
}

.complet a{
color:#FFFFFF;
text-decoration:none;
}

.textscroll{
overflow:auto;
width:290px;
height: 90px;
}

.block{
padding-bottom:20px;
}

.titre {
-moz-border-radius : 0px 50px 0px 50px;
color: #F7F7F7;
background-color: #295359;
text-align: center;
font-variant: small-caps;
font-size:18px;
}

.top {
-moz-border-radius : 10px 0px 10px 0px;
border: 1px solid #F7F7F7;
background-color: #295359;
-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
padding:4px;
}

a.imginfo {
position: relative;
color: white;
text-decoration: none;
border-bottom: 0px white solid;
padding-right:10px;
}

a.imginfo span {
display: none;
}

a.imginfo:hover {
background: none;
z-index: 999;
cursor: help;
}

a.imginfo:hover span {
display: inline;
position: absolute;
white-space: nowrap;
top: 10px;
left: 20px;
background: #295359;
color: white;
padding: 3px;
border: 1px inset white;
-moz-border-radius:10px;
}

.forumline{background-color: transparent}

td.row1,td.row3.over:hover {
filter:alpha(opacity=80);
opacity:0.80;}

td.row2,td.row1.over:hover {
filter:alpha(opacity=80);
opacity:0.80;}

td.row3{
filter:alpha(opacity=80);
opacity:0.80;}

Merci d'avance de votre aide,
cordialement JIben

Bonjour.
Tu as mis "navi" dans le CSS au lieu de "navig"

Bonjour,

Votre problème est-il résolu ?

Bonjour,

Oui mon problème est résolu.
Je remercie Kimy pour son aide.

Merci a vous.

Bonne journée.

Cordialement Jiben

Probléme avec la forme de ma navigation

Probléme avec la forme de ma navigation

Sujets similaires

Sujets similaires

Partenaires Or