Probleme de script pour apparance ...

[Sanzo Toda]

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

[EstoLouis]

Bonjour, il ne te faut que modifier ton CSS

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

[Sanzo Toda]

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

[EstoLouis]

Agrandir le grand carré ?

[Sanzo Toda]

Oui ...

[EstoLouis]

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