Réduire la taille des cadres des onglets
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Réduire la taille des cadres des onglets
Bonsoir !
Deux sujets en une soirée, je n'ai pas pensée à poser cette question sur mon premier topic.
(qui est d'ailleurs résolu grâce à Anzu : merci à elle !)
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 :
CSS :
Merci d'avance à ceux qui pourront m'offrir leur aide précieuse !
Deux sujets en une soirée, je n'ai pas pensée à poser cette question sur mon premier topic.
(qui est d'ailleurs résolu grâce à Anzu : merci à elle !)
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 !
Re: Réduire la taille des cadres des onglets
- 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;
En fait, la taille de la cellule dépend de son contenu. ^^
Cordialement.
Re: Réduire la taille des cadres des onglets
Excusez-moi, j'ai dû mal m'exprimer car ce n'était pas la taille des onglets que je souhaitais réduire.
Ce sont les cadres juste en dessous lorsque nous cliquons sur les onglets, soit ceci, encadré en rouge :
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.
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.
Re: Réduire la taille des cadres des onglets
C'est moi qui avais mal compris > <
Dans la CSS, rajoutez ceci: (à vous de modifier par la suite)
Dans .mon_contenu
Et pour la page d'accueil:
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>
Re: Réduire la taille des cadres des onglets
Merci encore Anzu c'est absolument parfait !
Grâce à vous, voici deux petits soucis épineux qui ne le sont plus.
Grâce à vous, voici deux petits soucis épineux qui ne le sont plus.
Sujets similaires
» Réduire la mesure des cadres
» Réduire l'espace entre les onglets des groupes
» Reduire le temps de changement des onglets PA accordéon
» Taille des cadres des forums
» Probleme de taille de mes cadres
» Réduire l'espace entre les onglets des groupes
» Reduire le temps de changement des onglets PA accordéon
» Taille des cadres des forums
» Probleme de taille de mes cadres
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum