Code En tete a Onglets

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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

Résolu Code En tete a Onglets

Message par Rara Avis in Terris. Ven 25 Fév 2011 - 14:24

Bonjour !
Je suis en train de mettre en place des onglets dans mon en tete :3 tout marchait tres bien, jusqu'a ce que je rajoute trois nouveaux onglets en plus des trois initiaux : je ne parviens desormais plus a voir l'interieur de mes onglets [qui est encore sous forme test, je fait tout etape par etape] sauriez vous me dire d'ou viens le probleme ? du nom des onglets que j'ai change ? voici mon code

Code:
<br/><span class=postbody></span><img src=http://i30.servimg.com/u/f30/09/00/06/58/bienve11.png align=center><span class=postbody><br/>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Un système d'onglet en javascript</title>
    <script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
        </script>
    <style type="text/css">
        .onglet
        {
                display:inline-block;
                margin-left:0px;
                margin-right:0px;
                padding:0px;
                cursor:pointer;

        }
        .onglet_0
        {
                background:#ffffff;
        }
        .onglet_1
        {
                background:#ffffff;
                padding-bottom:4px;
        }
        .contenu_onglet
        {
                background-color:#ffffff;
                margin-top:-1px;
                padding:5px;
                display:none;
        }
        ul
        {
                margin-top:0px;
                margin-bottom:0px;
                margin-left:-10px
        }
        h1
        {
                margin:0px;
                padding:0px;
        }
        </style>
</head>
<body>
        <div class="systeme_onglets">
        <div class="onglets">
            <span class="onglet_0 onglet" id="onglet_avant-propos" onclick="javascript:change_onglet('avant-propos');"><img src="http://i20.servimg.com/u/f20/09/00/06/58/1_avan10.png" border="0" alt="" /></span>
            <span class="onglet_0 onglet" id="onglet_nouveauvenu" onclick="javascript:change_onglet('nouveauvenu');"><img src="http://i20.servimg.com/u/f20/09/00/06/58/2_nouv10.png" border="0" alt="" /></span>
            <span class="onglet_0 onglet" id="onglet_actualite" onclick="javascript:change_onglet('actualite');"><img src="http://i20.servimg.com/u/f20/09/00/06/58/3_actu10.png" border="0" alt="" /></span>
            <span class="onglet_0 onglet" id="onglet_staff" onclick="javascript:change_onglet('staff');"><img src="http://i20.servimg.com/u/f20/09/00/06/58/4_staf10.png" border="0" alt="" /></span>
            <span class="onglet_0 onglet" id="onglet_partenaires" onclick="javascript:change_onglet('partenaires');"><img src="http://i20.servimg.com/u/f20/09/00/06/58/5_part10.png" border="0" alt="" /></span>
            <span class="onglet_0 onglet" id="onglet_credits" onclick="javascript:change_onglet('credits');"><img src="http://i20.servimg.com/u/f20/09/00/06/58/6_cred10.png" border="0" alt="" /></span>
        </div>
        <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_avant-propos">


<img src="http://i30.servimg.com/u/f30/09/00/06/58/bienve11.png" border="0" alt="" />

            </div>
            <div class="contenu_onglet" id="contenu_onglet_nouveauvenu">


frwfgrfwr


            </div>
            <div class="contenu_onglet" id="contenu_onglet_actualite">

dsfew



            </div>
            <div class="contenu_onglet" id="contenu_onglet_staff">

fdsgrty



            </div>
            <div class="contenu_onglet" id="contenu_onglet_partenaires">


fsrgytrs


            </div>
            <div class="contenu_onglet" id="contenu_onglet_credits">


gthyru


            </div>
        </div>
    </div>
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'quoi';
                change_onglet(anc_onglet);
        //-->
        </script>
</body>
</html>

DE PLUS j'aimerais pouvoir mettre les titre des onglets a gauche. Comment puis je faire cela ?
avatar

Rara Avis in Terris.
**

Féminin
Messages : 57
Inscrit(e) le : 13/02/2011

http://www.wiens.forumactif.org
Rara Avis in Terris. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code En tete a Onglets

Message par Rara Avis in Terris. Lun 28 Fév 2011 - 9:54

UP ><
avatar

Rara Avis in Terris.
**

Féminin
Messages : 57
Inscrit(e) le : 13/02/2011

http://www.wiens.forumactif.org
Rara Avis in Terris. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code En tete a Onglets

Message par Rara Avis in Terris. Ven 4 Mar 2011 - 8:40

Quelqu'un saurait il me dire ou est le problème ...? Merci beaucoup d'avance ^w^"
avatar

Rara Avis in Terris.
**

Féminin
Messages : 57
Inscrit(e) le : 13/02/2011

http://www.wiens.forumactif.org
Rara Avis in Terris. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code En tete a Onglets

Message par Rara Avis in Terris. Lun 7 Mar 2011 - 17:45

Je réitère la demande d'aide.... ^^"
avatar

Rara Avis in Terris.
**

Féminin
Messages : 57
Inscrit(e) le : 13/02/2011

http://www.wiens.forumactif.org
Rara Avis in Terris. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code En tete a Onglets

Message par Rara Avis in Terris. Lun 7 Mar 2011 - 19:55

Je me permet de poster afin de proposer une autre perspective :: si personne ne trouve le problème dans mon codage, est il possible que l'on me fasses le code de base pour mon en tête à onglet, c'est à dire que l'on me fasse un menu à onglet sans cadre ni quoi que ce soit, simple, avec pour titre les images suivantes :

https://i.servimg.com/u/f20/09/00/06/58/1_avan10.png
https://i.servimg.com/u/f20/09/00/06/58/2_nouv10.png
https://i.servimg.com/u/f20/09/00/06/58/3_actu10.png
https://i.servimg.com/u/f20/09/00/06/58/4_staf10.png
https://i.servimg.com/u/f20/09/00/06/58/5_part10.png
https://i.servimg.com/u/f20/09/00/06/58/6_cred10.png

ceux ci alignés à gauche et dans l'ordre donné ! La première restant ouverte d'emblée :3 et bien sur avec des onglets qui contrairement aux miens, s'ouvrent ^^
Je précise que c'est à mettre simplement au sein de mon en tête, et que ma description du forum est déjà pleine. Si possible, j'aimerais un code complet comme celui ci dessus, qui suffise à lui seul, simplement casé dans l'en tête !
avatar

Rara Avis in Terris.
**

Féminin
Messages : 57
Inscrit(e) le : 13/02/2011

http://www.wiens.forumactif.org
Rara Avis in Terris. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code En tete a Onglets

Message par Invité Lun 7 Mar 2011 - 20:48

Bonsoir,

Je sais faire une boite à onglet qui fonctionne.
3 possibilités pour le script javascript:
  • Enregistrer le script en .js et l'héberger permet de gagner un peu de place. La première ligne de la page d'accueil sera donc
    Code:
    <script src="http://le fichier hébérgé.js"></script>
  • Enregistrer le script dans une page Html du forum permet aussi de gagner un peu de place. La première ligne de la page d'accueil sera donc
    Code:
    <script src="adresse de la page html"></script>
  • Si vous ne manquez pas de place, mettre le script directement dans le message d'accueil avant le contenu, entre balise script:
    Code:
    <script>LE SCRIPT EN ENTIER</script>


Le script javascript:
Code:
function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }           
}

La CSS - à placer entre <style> et </style> à la suite du script ou dans votre feuille de style CSS:
Code:
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: 400px;
}

Le message d'acceuil:
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);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</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">Mon contenu 1</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>

On replace "onclick" par "onmouseover" pour que l'onglet change au survol.

Ce qui donne avec vos images et tout intégré dans le message d'accueil:
Code:
<script>function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }         
}</script>
<style>
ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
}
.mon_onglet:hover{
  background: #D6D6D6;
}         
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
 }           
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  padding: 10px;
}
#mes_contenus, #mes_onglets{
  width: 100%;
}
</style><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><img src="http://i20.servimg.com/u/f20/09/00/06/58/1_avan10.png" /></li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://i20.servimg.com/u/f20/09/00/06/58/2_nouv10.png" /></li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://i20.servimg.com/u/f20/09/00/06/58/3_actu10.png" /></li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://i20.servimg.com/u/f20/09/00/06/58/4_staf10.png" /></li>
        <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://i20.servimg.com/u/f20/09/00/06/58/5_part10.png" /></li>
        <li id="o_6" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://i20.servimg.com/u/f20/09/00/06/58/6_cred10.png" /></li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</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 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></div></ul></div>

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Code En tete a Onglets

Message par Rara Avis in Terris. Lun 7 Mar 2011 - 21:38

Merci beaucoup ca marche ! Décidement, vous êtes ma sauveuse <3
Une petite chose cependant, ayant peur de bidouiller... comment puis aligner les titres à gauche, et ne laisser aucun espace entre eux ? Les titres des onglets je veux dire. ainsi que si possible l'espace entre les titres des onglets et leur contenu !


Dernière édition par Rara Avis in Terris. le Lun 7 Mar 2011 - 21:44, édité 1 fois
avatar

Rara Avis in Terris.
**

Féminin
Messages : 57
Inscrit(e) le : 13/02/2011

http://www.wiens.forumactif.org
Rara Avis in Terris. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code En tete a Onglets

Message par Invité Lun 7 Mar 2011 - 21:43

Pour enlever l'espace entre les onglets, il faut ôter les 2 "margin-right: 5px;".
Donc, transformer ceci:
Code:
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
}
.mon_onglet:hover{
  background: #D6D6D6;
}       
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
 }

En cela:
Code:
.mon_onglet{
  float: left;
  padding: 2px 10px;
  color: #000;
}
.mon_onglet:hover{
  background: #D6D6D6;
}       
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  color: #000;
 }

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Code En tete a Onglets

Message par Rara Avis in Terris. Lun 7 Mar 2011 - 21:45

Et comment dois je faire, pour l'alignement des titres à gauche plutôt qu'au centre, ainsi que l'espace entre titres des onglets et contenu ...?

Edit :: j'ai beau avoir changé, l'espace entre les titres demeure... Mais je rognerait les images pour compenser, à la rigueur !
avatar

Rara Avis in Terris.
**

Féminin
Messages : 57
Inscrit(e) le : 13/02/2011

http://www.wiens.forumactif.org
Rara Avis in Terris. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code En tete a Onglets

Message par Invité Lun 7 Mar 2011 - 21:55

Désolée,
Je suis parfois un peu lente pour comprendre. On va essayer en remplaçant toute la partie CSS par celle-ci:
Code:
<style>
ul, li {padding:0px;
margin:0px;
list-style: none;
}

.mon_onglet{
  float: left;
  padding: 2px;
  color: #000;
  border: 1px solid #000;}
.mon_onglet:hover{
  background: #D6D6D6;
}         
.mon_onglet_selected{
  float: left;
  padding: 2px;
  color: #000;
  border: 1px solid #000;}           
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  padding: 2px;
}
#mes_contenus, #mes_onglets{
  width: 100%;
}
</style>
Ça devrait aller mieux. J'ai réduit les marges intérieures à 2 px.
Anonymous

Invité
Invité


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

Résolu Re: Code En tete a Onglets

Message par Rara Avis in Terris. Lun 7 Mar 2011 - 22:08

Merci !
J'ai juste un ultime soucis (le rendu étant à peu près ce que je veux, a du remplissage près ^w^ et pour la suite je me débrouillerait seule) : il y a un grand espace blanc sur le coté gauche de mon en tête, et je n'arrive pas à le retirer :X il me semble que la page est agrandie, alors que normalement mon image de fond fait pile la largeur de l'en tête ! Enfin un peu moins peut être, mais pas tellement...
http://wiens.forumactif.org/
Normalement à peu de choses près, les textes alignés à gauche devraient toucher le bord... ainsi que le titre avant propos ><""

Code:
<br/><span class=postbody></span><img src=http://i30.servimg.com/u/f30/09/00/06/58/bienve11.png align=center><span class=postbody><br/>


<script src="http://wiens.forumactif.org/h3-en-tete-script-css"></script>
<script>function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }       
}</script>
<style>
ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  color: #000;
}
.mon_onglet:hover{
  background: #D6D6D6;
}       
.mon_onglet_selected{
  float: left;
  margin-right: 5px;
  color: #000;
 }         
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  padding: 10px;
}
#mes_contenus, #mes_onglets{
  width: 100%;
}
</style><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><img src="http://i20.servimg.com/u/f20/09/00/06/58/1_avan10.png" /></li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://i20.servimg.com/u/f20/09/00/06/58/2_nouv10.png" /></li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://i20.servimg.com/u/f20/09/00/06/58/3_actu10.png" /></li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://i20.servimg.com/u/f20/09/00/06/58/4_staf10.png" /></li>
        <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://i20.servimg.com/u/f20/09/00/06/58/5_part10.png" /></li>
        <li id="o_6" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://i20.servimg.com/u/f20/09/00/06/58/6_cred10.png" /></li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">
<center><div style ="background: url(http://i20.servimg.com/u/f20/09/00/06/58/fond_a11.jpg);width: 780px;height:390px;"><br/><br/><br/>


<table width="780"><tbody><tr><td width="150">  </td><td width="620"><div style="text-align: justify;"><font face="Times New Roman"><span style="font-size: 12px; line-height: normal">2010. Vienne, Capitale de l'Autriche. Douce ville encore immergée dans le passé, douce Ville totalement transformée. Par quoi ? Par une Étrange Gourmandise nommée Phantom Candy qui vous révèle une créature, juvénile, végétale ou animale, qui vous suivra toute votre vie. Pourquoi ? Parce qu'un homme Narcissique du nom de Kaiser, accompagné de sa Phantom surpuissante, s'en est proclamé Roi. Il y fait régner ses caprices, ses désirs les plus fous. Dans cette ville ou les affrontements sont permis et où vous serez exécuté pour avoir prononcé le mot "canard", que ferez vous ? </font></span><br></div><div align="right"><span style="font-size: 9px; line-height: normal">~ Top sites ::</span>
<a href="http://www.servimg.com/image_preview.php?i=1868&u=10000658" class="postlink" target="_blank" rel="nofollow"><img src="http://i20.servimg.com/u/f20/09/00/06/58/110.gif" border="0" alt="" /></a><a href="http://www.servimg.com/image_preview.php?i=1869&u=10000658" class="postlink" target="_blank" rel="nofollow"><img src="http://i20.servimg.com/u/f20/09/00/06/58/210.gif" border="0" alt="" /></a><a href="http://www.servimg.com/image_preview.php?i=1870&u=10000658" class="postlink" target="_blank" rel="nofollow"><img src="http://i20.servimg.com/u/f20/09/00/06/58/310.gif" border="0" alt="" /></a><a href="http://www.servimg.com/image_preview.php?i=1871&u=10000658" class="postlink" target="_blank" rel="nofollow"><img src="http://i20.servimg.com/u/f20/09/00/06/58/410.gif" border="0" alt="" /></a><a href="http://www.servimg.com/image_preview.php?i=1872&u=10000658" class="postlink" target="_blank" rel="nofollow"><img src="http://i20.servimg.com/u/f20/09/00/06/58/510.gif" border="0" alt="" /></a><a href="http://www.servimg.com/image_preview.php?i=1873&u=10000658" class="postlink" target="_blank" rel="nofollow"><img src="http://i20.servimg.com/u/f20/09/00/06/58/610.gif" border="0" alt="" /></a><a href="http://www.servimg.com/image_preview.php?i=1874&u=10000658" class="postlink" target="_blank" rel="nofollow"><img src="http://i20.servimg.com/u/f20/09/00/06/58/710.gif" border="0" alt="" /></a><a href="http://www.servimg.com/image_preview.php?i=1875&u=10000658" class="postlink" target="_blank" rel="nofollow"><img src="http://i20.servimg.com/u/f20/09/00/06/58/810.gif" border="0" alt="" /></a><a href="http://www.servimg.com/image_preview.php?i=1876&u=10000658" class="postlink" target="_blank" rel="nofollow"><img src="http://i20.servimg.com/u/f20/09/00/06/58/910.gif" border="0" alt="" /></a> </div>
<br/>
</td></tr></td></tr></tbody></table>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>





<table width="750"><tbody><tr><td width="600"><div style="text-align: justify;">Le Jeune forum qu'est Wiens a besoin de membre pour naitre \0/ ! N'hésitez pas a nous proposer top sites et partenaires, et a nous suggérer des améliorations ainsi que de nous signaler des erreurs dans la <a href="http://wiens.forumactif.org/f33-contribution-entre-aide?sid=93ccdcb9145376b5a816cbd896606ecf" class="postlink">catégorie suivante</a>.</div></td><td width="180">  </td></tr></tbody></table>

</div></center>
</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 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></div></ul></div>

J'ai ajouté un cadre pour que l'on voit bien ou se pose le problème :O
avatar

Rara Avis in Terris.
**

Féminin
Messages : 57
Inscrit(e) le : 13/02/2011

http://www.wiens.forumactif.org
Rara Avis in Terris. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code En tete a Onglets

Message par Invité Lun 7 Mar 2011 - 22:55

Avec le code ci dessous la marge devrait disparaitre. Il s'agit toujours de la partie CSS du code.
Code:
<style>
ul, li{padding:1px;
margin:1px;
  list-style: none;
}
.mon_onglet{
  float: left;
  padding-left: 5px;
  color: #000;
}
.mon_onglet:hover{
  background: #D6D6D6;
}       
.mon_onglet_selected{
  float: left;
  color: #000;
 }         
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  border: 3px double black;
  padding: 0px;
  width: 760px;
  }
#mes_contenus, #mes_onglets{
  width: 100%;
  text-align: left;
  }
</style>
Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Code En tete a Onglets

Message par Rara Avis in Terris. Ven 11 Mar 2011 - 13:58

Merci beaucoup ^^ je devrais pouvoir, comme dit précédement, me débrouiller désormais ! Simplement, comment passer l'encadrement de l'intérieur des onglets {contenu] en center ? j'ai tenté, mais je pense que je fait fausse route x3
avatar

Rara Avis in Terris.
**

Féminin
Messages : 57
Inscrit(e) le : 13/02/2011

http://www.wiens.forumactif.org
Rara Avis in Terris. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code En tete a Onglets

Message par Invité Sam 12 Mar 2011 - 11:49

Bonjour,

Désolée, j'ai un peu tardé à répondre. J'ai encore modifié la partie "style", les onglets sont bien rangés à gauche et les contenus bien centrés ( enfin sur mon forum test ...) :
Code:
    <style>
ul, li{padding: 1px;
margin: 1px;
  list-style: none;
}

.mon_onglet{
  float: left;
  color: #000;}

.mon_onglet:hover{
  background: #D6D6D6;}
   
.mon_onglet_selected{
  float: left;
  color: #000;}
     
.clear{
  clear: both;
}

.mon_contenu{
  color: #000;
  padding: 0px;
  width: 780px;
  height: 390px;
  border: 3px double black;}

#mes_contenus, #mes_onglets{
  width: 100%;}
    </style>

Cordialement.
Anonymous

Invité
Invité


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

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

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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