Problème de fond et d'ombre de page html
Krystel
-
Krystel -
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:
Voilà j'espère avoir été clair :s
Merci d'avance pour votre aide :)
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 :)
A voir également:
- Problème de fond et d'ombre de page html
- Impossible de supprimer une page word - Guide
- Fond de page word - Guide
- Editeur html - Télécharger - HTML
- Numéro de page word - Guide
- Trame de fond word - Guide
3 réponses
* {
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
}
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
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. ♣
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
https://modernizr.com/
a+
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
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! :)
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! :)
