Jump to content

PROBLEME ALIGNEMENT IMAGES PAGE ACCUEIL ET COLONNES...


Recommended Posts

Bonjour à tous...

Je suis débutant et je galère avec la mise en page de la page d'accueil à savoir le logo de l'entete en haut à gauche et le logo du module page d'accueil...
En fait, je souhaiterait mettre ces 2 images , mais les images me décalent les colonnes et on ne voit plus le module produits phares du coup. Il y a un blanc en haut, en dessous du header que je souhaiterai combler. je ne sait pas comment faire pour aligner tout ca...??? aussi , dans produits phares il y a une zone de gris vide au niveau du texte qui prend de la place pour rien...! ?

Merci pour votre aide...!
URGENT.

MINI SITE EN COURS DE REALISATION : http://www.top-nettoyage-jantes.com/

Fred
.

Link to comment
Share on other sites

pour la position des modules j'ai tout essayé...en programmation là je sais pas ...? quel CSS tu veux et il est ou...? y a surement des modif chiffrer à faire mais je ne sais pas...je veux pas toucher n'importe quoi...avec quel logiciel du modifie les fichiers ( mais mieux que notepad...) ???
merci.

Link to comment
Share on other sites

Pour commencer essaye de te procurer le logiciel Dreamweaver, tu sera moins perdu que notepad car chaque ligne de code ou css est numéroter. Ensuite pour être sur que tu touche à la bonne ligne télécharge Firebug. C'est gratuit, il te permet de voir en temps réel la correspondance entre ce que tu vois et ce qui à été codé. Tu pourras par la même occasion mieux comprendre le site que tu construit. Firebug te permettra de sélectionner par exemple une partie que tu souhaite modifier et t'indiquer ou il est situé dans ton site et à quelle ligne.

Pour le css que je t demandé tu va la racine de ton site puis dans thème, puis dans le dossier css et tu ouvre le fichier global css. Toute la mise en page et chaine graphique de ton site se trouve là.

Link to comment
Share on other sites

Bonsoir merci mais pour les logiciel c'est bon. Mais pouvez vous m'aider..???
Je pense que c'est peut etre un probleme de pading au niveau des "boites" de la page d'accueil en haut à gauche sur mon image. fodrait reduire la valeur , je le voit avec firebug mais je trouve pas la valeur à modifier. je sais pas comment faire...
Merci.
Fred.

et bonne année à tous !

Link to comment
Share on other sites

mulder5454
Vous pouvez créer un seule image avec les 2 images que vous indiquez
il ne restera plus qu'a définir sa taille et sa position.

Un Topic fut édité pour ce sujet
Ici

les infos précises sur ce même topic sont
et encore


Je vous invites à tester les différentes possibilités qui vous conviendras
Cordialement,

Link to comment
Share on other sites

Ok il manquait cette ligne mais je retrouve mon site du départ , c'est déjà bien mais avec le meme probleme que vous pouvez constater...! ???

Comment aligner tout ca correctement et combler le blanc au milieu...? on ma parler de pading en haut a gauche à modifier...?

Je galere...

Merci d'avance...fred.

Link to comment
Share on other sites

Vous ne pouvez pas aligner ces deux images sans des modifications drastiques du thème (ou un module du genre AddBlocks), la méthode que suggère Maury Girard est la plus simple :

Créez une image avec votre logo et la second image à coté (magique : cette image se trouve en pièce jointe dans ce post)

Ensuite, placez l'image sur votre serveur, par exemple ici : (/img/logo_big.jpg)


Modifiez ensuite votre fichier header.tpl (/themes/prestashop/header.tpl) en remplaçant ligne 47 logo.jpg par logo_big.jpg


Pour ce qui est du cadre gris dans les produits phares, il s'agit d'un emplacement réservé à la description du produit. vous n'avez pas mis de description pour le produit affiché, donc le grand cadre est vide.

logo_big.zip

Link to comment
Share on other sites

Merci beaucoup pour votre aide...

C'est bien comme ca ! il me semblait bien que ce n'etait pas si simple que ca de modifier tt ca....

Par contre , comment avez vous fait pour accoler les 2 images...? ( Photoshop je pense...je le possède mais ne sait pas comment faire ...)

Merci.

Fred.

Link to comment
Share on other sites

En fait, intégrer une seule image en haut de page est d'autant plus facile que cette intégration est prévue d'origine par le back office (préférences > apparence > logo de l'entête).

Pour couvrir la largeur de la page, il suffit de de charger un dessin origine paint photoshop etc...de 980 px de large. (pensez à y laisser les espaces pour les modules que vous conservez en header, ou alors à les supprimer ou les greffer ailleurs).

Si le résultat ne vous suffisait pas, et que vous souhaitiez en plus modifier le haut de l'emplacement prévu pour les différentes "zones" (colonnes gauche, centre, et droite), rendez vous dans le ficher suivant:

votre site /themes/prestashop/css/global

ouvrir le fichier, se rendre dans la partie “/* global layout */.

d’origine, vous y trouverez notamment ceci:

#left_column, #center_column, #right_column { float: left } #left_column { clear: left; width: 0 px; margin-right: px; overflow: hidden
} #center_column { width: 768px; margin: 0 0 30px 0; overflow: hidden
} #right_column { width: 191px; margin-left: 21px; overflow: hidden
}

il va s’agir de modifier l’emplacement des colonnes droites, gauches, et centre, en rajoutant à chacune le paramètre de “marge en haut” (à moins que dans votre fichier “margin-top” n’ait déjà été rajouté, et qu’il suffise de le régler).
Il est important de noter que plus la marge est faible, plus les blocs remontent, et surtout que pour forcer la montée des zones on peut mettre une marge négative.
Dans votre cas on pourrait imaginer, pour remonter tout de la même hauteur:

#left_column, #center_column, #right_column { float: left } #left_column { clear: left; width: 0 px; margin-right: px; margin-top: -30px; overflow: hidden
} #center_column { width: 768px; margin: 0 0 30px 0; margin-top: -30px; overflow: hidden
} #right_column { width: 191px; margin-left: 21px; margin-top: -30px; overflow: hidden
}

Voilà, votre texte et vos blocs sont remontés (j’ai testé sur mon serveur c’est OK). Attention quand même à ce que cette remontée ne gêne pas la présentation d’autres pages ! J’espère que ça sera OK pour vous.
NB: ne tenez pas compte de mes autres dimensions car j'ai aussi modifié les largeurs de zones.

Link to comment
Share on other sites

Began to try to make your software Dream weaver, you will lose less than Notepad or the CSS for each line of code number. Then, to make sure you touch the right line to download Firebug for. It is free and it lets you see what you see in real time correspondence, which has been encoded.

Link to comment
Share on other sites

Cherylfoster
Dreamweaver is not free (provided that 30 days)
Notepad + + as well take it is completely free and virtually identical to dreamweaver
I think any normal user want to buy a license for £ 219.95
Yet there is a free version but too old

Mulder5454
Bonjour je vous ai adressé un MP , sur ce que l'on a discuté
J'attends juste une petite réponse
Cordialement,
;)

Link to comment
Share on other sites

  • 5 weeks later...

I think this might be a problem Padinger level "box " page in the upper left corner of my image. fodrait reduce the value, I see it with Firefly, but I do not think the value changes. I do not know how to ...Thank you for sharing this kind of information to us.

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
×
×
  • Create New...