Réduire la taille des cadres des onglets

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

Résolu Réduire la taille des cadres des onglets

Message par Riina le Dim 14 Nov 2010 - 20:14

Bonsoir !

Deux sujets en une soirée, je n'ai pas pensée à poser cette question sur mon premier topic. Embarassed
(qui est d'ailleurs résolu grâce à Anzu : merci à elle !Very Happy)

Je souhaiterais réduire la taille des cadres des contenus de mes onglets. Petit bémol, j'utilise le code "display: inline;" pour que les onglets soit parfaitement centrés. Les contenus prennent donc automatiquement toute la longueur de la page d'accueil. Est-il possible de les réduire tout en gardant tous cela centré ?

Vous verrez sur mon forum pour tester les codes (http://essaiundertown.forumgratuit.org/forum.htm) que ce qu'il faudrait réduire, c'est la taille des cadres "contenue 1, contenue 2, etc."

Voici les codes si besoin :

PA :

Spoiler:
Code:
<table width="800px" height="560px" style="background-image: url('http://i63.servimg.com/u/f63/15/43/68/94/sans_t10.jpg'); padding-top: 200px;" valign="top"><tr><td valign="top"><br><div style="margin:auto;text-align:center;width:100%">

<script src="http://sd-g1.archive-host.com/membres/up/b2227501fb33494948c5d8f435ac3728a3111eeb/essai.js"></script>

        <div id="mes_onglets">
  <ul>
      <li id="o_1" class="mon_onglet" onmouseover="changeOnglet(this);">Contexte & Accueil</li>
      <li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Le guide du parfait petit survivant</li>
      <li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Mise en quarantaine</li>
<br><br>
<li id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Nos ravitaillements
</li>
                <li id="o_5" class="mon_onglet" onmouseover="changeOnglet(this);">Le staff se présente</li>
      <li id="o_6" class="mon_onglet" onmouseover="changeOnglet(this);">Les événements</li>
      <li id="o_7" class="mon_onglet" onmouseover="changeOnglet(this);">Nos partenaires & Top-sites</li>
  </ul>


<br><br>


</div><div id="mes_contenus">
  <div id="co_1" class="mon_contenu">Contenu 1</div>
  <div id="co_2" class="mon_contenu" style="display: none;"><table border=0><tr><td align="left"><ul><img src="http://i66.servimg.com/u/f66/15/86/08/03/ojiuyt13.jpg" border="0" alt="" /></ul></td><td align="left"><ul><span style="font-size: 10px; line-height: normal"><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><br> <div style="border: none ; overflow: auto; width: 400px; height: 90px; -moz-border-radius-topleft: none; -moz-border-radius-topright: none; -moz-border-radius-bottomright: none; -moz-border-radius-bottomleft: none; margin-top: 0px; padding-left: 10px; padding-right: 5px;"><div align="justify">LE GUIDE DU PARFAIT PETIT SURVIVANT<br>(En 8 leçons)
<br>_____________________</br></div>

<br><div style="margin:auto;text-align:justify;width:100%">EN COURS.
</div></span></ul></td></tr></table></font></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 id="co_5" class="mon_contenu" style="display: none;">Mon contenu 5</div>
  <div id="co_6" class="mon_contenu" style="display: none;">Mon contenu 6</div>
        <div id="co_7" class="mon_contenu" style="display: none;">Mon contenu 7</div>
</div> </td></tr></table>



CSS :
Spoiler:
Code:
*{
   margin: 0px;
   padding: 0px;
   font-family: comic sans MS, Arial, Helvetica, sans-serif;
   font-size: 11px;
       
}

body
{
   width: 600px;
   margin: 10px auto;

}

a
{
   text-decoration: none;
   color: #fff;

}

ul, li
{
   list-style: none;

}

.mon_onglet
{
   display : inline;
   padding: 2px 10px;
   margin-right: 5px;
   color: #333;
   background: #b8efa1;
   border: 1px solid #;
   cursor: pointer;
   margin-bottom: -1px;


      -moz-border-radius-topleft: 8px;
      -moz-border-radius-topright: 8px;
      -webkit-border-top-right-radius: 8px;
      -webkit-border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;

      -moz-border-radius-bottomleft: 8px;
      -moz-border-radius-bottomright: 8px;
      -webkit-border-bottom-right-radius: 8px;
      -webkit-border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px;
}
   
.mon_onglet:hover
{
   background: #0D090F;

}      
      
.mon_onglet_selected
{
   display : inline;
   padding: 2px 10px;
   margin-right: 5px;
   color: #333;
   background: #;
   border-top: 1px solid #;
   border-right: 1px solid #;
   border-left: 1px solid #;   
   border-bottom: 1px solid #;   
   cursor: pointer;   
   margin-bottom: -1px;
        background-position: top center;


      -moz-border-radius-topleft: 8px;
      -moz-border-radius-topright: 8px;
      -webkit-border-top-right-radius: 8px;
      -webkit-border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;

      -moz-border-radius-bottomleft: 8px;
      -moz-border-radius-bottomright: 8px;
      -webkit-border-bottom-right-radius: 8px;
      -webkit-border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px;   

}
               

.clear
{
   clear: both;

}


.mon_contenu
{
   color: #666;
   border: 1px solid #0D090F;
        background: #0D090F;
   padding: 10px;   


      -moz-border-radius-topleft: 8px;
      -moz-border-radius-topright: 8px;
      -webkit-border-top-right-radius: 8px;
      -webkit-border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;

      -moz-border-radius-bottomleft: 8px;
      -moz-border-radius-bottomright: 8px;
      -webkit-border-bottom-right-radius: 8px;
      -webkit-border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px;   

}

#mes_contenus
{
  width: 200px;
  display: inline;
 
}

 #mes_onglets
{
  width:100%;

}



Merci d'avance à ceux qui pourront m'offrir leur aide précieuse !

Riina
*

Messages : 41
Inscrit(e) le : 01/06/2010

http://undertown-rpg.forumactif.org
Riina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réduire la taille des cadres des onglets

Message par Anzu le Dim 14 Nov 2010 - 20:18

Code:
.mon_onglet_selected
{
  display : inline;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #;
  border-top: 1px solid #;
  border-right: 1px solid #;
  border-left: 1px solid #; 
  border-bottom: 1px solid #; 
  cursor: pointer; 
  margin-bottom: -1px;
        background-position: top center;


      -moz-border-radius-topleft: 8px;
      -moz-border-radius-topright: 8px;
      -webkit-border-top-right-radius: 8px;
      -webkit-border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;

      -moz-border-radius-bottomleft: 8px;
      -moz-border-radius-bottomright: 8px;
      -webkit-border-bottom-right-radius: 8px;
      -webkit-border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px; 

}


.mon_onglet
{
  display : inline;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #b8efa1;
  border: 1px solid #;
  cursor: pointer;
  margin-bottom: -1px;


      -moz-border-radius-topleft: 8px;
      -moz-border-radius-topright: 8px;
      -webkit-border-top-right-radius: 8px;
      -webkit-border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;

      -moz-border-radius-bottomleft: 8px;
      -moz-border-radius-bottomright: 8px;
      -webkit-border-bottom-right-radius: 8px;
      -webkit-border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px;
}

Dans les deux, rajoutez

Code:
font-size: 10px;
10 ou moins comme vous voulez.

En fait, la taille de la cellule dépend de son contenu. ^^

Cordialement.

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réduire la taille des cadres des onglets

Message par Riina le Dim 14 Nov 2010 - 20:46

Excusez-moi, j'ai dû mal m'exprimer car ce n'était pas la taille des onglets que je souhaitais réduire. Embarassed

Ce sont les cadres juste en dessous lorsque nous cliquons sur les onglets, soit ceci, encadré en rouge :

Spoiler:

Juste réduire la longueur du cadre pour qu'il ne touche pas les deux côtés de la page d'accueil me serait suffisante. Smile

Riina
*

Messages : 41
Inscrit(e) le : 01/06/2010

http://undertown-rpg.forumactif.org
Riina a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réduire la taille des cadres des onglets

Message par Anzu le Dim 14 Nov 2010 - 21:07

C'est moi qui avais mal compris > <

Dans la CSS, rajoutez ceci: (à vous de modifier par la suite)

Code:
width: 400px;

Dans .mon_contenu

Et pour la page d'accueil:
Code:

<table width="800px" height="560px" style="background-image: url('http://i63.servimg.com/u/f63/15/43/68/94/sans_t10.jpg'); padding-top: 200px;" valign="top"><tr><td valign="top"><br><div style="margin:auto;text-align:center;width:100%">

<script src="http://sd-g1.archive-host.com/membres/up/b2227501fb33494948c5d8f435ac3728a3111eeb/essai.js"></script>

        <div id="mes_onglets">
  <ul>
      <li id="o_1" class="mon_onglet" onmouseover="changeOnglet(this);">Contexte & Accueil</li>
      <li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Le guide du parfait petit survivant</li>
      <li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Mise en quarantaine</li> 
<br><br> 
<li id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Nos ravitaillements
</li>
                <li id="o_5" class="mon_onglet" onmouseover="changeOnglet(this);">Le staff se présente</li>
      <li id="o_6" class="mon_onglet" onmouseover="changeOnglet(this);">Les événements</li>
      <li id="o_7" class="mon_onglet" onmouseover="changeOnglet(this);">Nos partenaires & Top-sites</li>
  </ul>


<br><br>


</div><div id="mes_contenus">
  <center><div id="co_1" class="mon_contenu">Contenu 1</div>
  <div id="co_2" class="mon_contenu" style="display: none;"><table border=0><tr><td align="left"><ul><img src="http://i66.servimg.com/u/f66/15/86/08/03/ojiuyt13.jpg" border="0" alt="" /></ul></td><td align="left"><ul><span style="font-size: 10px; line-height: normal"><td class="row3" colspan="1" rowspan="1" align="center"><span class="postbody"><br> <div style="border: none ; overflow: auto; width: 400px; height: 90px; -moz-border-radius-topleft: none; -moz-border-radius-topright: none; -moz-border-radius-bottomright: none; -moz-border-radius-bottomleft: none; margin-top: 0px; padding-left: 10px; padding-right: 5px;"><div align="justify">LE GUIDE DU PARFAIT PETIT SURVIVANT<br>(En 8 leçons)
<br>_____________________</br></div>

<br><div style="margin:auto;text-align:justify;width:100%">EN COURS.
</div></span></ul></td></tr></table></font></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 id="co_5" class="mon_contenu" style="display: none;">Mon contenu 5</div>
  <div id="co_6" class="mon_contenu" style="display: none;">Mon contenu 6</div>
        <div id="co_7" class="mon_contenu" style="display: none;">Mon contenu 7</div>
</center></div> </td></tr></table>

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Réduire la taille des cadres des onglets

Message par Riina le Dim 14 Nov 2010 - 21:12

Merci encore Anzu c'est absolument parfait !
Grâce à vous, voici deux petits soucis épineux qui ne le sont plus. Wink

Riina
*

Messages : 41
Inscrit(e) le : 01/06/2010

http://undertown-rpg.forumactif.org
Riina 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