IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Shadow sur les 4 côtés d'un bloc


Sujet :

CSS

  1. #1
    Membre habitué
    Inscrit en
    Août 2008
    Messages
    1 596
    Détails du profil
    Informations forums :
    Inscription : Août 2008
    Messages : 1 596
    Points : 175
    Points
    175
    Par défaut Shadow sur les 4 côtés d'un bloc
    Bonjour, j'ai une div container contenant un header, menu, contenent, footer (toutes sont des div).

    je veux mettre un shadow sur tout le contenu container sur les 4 coté : haut bas droit gauche, quand je l'applique sur mon css, il s'applique juste en haut et un peu des deux coté sans couvrir toute ma div container, et si le met a l'interieur de chaque div il s'applique mais meme au milieu.

    j'espere que j'ai bien expliqué le probleme ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    #Container{
        margin-left : auto;
        margin-right : auto;
        width : 960px;
        background-color : White;
        margin-top : 200px;
        box-shadow:  0px 0px 6px 0px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow:  0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <body>
        <form id="f_master" runat="server">
        <div id = "Container">
            <div id ="Header"></div><!--fin header-->
            <div id ="Menu"></div><!--fin menu-->
            <div id = "Contenent">
            <asp:ContentPlaceHolder id="ContentHolder" runat="server">
     
            </asp:ContentPlaceHolder>
        </div> <!-- fin Contenet -->
        <div id ="Footer"></div>
        </div> <!-- fin container -->
        </form>
    </body>

  2. #2
    Membre éclairé
    Homme Profil pro
    Formateur en informatique
    Inscrit en
    Septembre 2012
    Messages
    416
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Formateur en informatique
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Septembre 2012
    Messages : 416
    Points : 747
    Points
    747
    Par défaut
    Bonjour,

    Ton code me donne ceci,

    ce qui ressemble à ce que tu recherches. (ou j'ai mal saisi ton souci)

  3. #3
    Membre habitué
    Inscrit en
    Août 2008
    Messages
    1 596
    Détails du profil
    Informations forums :
    Inscription : Août 2008
    Messages : 1 596
    Points : 175
    Points
    175
    Par défaut
    NON NON C'EST EXACTEMENT CE QUE JE VEUX, mais moi ca me donne juste le trait en haut et le trait du header des deux cotés et les autres non,

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    Quel navigateur utilises-tu ? Quelle version ? Peux-tu nous montrer un lien vers ton problème ?

  5. #5
    Membre habitué
    Inscrit en
    Août 2008
    Messages
    1 596
    Détails du profil
    Informations forums :
    Inscription : Août 2008
    Messages : 1 596
    Points : 175
    Points
    175
    Par défaut
    j'utilise chrome

  6. #6
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    Citation Envoyé par Bisûnûrs Voir le message
    [...] Quelle version ? Peux-tu nous montrer un lien vers ton problème ?
    Fiou. C'est difficile de te faire sortir les vers du nez.

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    box-shadow:  0px 0px 6px 0px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow:  0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    Attention ! C'est la version non préfixée qu'il faut mettre en dernier car c'est la version finalisée et conforme et celle qui devrait être utilisée.
    Dans ton code, la version préfixée (dont potentiellement encore boguée) écrase la version stable. D'ailleurs, actuellement, il me semble même assez inutile d'utiliser la version préfixée.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  8. #8
    Membre habitué
    Inscrit en
    Août 2008
    Messages
    1 596
    Détails du profil
    Informations forums :
    Inscription : Août 2008
    Messages : 1 596
    Points : 175
    Points
    175
    Par défaut
    quand j'utilise le -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    uniquement ca ne fonctionne pas aussi

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 120
    Points
    44 120
    Par défaut
    Bonjur,
    ce qu'a exprimé Bovino est l'inverse, box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); devrait suffire.

  10. #10
    Membre habitué
    Inscrit en
    Août 2008
    Messages
    1 596
    Détails du profil
    Informations forums :
    Inscription : Août 2008
    Messages : 1 596
    Points : 175
    Points
    175
    Par défaut
    Même cela n a pas fonctionnė je reçois un shadow en haut de mon container et un peu à droite et à gauche

  11. #11
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    D'accord, mais qu'est-ce que tu veux qu'on te dise de plus ?
    Tu nous donnes un code en disant que ça marche pas.
    Sur la base de ton code, on teste (screenshot à l'appui) et ça marche correctement. Donc manifestement, le problème ne vient pas de ce que tu nous a montré, donc il nous est impossible de t'aider.

    Je te rappelle aussi que tu peux facilement utiliser la console de développement pour essayer d'identifier où se situe le problème...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  12. #12
    Membre habitué
    Inscrit en
    Août 2008
    Messages
    1 596
    Détails du profil
    Informations forums :
    Inscription : Août 2008
    Messages : 1 596
    Points : 175
    Points
    175
    Par défaut
    ca se peux que j'ai un probleme de version de css, a coté de
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    box-shadow:  0px 0px 6px 0px rgba(0, 0, 0, 0.2);
    il me dit validation css 2.1, comment je peux passer vers css 3

  13. #13
    Membre éclairé
    Homme Profil pro
    Formateur en informatique
    Inscrit en
    Septembre 2012
    Messages
    416
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Formateur en informatique
    Secteur : Associations - ONG

    Informations forums :
    Inscription : Septembre 2012
    Messages : 416
    Points : 747
    Points
    747
    Par défaut
    box-shadow est une propriété CSS3.

    Le code suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    .item {
    box-shadow : 0 0 6px 0 rgba(0, 0, 0, 0.2);
    }
    est valide CSS3 selon le validateur http://jigsaw.w3.org/css-validator/#validate_by_input

  14. #14
    Membre habitué
    Inscrit en
    Août 2008
    Messages
    1 596
    Détails du profil
    Informations forums :
    Inscription : Août 2008
    Messages : 1 596
    Points : 175
    Points
    175
    Par défaut
    j ai pas compris votre reponse

  15. #15
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    J'ai pas compris votre question.

  16. #16
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    En tout état de cause, il n'y a pas de notion de version de CSS.
    Soit le navigateur intègre les propriétés CSS 3 (ce qui est le cas de tous les navigateurs récents) soit pas.
    Et dans le cas de Chrome, il n'y a pas de question à se poser à ce sujet, donc le problème vient d'ailleurs !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  17. #17
    Membre habitué
    Inscrit en
    Août 2008
    Messages
    1 596
    Détails du profil
    Informations forums :
    Inscription : Août 2008
    Messages : 1 596
    Points : 175
    Points
    175
    Par défaut
    OK mais pourquoi quand je met shadow.... il me dit validation css 2.1

  18. #18
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Mais non, t'en occupe pas de ça. Le validateur CSS est par défaut en CSS 2, si tu vas dans "Options supplémentaires", tu peux choisir CSS 3 mais ça n'a rien à voir avec la prise en charge ou non des propriétés par les navigateurs.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  19. #19
    Membre habitué
    Inscrit en
    Août 2008
    Messages
    1 596
    Détails du profil
    Informations forums :
    Inscription : Août 2008
    Messages : 1 596
    Points : 175
    Points
    175
    Par défaut
    Merci Bovino pour tes explications

  20. #20
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 120
    Points
    44 120
    Par défaut
    La FORM autour de ta DIV sert à quoi?

    A quoi ressemble le code HTML généré par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <asp:ContentPlaceHolder id="ContentHolder" runat="server">
    </asp:ContentPlaceHolder>
    Autant de questions qui méritent réponses, un élément pouvant cacher tes bordures.

Discussions similaires

  1. Discutions/explications sur les shadow maps
    Par deadalnix dans le forum Moteurs 3D
    Réponses: 1
    Dernier message: 04/01/2008, 21h26
  2. Questions sur les Shadow Maps
    Par funkydata dans le forum DirectX
    Réponses: 4
    Dernier message: 25/10/2007, 14h58
  3. Réponses: 6
    Dernier message: 14/11/2006, 16h52
  4. [Static] nouvelle question sur les blocs static
    Par Alec6 dans le forum Langage
    Réponses: 2
    Dernier message: 25/11/2004, 19h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo