Jump to content

[Résolu] P'tite requête CSS


Recommended Posts

Salut la Communauté et encore merci pour ce merveilleux outil qu'est PS (on ne le répètera jamais assez).

Je me tourne vers vous afin de solutionner un petit caprice.

J'aimerais en fait pouvoir insérer deux images à droite et à gauche du site, ainsi qu'un background dégradé en fond, tout en conservant le background relatif à la navigation blanc (en gros un peu comme ça les deux pièces jointes, et surtout la première).

Je connais l'emplacement de mon fichier CSS (themes>themeX>css>global.css) mais j'avoue être légèrement paumé dans l'ajout de différents éléments.

Pour résumer, comment faire que mon CSS ajoute un background issu d'une image (un dégradé .jpeg), conserve le background central en blanc (color), ajoute deux colonnes latérales de part et d'autre du site...

J'en suis encore à ce stade (exemple) pour information (je cherche du pétrole quoi T_T):

body {
   background-color: #FFCC66;
   background-image: url("butterfly.gif");
   background-repeat: no-repeat;



*** Le lien de ma PS au passage, histoire que vous sachiez où j'en suis ^^ : http://eboutique.micro-project.fr/

7997_UGaLRDj34C3XfDJfRVLe_t

7998_E1ijGVP1nwB1S9OPcPqd_t

Share this post


Link to post
Share on other sites

Salut,

Pour ton fond dégradé essaye :

background: #fff url(../img/degrade.jpeg) repeat-x top left;



Avec ton image stockée dans le répertoire "img" de ton theme.


Pour les images de cotée, j'utilise la balise Position relative avec des coordonnées TOP et LEFT.
ou une image en background centré (un poil plus lourd, tout dépend de limage).

Maintenant pour comprendre le comment du pourquoi :
http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html#part_13663

et un petit coup de firebug aussi pour tester vos insertions CSS...


V++

Atch

Share this post


Link to post
Share on other sites

Merci pour votre réponse Atch...

Cependant, je viens de me refaire le topic du SDZ au cas où... cependant j'ai toujours le même soucis.

Si mon raisonnement est juste, l'application du background réside dans la page entière (donc la balise body).

De par ce fait, si j'applique mon fond dégradé par exemple [...]

background: #fff url(../img/degrade.jpeg) repeat-x top left; 



[...] j'épuise ma valeur background.

Ma question est donc la suivante (avant d'éclater mon .css je préfère vérifier) : la ligne de code background est-elle répétable, et si oui, sous quelle forme ? (peut-on cumuler les "objets" du background dans la ligne de code, et comment ?)

Du genre ?

background: #fff url(../img/degrade.jpeg) repeat-x top left; 
background: white no-repeat center fixed
background: url("../img/column1.gif") no-repeat right fixed
background: url("../img/column.gif") no-repeat left fixed



Ou plutôt ?

background : #fff url (../img/degrade.jpeg) repeat-x top left; white no-repeat center fixed; url("../img/column1.gif") no-repeat right fixed; url("../img/column2.gif") no-repeat left fixed;

Share this post


Link to post
Share on other sites

tu ne peux mettre qu'un seul backgroud image dans ta balise "body".

Si tu veux mettre d'autres fonds, il te faut créer des balises (genre

) à l'intérieur.

V++

Atch

Share this post


Link to post
Share on other sites

Bon j'ai écumé mon .css toute la journée pour arriver au résultat lol.

Pour le moment, je reste sur le plan théorique :

Sachant que le background peut prendre à la suite les valeurs des propriétés css de (dans l'ordre énoncé):

- background-color, couleur d'arrière plan (couleur de fond)
- background-image, image d'arrière plan (image de fond)
- background-repeat, répétition de l'image d'arrière plan (répétition de l'image de fond)
- background-attachment fixe l'image d'arrière plan (fixe l'image de fond)
- background-position, position de l'image d'arrière plan (position de l'image de fond)

Il donc possible d'omettre ou d'ajouter des valeurs.

Mais j'en reste toujours au même point concernant mon soucis : l'insertion de balises

dans le background pour pouvoir faire apparaître une couleur de fond (en image dégradé), deux images encadrant le site de part et d'autre.

Edit : en ce qui concerne l'insertion d'un dégradé c'est fait, y'a pas eu de soucis majeur. Désormais se représente le soucis d'insertion de deux images supplémentaires encadrant le site (cf. P.J. au début du post).

J'ai utilisé Firebug sur ces fameux sites mais leur .css est franchement différent... donc me voilà revenu au même point ^^

Please Help ! T_T

Share this post


Link to post
Share on other sites

Voilà, je viens de trouver la solution.

Soit on implémente les technologies PHP et Java pour déployer plusieurs éléments dans les .html et .css, soit on la joue Old School et on agit ainsi :

Il suffit de créer une image comprenant tous les éléments que l'on souhaite ajouter : pour moi deux colonnes et un fond blanc.

Il suffit de se baser sur les dimensions de la page pour les margin et tout coule avec une insertion simple de CSS :

body {
   background-color: #FFCC66;
   background-image: url("fond.gif");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
}



Ou plus simplement :

background: #FFCC66 url("fond.gif") no-repeat fixed center;



Pour info en P.J. vous avez un exemple de division simple.

Voilou, comme quoi suffit de chercher un bon moment, il n'y a pas de problèmes : il n'y a que des solutions !

PROBLEM SOLVED =^_^=

8059_3L6WMrBlaivoAS0rxlm7_t

Share this post


Link to post
Share on other sites

  • 1 month later...

Hello,

Un petit up car l'effet ombré m'intéresse mais je bute.

je vous joint une capture pour mieux visualiser, sachant que je souhaite l'ombre au bord de la page blanche, avant le fond rose.

J'ai lu les topics ci-dessous
http://www.prestashop.com/forums/viewthread/14507/graphisme/faire_une_ombre
http://www.prestashop.com/forums/viewthread/14019/graphisme/degrade_cadre_principal


j'ai tenté de mettre le background image au body puis au #page.. Tenté aussi un div.
Je dois zapper ou mal copier un code.

J'ai procédé avec l'image proposée par "Mastercréa", je crois que c'est là que ça bloque... ?

Merci à vous de relancer le sujet

9640_kMwpPQAqisrUmhrfVg1e_t

Share this post


Link to post
Share on other sites

Bonjour
Arobase
Quelle version de PShop utilisez-vous ?
car la meileur des solution est pourtant

body {
   background: #8a8a8a url('../img/effect.png') repeat-y 50% 1px;
   font-size: 11px;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   color: #5d717e;
   text-align:center;
} 



dans le global.Css
Et de copier l'image du lien dans le répertoire ../img/effect.png
et cela passera

Share this post


Link to post
Share on other sites

ça me refait le même problème à savoir l'ombré d'un seul côté et surtout ça me "bouffe" le fond rose (voir screen). Vu que j'ai déjà une image en backround, ne dois-je pas mettre le dégradé plutôt sur le #page ?

9653_E6iHSFsBT95JPeNUtELa_t

Share this post


Link to post
Share on other sites

Sinon,
Le plus simple serait de faire directement ton dégradé sur le background
avec la solution qu'a apporté Micro Project ( là c'est fond.gif)
exemple
voir ces 2screens en piece jointes

le 1er c'est un exemple du background que tu voudrais
et le 2eme screen c'est le résultat en zoom de se que j'ai fait
et avec cela aussi cela passe

9654_nuyYUkAO3ZruJDA87D9i_t

9655_hfyQRvMsWBN9IJhPaGlV_t

Share this post


Link to post
Share on other sites

pas bête... mais mon image en fond n'est qu'un petit carré répété...
donc pas adaptable dans mon cas.

En tout cas, merci de me proposer des solutions...

On n'a pas dit notre dernier mot, n'est-ce-pas.. snif

Share this post


Link to post
Share on other sites

Vous pouvez faire avec une images qui forme un petit carré
regardez sur ce lien la ( un lien qui me sert a faire des tests)
http://tanatheos.i-neti.net/angerspc/
Au passage je me suis aidé d un vieux kit acheté chez un revendeur ( mais ce kit n'est là que pour le fun)
Apres certaines modifs apportés qui ne font pas partie du kit officiel
l'image en fond ne fessant que 2x2cm
ensuite j'ai modifié avec Paint, l'image comme je vous l'ai dit plus haut
et le tour est joué

Share this post


Link to post
Share on other sites

Voilà mon image modifiée avec le dégradé (attachée) et avec le code de Micro Project, j'obtiens un fond blanc partout comme sur le template de départ.

J'en perd le sens logique...

9660_8cDuFv9TWv6XQY2UPvDL_t

Share this post


Link to post
Share on other sites

Et voilà le résultat !

Je paufine encore des essais graphiques pour avoir une transition moins brutale sur le coté droit, avoir quelque chose de plus fondu.

Merci à Maury d'avoir insisté !

9661_U1M5juiTqzwQIpsCCudS_t

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More