PA en onglets
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
PA en onglets
Bonjour bonjour voilà j'ai suivie le tuto pour créer des onglets sur une page d'accueil
https://forum.forumactif.com/t310879-3-tableaux-a-onglets-pour-le-message-d-accueil
ça me donne bien trois onglets mais le problème c'est que ça me fait de petite zones de texte. J'aimerai savoir comment élargir la taille du contenu des onglets ? je précise je suis nulle en CSS et HTML
voici mon CSS
ma page d'accueil pour le moment
et voici l'apercu : http://planetnintendorpg.nouslesfans.com/forum
https://forum.forumactif.com/t310879-3-tableaux-a-onglets-pour-le-message-d-accueil
ça me donne bien trois onglets mais le problème c'est que ça me fait de petite zones de texte. J'aimerai savoir comment élargir la taille du contenu des onglets ? je précise je suis nulle en CSS et HTML
voici mon CSS
- Code:
body {cursor: url(http://www.patmax.eu/C2/120125084656.cur), auto;}
a {cursor: url(http://www.patmax.eu/C2/120125084656.cur), auto;}
body{background-position: top center;background-repeat: no-repeat;background-attachment: fixed;}
.mon_onglet{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #fff;
border: 1px solid #000;
cursor: pointer;
margin-bottom: -1px;
list-style: none;
}
.mon_onglet:hover{
background: #b8efa1;
}
.mon_onglet_selected{
float: left;
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #fff;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #fff;
cursor: pointer;
margin-bottom: -1px;
list-style: none;}
.clear{
clear: both;
}
.mon_contenu{
color: #000;
background: #fff;
border: 1px solid #000;
padding: 10px;
line-height: normal;
font-size: 11px;}
#mes_contenus, #mes_onglets{
width: 400px;
margin: auto;}
ma page d'accueil pour le moment
- Code:
<div id="mes_onglets">
<ul><li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Bienvenue</li>
<li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 2</li>
<li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 3</li>
<li id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 4</li>
<div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Soyez les bienvenus sur le forum consacré aux stars de la firme japonaise Nintendo !!! Entrez dans les mondes de la Planète Nintendo et discutez sur tout ce qui est en rapport avec !!!!!!!!!! Pour vous occuper rien de tel que de bons trailers sur les derniers jeux à sortir : Luigi's Mansion 2, Kid Icarus Uprising ainsi que Mario Party 9 (qui sont tout les trois sublimes ) ainsi qu'un bon jukebox sur les musiques de Nintendo !!! Je n'ai qu'une chose à vous dire : Amusez-vous!!!!!!!!!!!!!!!!!!
</br>
</br> <a href="http://planetnintendorpg.nouslesfans.com/register?tid=c61d693ba2c1e80351066feea66ed24a" class="postlink"><img src="http://img151.imageshack.us/img151/7994/inscrivezvousns1.png" border="0" alt="" /></a>
</br>
</br><div style="margin:auto;text-align:center;width:100%"><iframe width="420" height="315" src="http://www.youtube.com/embed/JKPF3qzJiYo" frameborder="0" allowfullscreen></iframe><iframe width="420" height="315" src="http://www.youtube.com/embed/Prk89IDGmrs" frameborder="0" allowfullscreen></iframe><iframe width="420" height="315" src="http://www.youtube.com/embed/w29QV4Bsf14" frameborder="0" allowfullscreen></iframe>
</div>
<div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</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>
et voici l'apercu : http://planetnintendorpg.nouslesfans.com/forum
Dernière édition par Sakura91 le Ven 27 Jan 2012 - 17:40, édité 1 fois
Re: PA en onglets
Bonjour,
Je vous redonne le CSS avec des annotations:
Attention, dans votre code HTML, il manque le </div> qui ferme le premier contenu .
Cordialement.
Je vous redonne le CSS avec des annotations:
- Code:
a {cursor: url(http://www.patmax.eu/C2/120125084656.cur), auto;}
body{
background-position: top center;background-repeat: no-repeat;background-attachment: fixed;
cursor: url(http://www.patmax.eu/C2/120125084656.cur), auto;}
/*onglet inactif*/
.mon_onglet{
float: left; /*positionnement*/
padding: 2px 10px; /*marges intérieures*/
margin-right: 5px; /*marge ectérieure droite*/
color: #000; /*couleur police*/
background: #fff; /*fond*/
border: 1px solid #000; /*contour epaisseur style couleur*/
cursor: pointer; /*curseur*/
margin-bottom: -1px; /*marge extérieures inférieure*/
list-style: none; /*ôter les puces*/
}
/*onglet au survol*/
.mon_onglet:hover{
background: #b8efa1; /*fond*/
}
/*onglet sélectionné*/
.mon_onglet_selected{
float: left; /*positionnement*/
padding: 2px 10px; /*marges intérieures*/
margin-right: 5px; /*marge extérieure droite*/
color: #000; /*couleur police*/
background: #fff; /*fond*/
border-top: 1px solid #000; /*contour haut*/
border-right: 1px solid #000; /*contour droit*/
border-left: 1px solid #000; /*contour gauche*/
border-bottom: 1px solid #fff; /*contour bas*/
cursor: pointer; /*curseur*/
margin-bottom: -1px; /*marge extérieure inférieure*/
list-style: none; /*oter les puces*/}
.clear{
clear: both;
}
/*contenu*/
.mon_contenu{
color: #000; /*couleur police*/
background: #fff; /*fond*/
border: 1px solid #000; /*contour epaisseur style couleur*/
padding: 10px; /*marges intérieures*/
line-height: normal; /*hauteur de ligne*/
font-size: 11px; /*taille police*/
}
/*tableau onglet global*/
#mes_contenus, #mes_onglets{
width: 400px; /*largeur*/
margin: auto; /*marges extérieures*/}
#mes_contenus, #mes_onglets{
width: 400px; /*largeur*/
margin: auto; /*marges extérieures*/}
Attention, dans votre code HTML, il manque le </div> qui ferme le premier contenu .
Cordialement.
Invité- Invité
Re: PA en onglets
parfait merci beaucoup d'avoir résolu mon problème merci
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum