Problème d'onglets

Date d'inscription: 14/04/2011

Bonjour.

J'aimerai faire mon QEEL sous forme d'onglets. Jusque là pas de problèmes ...
J'ai décidé de créer d'abord mes onglets en suivant vos conseils (ici). Mais voilà, mes onglets se décalent et je ne comprends pas pourquoi, j'ai relu plusieurs fois mes codes mais tout me parait OK. Je ne sais pas si c'est mon incompétence qui m'a fait rater quelque chose ou si je n'ai tout simplement pas vu mon erreur.
Quelqu'un pourrait m'aider ? S'il vous plait ? :pleure:

(Je vous passe mon code hein :=):

)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tuto faire une en tete sous forme d'onglet</title>

<style>
/**** Structure de l'en-tête ****/

body{
background-color:transparent;
}

#en_tete{
width:600px;
min-height:400px;
height:auto;
color:#1a3a2f;
font-family: Verdana;
margin:auto;
}

#en_tete tr{
vertical-align:top;
}

#en_tete img{
border:0;
}

span.onglet{
float:left;
}

span.onglet img:hover{
cursor:pointer;
}

#en_tete .bloc_texte{
position:absolute;
margin-top:0;
}

/** Onglet 1 **/

#en_tete #onglet1{
background-image:url("http://i22.servimg.com/u/f22/13/22/50/30/i_back10.jpg");
background-repeat:no-repeat;
background-position:top;
width:800px;
min-height:339px;
}

#en_tete #onglet1 .contenu{
width:296px;
height:auto;
background-image:url("http://i22.servimg.com/u/f22/13/22/50/30/i_back10.jpg");
border:white 1px solid;
margin-left:497px;
margin-right:9px;
text-align:center;
font-size:12px;
margin-top:10px;
}

#en_tete #onglet1 .contenu p{
padding-left:12px;
padding-right:12px;
padding-top:2px;
padding-bottom:2px;
}

#en_tete #onglet1 .infos{
font-size:10px;
margin-left:220px;
margin-top:-40px;
}

/** Onglet 2 **/

#en_tete #onglet2{
background-image:url("http://i22.servimg.com/u/f22/13/22/50/30/i_back10.jpg");
background-repeat:no-repeat;
background-position:top;
width:600px;
min-height:339px;
margin-left:-200px;
}

#en_tete #onglet2 .contenu{
width:600px;
height:auto;
margin:auto;
text-align:center;
font-size:14px;
margin-top:10px;
}

#en_tete #onglet2 .infos{
font-size:10px;
background-image:url("http://i22.servimg.com/u/f22/13/22/50/30/i_back10.jpg");
margin-top:90px;
}

/** Onglet 3 **/

#en_tete #onglet3{
background-image:url("http://i22.servimg.com/u/f22/13/22/50/30/i_back10.jpg");
background-repeat:no-repeat;
background-position:top;
width:600px;
min-height:339px;
margin-left:-400px;
}

#en_tete #onglet3 #liste{
width:225px;
height:160px;
margin-left:35px;
background-image:url("http://i22.servimg.com/u/f22/13/22/50/30/i_back10.jpg");
border:white 1px solid;
font-size:12px;
}

#en_tete #onglet3 #texte{
width:500px;
height:auto;
margin-left:285px;
margin-right:15px;
margin-top:-160px;
background-image:url("http://i822.photobucket.com/albums/zz147/tiadeets/Forum/Fond2.png");
border:white 1px solid;
text-align:center;
font-size:14px;
}

#en_tete #onglet3 .infos{
font-size:10px;
margin-left:30px;
margin-top:10px;
}
</style>
</head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/js_onglet.js"></script>

<body><div id="en_tete">

<span class="onglet"><div class="navigation"><img src="http://i22.servimg.com/u/f22/13/22/50/30/stat_110.png" onMouseOver="this.src ='http://i22.servimg.com/u/f22/13/22/50/30/stat_210.png';" onMouseOut="this.src = 'http://i22.servimg.com/u/f22/13/22/50/30/stat_110.png';" alt="Accueil" style="les propriétés de l'image" /></div><div class="bloc_texte" id="onglet1">Contenu ici</div></span>

<span class="onglet"><div class="navigation"><img src="http://i22.servimg.com/u/f22/13/22/50/30/groupe10.png" onMouseOver="this.src ='http://i22.servimg.com/u/f22/13/22/50/30/groupe11.png';" onMouseOut="this.src = 'http://i22.servimg.com/u/f22/13/22/50/30/groupe10.png';" alt="Staff et Crédits" style="les propriétés de l'image" /></div><div class="bloc_texte" id="onglet2">Contenu ici</div></span>

<span class="onglet"><div class="navigation"><img src="http://i22.servimg.com/u/f22/13/22/50/30/anniv_10.png" onMouseOver="this.src ='http://i22.servimg.com/u/f22/13/22/50/30/anniv_11.png';" onMouseOut="this.src = 'http://i22.servimg.com/u/f22/13/22/50/30/anniv_10.png';" alt="Staff et Crédits" style="les propriétés de l'image" /></div><div class="bloc_texte" id="onglet3">Contenu ici</div></span>

</div>

</body>

</html>

Alors voyons voir :

1/ On va commencer par remplacer l'id en_tete par l'id qeel que ce soit dans le html ou dans le css

2/ On va supprimer toutes les infos concernant les tailles pour chaque onglet ainsi que les "margin-left" (je t'indique les lignes)

Code:

#qeel #onglet1{
background-image:url("http://i22.servimg.com/u/f22/13/22/50/30/i_back10.jpg");
background-repeat:no-repeat;
background-position:top;
width:800px; <-
min-height:339px; <-
}

#qeel #onglet2{
background-image:url("http://i22.servimg.com/u/f22/13/22/50/30/i_back10.jpg");
background-repeat:no-repeat;
background-position:top;
width:600px; <-
min-height:339px; <-
margin-left:-200px; <-
}

#qeel #onglet3{
background-image:url("http://i22.servimg.com/u/f22/13/22/50/30/i_back10.jpg");
background-repeat:no-repeat;
background-position:top;
width:600px; <-
min-height:339px; <-
margin-left:-400px; <-
}

3/ On va mettre ses infos dans le "bloc texte"

Code:

#qeel .bloc_texte{
position:absolute;
margin-top:0;
left:50%;
margin-left:-300px; /* = - (width/2) */
width:600px;
min-height:339px;
}

cette partie sert à centrer ton bloc_texte

Code:

left:50%;
margin-left:-300px; /* = - (width/2) */

Tu essaies déjà tout ça ?

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 14/04/2011

Merci ! C'est cool, les onglets ne se décalent plus, bonne nouvelle ! Par contre ... maintenant les images de font d'onglet n'apparaissent plus ... >.< :pleure: