probléme des onglet le retour

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

Résolu probléme des onglet le retour

Message par kawarz le Ven 9 Sep 2011 - 19:20

Bonjour j'ai un petit problème car ne n'arrive pas a configuré mes onglets -_- pour faire simple je n'arrive pas à:

¤passer une ligne
¤mettre une largeur précise
¤à séparé les onglets car ils sont collé (les espacés un peu)

je devance vos question et voici le CSS:
Code:

      body {
        cursor: url('http://www.ffdream.com/downld/curseurs/miniatures/KH%20-%20Keyblade%203.cur'), auto;
        }
       
      .mon_onglet{
  display: inline;
  padding: 1px;
  margin: 1px;
  color: #000000;
  background: #0022ff;
  border: -100px solid #000;}
 
.mon_onglet:hover{
  background: #00ffee;}
     
.mon_onglet_selected{
  display: inline;
  padding: 1px;
  margin: 1px;
  color: #000000;
  background: #00ffee;
  border: 1px solid #ffffff;}
     
.clear{
  clear: both;}
 
.mon_contenu{
  color: #ffffff;
  background: #000000;
  border: 2px solid #F20CE3;
  padding: 1px;
  margin: 120 px;
  height: 120px;
  line-height: normal;
  font-size: 10px;}
 
#mes_contenus, #mes_onglets{
  height: 100%;
  width:100%;}
merci d'avance


Dernière édition par kawarz le Sam 10 Sep 2011 - 18:35, édité 1 fois

kawarz
****

Masculin
Messages : 229
Inscrit(e) le : 09/08/2011

http://testpourunforum.forumactif.org
kawarz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probléme des onglet le retour

Message par shirabi le Ven 9 Sep 2011 - 20:13

Retour à la ligne
<br>
(à placer dans le code html)
Espace:
 
(à placer dans le code html je crois essayer dans la css)

Pour la largeur modifier cette partie là:
Code:

border: 2px #fff solid;
Je pense que c'est ça.

Cordialement.

shirabi
****

Masculin
Messages : 304
Inscrit(e) le : 26/06/2011

http://yob-rpg.kanak.fr/
shirabi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probléme des onglet le retour

Message par kawarz le Ven 9 Sep 2011 - 20:22

Merci mais il est ou? -_- Parcequ'il y a beaucoup de code comme ça.

kawarz
****

Masculin
Messages : 229
Inscrit(e) le : 09/08/2011

http://testpourunforum.forumactif.org
kawarz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probléme des onglet le retour

Message par Izumi375 le Ven 9 Sep 2011 - 20:52

Coucou, =)

Sans votre code html qui va avec, on a dû mal à voir où va le css, le mieux ca aurait été de le mettre. Wink
la propriété css border désigne la bordure, tu ne parviendras donc pas à ce que tu cherches avec.

En premier lieu on cherche l'identifiant css qui va donner toutes ses propriétés à l'onglet soit celle ci:

Code:
.mon_onglet{
  display: inline;
  padding: 1px;
  margin: 1px;
  color: #000000;
  background: #0022ff;
  border: -100px solid #000;}

la propriété margin va nous permettre d'espacer tes onglets. Il suffit donc de mettre un nombre plus grand selon ce qu'on veut. ex:

Code:
  margin: 5px;

Pour donner une plus grande largeur change la valeur du padding, ex:

Code:
padding: 10px;

(toujours à l'intérieur du même identifiant css). On pourra sinon faire un width mais ça, ça dépend un peu de comment tu as orchestré ton code html que je n'ai pas.

Viel Glück! Mr. Green

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probléme des onglet le retour

Message par kawarz le Ven 9 Sep 2011 - 21:54

Merci! voici le code HTML je précise que c'est sur mon forum test :
Code:
<table style="margin: auto;"><tr><td><div id="mes_onglets">
            <span id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">test</span>
                <span id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">test</span>
<span id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 3</span>
<span id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 4</span>
            <div id="co_1" class="mon_contenu">testtttttttttttttttttt ttttttttttttttttttttttttt  ttttttttttttttttttttttt  ttttttttttttttttttttttttttttttttoo</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></div></td></tr></table>

kawarz
****

Masculin
Messages : 229
Inscrit(e) le : 09/08/2011

http://testpourunforum.forumactif.org
kawarz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probléme des onglet le retour

Message par Lixyr le Ven 9 Sep 2011 - 22:02

On peut mettre un width, oui, dans ce code, mais les codes d'Izumi sont déjà bien.

Cependant, c'est déjà dans ton css. Tu dois changer ceci :

.mon_onglet{
display: inline;
padding: 1px;
margin: 1px;
color: #000000;
background: #0022ff;
border: -100px solid #000;}

.mon_onglet:hover{
background: #00ffee;}

.mon_onglet_selected{
display: inline;
padding: 1px;
margin: 1px;

color: #000000;
background: #00ffee;
border: 1px solid #ffffff;}

juste les valeurs. Ça correspond aux codes d'Izumi.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probléme des onglet le retour

Message par kawarz le Sam 10 Sep 2011 - 12:09

Question: c'est quoi un Width?

kawarz
****

Masculin
Messages : 229
Inscrit(e) le : 09/08/2011

http://testpourunforum.forumactif.org
kawarz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probléme des onglet le retour

Message par Izumi375 le Sam 10 Sep 2011 - 18:05

Width ca veut dire largeur en anglais. Il s'introduit comme ceci:

Code:
.nom_de_l_indentifiant {
width: XXpx
}

Avec XX à remplacer par la largeur en pixel voulue évidemment. Wink

Izumi375
****

Féminin
Messages : 318
Inscrit(e) le : 31/08/2009

http://keikoku.forumpro.fr
Izumi375 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probléme des onglet le retour

Message par shirabi le Sam 10 Sep 2011 - 18:13

Width=largeur
Height=hauteur

Code:
.nom_de_l_indentifiant {
height: XXpx ou X%;
width: XXpx ou X%;
}
Toujours mettre ";" après un code du genre pour bien montrer que vous rentrer une autre valeur.

Cordialement.

shirabi
****

Masculin
Messages : 304
Inscrit(e) le : 26/06/2011

http://yob-rpg.kanak.fr/
shirabi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: probléme des onglet le retour

Message par kawarz le Sam 10 Sep 2011 - 18:21

Merci c'est bon enfin je crois.....problème résolu!

kawarz
****

Masculin
Messages : 229
Inscrit(e) le : 09/08/2011

http://testpourunforum.forumactif.org
kawarz 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