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">
//<!--
function change_onglet(name)
{
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
//-->
</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">
//<!--
var anc_onglet = 'quoi';
change_onglet(anc_onglet);
//-->
</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