Sujets similaires

Bonjour.
En faisant une recherche je suis tombée sur un topic de B•øw et j'ai trouvé ce Tuto pour faire des onglets. Tout marche très bien, mais il y a quand même un petit soucis.
J'ai mis ça sur ma Pa. Le truc c'est que quand je rajoute un onglet, et que je clique dessus, tous les autres se décalent sur la gauche et ne restent pas centrés. Et quand je clique sur un des trois qui étaient 'donnés' avec le tuto, tout reviens au bon endroit Oo
Comment je dois faire pour qu'ils restent tous bien en place?

Voilà mon HTML:

Spoiler:

Code:: <table width="700" align="center" height="555"><tbody><tr><td background="http://img10.hostingpics.net/pics/477222Sans_titre_3.jpg"><div style="position: relative;"><div style="left: -15px; position: absolute; top: -37px; text-align: center;">
<!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
{
background-color: #151112;
display:inline-block;
margin-left:1px;
margin-right:1px;
padding:1px;
padding-left:5px;
padding-right: 5px;
padding-bottom:4px;
cursor:pointer;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
text-shadow: #000000 5px 5px 5px;
font-family: Times New Roman;
font-weight: lighter;
text-transform: uppercase;
text-align: center;
}
.onglet_0
{
margin-left:1px;
margin-right:1px;
padding:1px;
padding-left:5px;
padding-right: 5px;
padding-bottom:4px;
margin-left:1px;
margin-right:1px;
padding:1px;
padding-bottom:4px;

}
.onglet_1
{
background:#151112;
padding-bottom:4px;
}
.contenu_onglet
{
padding-top:8px;
margin-top:-1px;
padding:15px;
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" onclick="javascript:change_onglet('quoi');">Quoi</span>
<span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>
<span class="onglet_0 onglet" id="onglet_ou" onclick="javascript:change_onglet('ou');">ou</span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<h1>Quoi?</h1>
Un simple système d'onglet utilisant les technologies:<br />
<ul>
<li>(X)html</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
<h1>Qui?</h1>
C'est un script réalisé par Ybouane,<br />
Webmaster du site <a href="http://www.supportduweb.com/">http://www.supportduweb.com/</a>
</div>
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Pourquoi?</h1>
Pour simplifier la navigation et la diviser en parties
</div>
<div class="contenu_onglet" id="contenu_onglet_ou">Contenu de l'onglet</div>
</div>
</div>
<script type="text/javascript">
//
</script>
</body>
</html>

</td></tr></tbody></table>

Je voudrais aussi savoir comment faire pour que le texte contenu dans un onglet ne soit pas collé sous ce dernier. En fait j'ai laissé un blanc sous l'image et j'aimerai le remplir avec le contenu des onglets. J'ai essayé de trouver une solution mais je bloque un peu Oo

Merci d'avance pour votre aide Calins

On pourrait avoir des screens ?

Bien sûr ^^

Voilà la Pa comme elle devrait être avant de cliquer (je voudrais que le texte se trouve dans la cadre blanc pour remplir le vide sous l'image)

Spoiler:

Et après avoir cliqué sur "ou":

Spoiler:

Edit: J'ai réussit à résoudre ces problèmes. Par contre j'en ai un autre qui est venu s'ajouter et qui m'embête vraiment. Quand je change le nom d'un onglet, par exemple 'quoi', plus rien ne marche Oo

Ça m'était aussi arrivé mais je ne sais plus comment je l'avais résolu ^^' Je suis désolé xO

C'est pas grave, merci pour ton aide en tout cas <3

J'aurai encore une question *l'emmerdeuse XD*
Voilà je me suis amusée à faire des 'infobulles' qui apparaissent sous les images en me servant d'un tuto trouvé sur un autre fo, le soucis c'est que lorsque les images sont trop éloignées du texte, je ne peux pas cliquer sur mes liens. Comment faire pour que le texte reste actif même si la souris n'est plus sur l'image?

Je ne peux également pas t'aider ^^' Je me suis souvent posé la question mais jamais trouvé de réponse.... =S

Niarf c'est pas grave
Merci pour ton aide en tout cas <3 Smack Smack

Bonjour,

votre problème est-il toujours d'actualité ?

Hello.

C'était vieux comme problème, j'avais pas vu avant.
Si ils n'ont pas été résolut, on pourrai avoir des lien pour constater et analyser plus clairement.

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.

Problème Javascript

Problème Javascript

Sujets similaires

Sujets similaires

Partenaires Or