Avoir un effet d'ombrage autour de son site - CSS + html

Logiciel & apps Programmation
1

Bonjour,

J’ai parcouru plusieurs fois le forum sans trouver de réponses à ma question.
Pour faire simple je souhaiterai avoir un effet de bordure dégradé similaire à ce site :

http://www.e-mosaique.com/newmosaic/

J’ai réussi à fixer la taille de mon site à 800px

Dans mon fichier header.php j’ai mis ceci :

  if ($messageStack->size('header') > 0) {
	echo $messageStack->output('header');
  }
?>

<!-- Table de centrage -->
<table align="center" cellpadding="0" cellspacing="0"  width="800"><tr><td></td></tr> <!-- Ligne de marge du haut -->
<tr><td class="FondPage">

Dans le fichier footer j’ai appliqué ceci :

</td></tr></table>

J’ai maintenant un cadre autour de mon site, mais comment faire pour lui rajouter des bordures en dégradé?
J’ai créé sous “Gimp” 3 images images avec un dégradé de couleur.

1 image pour la gauche
1 image pour la droite
1 image pour le bas

Cordialement,
Patrick

2

http://www.google.fr/search?hl=fr&q=style+…he+Google&meta=

3

Je développe aussi un site avec le meme genre d’ombrage, j’arrive à faire quelque chose mais la solution ne me plait pas trop car je dois specifier du code pour Firefox et du code pour IE, donc en fait si quelqu’un a une solution unique quel que soit le browser ça m’intéresserait! (et je sais meme pas si ça marche avec d’autres browsers comme opera).

Bref, voilà ce que j’ai :

Dans le fichier d’entete :


<div id="maincontainer">
blablabla...

Dans le fichier de pied :


</div>
<div id="bottomcontainer"> </div>

Et dans mon fichier css:


/* Version spéciale IE */
div#maincontainer {
	position: relative;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-container.png',sizingMethod='scale');
	width: 880px;
	padding: 0px 17px;
	margin: 0 auto;
}

/* Version "normale" */
body> div#maincontainer {
	background: transparent url(../images/bg-container.png) repeat-y;
	width: 850px;
}

/* Version spéciale IE */
div#bottomcontainer {
	position: relative;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg-container-bottom.png',sizingMethod='scale');
	width: 880px;
	padding: 0px 17px;
	margin: 0 auto;
}

/* Version "normale" */
body> div#bottomcontainer {
	background: transparent url(../images/bg-container-bottom.png);
	width: 850px;
}

Les images (bg-container.png et bg-container-bottom.png) font le dégradé et doivent être placée exactement au bon endroit évidemment.

4

PS : si tu veux voir les images de dégradé pour mon exemple :

http://chahira.takvorian.free.fr/site/images/bg-container.png

http://chahira.takvorian.free.fr/site/images/bg-container-bottom.png

5

Bonjour, bienvenue sur les forums de Clubic :slight_smile:

Je te prierai de mettre le langage informatique dans le titre, tel que requis par la charte du forum programmation - pour une meilleure compréhension les uns des autres.

A lire :
http://www.clubic.com/forum/charte-du-foru…on-t306797.html

Pour éditer:
Suffit de cliquer sur ce bouton, dans ton message : http://www.clubic.com/forum/style_images/persoclubic/editer.gif

Merci et bon courage pour ton problème :jap:

6

Bonjour,

Désolé mais en fait je suis vraiment débutant, pourrier vous me dire comment dois je procéder, j’ai posté en haut les portions de codes concernés.

Cordialement,
Patrick