Probleme de z-index

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Probleme de z-index

    Bonjour
    voici le site en test encore template yoo level
    http://olimer1.dyndns.biz/
    dans la partie droite j'ai une image orange (qui est pour l'instant sous la colonne droite) que je voudrais au dessus de toutes les images
    voici ce que j'ai mis en css
    Code:
    div#page-body {
    position:relative;
    z-index:999;
    background:url(../images/colonne-droite.png) 78% 0 repeat-y;
    mais bien sûr cela ne fonctionne pas
    Merci d'avance
    Dernière édition par cb75ter à 13/04/2011, 23h07 Raison: Rajout des balises de code

  • #2
    Re : Probleme de z-index

    Salut,

    Cela ne marche pas car #page-body a déjà un background attribué (page_bg_img.jpg) !!

    Tu ne peux pas en css2 attribuer plusieurs backgrounds à un élément. Si tu supprimes la première image, la seconde apparaît.

    De plus #page-body n'a rien à voir avec ta colonne de droite, c'est le conteneur principal de ton site. Essaye sur #right_container ou quelque chose dans le genre.

    a+

    Commentaire


    • #3
      Re : Probleme de z-index

      Bonjour
      j'ai justement supprimer page_bg_img.jpg. et mis mon image à la place j'ai essayer de mettre aussi en div#right même probleme l'image reste en dessous.

      Commentaire


      • #4
        Re : Probleme de z-index

        Oui c'est normal, même si tu appliques un z-index énorme au conteneur, le contenant sera de ton façon affiché au dessus !!
        Sinon tu verrais ton background mais pas le texte de ta colonne droite....

        C'est pour ça qu'il faut que tu appliques ce background directement sur la colonne, et pas sur le body/wrapper.

        Commentaire


        • #5
          Re : Probleme de z-index

          j'ai mis l'image dans div#right toujours en dessous ...

          Commentaire


          • #6
            Re : Probleme de z-index

            C'est normal, il y a des éléments à l'intérieur de ta colonne #right qui ont un background. Ca te semble pas normal que le background de ton menu soit au-dessus du background de la colonne à l'intérieur de laquelle il est ?!!

            A ce moment là supprime tous les backgrounds de tous les enfants de #right (menu, mémo, etc.)

            Commentaire


            • #7
              Re : Probleme de z-index


              voici ce que je souhaiterais obtenir
              Peut etre en rajoutant une balise div dans la colonne droite ?
              Dernière édition par arpagaus à 16/03/2011, 08h47

              Commentaire


              • #8
                Re : Probleme de z-index

                Qu'est-ce que tu ne comprends pas dans mon post précédent ?

                Commentaire


                • #9
                  Re : Probleme de z-index

                  Merci de votre aide
                  l'image que je veux transparente doit recouvrir tous les éléments de la colonne droite je vais retirer tous les backgrounds et je verrais ce que cela fait. Désolé je suis novice en CSS et je pensais que z-index reglerait mon problème.

                  Commentaire


                  • #10
                    Re : Probleme de z-index

                    Re,

                    z-index ne fonctionne qu'entre éléments situés à la même hauteur. C'est plutôt logique, car sinon un z-index mal placé pourrait recouvrir les éléments situés à l'intérieur !

                    Concernant ta maquette, plusieurs points :

                    - La structure de ton template ne permettra pas quoi qu'il arrive de recouvrir le bandeau de ton header. Il faudrait tout recoder pour ça.
                    - La seule solution pour toi sera d'appliquer ton background à #right, et de supprimer les backgrounds à l'intérieur de cettecolonne.
                    - Il reste un problème : la colonne #right ne descend pas tout en bas, elle s'arrête au dernier élément, soit le sondage. Il n'y a pas grand chose à faire, c'est dû au fonctionnement de css.
                    - Tu aurais une solution pour coller à ta maquette, plutôt sale et compliquée : récupérer la hauteur de ta page via javascript, créer une colonne de cette hauteur, la positionner en absolute à droite, et jouer avec les z-index jusqu'à ce que tu arrives au résultat voulu. Sale et compliqué.

                    Il reste une solution intermédiaire, créer un background de 1010px de large, soit la largeur de ton template (un peu trop large d'ailleurs), qui serait gris ou blanc sur toute la partie gauche, et orange les 190px de droite (soit la taille de ta colonne #right), puis d'appliquer ce background à #middle, et supprimer le background de #right. Réduire ensuite la hauteur de l'image à 1px.

                    De cette façon tu pourra créer une "fausse colonne" et tu n'aura plus de problème de z-index.

                    L'image ressemblerait à ça :

                    __________________image_____________________

                    <---------------------------------><----------->
                    _________820px blanc_____________190px orange

                    Commentaire


                    • #11
                      Re : Probleme de z-index

                      Merci encore de vos conseils je vais tenter de modifier le background de middle et je vous tiens au courant

                      Commentaire


                      • #12
                        Re : Probleme de z-index

                        Ok bon courage !

                        Commentaire

                        Annonce

                        Réduire
                        1 sur 2 < >

                        C'est [Réglé] et on n'en parle plus ?

                        A quoi ça sert ?
                        La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                        Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                        Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                        Comment ajouter la mention [Réglé] à votre discussion ?
                        1 - Aller sur votre discussion et éditer votre premier message :


                        2 - Cliquer sur la liste déroulante Préfixe.

                        3 - Choisir le préfixe [Réglé].


                        4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                        2 sur 2 < >

                        Assistance au forum - Outil de publication d'infos de votre site

                        Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                        Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                        Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                        UTILISER À VOS PROPRES RISQUES :
                        L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                        Problèmes connus :
                        FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                        Installation :

                        1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                        Archive zip : https://github.com/AFUJ/FPA/zipball/master

                        2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                        3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                        4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                        5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                        6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                        et remplacer www. votresite .com par votre nom de domaine


                        Exemples:
                        Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                        Télécharger le script fpa-fr.php dans: /public_html/
                        Pour executer le script: http://www..com/fpa-fr.php

                        Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                        Télécharger le script fpa-fr.php dans: /public_html/cms/
                        Pour executer le script: http://www..com/cms/fpa-fr.php

                        En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                        Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                        Voir plus
                        Voir moins
                        Travaille ...
                        X