Sujets similaires

Bonjour

J'ai suivi le code du sujet concernant les onglets dans une PA ( ici )

- Dans la partie qui met un style, j'aimerais savoir ce que personnalisent précisément :
.onglet
.onglet_0
.onglet_1

C'est à dire l'onglet au survol, ou le premier onglet ou....

- Aussi, j'ai utilisé des images pour chaque onglet, pour le titre de chaque onglet correspond une image. Pour "Quoi" par exemple, j'ai donc ce code :

Code:: <span class="onglet_0 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');"><img src=http://i914.photobucket.com/albums/ac342/LiLi-Ao/Forum/welcome.png></span>

Et j'aimerais savoir comment faire pour que lorsque j'affiche le contenu de l'onglet" Partenaires" j'ai ça : Onglets dans la page d'accueil Partenaires

Onglets dans la page d'accueil Partenaires

J'affiche ensuite le contenu de l'onglet "Welcome" ; l'onglet Partenaire devient ça ( oui, il y a une légère différence ): Onglets dans la page d'accueil Partenaires-s

Onglets dans la page d'accueil Partenaires-s

- Et j'aimerais aussi savoir comment régler la largeur de l'ensemble sans modifier la largeur du forum

- Et puis, j'organise donc le contenu d'un onglet comme un tableau c'est ça ?

Je pose, pas mal de question, désolée Razz

Merci d'avance ^^

Bonjour,

.onglet personnalise l'apparence globale des onglets (bord de tous les onglets, espace entre les onglets etc)
.onglet_0 personnalise l'apparence des onglets qui ne sont pas ouverts.
.onglet_1 personnalise l'apparence de l'onglet ouvert.

Si je peux me permettre, s'il y avait eu une recherche de ce côté-là de ta part tu l'aurais trouvé puisqu'il t'aurait suffit de les modifier les uns après les autres pour constater les changements. A l'avenir essaie de chercher par toi-même avant de demander des explications, ton code ne sera pas détruit si tu changes la couleur des bordures ou du background =)

Cela dit, je n'ai pas très bien compris ton deuxième problème. Est-ce que tu pourrais me passer le lien de ton forum, et me réexpliquer ton soucis le plus clairement possible ? =)

Merci.

Pour modifier la largeur, ajoute ceci à ta feuille CSS :

Code:: .systeme_onglets
{width: 600px;}

A toi de remplacer 600 par la valeur qui te va le mieux.
Pour le contenu d'un onglet, oui, tu fais comme d'habitude =)

Merci Beaucoup Very Happy

J'ai bien essayé de trouver par moi-même en tritouillant un peu les opacités mais je me suis vite perdue x )

Voilà, mon forum test : http://test-liliao.pro-forum.fr/
Ce que j'essaye de faire c'est que pour chaque onglet, son nom*, qui est une image soit différent s'il est ouvert ou non.
ex : Team est ouvert, ce sera l'image team.png s'il est fermé, team-fermé.png

* : quand je dis nom, je parle "ça" : Onglets dans la page d'accueil Partenaires

Merci encore : )

J'avoue que pour compliquer les choses, je suis la meilleure x )

Alors, voici mon code, que j'ai mis dans mon message d'accueil :

Spoiler:

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un système d'onglet en javascript</title>
<script type="text/javascript">
//
</script>
<style type="text/css">
.onglet
{
display:inline-block;
margin-left:2px;
margin-right:2px;
padding:2px;
background:#131313;

}
.onglet_0
background:#131313;

{

}
.onglet_1
{
background:#131313;

}
.systeme_onglets
{width: 700px;
}

.contenu_onglet
{
background-color:#131313;
margin-top:-1px;
padding:5px;
display:none;

}

ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');"><img src=http://i914.photobucket.com/albums/ac342/LiLi-Ao/Forum/welcome.png></span>
<span class="onglet_0 onglet" id="onglet_qui" onmouseover="javascript:change_onglet('qui');"><img src=http://i914.photobucket.com/albums/ac342/LiLi-Ao/Forum/team-s.png></span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onmouseover="javascript:change_onglet('pourquoi');"><img src=http://i914.photobucket.com/albums/ac342/LiLi-Ao/Forum/partenaires-s.png></span>
<span class="onglet_0 onglet" id="onglet_nom_de_longlet" onmouseover="javascript:change_onglet('nom_de_longlet');"><img src=http://i914.photobucket.com/albums/ac342/LiLi-Ao/Forum/credits-s.png></span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">

<table style="width: 100%; border-collapse:collapse;">
<tr>
   <td rowspan="2"><img src=http://i914.photobucket.com/albums/ac342/LiLi-Ao/imf.png></td>
   <td style="text-align: center;">
<br>
Rwar est un forum....</td>

</tr>
<td><img src=http://i914.photobucket.com/albums/ac342/LiLi-Ao/Forum/dioap.png></td>
<tr>


</tr>
</table>
</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
Tadadadadada
</div>
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
tododododod
</div><div class="contenu_onglet" id="contenu_onglet_nom_de_longlet">
efegerhttr....
</div>
</div>
</div>
<script type="text/javascript">
//
</script>
</body>
</html>

Et les images : ( en haut si l'onglet est ouvert, en bas s'il ne l'est pas )

Spoiler:

Merci pour ton aide, si tu n'y arrives pas, c'est pas grave, je vais juste modifier l'opacité entre l'onglet s'il est ouvert ou fermé Smile

Bonjour,

Votre problème est-il résolu ?

Bonjour,

Aucune relance de la part du créateur du sujet ! Je considère donc ce problème comme étant résolu et je le déplace pour céder la place aux problèmes en cours.

Si vous avez d'autres questions, merci d'ouvrir un nouveau topic en respectant les règles de l'entraide.

Onglets dans la page d'accueil

Onglets dans la page d'accueil

Sujets similaires

Sujets similaires

Partenaires Or