PA en onglets

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

Résolu PA en onglets

Message par Sakura91 le Ven 27 Jan 2012 - 17:17

Bonjour bonjour voilà j'ai suivie le tuto pour créer des onglets sur une page d'accueil
http://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 Razz

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

Sakura91
Nouveau membre

Messages : 7
Inscrit(e) le : 04/12/2011

http://card-captor-sakura.max2forum.com/
Sakura91 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: PA en onglets

Message par Invité le Ven 27 Jan 2012 - 17:34

Bonjour,

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*/}
Tout à la fin, vous pouvez modifier la largeur globale de votre tableau à onglet en remplaçant 400 par un chiffre plus grand:
#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 Wink.

Cordialement.

Invité
Invité


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

Résolu Re: PA en onglets

Message par Sakura91 le Ven 27 Jan 2012 - 17:40

parfait merci beaucoup d'avoir résolu mon problème merci Very Happy

Sakura91
Nouveau membre

Messages : 7
Inscrit(e) le : 04/12/2011

http://card-captor-sakura.max2forum.com/
Sakura91 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