Micro Project Posted May 26, 2009 Share Posted May 26, 2009 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/ Link to comment Share on other sites More sharing options...
Atch Posted May 26, 2009 Share Posted May 26, 2009 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_13663et un petit coup de firebug aussi pour tester vos insertions CSS...V++Atch Link to comment Share on other sites More sharing options...
Micro Project Posted May 26, 2009 Author Share Posted May 26, 2009 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; Link to comment Share on other sites More sharing options...
Atch Posted May 26, 2009 Share Posted May 26, 2009 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 Link to comment Share on other sites More sharing options...
Micro Project Posted May 26, 2009 Author Share Posted May 26, 2009 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 Link to comment Share on other sites More sharing options...
Micro Project Posted May 27, 2009 Author Share Posted May 27, 2009 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 == Link to comment Share on other sites More sharing options...
arobase Posted July 17, 2009 Share Posted July 17, 2009 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-dessoushttp://www.prestashop.com/forums/viewthread/14507/graphisme/faire_une_ombrehttp://www.prestashop.com/forums/viewthread/14019/graphisme/degrade_cadre_principalj'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 Link to comment Share on other sites More sharing options...
Maury Girard Posted July 17, 2009 Share Posted July 17, 2009 Bonjour ArobaseQuelle 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.CssEt de copier l'image du lien dans le répertoire ../img/effect.pnget cela passera Link to comment Share on other sites More sharing options...
arobase Posted July 17, 2009 Share Posted July 17, 2009 Version 1.1.0.5Je vais retenter...Merci, je vous fais signe Link to comment Share on other sites More sharing options...
arobase Posted July 17, 2009 Share Posted July 17, 2009 ç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 ? Link to comment Share on other sites More sharing options...
Maury Girard Posted July 17, 2009 Share Posted July 17, 2009 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)exemplevoir ces 2screens en piece jointesle 1er c'est un exemple du background que tu voudraiset le 2eme screen c'est le résultat en zoom de se que j'ai fait et avec cela aussi cela passe Link to comment Share on other sites More sharing options...
arobase Posted July 17, 2009 Share Posted July 17, 2009 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 Link to comment Share on other sites More sharing options...
Maury Girard Posted July 17, 2009 Share Posted July 17, 2009 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 officiell'image en fond ne fessant que 2x2cmensuite j'ai modifié avec Paint, l'image comme je vous l'ai dit plus haut et le tour est joué Link to comment Share on other sites More sharing options...
arobase Posted July 17, 2009 Share Posted July 17, 2009 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... Link to comment Share on other sites More sharing options...
arobase Posted July 17, 2009 Share Posted July 17, 2009 Ah, je suis sur la bonne voie en ayant remis mes données css du background tel que c'était avant d'essayer avec le dégradé... je reviens d'ici peu pour vous montrer le résultat ! Link to comment Share on other sites More sharing options...
arobase Posted July 17, 2009 Share Posted July 17, 2009 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é ! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now