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

Signaler
-
 Krystel -
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 :)

3 réponses

Messages postés
711
Date d'inscription
dimanche 7 décembre 2008
Statut
Membre
Dernière intervention
12 février 2015
76
* {
   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
}
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 86868 internautes nous ont dit merci ce mois-ci

Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1 310
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
<!--[if lte IE 8]>......<![endif]-->
avec un
filter:progid:DXImageTransform.Microsoft.Shadow
site microsoft

exemple ci dessous

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<!-- saved from url=(0014)about:internet --> <!-- POUR Eviter l alerte active x en local sur IE --> 

  <head> 
    <title> 
      RAD ZONE Webcreation 
    </title> 
    <style type="text/css"> 
/*<![CDATA[*/ 
    #box { 
      height: 200px; 
      width: 400px; 
      border: solid 1px #808080; 
      background: #ffc; 
      margin: 10px; 
      padding: 10px; 
    /* CSS3 Box-shadow code: */ 
      -moz-box-shadow: 8px 8px 12px #aaa; 
      -webkit-box-shadow: 8px 8px 12px #aaa; 
      box-shadow: 8px 8px 12px #aaa; 
    } 
    /*]]>*/ 
    </style> 

    <!--[if lte IE 8]> 
  <style type="text/css"> 
#box { 
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12); 
    zoom: 1; 
  } 
  </style> 
<![endif]--> 


  </head> 
  <body> 
    <div id="box"></div> 
  </body> 
</html> 



il existe aussi d autre solutions pour IE et CSS3 !
http://css3pie.com/
ou
http://modernizr.com/

a+

♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
Navid_92
Messages postés
711
Date d'inscription
dimanche 7 décembre 2008
Statut
Membre
Dernière intervention
12 février 2015
76
Personnelement je suis un anti-IE, ayant l'habitude de mettre un message en gros si tu es sous IE : "We're in 2012, upgrade your internet browser to another ..." mdr
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! :)
Navid_92
Messages postés
711
Date d'inscription
dimanche 7 décembre 2008
Statut
Membre
Dernière intervention
12 février 2015
76
Ton footer est dans ta div #global qui fait 960px. Donc même si tu met un width:100% sa marchera pas, car il se mettra à 960px, et non à 100% de ta page.

Pourquoi un float:left sur ton footer ?
On m'a appris a tout mettre en float left pour que les éléments se calent bien les uns en dessous des autres. Mais peu importe, il se place bien donc pas de problème plus que ca avec le footer. Par contre mon réel soucis est plutôt mon bandeau pour le formulaire :(