Jump to content

[Résolu] Fond de page

jeckyl
 Share

Recommended Posts

jeckyl Newbie

jeckyl

Posted
Posted

Bonjour,

Après recherche sur le forum et surtout dans mon petit cerveau, je n'arrive pas à mettre un fond à mon #body et #page transparent, mais que #header et le #footer possède une image de fond alors que la partie centrale composéede la collonne gauche le contenu et la colonne droite soit sur un fond blanc.

pour y arriver j'ai encadré la partie centrale avec une div #contenant

voici les css

#contenant {
   background: #FFFFFF;
   padding-top:5px;
}
#left_column {
   float:left;
   width:190px;
   padding-right: 15px;
}
#center_column {
   float:left;
   width: 570px;
   margin: 0 0 30px 0;
}
#right_column {
   float:right;
   width: 190px;
   padding-left: 15px;
}
#page {
   width: 980px;
   margin: 0 auto 2px auto;
   text-align:left;
   background: url(../img/bg-footer.png) no-repeat bottom;
}



Si quelqu'un a une idée ?

7357_lSdWVeb3yAYdGhXVxVko_t

Link to comment
Share on other sites
Peha Newbie

Peha

Posted
Posted

Bonjour,

ton div contenant est inutile car il existe déjà, c'est #page

juste modifie le
background: #fff url(../img/bg-footer.png) no-repeat bottom;
de #page

cette manière d'écrire les attributs de background à la suite est un raccourcis.
mais on peut aussi écrire comme ça :

background-image : url(../img/bg-footer.png);
background-color : #fff;
etc...

ce qui permet de mieux comprendre ce qu'on manipule.

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
  • Author
Posted

Merci pour ta réponse,
mais malheureusement j'ai déjà essayé et cela met bien un fond à #page qui englobe l'ensemble de la page ainsi le header et le footer se retrouve avec un fond blanc ce qui ne m'arrange pas car mes images de fond dans le header et le footer ont une partie transparente.

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
  • Author
Posted

Merci encore pour ta réponse rapide,

Mais si j'applique ta proposition voici ce que cela donne (cf copie jointe).

Donc, si j'ai créé une nouvelle div c'est qu'elle doit englobé l'ensemble de ces 3 colonnes dans leurs globalité et ainsi faire le raccord avec le footer.

Je me demande si je ne vais pas faire sauter la div page pour ne faire que 3 découpes
#header
#page
#footer

7360_OFRjRG80qibD1yMrZeCf_t

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
  • Author
Posted

Bonjour,

Merci pour ton aide.

J'ai solutionné le problème en conservant le div page au même endroit que sur le template par default et j'ai utiliser un div #contenant englobant les 3 colonnes en y appliquant le css suivant

#contenant {
   padding-top:5px;
   background: #FFFFFF;
   float: left;
   width: 980px;
}



Et j'ai donc l'effet escompté.

Pas de lien pour le site car c'est un essaie de template pour décider un client sur un devis.

En même temps cela me permet de découvrir la modification de template pour Prestashop.

Si tu as quand même un avis à donner sur le départ de ce template, n'hésites pas.

7361_od41Z0GdMfUfIkwoqnD7_t

Link to comment
Share on other sites
Peha Newbie

Peha

Posted
Posted

cool,
étrange que ça marche comme ça et pas avant,
le float left est un peu hors sujet, et finalement la largeur aussi puisque elle est déja attribuee au div #page...
mais bon si ça marche

quelques remarques :

je trouve qu'il faudrait une petite marge pour les colonnes sur les cotés
aligner la largeur des produits phares sur le texte au dessus.

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
  • Author
Posted

C'est cool de pouvoir aider.

Maintenant pour avancer sur ce template je cherche un équilibre dans les couleurs pour transformer les blocs.

Sachant que le sujet du site est le Cognac comme la photo de l'accueil le laisse présager.

Si vous avez des idées ...

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
  • Author
Posted

Merci pour l'idée, je vais essayer, cela va me permettre de travailler sur les dégradés de photoshop.

Il faut que je trouve aussi les couleurs de fond des cellules.

Je regarde cela et dépose des captures d'écran prochainement.

Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted
Voici une des étape de l'évolution du template.

Malheureusement je bloque encore sur des trucs.

Passer en blanc le texte du bouton de la search box en haut.

et aussi faire disparaitre le fond gris de ce bouton


normalement c'est là :

input.button_mini, input.button_small, input.button, input.button_large, input.button_mini_disabled, input.button_small_disabled, input.button_disabled, input.button_large_disabled, input.exclusive_mini, input.exclusive_small, input.exclusive, input.exclusive_large, input.exclusive_mini_disabled, input.exclusive_small_disabled, input.exclusive_disabled, input.exclusive_large_disabled, a.button_mini, a.button_small, a.button, a.button_large, a.exclusive_mini, a.exclusive_small, a.exclusive, a.exclusive_large, span.button_mini, span.button_small, span.button, span.button_large, span.exclusive_mini, span.exclusive_small, span.exclusive, span.exclusive_large {global.css (ligne 421)
background-position:left top;
background-repeat:no-repeat;
border:medium none;
color:black !important;
cursor:pointer;
display:block;
font-size:10px !important;
font-weight:bold;
height:18px;
line-height:18px;
text-align:center;
text-decoration:none !important;
}


mais ça te change la couleur de tous ces boutons....

Le fond gris c'est une histoire de découpage du gif, c'est dans l'image...
Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
  • Author
Posted

Bon je vient de changer la ligne suivante :

input.button_mini, input.button_small, input.button, input.button_large,
input.button_mini_disabled, input.button_small_disabled, input.button_disabled, input.button_large_disabled,
input.exclusive_mini, input.exclusive_small, input.exclusive, input.exclusive_large,
input.exclusive_mini_disabled, input.exclusive_small_disabled, input.exclusive_disabled, input.exclusive_large_disabled,
a.button_mini, a.button_small, a.button, a.button_large,
a.exclusive_mini, a.exclusive_small, a.exclusive, a.exclusive_large,
span.button_mini, span.button_small, span.button, span.button_large,
span.exclusive_mini, span.exclusive_small, span.exclusive, span.exclusive_large {
   background-repeat: no-repeat;
   background-position: top left;
   border: none;
   color:white!important;
   font-weight: bold;
   font-size: 10px!important;
   text-align: center;
   text-decoration: none!important;    
   cursor: pointer;
   display: block;
   line-height: 18px;
   height: 18px;
}



Et tous mes boutons ont un texte blanc.

Mais bizarrement j'ai tourjour un fond gris sous le bouton searchbox

Link to comment
Share on other sites
  • 3 weeks later...
jeckyl Newbie

jeckyl

Posted
  • Author
Posted

Salut,

ta question n'est pas claire.

Mais je pense que tu veux savoir comment gérer la position horizontale entre la colonne de gauche du milieu et de droite.

donc voici le css :

#left_column {
   float:left;
   width:190px;
   padding-left:5px;
}
#center_column {
   float:left;
   width: 568px;
   margin: 0 11px 30px;
}
#right_column {
   float:right;
   width: 190px;
   padding-right:5px;
}

Link to comment
Share on other sites
Rodolphe Newbie

Rodolphe

Posted
Posted

Attention quand même car avec IE 6 le comportement n'est pas le même et il est probable que tu te retrouves avec une colonne de droite affichée... sous le reste de la page (gestion différente des marges).

Rodolphe

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
  • Author
Posted

Je suis bien d'accord avec toi, je n'ai pas tester car c'était juste un test pour un devis client.
Donc à parfaire car il resterai les boites à modifier, mais je conserve encore ce site pour tester des chartes graphiques différentes.

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
  • Author
Posted

Pour un fonctionnement sous ie6 voici la correction :

#left_column {
   float:left;
   width:190px;
   padding-left:5px;
}
#center_column {
   float:left;
   width: 568px;
   margin-top: 0;
   margin-bottom: 30px;
   margin-left: 11px;
}
#right_column {
   float:right;
   width: 190px;
   padding-right:5px;
}

Link to comment
Share on other sites
  • 1 month later...
Trolet Newbie

Trolet

Posted
Posted

bonjour à tous,

pour ce qui est des images sous IE6 j'utilise l'astuce suivante : je crée une image en gif et une en png. ensuite dans le global css je met un signe - devant l'image gif comme ça ce n'est reconnu que par IE6 (même chose avec * sous IE7)

exemple :

background: transparent url('../img/fond_header.png') top center no-repeat;
-background: transparent url('../img/fond_header.gif') top center no-repeat;


comme ça sous firefox tu as du png et sous IE6 tu as ton gif


sinon pour ton thème tu peux t'inspirer de ce très beau site sur le vin :
http://www.terres-blanches.fr/boutique/

Link to comment
Share on other sites
  • 6 months later...
luismiguel Newbie

luismiguel

Posted
Posted
Voici une des étape de l'évolution du template.

Malheureusement je bloque encore sur des trucs.

Passer en blanc le texte du bouton de la search box en haut.

et aussi faire disparaitre le fond gris de ce bouton


hi jeckyl.
pourrais tu me dire comment tu as corrigé les marges des colonnes gauche et droite, j'ai essayé tous les manières dasns le global css et j'arrive pas.
seulement la colonne droite qui bouge, je voudrais les centrer en bas de la barre horizontal.

Si tu peux me dire comment je serais content.

merci.
Link to comment
Share on other sites
Guest

Guest

Posted
Posted

HELLO

j'ai lu un truc récemment plus personne n'est sous IE6 !!! = WIN98
IE7= XP WIN 2000
65% des gens utilise firefox !!!!

Regardez vos stats des navigateurs !!!!

a+

Link to comment
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
Go to topic listing
×
×
  • Create New...