[résolu] Problème float et z-index

Bonjour,

Voila, je voulais créer de beaux onglets sur mon site, donc je crée une image d'onglet, je les place en float left, puis cherche à ce qu'ils se positionnent au dessus des cadres qu'ils affichent afin que la bordure dudit cadre soit coupé à cet endroit.

Alors je met un z-index tranquillement et ça marche pas.
J'essaie de mettre des z-index un peut partout, mais l'onglet s'obstine à rester en dessous.

Il faut dire que pour rapprocher l'onglet et le cadre, j'ai mis un margin négatif.

Bref, j'ai pris une jolie photo qui sera plus parlante que tout un discours.



pour le code css:

div.conteneurprinc /*les cadres qui s'ouvrent en cliquant sur les onglets*/
{
clear:both;
width:98%;
padding:0px 2px 2px 0px;
margin:0px 2px 2px 2px;
}
#onglets /*le div qui contient les onglets*/
{
z-index:2;
border-style:none;
padding:0px;
margin:2px 0px -10px 10px;
}
#onglets a /*les liens contenus dans les onglets*/
{
z-index: 2;
display:block;
width:123px;
z-index:2;
text-align:center;
float:left;
}

/*Et pour chaque onglet une couleur différente*/
#onglet1
{
background-image:url("onglet1.gif");
}
/* Etc... */

Voila, j'ai essayé de chercher un peut partout des explications, la seule chose que j'ai aprise c'est que le z-index ne fonctionne que sur les éléments absolus...

J'ai aussi tenté d'inverser l'élément qui portait le margin négatif, ( le passer sur le cadre, et sur les boutons onglets ), mais il s'obstine à rester en dessous.

J'ai aussi tenté de l'afficher après le chargement de la page à l'aide d'un

document.getElementById("onglets").style.display="block";

Mais non, il s'obtine, obtinément...

Je ne sais si une solution existe, mais je dois bien avouer que je me sens un peut démuni...

En vous remerciant par avance...
Modifié par janor (28 Feb 2007 - 16:15)

D'autant que si je veux que les onglets se superposent (comme sur excel), avec l'onglet actif qui "domine" les autres onglets, je ne vois pas comment je pourrai faire...

Enfin, je pourrais créer des images différentes d'onglets, mais cela ne reglerait pas le problème des cadres puisque je souhaite créer ma page en version fluide...

D'ailleurs je n'ai pas comprit pourquoi le z-index ne marchait que pour les éléments absolus.

Oui, bon j'arrête ...

Avec quel navigateur tu as testé?

arnaud

Salut,

Pour le z-index est-ce que l'on a droit à un petit schtuck de html ou encore mieux, la page en ligne ?

Pour que l'onglet "domine" il faut:
- créer une deuxième image avec le bouton par dessus les autres.
- l'afficher avec php lorsque la page est active par une classe CSS.
exemple :

CSS:
.dessus   {background: url(ongletaudessus.png);}
.dessous  {background: url(ongletendessous.png);}

PHP:
if ($page==$lapageactive){
echo "<a href='tonlien.php' class='dessus'>Lien</a>";}
else {echo "<a href='tonlien.php' class='dessous'>Lien</a>";}

Si tu n'as pas php, il me semble que c'est faisable avec les pseudo-classes CSS (avec des variations suivant les navigateurs).
Modifié par Ralfman68 (16 Feb 2007 - 09:31)

Salut,

Pour la page en ligne, c'est faisable: http://jelib78.chez.alice.fr...

J'ai testé avec IE7, Netscape 7, Firefox 2, opéra 9.

Pour répondre à Ralfman, non, le PHP n'est pas adapté, étant donné que tout est géré par le Javascript. Et cela étant dis je sais le faire en Javascript. Mais bon, j'aimerai éviter, puisque le but des calques est quand même d'éviter cela ...

Enfin bon si il n'y a pas d'autre moyen...

Pour les pseudos-classes, tu penses à ":after" ?
Je n'ai pas essayé, je vais peut être le faire, mais il me semble l'avoir testé auparavant, et d'avoir été déçu par sa compatibilité...
Modifié par janor (16 Feb 2007 - 10:17)

Pour les pseudo-classes, je ne suis pas sûr de mon coup, mais il me semble que internet explorer ou firefox (un des deux) prend une des pseudo-classes pour la page active. Je ne sais plus laquelle exactement (:active ?)

Ralfman68 a écrit :
Pour les pseudo-classes, je ne suis pas sûr de mon coup, mais il me semble que internet explorer ou firefox (un des deux) prend une des pseudo-classes pour la page active. Je ne sais plus laquelle exactement (:active ?)

Aucune pseudo-classe.

:active ne sert qu'à spécifier l'état d'un lien lorsque le clic de la souris est enfoncé. Pas de rapport avec le lien vers la page en cours.
Modifié par Laurent Denis (16 Feb 2007 - 12:36)

ah ok . Heureusement que les modos veillent

personne n'a de solution ?

Je suis super débutant mais j'ai cru entendre parler de "flux" ... Alors j'imagine qu'il pourrait y avoir une histoire d'"ordre" de lecture du code qui te permettrait de faire passer ton onglet par dessus.
(Si je dis des bitises ... pas taper ^^)

Je dois avouer que je ne m'y connais pas très bien beaucoup en flux...

J'ai essayé de placer mes onglets en bas, et non au dessus, et effectivement ils passent bien au dessus...

Alors j'ai pensé les afficher après le chargement de la page à l'aide du javascript, mais rien à faire.

Il est vrai qu'à la base la propriété float n'était pas sencée superposer quoique ce soit, j'avoue avec mon margin négatif, je ne sais pas si c'est très "catholique"...

Peut être que je pourrais les afficher en relatif, mais bof, si je rétrécit ma page, ils vont se superposer (je pense...)
Modifié par janor (18 Feb 2007 - 06:45)

up (mon problème n'est toujours pas résolu, et ça m'ennuie bien)...

A votre bonne ame messieurs-dames..

Bonjour,

J'ai un peu fait le tour du sujet en diagonale, mais il y a une chose qui m'a fait tiquer dans ton morceau de code :
tes z-index ne peuvent avoir aucun effet car les éléments auxquels tu les aplliques ne sont pas positionnés.

Petit rappel :
L'instruction z-index détermine et modifie l'ordre d'empilement des éléments.
Cette propriété ne s'applique qu'aux éléments ayant reçu une déclaration position différente de static.

Bonjour,

Un petit tour ici http://www.ultra-fluide.com/ressources/css/menu-onglets.htm devrait te renseigner.

Effectivement.

C'est bien là mon problème, comment puis-je faire ?

Pour résumer,

une balise contient les onglets

#onglets
{
border-style:none;
padding:0px;
margin:2px 0px 0px 10px;
}

Les onglets ont le css suivant:

#onglets a
{
display:block;
width:123px;
z-index:2;
text-align:center;
float:left;
}

Et ce qui est affiché dans les onglets à le code suivant:

div.conteneurprinc
{
clear:both;
width:98%;
padding:6px;
margin:[b]-4px[/b] 0px 0px 0px;
}

L'idée est donc que les onglets s'affichent au dessus et laissent un blanc.

Pour le code HTML

<div class="conteneurprinc" id="onglets">
<a id="onglet1" onclick="affich_onglet(1);">Curriculum Vitae</a><a id="onglet2" onclick="affich_onglet(2);">Girls & Guys</a><a id="onglet3" onclick="affich_onglet(3);">Détail prestations</a><a id="onglet4" onclick="affich_onglet(4);">Me contacter</a>
</div>
<div class="conteneurprinc" id="Gconteneur1">
ce qui est dans mon onglet
</div>

Bon, j'ai vu votre superbe tutoriel pour la séparation du javascript du html, et je vais m'y mettre (mettre les balises "a" seulement si elles pointent vers une vrai adresse).

J'ai commandé le livre de Raphaël, il y aura peut être la réponse à ma question.

Savoir si il y a une solution ou pas ...

ghost a écrit :
Bonjour,

Un petit tour ici http://www.ultra-fluide.com/ressources/css/menu-onglets.htm devrait te renseigner.

Ok, merci !

J'ai pratiquement rien comprit à la page mais je crois que j'ai trouvé.

Il est vrai que je me suis entété dans mon idée de mettre une image qui surplombe l'autre alors que si je met ma barre en background de mon div qui supporte mes onglets, si mes divs ont un background propre, ils cacheront fatalement la barre.

Je pense que vous n'avez rien comprit, c'est pas grave ...

La morale de cette histoire: ne pas chercher à utiliser les divs de façon logique, en tant que "calques" ...

Bon trève de blabladage, je m'y met

Re,

Je crois effectivement que tu te compliquais la tâche en n'utilisant pas la méthode adéquate beaucoup plus simple, je te conseille dans un premier temps d'essayer un modéle sans portes coulissantes pour apprender la chose et après de passer au modéle complet.
Bon courage

J'ai dit une grosse bétise (j'ai dormi à peine 2 heures cette nuit ), effectivement ma barre se retrouve derrière, mais elle se retrouve derrière tout les onglets, et non pas seulement derrière l'onglet selectionné...

Alors je peux remplacer toutes les images en javascript, mais ça va être galère:

Si j'ai 4 onglets, il me faudra 4 images différentes pour chaque onglet, soit 16 images. (puisque les onglets ont des couleurs différentes)

Et d'un point de vue programmation, je trouve ça dérangeant de faire tout un script pour gérer mon apparence, alors que cela devrait être géré par le css.

Après si vous me dite qu'il n'y a pas de solution...

Pour voir la page

Re,

Ou je suis à coté de la plaque et je n'ai pas compris ton problème mais si c'est pour faire des onglets "à la Excel", il te suffit d'un block contenant ton menu avec un border-bottom défini, pour chaque onglet une image_off onglet fermé en bas et une image onglet_on avec le bas couleur du background.
Ton bloc <ul> positionné en relative avec un top de l'epaisseur de ta bordure du bas pour que les onglets "cachent" le border du bloc conteneur. Tu places tout ça dans un css externe, à l'état inactif tu laisses le background de l'onglet fermé et pour ta page active tu styles dans le code uniquement l'onglet correspondant en changeant son background par celui de l'onglet fermé...