28172 sujets

CSS et mise en forme, CSS3

Effet d'ombre sur les bords du site en css

Bonjour à tous amis du web,

je touche a la création de site depuis 2/3 ans a temps perdu, depuis peu, j'essaye de faire un site intégralement en css proprement avec les différentes validations ...

J'ai un cadre général et a l'intérieur des DIV et include, je m'attaque au design, et j'aurai aimer mettre a gauche et a droite de ce cadre des effets d'ombre...

voici mon code :
body {
font-family: Verdana;
font-size: 0.7em;
}
#cadre {
width:1024px;
margin:auto;
padding:0px;
background-color:#D8CDE9;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:0px solid #000000;
border-top:1px solid #000000;
}


j'ai essayer de mettre une image dans le fond du body
background-image:url(images/fond-ombre.png);
background-repeat:repeat-y;
background-position:center;


cet image je l'ai faite en prenant un alt+imprim écran sous photoshop, et au niveau des bord du cadre, j'ai mit 5 pixels de chaque coté en dégradé... pour l'ombre..

ça le fait +/-, mais l'image de l'effet continue en haut et en bas de mon cadre général lol, pense pas qu'il existe un truc pour définir une taille en hauteur, vu que mon site et en margin:auto; et donc pas la même hauteur selon les pages web...

donc j'ai abandonner ce système D pour trouver peu être auprès des connaisseurs, des propriétés css que je ne connait peu être pas...

est il possible simplement d'attribuer des images (effet d'ombre) a gauche et a droite de mon cadre, au border SVP?

m'explique peu etre mal, je suis pas un crack Smiley cligne

merci pour vos futurs avis
Modifié par M.Vaillant (11 Nov 2008 - 19:57)
Hello M.Vaillant et bienvenue sur le forum Smiley smile ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait donc courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile
Modérateur
Salut M.Vaillant et bienvenue sur le forum,

Je crois que tu as une petite erreur de css au niveau de ton centrage. Il me semble que cela devrait être ceci :


body {
  font-family: Verdana;
  font-size: 0.7em;
  text-align:center;
}
#cadre {
width:1024px;
margin: 0 auto; /* <---------erreur */
text-align:left;
padding:0px;
background-color:#D8CDE9;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:0px solid #000000;
border-top:1px solid #000000;
}


Si tu veux mettre un effet ombré, le gabarit devrait être à peu près ceci :

<body>
<div id="cadre">
  <div id="cadre_haut">
     <!-- image du haut -->
  </div>
  <div id="contenu">
    <!-- contenu -->
  </div>
  <div id="cadre_bas">
    <!-- image du bas-->
  </div>
</div>
</body>


++
Modifié par Nolem (11 Nov 2008 - 20:04)
Heyoan a écrit :
Hello M.Vaillant et bienvenue sur le forum Smiley smile ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait donc courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile


salut, merci, en + j'ai lu la case départ mais dans le message pas pensez a le mettre lol, j'y penserai la prochaine fois promit Smiley cligne j'aime les forums bien structurer Smiley cligne
Nolem a écrit :
Salut M.Vaillant et bienvenue sur le forum,

Je crois que tu as une petite erreur de css au niveau de ton centrage. Il me semble que cela devrait être ceci :


body {
  font-family: Verdana;
  font-size: 0.7em;
  text-align:center;
}
#cadre {
width:1024px;
margin: 0 auto; /* <---------erreur */
text-align:left;
padding:0px;
background-color:#D8CDE9;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:0px solid #000000;
border-top:1px solid #000000;
}


Si tu veux mettre un effet ombré, le gabarit devrait être à peu près ceci :

<body>
<div id="cadre">
  <div id="cadre_haut">
     <!-- image du haut -->
  </div>
  <div id="contenu">
    <!-- contenu -->
  </div>
  <div id="cadre_bas">
    <!-- image du bas-->
  </div>
</div>
</body>


++


salut euh ? Smiley biggrin chouette ton pseudo Smiley cligne
j'ai essayer ca dans mon index, mais c'est le bordel ^^

pense pas que ce soit ca, ah moins que je me gourre...
Modérateur
M.Vaillant a écrit :


salut euh ? Smiley biggrin chouette ton pseudo Smiley cligne
j'ai essayer ca dans mon index, mais c'est le bordel ^^

pense pas que ce soit ca, ah moins que je me gourre...


Salut M.Vaillant,

Merci pour mon pseudo. Ce n'est qu'un anagrame.

Pour ton petit soucis, je viens de faire vite fait un test sur mon code et je ne vois pas de problème à l'horizon. Donc, je pense que ton code doit être erroné quelque part. Le mieux est que tu postes sur le forum ton code source afin que je ou quelqu'un d'autre puisse te déboguer. Pour information, je crois que width:1024 est un peu trop grand. Je me permet de te conseiller de réduire afin que ton gabarit de départ fasse 960px maximum. Ainsi, tu n'auras pas de problème de barre scroll horizontale. À moins que ton site soit fait pour des résolutions supérieur à 1024px ?

++
Modifié par Nolem (12 Nov 2008 - 20:22)
Sujet clos
Aller à