probléme des onglet le retour

4 participants

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

Résolu probléme des onglet le retour

Message par kawarz 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

kawarz
****

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

http://fairytailrpg-wol.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 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

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 Ven 9 Sep 2011 - 20:22

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

kawarz
****

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

http://fairytailrpg-wol.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 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

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 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

kawarz
****

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

http://fairytailrpg-wol.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 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

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

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

Message par kawarz Sam 10 Sep 2011 - 12:09

Question: c'est quoi un Width?
kawarz

kawarz
****

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

http://fairytailrpg-wol.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 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

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 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

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 Sam 10 Sep 2011 - 18:21

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

kawarz
****

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

http://fairytailrpg-wol.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

- Sujets similaires

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