Probleme de script pour apparance ...

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

Résolu Probleme de script pour apparance ...

Message par Sanzo Toda le Dim 1 Mai 2011 - 19:41

Bonsoir, j'ai un problème avec un cadre, j'aimerai lui donner plus d'esthétique, mais je ne sais pas ou mettre ça justement, je ne sais pas trop comment expliquer mon problème non plus... En faite, voila un script :

Code:
<script>function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('span');
    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><table><tr><td class="liste_onglets"><div id="mes_onglets">
    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</span>
        <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</span>
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</span>
        <span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</span></td></tr>
<tr><td>
        <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></div></td></tr></table>

Et voici le code CSS qui va avec :

Code:
.liste_onglets{
margin-bottom: 5px;
padding: 4px;}

.mon_onglet{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}
.mon_onglet:hover{
  background: #b8efa1;
}     
.mon_onglet_selected{
  display: inline;
  padding: 2px;
  margin: 2px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
}       
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
  margin: 10 px;
  height: 120px;}
#mes_contenus, #mes_onglets{
  height: 100%;
  width:100%;}

et voici ce que cela donne : [url=mangalist.forumactif.com]Exemple dans l'entete du forum[/url]

Et je voudrai que le tour du gros cadre devienne hummm ... comment dire .... un peu mieux, avec un contour arrondi et aussi qu'il devienne noir et le fond de ce cadre devienne gris.

Un peu d'aide siouplait =D

Sanzo Toda
*

Masculin
Messages : 38
Inscrit(e) le : 09/10/2010

http://other-world.fr-bb.com/
Sanzo Toda a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme de script pour apparance ...

Message par EstoLouis le Dim 1 Mai 2011 - 20:11

Bonjour, il ne te faut que modifier ton CSS Smile

Donc effaces :
Code:
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
  margin: 10 px;
  height: 120px;}

et remplace par :
Code:
.mon_contenu{
  color: #000;
  background-color: #COULEUR DU FOND DU CADRE;
  border: 1px solid #000000;
  -border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  padding: 10px;
  margin: 10 px;
  height: 120px;}

Voila Smile

EstoLouis
**

Masculin
Messages : 64
Inscrit(e) le : 05/07/2009

http://kef-coding.keuf.net
EstoLouis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme de script pour apparance ...

Message par Sanzo Toda le Dim 1 Mai 2011 - 21:10

Et j'ai oublier de demander pour l'agrandir sur les coté gauche et droite comment je fais ?

Sanzo Toda
*

Masculin
Messages : 38
Inscrit(e) le : 09/10/2010

http://other-world.fr-bb.com/
Sanzo Toda a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme de script pour apparance ...

Message par EstoLouis le Lun 2 Mai 2011 - 8:59

Agrandir le grand carré ?

EstoLouis
**

Masculin
Messages : 64
Inscrit(e) le : 05/07/2009

http://kef-coding.keuf.net
EstoLouis a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme de script pour apparance ...

Message par Sanzo Toda le Lun 2 Mai 2011 - 19:44

Oui ...

Sanzo Toda
*

Masculin
Messages : 38
Inscrit(e) le : 09/10/2010

http://other-world.fr-bb.com/
Sanzo Toda a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Probleme de script pour apparance ...

Message par EstoLouis le Ven 6 Mai 2011 - 20:28

Désolé du retard ...

Rajoutes dans .mon_contenu entre { et } :
Code:
width:LARGEURpx

Evidemment, tu choisis un nombre a la place de LARGEUR mais tu laisses px derriere

Ex :
Code:
width:500px

EstoLouis
**

Masculin
Messages : 64
Inscrit(e) le : 05/07/2009

http://kef-coding.keuf.net
EstoLouis 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