Arrondisement de coin

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Arrondisement de coin

Message par Kaela Naoki le Jeu 7 Juil 2011 - 8:02

Bonjour , J'ai enfin réussie a faire un tableau en onglet mais j'aimerais faire en sorte que les coins soit arrondie .

Cordialement .


Dernière édition par Kaela Naoki le Jeu 7 Juil 2011 - 8:40, édité 1 fois

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://otoko-gakuen.forum-canada.com/
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondisement de coin

Message par Invité le Jeu 7 Juil 2011 - 8:08

Bonjour,

Pour qu'un membre puisse vous aider à arrondir les coins de votre tableau, il aura besoin du code de votre tableau et des onglets ainsi que du CSS associé à ce tableau.

Cordialement

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondisement de coin

Message par Kaela Naoki le Jeu 7 Juil 2011 - 8:12

D'Accord , Le code du tableau est

Code:
    <script src="http://sd-2.archive-host.com/membres/up/86411517957321821/onglet.js"></script><div id="mes_onglets">
        <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Accueil</li>
            <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Notre Staff</li>
            <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
            <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
            <div class="clear"><div id="mes_contenus">
        <div id="co_1" class="mon_contenu"><div style="text-align: right;"><span style="font-weight: bold;">Bienvenue Sur Midori RPG </span><br></div><div style="text-align: center;"><br style="font-family: Palatino Linotype;"></div><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td style="font-family: Palatino Linotype; font-weight: bold; text-align: center;"><font size="4">|~| Bienvenue Sur Midori RPG |~|<br></font></td>
<td style="font-family: Palatino Linotype; text-align: center;"><font style="font-weight: bold;" size="4">|~| Avertissement</font><font size="4"><span style="font-weight: bold;"> |~|</span></font><br><br></td>
</tr>
<tr>
<td style="font-family: Trebuchet MS;"><br><br>

<table style="BORDER-BOTTOM: rgb(2000,00,0) 3px solid; BORDER-LEFT: rgb(2000,00,0) 3px solid; PADDING-BOTTOM: 5px; MARGIN: auto; PADDING-LEFT: 15px; WIDTH: 300px; PADDING-RIGHT: 20px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP: rgb(2000,00,0) 3px solid; BORDER-RIGHT: rgb(2000,00,0) 3px solid; PADDING-TOP: 0px; -moz-border-radius: 15px 15px 15px 15px"><tbody><tr><td align="left"><span style="font-size: 18px; line-height: normal"></span> <br>Tout premièrement un grand bienvenue sur midori et un adorable séjours pour toute personne qui souhaiterait se joindre à nous. Pour les invitées qui désirent seulement faire une demande de partenariat ou commentée de message dans la bibliothèque libre à vous et nous serons heureux de vous rencontrez dans les sections appropriée. Si vous avez des questions ou quoi que ce soit d'autres vous pouvez nous rejoindre via le formulaire de contact que vous trouvez en bas de cette page.<br></td><td align="left">
</td></tr></tbody></table><br></td><td style="font-family: Trebuchet MS;">

<table style="BORDER-BOTTOM: rgb(2000,00,0) 3px solid; BORDER-LEFT: rgb(2000,00,0) 3px solid; PADDING-BOTTOM: 5px; MARGIN: auto; PADDING-LEFT: 15px; WIDTH: 300px; PADDING-RIGHT: 20px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP: rgb(2000,00,0) 3px solid; BORDER-RIGHT: rgb(2000,00,0) 3px solid; PADDING-TOP: 0px; -moz-border-radius: 15px 15px 15px 15px"><tbody><tr><td align="left"><span style="font-size: 18px; line-height: normal"></span><font face="Trebuchet MS">
</font>
<br><span><marquee behavior="scroll" direction="up" scrollamount="1" height="60">Ce forum est réservé à des invités et des membres consentant d'un minimum 13 ans, car il contient des <span class="spellmod" title="Faute d'orthographe - suggestions : RPC, Re, op, ra, ri, ru, ré">rp</span>
 diverse pouvant contenir des Hentai, Yuri, Yaoi ou même encore des
scènes de violence. Pour toute personne refusant de prendre en compte
cet avertissement sachez que le staff ne sera en aucun cas responsable
de vos plaintes ou d'autre chose du même genre.</marquee></span></td><td align="left">
</td></tr></tbody></table><br><br><br></td>
</tr>
<tr>
<td style="font-family: Palatino Linotype; font-weight: bold; text-align: center;"><font size="4">|~| Contexte |~|<br><br></font></td>
<td style="text-align: center;"><font size="4"><span style="font-family: Palatino Linotype; font-weight: bold;">|~| Index</span></font><span style="font-weight: bold;"> <font size="4"><span style="font-family: Palatino Linotype;">|~|</span></font></span><br></td>
</tr>
<tr>
<td style="font-family: Trebuchet MS;">

<table style="BORDER-BOTTOM: rgb(2000,00,0) 3px solid; BORDER-LEFT: rgb(2000,00,0) 3px solid; PADDING-BOTTOM: 5px; MARGIN: auto; PADDING-LEFT: 15px; WIDTH: 300px; PADDING-RIGHT: 20px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP: rgb(2000,00,0) 3px solid; BORDER-RIGHT: rgb(2000,00,0) 3px solid; PADDING-TOP: 0px; -moz-border-radius: 15px 15px 15px 15px"><tbody><tr><td align="left"> Il y'a des millions d'années de cela, tandis que les années d'un monde
sans rédempteur s'écoulaient lentement dans le vide, la terre hurlait
sans cesse sa peine de ne pouvoir être sauvée. C’est alors que dans un
amas de flammes, naquit une enfant aux pouvoirs extraordinaires.
Celui-ci avait été envoyé par les dieux pour sauver le monde, qui se
fanait peu à peu sous l'emprise des humains qui faisaient approcher
l’échéance de la fin de leur race. L’enfant vivait au sein d'une famille
 noble de haute importance, elle se démarqua très vite par sa
différence, elle qui n'était pas humaine et dont les yeux brillait comme... --&gt; <a href="http://midori.rpg-guild.org/t201-notre-contexte">Lire la suite</a></td><td align="left">
</td></tr></tbody></table><br></td>
<td style="text-align: center;"><a href="http://midori.rpg-guild.org/t198-midori-reglement-2011">

<table style="border-width: 3px; border-style: solid; border-color: rgb(255, 0, 0); padding: 0px 20px 5px 15px; margin: auto; width: 300px; background: none repeat scroll 0% 0% transparent; border-radius: 15px 15px 15px 15px;"><tbody><tr><td align="left"><span style="font-size: 18px; line-height: normal"></span><a>~Notre Contexte~<br></a></td><td style="vertical-align: top;"><a href="http://midori.rpg-guild.org/t201-notre-contexte">~Notre Contexte</a></td></tr></tbody></table></a><br><a href="http://midori.rpg-guild.org/t198-midori-reglement-2011"><table style="border-width: 3px; border-style: solid; border-color: rgb(255, 0, 0); padding: 0px 20px 5px 15px; margin: auto; width: 300px; background: none repeat scroll 0% 0% transparent; border-radius: 15px 15px 15px 15px;"><tbody><tr><td align="left">~Nos Règlement~<br></td><td style="vertical-align: top;">~Nos Règlement~<br></td></tr></tbody></table></a><br><a href="http://midori.rpg-guild.org/t198-midori-reglement-2011"><table style="border-width: 3px; border-style: solid; border-color: rgb(255, 0, 0); padding: 0px 20px 5px 15px; margin: auto; width: 300px; background: none repeat scroll 0% 0% transparent; border-radius: 15px 15px 15px 15px;"><tbody><tr><td style="vertical-align: top;"><a href="http://midori.rpg-guild.org/t187-nouvelle-fiche-de-presentation">~Fiche de Présentation~<br></a></td><td style="vertical-align: top;"><a href="http://midori.rpg-guild.org/t187-nouvelle-fiche-de-presentation">~Fiche de Présentation~<br></a></td></tr></tbody></table></a><br><a href="http://midori.rpg-guild.org/t198-midori-reglement-2011"><table style="border-width: 3px; border-style: solid; border-color: rgb(255, 0, 0); padding: 0px 20px 5px 15px; margin: auto; width: 300px; background: none repeat scroll 0% 0% transparent; border-radius: 15px 15px 15px 15px;"><tbody><tr><td align="left"><a href="http://midori.rpg-guild.org/t128-fiche-de-relation">~ Fiche de lien ~<br></a></td><td style="vertical-align: top;"><a href="http://midori.rpg-guild.org/t128-fiche-de-relation">~ Fiche de lien ~</a></td></tr></tbody></table></a><br><a href="http://midori.rpg-guild.org/t198-midori-reglement-2011"><table style="BORDER-BOTTOM: rgb(2000,00,0) 3px solid; BORDER-LEFT: rgb(2000,00,0) 3px solid; PADDING-BOTTOM: 5px; MARGIN: auto; PADDING-LEFT: 15px; WIDTH: 300px; PADDING-RIGHT: 20px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-TOP: rgb(2000,00,0) 3px solid; BORDER-RIGHT: rgb(2000,00,0) 3px solid; PADDING-TOP: 0px; -moz-border-radius: 15px 15px 15px 15px"><tbody><tr><td style="vertical-align: top;"><a href="http://midori.rpg-guild.org/f80-partenariat">~Partenariat~<br></a></td><td style="vertical-align: top;"><a href="http://midori.rpg-guild.org/f80-partenariat">~Partenariat~<br></a></td></tr></tbody></table></a><br></td>
</tr>
</tbody></table><br style="font-family: Palatino Linotype;"><br style="font-family: Palatino Linotype;"><br><br><br><table style="position: fixed; bottom: 50px; left: 0px;background-color: #transparent;z-index:10000;"><tbody><tr><td><iframe src="/chatbox/chatbox.forum?page=front&amp;" id="chatboxpop" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onclick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"></td></tr></tbody></table></div>
        <div id="co_2" class="mon_contenu" style="display: none;"> <table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td><div class="infobulle"><img src="http://i44.servimg.com/u/f44/16/14/68/00/rei_111.png">
    <span>REI YUJIRO <img src="http://i21.servimg.com/u/f21/15/91/89/66/rei11010.png" border="0" alt="" /> L'adorable fondatrice au très mauvais caractère qui a de nombreux soufre douleur . </span></div><br></td>
<td><div class="infobulle"><img src="http://i44.servimg.com/u/f44/16/14/68/00/kae_111.gif">
    <span>KAELA NAOKI <img src=" http://i28.servimg.com/u/f28/15/68/99/30/dystop10.gif " border="0" alt="" /> Petite Co-fondatrice accros au Sucette & folle au calin qui prend plaisir a dévalisé les armoire a Bonbon & d'apparaitre sans crier gare</span></div><br></td>
<td>    <div class="infobulle"><img src="http://i44.servimg.com/u/f44/16/14/68/00/miku_111.gif">
    <span>MIKU NATSUNE <img src=" http://i28.servimg.com/u/f28/15/48/99/40/miku10.png " border="0" alt="" /> Administratrice en charde de plusieurs traveau écrie mais surtout bras droit des fondatrices :) </span></div> <br></td>
<td>    <div class="infobulle"><img src="http://i44.servimg.com/u/f44/16/14/68/00/raikoh11.gif">
    <span>RAIKOH NADANSHY <img src=" http://i24.servimg.com/u/f24/16/14/68/00/raikoh10.jpg " border="0" alt="" /> Modérateur à la spécialité de Correcteur du forum ainsi que propriétaire de l'amoir a sucette de Kaela </span></div><br></td>
<td>    <div class="infobulle"><img src="http://i44.servimg.com/u/f44/16/14/68/00/111110.gif">
    <span>STAFF INCONNUE <img src=" http://i44.servimg.com/u/f44/16/14/68/00/qui-es11.jpg" border="0" alt="" /> Membre du Staff rechercher </span></div><br></td>

<td> <div class="infobulle"><img src="http://i44.servimg.com/u/f44/16/14/68/00/111110.gif">
    <span>STAFF INCONNUE <img src=" http://i44.servimg.com/u/f44/16/14/68/00/qui-es11.jpg" border="0" alt="" /> Membre du Staff rechercher </span></div><br></td>xxx
</tr> aaa
</tbody></table><br><br><br><br><br><br><table style="position: fixed; bottom: 50px; left: 0px;background-color: #transparent;z-index:10000;"><tbody><tr><td><iframe src="/chatbox/chatbox.forum?page=front&amp;" id="chatboxpop" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onclick="document.getElementById('chatboxpop').style.display=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'block':'none';this.src=(this.src=='http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png')?'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png':'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png';"></td></tr></tbody></table> </div>
        <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
        <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
    </div></div></ul></div>


                <div id="co_3" class="mon_contenu" style="display: none;">
        <br>  <a href="twilight-zone.rpg-guild.org"><img alt="http://th417.photobucket.com/albums/pp255/xxbella0913xx/Twilight%20Movie%20Pics/th_22257989976p179504.gif" src="http://th417.photobucket.com/albums/pp255/xxbella0913xx/Twilight%20Movie%20Pics/th_22257989976p179504.gif"></a>
                </div>
         
                <div id="co_4" class="mon_contenu" style="display: none;">
        <br><table width="100%" border="1" cellpadding="1" cellspacing="1">
<tbody><tr>
<td style="font-family: Palatino Linotype;"><font size="5">Events &amp; Nouveautée<br></font></td>
<td style="font-family: Palatino Linotype;"><font size="5">Crédits<br></font></td>
</tr>
<tr>
<td><span style="font-family: Tahoma;">Ré Ouverture officielle du Forum</span> <br></td>
<td>F<span style="font-family: Tahoma;">orum By @Kaela Naoki &amp; @Katsuya Kaito</span><br style="font-family: Tahoma;"><span style="font-family: Tahoma;">Graphisme by @ Kaela Naoki</span><br style="font-family: Tahoma;"><span style="font-family: Tahoma;">Coding by Kaela Naoki </span><br style="font-family: Tahoma;"><span style="font-family: Tahoma;">Tout droit réservée a l'équipe du Staff.</span> <br></td>
</tr>
</tbody></table>
                </div>
     
        </div></ul></div>


le code du css

Code:
  .lock  {
      position: relative;
      cursor: pointer;
    }
    .lock .lock-hidden {
      /* center */
      display: none;
      position: absolute;
      padding-left : 1px;
      padding-right : 1px;
      padding-top  : 1px;
      padding-bottom : 1px;
        top: 45px;
        left: 0px;
      /* style du bloc qui apparait */
      border: 2px outset #BECCCC;
      border-radius: 5px;
      background-color: transparent;
      -moz-border-radius: 5px;
      text-align: center;
        visibility: visible;
    }
    .lock:hover .lock-hidden {
      display: block;
    }

 ul, li{
      list-style: none;
    }
    .mon_onglet{
      float: left;
      padding: 2px 10px;
      margin-right: 5px;
      color: #000;
      background: #ffffff;
      border: 1px solid #ff0000;
      cursor: pointer;
      margin-bottom: -1px;
    }
    .mon_onglet:hover{
      background: #b8efa1;
    }         
    .mon_onglet_selected{
      float: left;
      padding: 2px 10px;
      margin-right: 5px;
      color: #000;
      background: #ffffff;
      border-top: 1px solid #ff0000;
      border-right: 1px solid #ff0000;
      border-left: 1px solid #ff0000;
      border-bottom: 1px solid #ffffff;
      cursor: pointer;
      margin-bottom: -1px;
    }           
    .clear{
      clear: both;
    }
    .mon_contenu{
      color: #000;
      background: #ffffff;
      border: 1px solid #ff0000;
      padding: 10px;
            margin: -1px;         
    }
    #mes_contenus, #mes_onglets{
      width: 700px;
    }

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://otoko-gakuen.forum-canada.com/
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondisement de coin

Message par Invité le Jeu 7 Juil 2011 - 8:30

Re,

Essayez de remplacer votre CSS par celui-ci :

Code:
      .lock  {
          position: relative;
          cursor: pointer;
        }
        .lock .lock-hidden {
          /* center */
          display: none;
          position: absolute;
          padding-left : 1px;
          padding-right : 1px;
          padding-top  : 1px;
          padding-bottom : 1px;
            top: 45px;
            left: 0px;
          /* style du bloc qui apparait */
          border: 2px outset #BECCCC;
          border-radius: 5px;
          background-color: transparent;
          -moz-border-radius: 5px;
          text-align: center;
            visibility: visible;
        }
        .lock:hover .lock-hidden {
          display: block;
        }

    ul, li{
          list-style: none;
        }
        .mon_onglet{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #ffffff;
          border: 1px solid #ff0000;
  -moz-border-radius: 5px;
          cursor: pointer;
          margin-bottom: -1px;
        }
        .mon_onglet:hover{
          background: #b8efa1;
 -moz-border-radius: 5px;;
        }       
   
    .mon_onglet_selected{
          float: left;
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #ffffff;
          border-top: 1px solid #ff0000;
          border-right: 1px solid #ff0000;
          border-left: 1px solid #ff0000;
          border-bottom: 1px solid #ffffff;
  -moz-border-radius: 5px;
          cursor: pointer;
          margin-bottom: -1px;
        }         
        .clear{
          clear: both;
        }
        .mon_contenu{
          color: #000;
          background: #ffffff;
          border: 1px solid #ff0000;
  -moz-border-radius: 5px;
          padding: 10px;
                margin: -1px;       
        }
        #mes_contenus, #mes_onglets{
          width: 700px;
        }

Cordialement

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Arrondisement de coin

Message par Kaela Naoki le Jeu 7 Juil 2011 - 8:39

ça marche parfaitement Smile
Merci beaucoup

Cordialement

Kaela Naoki
***

Féminin
Messages : 140
Inscrit(e) le : 03/03/2011

http://otoko-gakuen.forum-canada.com/
Kaela Naoki a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum