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

Question

Bonjour,

j'aimerais créer une ombre dans les deux cotés du body de mon site.
comme sur ce site:
http://www.tux-planet.fr/

j'ai déjà l'image, il me faut la technique avec CSS / HTML
j'espere avoir été claire

Merci d'avance!

TiPit · Accepted Answer

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;
}

aragorn86 · Answer

salut
ta que lire cette partie de ce tutorial et dit moi apres: https://openclassrooms.com/fr/courses#ss_part_3
je supose ke ta le min de connaisence sur HTML et CSS !!!


bonne chance pour toi

hbhh · Answer

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 https://www.commentcamarche.net/ aussi d'ailleurs!
et à quoi correspond #page ?

merci d'avance

hbhh · Answer

svpppppp! de l'aide!

hbhh · Answer

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

Utilisateur anonyme · Answer

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.

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.

hbhh · Answer

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

Gihef · Answer

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.

--

. 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. --

warlix · Answer

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

parie centrale

et le site construit dedans , pour les cotés en fonction des résolution tu y mets en bg une couleur qui passe

tomytiger · Answer

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.

almantors · Answer

salut! 

  T'as résolu tn pb ?

omaplie · Answer

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

omaplie · Answer

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

dontpanik · Answer

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

dontpanik · Answer

Pour rétrécir le body comme tu dis :


body{
width:720px;
margin-right:auto;
margin-left:auto;
}

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

15 réponses

Discussions similaires

Newsletters