Problème de fond et d'ombre de page html Fermé

Question

Bonjour, 

Voilà, j'ai créé la maquette pour mon futur site mais le montage est un peu plus complexe que je ne l'avais penser. 

Le hasard fait bien les choses, je voudrais comme sur le site "comment ca marche" avoir:
- une image de fond
- une colonne centrale fond blanc et ombre sur les cotés (ici il n'y pas d'ombre mais ca ne doit pas etre compliqué à ajouter)
- un bandeau haut d'une couleur et hauteur defini (comme le bandeau du menu sauf que moi c'est juste graphique)
- un bandeau bas de la meme couleur mais avec une image de fond (comme le bandeau du plan du site ici mais pour un formulaire)

Je crois qu'il y a des questions de valeur entre les différents type de balise/ID/class


voilà le debut de ma CSS:

* {
	margin: 0px;
	padding: 0px;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	background-image: url(images/background.jpg);
}
#global {
	width: 1040px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/background_content.png);
	background-repeat: repeat-y;	
  } /*j'ai fais une image avec le fond blanc et l'ombre de chaque coté, mais je préférerai créer l'ombre en CSS*/

Voilà j'espère avoir été clair :s
Merci d'avance pour votre aide :)

Navid_92 · Answer

* {
   margin:0;padding:0
}

body {
   font:normal 62.5% Helvetica, Arial, sans-serif;
   background:transparent url(images/background.jpg) no-repeat 0 0
}

#global {
   width:1040px;
   background:#fff;
   -webkit-box-shadow:0 0 12px 0 #656565;
      -moz-box-shadow:0 0 12px 0 #656565;
        -o-box-shadow:0 0 12px 0 #656565;
           box-shadow:0 0 12px 0 #656565;
   margin:0 auto
}

RAD ZONE · Answer

Salut la reponse de Navid_92 est bonne , mais les utilisateurs IE inferieur a 9 , donc tout les PC sous XP , ne pourront pas les voirs ! il faut ajouter un conditionel IE avec un filter:progid:DXImageTransform.Microsoft.Shadow site microsoft exemple ci dessous RAD ZONE Webcreation

il existe aussi d autre solutions pour IE et CSS3 ! http://css3pie.com/ ou https://modernizr.com/ a+ ♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

Krystel · Answer

Bonjour et Merci pour vos réponses.
J'ai utilisé la méthode de Navid_92, peu m'importe si les gens ayant une version antérieur à IE9 ne voit pas l'ombre. Mais bizarrement quand je mets mon footer en float left tout le fond de mon body s'en va, l'ombre comprise. Je ne sais pas à quoi cela est du.

D'autres part, savez vous comment je peux faire pour que mon formulaire soit un bandeau occupant toute la largeur de l'écran et de meme pour un bandeau dans le header?

Voici mon site tel qu'il est aujourd'hui: http://christelle-chaumond.fr/K_new3/
Et voici le resultat auquel je voudrais arriver : http://christelle-chaumond.fr/cc

Merci de votre aide! :)

Problème de fond et d'ombre de page html

3 réponses

Discussions similaires