A voir également:
- Ombre aux bordures de la page web (CSS/HTML)
- Web office - Guide
- Supprimer une page word - Guide
- Bordure de page word - Guide
- Capture page web - Guide
- Comment traduire une page web - Guide
15 réponses
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;
}
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;
}
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.
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
Messages postés
9
Date d'inscription
samedi 26 mai 2007
Statut
Membre
Dernière intervention
26 septembre 2011
2
14 nov. 2008 à 18:35
14 nov. 2008 à 18:35
salut!
T'as résolu tn pb ?
T'as résolu tn pb ?
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
Mais pourrais-tu commenter t'es lignes s'il te plaît, j'ai un soucis...
Se serais vraiment super !!
Bonne journée
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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
En fait c'est une image de fond répétée verticalement.
Dans ce cas tout se passe dans le CSS
Ce qui donne : http://www.troc-net.com
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
aragorn86
Messages postés
17
Date d'inscription
jeudi 19 juillet 2007
Statut
Membre
Dernière intervention
18 mai 2008
1
31 mars 2008 à 23:26
31 mars 2008 à 23:26
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
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
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
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
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
Il me faut juste le code CSS ou HTML pour l'intégrer et le positionner correctement dans ma page web.
Merciiii
Pas de problème hbhh ( on est dans un forum d'aide non :p ? )
Bon alors je vois pas trop pourquoi tu as l'image de l'ombre seule ...
Ou pour que ca soit possible pourrais tu montrer un "plan" ou une capture d'écran de ton site...
En fait, si c'est par exemple un Rectangle avec des ombres, il faut que ça soit UNE SEULE image, mais en ".png" pour garder la transparence :)
=> Donc : Pourrais-tu détailler un petit peu ce que tu veux faire exactement ?
Cordialement.
Bon alors je vois pas trop pourquoi tu as l'image de l'ombre seule ...
Ou pour que ca soit possible pourrais tu montrer un "plan" ou une capture d'écran de ton site...
En fait, si c'est par exemple un Rectangle avec des ombres, il faut que ça soit UNE SEULE image, mais en ".png" pour garder la transparence :)
=> Donc : Pourrais-tu détailler un petit peu ce que tu veux faire exactement ?
Cordialement.
salut j'ai essayé ta technique mais ça ne marche pas vraiment.
D'autres solutions?
Merci d'avance!...
D'autres solutions?
Merci d'avance!...
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 779
7 avril 2008 à 22:43
7 avril 2008 à 22:43
Bonjour,
TiPit a repris le CSS de la page que tu donnes en exemple au début.
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.
--
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.
--
warlix
Messages postés
1201
Date d'inscription
mercredi 25 juillet 2007
Statut
Contributeur
Dernière intervention
21 février 2009
288
7 avril 2008 à 22:52
7 avril 2008 à 22:52
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
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
svpppppp! de l'aide!
Salut hbhh ;)
Bon alors j'ai la solution de ton problème =D
Les "ombres" sont faites avec un logiciel de graphisme, comme par exemple Photoshop !
Ce n'est pas de la programmation.
Si tu ne sais pas comment faire des ombres sous photoshop et que tu ne trouves pas la solution sur internet, poste un message ici pour demander.
Sur ce, bonne journée :D
Val'
Bon alors j'ai la solution de ton problème =D
Les "ombres" sont faites avec un logiciel de graphisme, comme par exemple Photoshop !
Ce n'est pas de la programmation.
Si tu ne sais pas comment faire des ombres sous photoshop et que tu ne trouves pas la solution sur internet, poste un message ici pour demander.
Sur ce, bonne journée :D
Val'
Utilisateur anonyme
2 avril 2008 à 12:00
2 avril 2008 à 12:00
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.
<table width="970" border="0" cellspacing="0" cellpadding="0" class="template">
<tr>
<td class="shadow-left" width="9"> </td>
<td ></td>
<td ></td>
<td class="shadow-right" width="9"> </td>
</tr>
</table>
<table width="970" border="0" cellspacing="0" cellpadding="0" class="template">
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.
<table width="970" border="0" cellspacing="0" cellpadding="0" class="template">
<tr>
<td class="shadow-left" width="9"> </td>
<td ></td>
<td ></td>
<td class="shadow-right" width="9"> </td>
</tr>
</table>
<table width="970" border="0" cellspacing="0" cellpadding="0" class="template">
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.
