[résolu]problème code html d'un systhème à onglets. Bouton_active[résolu]problème code html d'un systhème à onglets. Bouton_hover[résolu]problème code html d'un systhème à onglets. Fb-hover[résolu]problème code html d'un systhème à onglets. Fb-active
AccueilForumÉquipe 
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
[résolu]problème code html d'un systhème à onglets. EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
[résolu]problème code html d'un systhème à onglets. EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
[résolu]problème code html d'un systhème à onglets. EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
[résolu]problème code html d'un systhème à onglets. EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
[résolu]problème code html d'un systhème à onglets. EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
[résolu]problème code html d'un systhème à onglets. EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
[résolu]problème code html d'un systhème à onglets. EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
[résolu]problème code html d'un systhème à onglets. EmptySam 11 Fév 2023, 06:04 par Krager

-28%
Le deal à ne pas rater :
-28% Machine à café avec broyeur à grain MELITTA Purista
229.99 € 318.99 €
Voir le deal

CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolusPartagez
 

[résolu]problème code html d'un systhème à onglets.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://twilight-rpg-dream.forumactif.org/index.htm
boulette
boulette
{ Membre }
{ Membre }

Féminin Messages : 15



[résolu]problème code html d'un systhème à onglets. Empty
voilà, pour ma page d'accueil, j'aimerai que les onglets soient l'un sous l'autre à gauche et que le contenu des onglets soit à droite de cette manière:
[résolu]problème code html d'un systhème à onglets. Ongleta

Seulement avec mon code, le contenu est bien trop éloigné des onglets, est ce que vous avez une solution?
Et j'ai aussi une autre question. J'aimerai que le contenu de l'onglet 1 soit visible immédiatement sans avoir à passer la souris sur l'onglet. C'est possible?

voici le code html concerné:
Code:
<link rel="stylesheet" href="http://www.archive-host.com/files/775257/0799dd1b381493aad18186e2d21a4cf6eb51b45f/new__2.css" type='text/css'  />
  <script src="http://www.archive-host.com/files/669940/0799dd1b381493aad18186e2d21a4cf6eb51b45f/new_2.js"></script>
 
<table><TD>
<div id="mes_onglets">
   <ul>
   <table>
   <TR><TD><p style="padding-top:opx; ">      
<li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Onglet 1</li> </TR></TD>
   <TR><TD>
<li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 2</li> </TR></TD>
   <TR><TD>
<li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);"> Onglet 3 </li> </TR></TD>
   <TR><TD>
<li id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);"> Onglet 4 </li> </TR></TD>
   <TR><TD>
<li id="o_5" class="mon_onglet" onmouseover="changeOnglet(this);"> Onglet 5</li> </TR></TD>
   <TR><TD>
<li id="o_6" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 6</li> </TR></TD>
      </table>      
      <div class="clear"></div>
   </ul>
</div>
</p>
</TD><TD>
<p style="padding-top:opx; ">
<div id="mes_contenus">
   <div id="co_1" class="mon_contenu" style="display: none;"> 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>
</p>
  </TD> </TABLE>
et le code css:
Code:

ul, li{
   list-style: none;
}
.mon_onglet{
   padding: 2px 10px;
   margin-right: 5px;
   color: #a7a277;
   background: #f3e9b7;
   border: 1px solid #a7a277;
   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;
  width: 120px;
}   
.mon_onglet:hover{
   background: #f9efbb;

}            
.mon_onglet_selected{
   
   padding: 2px 10px;
   margin-right: 5px;
   color: #a7a277;
   background: #f9f3d5;
   border-top: 1px solid #a7a277;
   border-right: 1px solid #a7a277;
   border-left: 1px solid #a7a277;   
   border-bottom: 1px solid #a7a277;   
   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;
  width: 120px;
}               
.clear{
   clear: both;
}
.mon_contenu{

   margin-right: 5px;
   color: #a7a277;
   background: #f9f3d5;
   border: 1px solid #a7a277;
   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, #mes_onglets{
   width: 500px;
}


Dernière édition par boulette le Mar 18 Jan 2011, 15:22, édité 1 fois
MessageSujet: [résolu]problème code html d'un systhème à onglets.   [résolu]problème code html d'un systhème à onglets. EmptyJeu 13 Jan 2011, 10:55
Revenir en haut Aller en bas
http://kobehs.chocoforum.net
Liliana
Liliana
{ Membre actif }
{ Membre actif }

Féminin Messages : 997



[résolu]problème code html d'un systhème à onglets. Empty
Bonsoir;

Alors le problème vient du code CSS; de l'id nommée "#mes_contenus, #mes_onglets". Il est noté une largeur de 500 pixels pour les deux ids; qui représentent la colonne des onglets, et la colonne du contenu. Donc la page s'élargit automatiquement en deux colonnes de 500 pixels; soit en 1000 pixels. Il suffit donc de retirer l'id nommée "#mes_onglets" du CSS et la page retrouvera une taille normale.

J'en ai aussi profité pour nettoyer un peu le code CSS qui présentait pas mal de "doublons" au niveau des codes;

Code:
ul, li {list-style: none;}

.mon_onglet, .mon_onglet_selected
{padding: 2px 10px;
margin-right: 5px;
margin-bottom: 1px;
color: #a7a277;
background: #f3e9b7;
border: 1px solid #a7a277;
cursor: pointer;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
width: 120px;}
 
.mon_onglet:hover
{background: #f9efbb;} 
       
.mon_onglet_selected
{background: #f9f3d5;} 
           
.mon_contenu
{margin-right: 5px;
color: #a7a277;
background: #f9f3d5;
border: 1px solid #a7a277;
padding: 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;}

#mes_contenus
{width: 500px;}


Même chose pour le code de la page; autant de "td" ne sert à rien =)

Code:
<link rel="stylesheet" href="http://www.archive-host.com/files/775257/0799dd1b381493aad18186e2d21a4cf6eb51b45f/new__2.css" type='text/css'/>
<script src="http://www.archive-host.com/files/669940/0799dd1b381493aad18186e2d21a4cf6eb51b45f/new_2.js"></script>
 
<table width="100%"><tr>
   <td>
      <div id="mes_onglets">
         <ul>
            <li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Onglet 1</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>
            <li id="o_5" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 5</li>
            <li id="o_6" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 6</li> 
         </ul>
      </div>
   </td>

   <td>
      <div id="mes_contenus">
         <div id="co_1" class="mon_contenu" style="display: block;">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>
   </td>
</tr></table>


Wink
MessageSujet: Re: [résolu]problème code html d'un systhème à onglets.   [résolu]problème code html d'un systhème à onglets. EmptyDim 16 Jan 2011, 17:14
Revenir en haut Aller en bas
L
L
{ Membre actif }
{ Membre actif }

Masculin Messages : 867



[résolu]problème code html d'un systhème à onglets. Empty
Bonsoir,

Le problème a été résolu avec l'aide de Liliana ? S'il est,veuillez cocher l'icône "résolu" en éditant votre premier message dans les "icônes du sujet"
MessageSujet: Re: [résolu]problème code html d'un systhème à onglets.   [résolu]problème code html d'un systhème à onglets. EmptyDim 16 Jan 2011, 18:27
Revenir en haut Aller en bas
http://twilight-rpg-dream.forumactif.org/index.htm
boulette
boulette
{ Membre }
{ Membre }

Féminin Messages : 15



[résolu]problème code html d'un systhème à onglets. Empty
oui merci beaucoup je n'avais pas vu!
MessageSujet: Re: [résolu]problème code html d'un systhème à onglets.   [résolu]problème code html d'un systhème à onglets. EmptyMar 18 Jan 2011, 15:21
Revenir en haut Aller en bas
Psycho
Psycho
Psychopathe
Psychopathe

Féminin Messages : 3407



[résolu]problème code html d'un systhème à onglets. Empty
Dans ce cas, je classe (:
MessageSujet: Re: [résolu]problème code html d'un systhème à onglets.   [résolu]problème code html d'un systhème à onglets. EmptyMar 18 Jan 2011, 15:23
Revenir en haut Aller en bas
Contenu sponsorisé




[résolu]problème code html d'un systhème à onglets. Empty
MessageSujet: Re: [résolu]problème code html d'un systhème à onglets.   [résolu]problème code html d'un systhème à onglets. Empty
Revenir en haut Aller en bas
 

[résolu]problème code html d'un systhème à onglets.

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Problème Code Html pour le Profil [Résolu]
» Problème d'affichage code HTML
» Un petit problème de code html
» Problème d'onglets (Résolu)
» Problème de code HTML dans ma fiche

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

Partenaires Or

← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit