Ombre aux bordures de la page web (CSS/HTML)

Les 2 chose que tu a besoin au moin dans le CSS
et image de background

#page {
width: 1010px;
overflow: hidden;
position:relative;
margin: 0px auto;
}

et

html, body {
margin: 0px;
padding: 0px;
background: #eeeeee url(images/bg.png) repeat-y center;
color: #666;
font: 11px/15px Verdana, Arial, Helvetica, sans-serif;
}

salut

on peut aussi créer un bg (par ex: 800px/1px) qui regroupe a chaque éxtrémité le dégradé en png.
pour la parti css:

body {
background: url('ton bg') left top repeat-y;
background-position:center;
margin: 0;
padding: 0;
}

.page {
width : 800px;
margin : 0 0 0 0;
padding : 0 0 0 0;
}

Puis dans ta page html tu créé une div class="page" c'est tout simple.

salut!

T'as résolu tn pb ?

Super, ça fonctionne nickel !!
Mais pourrais-tu commenter t'es lignes s'il te plaît, j'ai un soucis...
Se serais vraiment super !!

Bonne journée

Ce que je trouve étrange, c'est que je ne trouve aucune solution pour pouvoir rétrécir la largeur du body !!
J'aimerais lui donner un width de 720 px mais je ne trouve aucune solution !!

Quelqu'un pourrait-il m'aider svp ??

Merci beaucoup, bonne journée

En fait c'est une image de fond répétée verticalement.

Dans ce cas tout se passe dans le CSS

body{
background: url(tonimagedefond.png);
bakground-repeat: repeat-x;
background-postion: center;
}

Ce qui donne : http://www.troc-net.com

salut
ta que lire cette partie de ce tutorial et dit moi apres: http://www.siteduzero.com/tuto-3-42-1-mise-en-boite-partie-1-2.html#ss_part_3
je supose ke ta le min de connaisence sur HTML et CSS !!!


bonne chance pour toi

oui aragorn86 j'ai des connaissances en css / html.
et le tuto du site du zéro ne correspond pas vraiment à ce que je veux.

TiPit, j'ai essayé ton code, ça ne marche pas. en le modifiant un peu j'ai réussi seulement à afficher l'ombre tout à droite de ma page (ou tout à gauche).
moi je veux une ombre qui montre que la page web est un pe 'surélevé' comme le site http://www.commentcamarche.net aussi d'ailleurs!
et à quoi correspond #page ?

merci d'avance

Merci Val mais j'ai déjà l'image (l'ombre).
Il me faut juste le code CSS ou HTML pour l'intégrer et le positionner correctement dans ma page web.


Merciiii

salut j'ai essayé ta technique mais ça ne marche pas vraiment.
D'autres solutions?

Merci d'avance!...

Bonjour,

TiPit a repris le CSS de la page que tu donnes en exemple au début.

html, body {
  margin: 0;
  padding: 0;
  background: #eeeeee url(images/bg.png) repeat-y center;
  color: #666;
  font: 11px/15px Verdana, Arial, Helvetica, sans-serif;
  }  /* Évite les font en px */

et

#page {
  width: 1010px;
  overflow: hidden;
  position:relative;
  margin: 0 auto;
  }

Et donc, ça marche.
Avec leur image (1040 x 1 px), avec les dimensions qu'ils ont choisi.

Toi, tu dois adapter à tes dimensions.
Et placer le contenu de ton site dans le <div id="page">.


Et puis, si tu nous montrais comment tu fais, ça nous éviterait de te proposer des trucs qui marchent sans que tu saches les faire fonctionner.

 --

salut


Sinon tu as le choix de faire un png d un bord fin 1 ou 2 pixel avec une ombre portée
tu le mets en bordure
sur ccm sur la gauche ce st juste une barre en dégradé qui donne cet effet , enfin d aprés moi
sur la droite ça dois être le coup du png

Sinon tu peux aussi déterminer une taille fixe de la partie centrale et faire un bg de 900 ou 1024 avec ce procédé ,
une image de 1024x 1 (ou 10) px que tu mets en <div> parie centrale</div>
et le site construit dedans , pour les cotés en fonction des résolution tu y mets en bg une couleur qui passe

Pour rétrécir le body comme tu dis :

body{
width:720px;
margin-right:auto;
margin-left:auto;
}

svpppppp! de l'aide!

Tu peux faire un truc du genre. Créer un tableau. par exemple 4 colonnes. les deux colonnes des extrémités servent à placer ton image en dégradé. ton html va rechecher dans ton css les propriètés de ton image.


<table width="970" border="0" cellspacing="0" cellpadding="0" class="template">
<tr>
<td class="shadow-left" width="9"> </td>
<td ></td>
<td ></td>

<td class="shadow-right" width="9"> </td>
</tr>
</table>
<table width="970" border="0" cellspacing="0" cellpadding="0" class="template">


Ton css.

td.shadow-left {background:#d1d0cf url(../../tpl_img/shadow-left.jpg) top left repeat-y}
td.shadow-right {background:#d1d0cf url(../../tpl_img/shadow-right.jpg) top right repeat-y}

bien faire deux images distinctes avec un dégradé vers la gauche et un vers la droite.