Centrer un panneau d'élément
Imprimé depuis: Forum openElement
Categorie:
openElement
Nom du Forum: Discussion générale openElement
Description du Forum: Discussion générale sur le logiciel
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=23873
Date: 19 Avr 2024 à 19:20
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com
Sujet: Centrer un panneau d'élément
Posté par: Sebastian
Sujet: Centrer un panneau d'élément
Posté le: 07 Mai 2020 à 09:28
|
Bonjour à tous, je suis en train de refaire mon site, et je bloque sur certains points. Je veux afficher dans l'ordre : _ Titre (nom de l'association) _ Image _ Menu Pour mon menu, j'ai mis 4 boutons liens-texte dans un panneau d'élément. J'ai centré le panneau (horizontal) comme pour mon titre et mon image, mais celui-ci se décale à gauche (sur PC) ou à droite (smartphone) et vient se superposer sur l'image. Je suis en "absolute" est ce que c'est un problème ? Merci |
Réponses:
Posté par: Bridet
Posté le: 07 Mai 2020 à 09:31
|
Oui, il faut être en relative, l'absolute est obsolète, tout se met en page avec des marges et des %. Allez voir dans les tutos "chouette c'est responsive", au moins lire la vidéo. ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: Sebastian
Posté le: 07 Mai 2020 à 09:46
|
Qu'est ce que je mets en relative ? Tous les calques ou juste certains ? J'avais déjà regardé la vidéo, mais je n'ai pas tout compris ... |
Posté par: Sebastian
Posté le: 07 Mai 2020 à 09:52
|
J'ai créé 3 calques : Base Fond Menu Le calque Base est en relative. La page est devenue illisble, l'image qui est sensé faire 60% de la largeur est minuscule ... www.asc-littoral.fr |
Posté par: Bridet
Posté le: 07 Mai 2020 à 10:06
|
Si vous n'avez pas compris le tuto, faites-le, le forum n'est pas destiné à vous donner "cours" pas à pas mais à dépanner un problème, ici on voit bien que vous ne connaissez pas la base. Sinon, en résumé, ce sont les panneaux d'éléments mis sur la page avec lesquels on joue (%, positionnement relatif, marges) et dans lesquels on met ... des éléments. Ou alors choisissez un template responsive et jouez avec http://forum.openelement.com/fr/forum_posts.asp?TID=22939&title=lensemble-des-templates-de-sensode" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=22939&title=lensemble-des-templates-de-sensode Ce sera bien plus facile pour vous y retrouver. Edit : il n'y a rien sur votre lien
------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: Sebastian
Posté le: 07 Mai 2020 à 10:45
|
Je n'ai strictement rien compris à la notion de "relative"... Je pensais modifier un template existant avec mes menus, mes titres et mes images. Ou peut-on les télécharger ? Faut-il copier tout le code source de la page ? |
Posté par: Hobby001
Posté le: 07 Mai 2020 à 11:06
|
Bonjour et bienvenue Pour découvrir OpenElement, je vous
suggère de consulter les tutos créés par des utilisateurs et dont vous
trouverez la liste ici https://forum.openelement.com/fr/forum_posts.asp?TID=22320&title=rcapitulatif-des-tutoriels" rel="nofollow - . Certains, comme les tutos de Larsene,
principalement sur l'aspect adaptatif (Responsive), sont accompagnés de vidéos
très utiles https://forum.openelement.com/fr/forum_posts.asp?TID=20090&title=les-tutos-de-larsne%20" rel="nofollow - . Ces tutos sont basés sur une version plus récente d'OpenElement. Finalement il y a le WIKI dont vous
trouverez le lien en haut de cette page. Vous trouverez sur ce forum de l'aide
pour des questions précises. Cette aide est offerte bénévolement mais en
échange nous nous attendons à ce que vous exploriez le logiciel et en
développiez la connaissance avant de poser vos questions. OpenElement vous propose une foule de
modèles dont certains sont adaptatifs et, de ce fait, beaucoup plus
d'actualité. Sensode en propose aussi quelques uns
des plus complets mais contre une rétribution minime par rapport au coût de
développement. https://forum.openelement.com/fr/forum_posts.asp?TID=22939&title=lensemble-des-templates-de-sensode" rel="nofollow - Des éléments complémentaires créés par
différents intervenants sont aussi disponibles. Vous en trouverez la
liste ici: https://forum.openelement.com/fr/forum_posts.asp?TID=22573&title=liste-des-lments-proposs" rel="nofollow - Encore une fois, bienvenue. P.S. Il est important que vous compreniez que
toute aide fournie ici est donnée par des bénévoles. Nous ne sommes pas le personnel de
openElement. Nous sommes heureux d'aider lorsque nous
sommes disponibles pour fournir des conseils, des astuces et parfois un petit
bout de code. Nous apprécions que les usagers fassent un effort sérieux
de recherche et d'autoformation. Certains d’entre nous travaillent en
Europe, d’autres ailleurs dans le monde. Conséquemment le délai de
réponse peut aussi dépendre des fuseaux horaires. Lorsque l'exigence est trop importante,
elle peut être contractée et la rétribution exigée paiera le développement. ------------- https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE |
Posté par: Bridet
Posté le: 07 Mai 2020 à 11:24
|
@ Hobby : il ne découvre probablement pas OE (inscrit en 2016) mais bien le responsive. @Sabastian : la notion de relativité est mathématique mais voici un exemple concret : Actuellement on doit avoir une distanciation sociale, vous devez vous tenir à 1m50 d'un autre individu, s'il vient vers vous, vous reculez pour maintenir la distance, la distance est donc relative (à un point qui peut varier). Si on vous dit de vous tenir à 1m50 d'un mur (ou d'une origine absolue), c'est une distance absolue. Sinon wikipedia est mon ami. @ Brolysan : tiens c'est vrai comment on charge les gratuits (je les ai tous, mais oublié comment)? ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: Hobby001
Posté le: 07 Mai 2020 à 11:31
|
En ouvrant OE on a le choix entre ouvrir un projet existant ou un nouveau projet. En choisissant Nouveau on peut choisir dans la bibliothèque. Sinon on peut télécharger ceux de Sensode https://forum.openelement.com/fr/forum_posts.asp?TID=22939&title=lensemble-des-templates-de-sensode" rel="nofollow - https://forum.openelement.com/fr/forum_posts.asp?TID=22939&title=lensemble-des-templates-de-sensode , les copier dans le dossier des projets et les ouvrir avec OE. Les tutos de Larsene montrent assez bien la lotion de Responsive et passent par le Relative ------------- https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE |
Posté par: Sebastian
Posté le: 07 Mai 2020 à 11:31
|
Ok , cette image avec le mur est un peu plus clair ! Je fonctionnais jusqu'à présent en absolue et ça me suffisait. Mais si on veut adapter le site à différents écran, certains menus se chevauchent... J'ai donc voulu m'y mettre ... http://www.asc-littoral.fr Le panneau d'élément avec les 4 liens-texte ne se centre pas . J'ai pourtant fait exactement la même démarche que pour le titre (image) et la photo... |
Posté par: Hobby001
Posté le: 07 Mai 2020 à 11:32
|
En plus, Larsene le démontre en vidéo. ------------- https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE |
Posté par: Bridet
Posté le: 07 Mai 2020 à 11:56
|
En ouvrant OE on a le choix entre ouvrir un projet existant ou un nouveau projet. En choisissant Nouveau on peut choisir dans la bibliothèque. Houlà il n'y a que les deux premiers qui sont responsive ! Sinon on peut télécharger ceux de Sensode https://forum.openelement.com/fr/forum_posts.asp?TID=22939&title=lensemble-des-templates-de-sensode" rel="nofollow - https://forum.openelement.com/fr/forum_posts.asp?TID=22939&title=lensemble-des-templates-de-sensode , les copier dans le dossier des projets et les ouvrir avec OE. On peut les voir pas les télécharger si ? ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: Bridet
Posté le: 07 Mai 2020 à 11:57
Franchement, utilisez senswhite, ce sera parfait !
Voici le lien pour le charger https://sensode.com/template_openelement.htm#senslight" rel="nofollow - https://sensode.com/template_openelement.htm#senslight ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Sebastian a écrit:Posté par: Sebastian
Posté le: 07 Mai 2020 à 13:35
|
C'est ce que je vais faire ! Il y en aura largement de reste niveau fonctionnalité ! Merci beaucoup en tout cas 
|
Posté par: Bridet
Posté le: 07 Mai 2020 à 18:15
|
:-D Oui ! Remplacez avec circonspection et faites bien des sauvegardes ! ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: Hobby001
Posté le: 08 Mai 2020 à 00:14
@ Bridet, Senslight, Sensblack, Senswhite, Essential et Responsivecenter01 ça fait cinq ------------- https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE |
Posté par: Bridet
Posté le: 08 Mai 2020 à 09:01
|
@ hobby, dans la bibliothèque il y a ceux de sensode ? ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: Hobby001
Posté le: 08 Mai 2020 à 10:52
Il y en a trois en effet ------------- https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE |
Posté par: Bridet
Posté le: 08 Mai 2020 à 11:06
Au temps pour moi ! Tant mieux! Mais pourquoi ne peut-on enlever tous les autres alors (et rajouter le mien ^^) ? ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: Hobby001
Posté le: 08 Mai 2020 à 11:08
|
Je crains que plus personne ne s'occupe de ça. ------------- https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE |
Posté par: jjb1
Posté le: 08 Mai 2020 à 14:20
Le tuto de Larsène est pourtant clair, me semble-t-il, car moi qui ne suis pas très doué en la matière, il m'a permis de construire les bases de mon site. Il fut largement amélioré grâce aux conseils éclairées des intervenants de ce forum. J'aime bien l'image de Bridet sur le "relative" ; et puis ça nous rappelle le Corna ... des fois qu'on oublie. ------------- http://prod.chasse-autreches.xyz" rel="nofollow - Mon site-(1.57 R9) |
Posté par: Sebastian
Posté le: 09 Mai 2020 à 09:56
|
Re bonjour, j'ai testé pas mal de templates différents et ils sont vraiment réussis. Je rencontre juste un petit soucis, j'ai l'impression que lorsqu'on bascule sur l'affichage d'un portable, la photo est sectionné à gauche et à droite et ne s'affiche plus à 100% de la largeur. Dans mon cas, ça coupe la tête des gens (... <img src="smileys/smiley11.gif" align="middle" /> ). Impossible de redimensionner l'image de fond (fond d'élément dynamique) à 70% de sa largeur par exemple. Je change les propriétés mais rien ne se passe ... Si c'est vraiment trop compliqué, je laisserai tomber et me remettrai en mode débutant (absolute). Bon week end à tous ! P.S. Actuellement j'utilise Senslight, mais c'est pareil avec les autres templates ... |
Posté par: Bridet
Posté le: 09 Mai 2020 à 10:15
|
C'est normal, c'est une image de fond utilisée pour créer "un bandeau", on utilise généralement une photo qui peut être tronquée tout en conservant son attrait, sur mon site j'ai un peu contourné l'affaire en créant une photo avec trois http://www.de-troyer.be" rel="nofollow - http://www.de-troyer.be dans votre cas vous pouvez, rajouter d'autres photos à gauche et à droite. Ne repartez pas en absolute, là, c'est sûr que sur les portables on ne verra rien, je trouve que le début est prometteur avec senslight.
------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: Sebastian
Posté le: 09 Mai 2020 à 10:27
|
D'accord. Je vais essayer de feinter un peu alors. Merci |
Posté par: Bridet
Posté le: 10 Mai 2020 à 09:33
|
PS : ce n'est pas trop grave si sur certains écrans on ne voit pas tous les personnages, de toute façon personne ne les regarde vraiment sauf peut-être les intéressés. ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: Bridet
Posté le: 11 Mai 2020 à 16:29
|
Bon, "feintage" complètement raté, remettez comme avant. :-) Pour être plus claire : sur grand écran, on ne voit plus que les deux jeunes filles à l'avant et les pieds des autres. ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: jjb1
Posté le: 12 Mai 2020 à 09:26
Petite précision, votre image de fond peut être cadrée de 6 façons différentes : Haut gauche, droit, bas gauche, droit ... Pour ce faire, dans le menu de droite : Allez dans Style-Personnalisation. Choisissez dans Zone : Fond de page. Ouvrez le paragraphe Arrière-plan, ouvrez Image position puis Prédéfinie ; là, en cliquant sur la petite flèche, vous verrez apparaître un choix de 6 possibilités. Vous pourrez peut-être trouver une position qui s'adapte le mieux à votre image en conservant la partie essentielle toujours apparente. Seuls des essais pourront vous le dire. Bon courage pour la suite. ------------- http://prod.chasse-autreches.xyz" rel="nofollow - Mon site-(1.57 R9) |
Posté par: Sebastian
Posté le: 13 Mai 2020 à 20:14
|
Il y a certains paramètres qui ne s'appliquent pas comme prévu et je n'arrive pas à savoir pourquoi ... Par exemple, j'aimerai que l'image s'affiche à 100% de sa hauteur et qu'elle soit redimensionnée en conservant les proportions. Sauf que ça ne marche pas ! Je suis obligé de spécifier une taille en pixels pour l'affichage de la hauteur. Si je mets hauteur 100%, l'image n'affiche qu'une bande de quelques pixels de haut sur toute la largeur de l'écran. En fait, quelques soient les paramètres que je modifie : _ sur un PC : image affichée à 100 % de sa largeur et rogner en hauteur _ sur un smartphone : image affiche à 100 % de sa hauteur et rogner sur sa largeur ... |
Posté par: Sebastian
Posté le: 13 Mai 2020 à 20:17
|
Je commence à penser qu'il est impossible d'afficher correctement une photo en arrière plan sur différents type de médias... Il vaut peut être mieux que j'opte pour un fond standard (paysage) qui pourrait être rogné aussi bien en hauteur qu'en largeur ... 
|
Posté par: Hobby001
Posté le: 14 Mai 2020 à 02:58
|
Une image de fond a deux méthodes d'affichage Contain et Cover et les deux ne la déforment pas. Contain Suppose qu'elle sera toujours entièrement contenue dans l'élément, s'il lui manque de la largeur mais que la hauteur est entière elle aura une ou des plages vides dans la largeur Cover Fait en sorte qu'elle emplisse l'élément s'il manque de la largeur elle agrandira l'image jusqu'à remplir la largeur tout en tronquant la hauteur. ------------- https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE |
Posté par: Bridet
Posté le: 14 Mai 2020 à 10:15
Une photo a des dimensions, il est certain qu'en fond de plan elle se rognera suivant le support et c'est logique, entre un petit portable vertical et un grand écran horizontal, forcément ça ne peut pas donner le même cadrage. Votre photo est très bien, que va-t-il se passer si une tête est rognée dans un certain format, on va vous en vouloir ? ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: Sebastian
Posté le: 14 Mai 2020 à 18:37
Non personne ne m'en voudra je pense  Esthétiquement c'est pas super... En fait, je préfère qu'il y ait des blancs sur les côtés, mais que l'image soit entière. J'ai beau modifier les paramètres, j'ai l'impression que OE n'en fait qu'à sa tête Les paramètres de base ne permettent pas de faire ce que je veux je pense, il faudrait passer par du code CSS, mais c'est le niveau au dessus et je n'ai pas trop le temps et l'envie de m'y mettre... |
Posté par: Hobby001
Posté le: 14 Mai 2020 à 22:08
|
Les images sont affichées par du CSS. Elles ne doivent pas être déformées (étirées) par conséquent, elles sont tronquées. Ce n'est pas le fait d'openElement ------------- https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE |
Posté par: Sebastian
Posté le: 15 Mai 2020 à 07:25
| D'accord, mais je ne voulais pas qu'elles soient étirées, mais qu'elle s'affiche toujours à 100% de sa hauteur et 100% de sa largeur et qu'elles se redimentionnent en conservant les proportions. |
Posté par: Bridet
Posté le: 15 Mai 2020 à 09:07
Alors, il faut mettre une image dans un panneau d'élément et non en fond. ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: Sebastian
Posté le: 15 Mai 2020 à 20:07
|
Impossible de modifier l'image en fond Le seul moyen c'est en modifiant l'image dans "fond écran dynamique"... Je n'arrive à rien faire, merci beaucoup pour votre aide mais autant le glisser-déposer de base est abordable (en absolute) autant dès qu'on rentre dans du code trop complexe je décroche ... Je n'arrive à modifier aucun texte d'un template à part les boutons ! Les textes qui sont dans les blocs de code CSS ne sont pas modifiables ... Je me laisse le week end et si je n'arrive toujours à rien, je fais un blog bidon ! 
|
Posté par: Hobby001
Posté le: 15 Mai 2020 à 20:10
|
Donnez un point précis. Quel modèle? Quel bloc de texte? On parlera alors de la même chose. Il sera plus simple de vous expliquer. ------------- https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE |
Posté par: Sebastian
Posté le: 15 Mai 2020 à 22:11
|
J'ai changer de stratégies pour le moment, je m'occuperai du fond d'écran plus tard, je pourrai toujours bidouiller avec photoshop pour modifier la taille de la photo. J'ai vu que les textes étaient en bas de la page d'accueil ... Evidemment c'est beaucoup plus facile à modifier. Le problème c'est vraiment le passage sur mobile, les propriétés ne sont pas respectées ! Par exemple : le panneau slider n'est plus centré. Et le fond d'écran prend beaucoup trop de place sur un mobile (à mon goût). Dans média édition, je choisis "Smartphone/portrait" et je ne comprends pas pourquoi le centrage n'est pas pris en compte ... Un grand merci Hobby et Bridet ! |
Posté par: Hobby001
Posté le: 16 Mai 2020 à 01:45
Le panneau_slider prend toute la largeur en média Smartphone [portrait]. Si vous n'avez pas touché à ces paramètres, l'image reste centrée https://zupimages.net/viewer.php?id=20/20/7iwh.jpg" rel="nofollow">  ------------- https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE |
Posté par: jjb1
Posté le: 16 Mai 2020 à 09:12
|
C'était un peu l'objet de mon intervention précédente : "Ouvrez le paragraphe Arrière-plan, ouvrez Image position puis Prédéfinie ; là, en cliquant sur la petite flèche, vous verrez apparaître un choix de 6 possibilités. Vous pourrez peut-être trouver une position qui s'adapte le mieux à votre image en conservant la partie essentielle toujours apparente. Seuls des essais pourront vous le dire." En faisant des essais, on peut trouver une position de l'image plus pertinente selon la réduction de l'écran : Centré, Haut droit. Haut gauche, Bas gauche ... ... Plus haut, vous parlez de texte. Cela voudrait dire que vous avez du texte sur votre image de fond ?? Je pense, dans ce cas, que vous auriez intérêt à laisser votre image vierge de texte, et de traitez votre texte dans un panneau d'élément.
------------- http://prod.chasse-autreches.xyz" rel="nofollow - Mon site-(1.57 R9) |
Posté par: Bridet
Posté le: 16 Mai 2020 à 09:42
|
Bon, à ce que je vois, vous repartez de zéro ? Commencez par ranger dans la biblio les photos que vous voulez utiliser. Pour changer un texte cliquez deux fois dessus. Effectivement ceux du slider sont tout en-dessous Ne tentez AUCUN changement de dimensions ni de quoique ce soit pour le moment (vu que vous faites une toutouille entre absolu et relatif). Remplissez les cases, c'est tout. Je connais bien ce template (http://glycinesmauves.be/ vite fait
avec ce que j'avais) , si vous calez, je pense que je suis capable de
vous aider.
------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: Bridet
Posté le: 16 Mai 2020 à 09:50
Oui, il a, une chouette subtilité de Brolysan ! ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: brolysan
Posté le: 16 Mai 2020 à 09:54
|
je viens de "percuter" en relisant le début du template que c'est l'utilisation d'un de mes templates, et pas le plus facile en prime. Je vais relire le topic et voir les soucis que vous avez avec. ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: brolysan
Posté le: 16 Mai 2020 à 09:57
|
bizarre, sur le lien http://www.asc-littoral.fr/" rel="nofollow - http://www.asc-littoral.fr/ que vous indiquez, je ne vois aucune image que vous souhaitez utiliser. Est ce normal? ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: brolysan
Posté le: 16 Mai 2020 à 10:10
|
quelques personnes m'ont demandés pourquoi je n'ai pas réalisé de tutoriel précis sur ce template, la réponse est "simple". Déjà, il m'a fallu plusieurs jours pour le réaliser et je vous laisse imaginer le temps qu'il me faudrait pour pondre un pavé pour expliquer toutes les subtilités de senslight.  Déjà la, en l'ouvrant, je me pose moi même des questions (mais où est le code que j'ai mis pour tel ou tel effet).  Donc, reprenez depuis le début merci, de ce que vous voulez faire sur senslight. ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: brolysan
Posté le: 16 Mai 2020 à 10:26
|
Allez, j'essayes malgré tout de vous aider au vue de ce que j'ai compris. Le texte "défilant" dans le premier panneau d'éléments responsive (autant utiliser les bons et mêmes termes), comme vous l'avez remarqué, est situé en bas de la page (commençons donc par l'accueil).  Comme vous pouvez le voir, les blocs de textes sont alignés à gauche, grâce au responsive (relative donc). Si vous souhaitez les centrer dans le panneau d'éléments, sélectionnez les, puis dans le menu du haut, onglet Sélection.  Si vous cliquez sur le barre centrale, les blocs de texte vont se centrer dans le panneau d'éléments dont il dépendent. Comme ceci :  Maintenant, passons à ce qui semble vous poser souci, la version mobile. Mettez vous en Média Edition Smartphone :  Regardez à nouveau et vous verrez que le bloc de texte du titre est bien centré mais pas le texte.  Sélectionnez le et menu du haut, Zone de styles. Remplacez l'alignement à gauche par celui centré.  Et normalement, en prévisualisation mobile, vous devriez avoir ceci :  ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: brolysan
Posté le: 16 Mai 2020 à 10:31
|
Pour avoir une image 100% centrée, par défaut, nous avons utilisé un élément pour "faciliter" l'utilisation d'insertion d'une image avec l'élément Fond d'élément dynamique 100%. Grace à cet élément, nous pouvons mettre 1 ou plusieurs images (même 1 vidéo d'ailleurs) et spécifier une image plus adaptée aux versions mobiles. Donc, merci de m'indiquer l'image que vous souhaitez utiliser pour mieux vous guider dans l'utilisation de l'élément. ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: Sebastian
Posté le: 16 Mai 2020 à 10:45
|
Merci pour tous vos messages ! Alors en essayant de répondre dans l'ordre : Pour Hobby et Jjb : En fait, pour modifier l'image de fond, j'ai cliquer sur "fond d'élément dynamique 100%". Quand je clique sur le Panneau(Group) Responsive, il me et "aucun" dans la catégorie image... Par contre le fond d'écran a effectivement changé. Quand je parle de texte, je parle du panneau slider qui contient du texte. |
Posté par: Bridet
Posté le: 16 Mai 2020 à 10:46
|
il l'avait mise l'image mais ça le dérangeait qu'elle soit tronquée, relis du début ;-) ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: Sebastian
Posté le: 16 Mai 2020 à 10:46
| Brolysan : quand on change l'image dans "fond d'élément dynamique 100%" ça fonctionne, mais est ce que certains paramètres ne sont pas verrouillé du coup ? |
Posté par: Sebastian
Posté le: 16 Mai 2020 à 10:50
|
Je vais essayer de repartir de zéro sur le template SENSLIGHT, de ne pas toucher aux paramètres et je reviens vers vous avec la photo que je souhaite mettre en fond. J'ai tendance à toucher à tout, ça n'arrange rien ... |
Posté par: brolysan
Posté le: 16 Mai 2020 à 11:04
|
je vais relire vos dernières versions. 2mn encore du taff. ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: Sebastian
Posté le: 16 Mai 2020 à 11:10
|
www.asc-littoral.fr J'ai juste modifié les titres du panneau slider. Quelques questions : 1) Est-il possible de remplacer le contenu du panneau slider Titre 2 (Apprentissage de la natation) par un texte multiligne ? 2) Comment ajouter un panneau slider supplémentaire ? Je pensais dupliquer un des trois panneaux sliders ... 3) Pour le titre 3 du panneau slider, si je souhaite mettre le mot "Sorties" sous le mot "Séjour", vaut-il mieux un texte multiligne ou bien duppliquer Séjour et venir placer le nouveau cadre en dessous ... J'espère que c'est un peu plus clair ... Pour changer l'image de fond, je passe par "Fond d'élément dynamique 100%" ? J'ai l'impression que tout le monde à sa façon de faire. |
Posté par: brolysan
Posté le: 16 Mai 2020 à 11:17
Oui, vous pouvez mettre un bloc de texte multilignes sans problème, qu'est ce qui vous en empêche?
oui, sans problème. Par contre, il va falloir faire ceci, lire le tutoriel dédié au template : http://forum.openelement.com/fr/forum_posts.asp?TID=22812&title=tutoriel-sur-senslight" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=22812&title=tutoriel-sur-senslight
Dupliquer serait plus rapide.
Passez par l'élément, il a été mis pour ça. Cela vous permettra aussi de faire une image pour mobile plus légère et mieux centrée peut être. ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: brolysan
Posté le: 16 Mai 2020 à 11:18
|
ha tiens, faut que je refasse les images du tutoriel, l'hébergeur les a supprimées. ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: brolysan
Posté le: 16 Mai 2020 à 11:19
le problème reste le même, quelle image?? car difficile de savoir ce qui le gène sans voir l'image et faire nous mêmes les tests où du moins voir une fois l'image mise en ligne? ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: Sebastian
Posté le: 16 Mai 2020 à 18:25
|
Merci pour tout Brolysan ! Je me suis enfin décidé sur une photo à mettre en fond d'écran ! Etant donné qu'il y a du texte par dessus et le problème du redimensionnement, un paysage est presque obligatoire ... En ce qui concerne le 4ème panneau slider, j'ai ajouté : "$li.eq(3).append($('.page3')); " à la suite des 3 autres lignes sur les pages 0, 1 et 2 c'était bien ça la manip ? Maintenant, pour créer ce panneau, un "dupliquer" suffit ? |
Posté par: brolysan
Posté le: 16 Mai 2020 à 20:31
|
rajoutes aussi dans le bloc de code visuel (en haut) : <ul id='bxslider' class="bxslider"> <li></li> <li></li> <li></li> <li></li> </ul> ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: Bridet
Posté le: 17 Mai 2020 à 10:08
|
Eh bien, cette image est parfaite (vous en avez bien les droits ?) ! ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: brolysan
Posté le: 17 Mai 2020 à 10:28
|
oui, bien. Par contre, 6 pages pour juste centrer un bloc de texte et une image de fond, j'ai un peu peur pour la suite, l'absence de réelle compréhension de l'utilisation d'OE risque d'être un peu long. Mais accrochez vous, même si vous n'avez pas pris le template le plus facile, vous devriez y arriver. ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: Bridet
Posté le: 17 Mai 2020 à 11:43
|
@ bro sebastian a eu du mal à se défaire de ses réflexes absolus et de capter la notion de relative ;-) ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |
Posté par: Sebastian
Posté le: 17 Mai 2020 à 15:03
|
J'ai bien ajouté la ligne en rouge, par contre pour créer ce nouveau panneau, j'ai dupliqué le panneau 3. Résultat : mon panneau 4 s'affiche en même temps que le panneau 3 mais en dessous ... Oui j'avoue que je vous mets pas mal à contribution pour si peu ... J'ai espoir que la suite soit beaucoup plus simple ou que je puisse me débrouiller tout seul en essayant par tâtonnement ... |
Posté par: Sebastian
Posté le: 17 Mai 2020 à 15:07
Brolysan : si on considère que je suis reparti de zéro à la page 6 , ça ne fait que 2 pages finalement ... 
|
Posté par: brolysan
Posté le: 17 Mai 2020 à 16:54
|
regardez la class CSS du panneau d'éléments que vous avez dupliqué. Si vous avez laissé le même code CSS que le bloc 3, vous aurez ceci : page page2 fadein donc, si vous avez modifié le code JS comme indiqué dans le tuto en rajoutant la ligne : "$li.eq(3).append($('.page3')); qu'est ce qui ne pas dans le code CCS de l'élément dupliqué....? Vous avez 2mn pour trouver. ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: Sebastian
Posté le: 17 Mai 2020 à 17:17
|
Même 2h , je ne comprend rien ... A priori je dirai qu'il faut modifier également le CSS du bloc 4. Sauf que je ne sais pas comment faire ... |
Posté par: Sebastian
Posté le: 17 Mai 2020 à 17:25
| Problème résolu ... Il fallait cliquer en bas à droite dans "classe perso" ... |
Posté par: Sebastian
Posté le: 17 Mai 2020 à 17:59
|
Petite question : est ce que le panneau slider fait parti du panneau d'élément (panneau group responsive) ? Est ce qu'il est possible de le positionner en bas du panneau ? Par défaut, il est centré, je ne trouve pas comment le centrer horizontalement et le mettre en bas... J'ai tenté de mettre une marge haut => aucun effet Une position haute de 400 pixels (sur l'écran ça marche mais en prévisualisation aucun changement ...) |
Posté par: Sebastian
Posté le: 18 Mai 2020 à 09:48
|
Autre petite question : pour le panneau slider 1; j'ai mis un texte multiligne mais celui-ci n'a pas certains attribut qu'il avait : CSS spécifique aux médias ( et modification de la police selon le média) Peut-on modifier le code pour récupérer les infos du panneau slider 2 et les attribuer à celui avec le multiligne ? |
Posté par: brolysan
Posté le: 18 Mai 2020 à 10:01
cela fait parti des choses à savoir pour Openelement et nullement lié au template, attention. ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: brolysan
Posté le: 18 Mai 2020 à 10:04
le panneau slider a un code CSS spécifique (maintenant vous savez où c'est) oerp-inner-content et est directement lié au panneau d'élément responsive. Avec cette classe, le panneau est automatiquement centré en horizontalement et verticalement. Il n'a pas vocation à être modifié autrement. ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: brolysan
Posté le: 18 Mai 2020 à 10:05
pas compris de quel élément vous parlez, désolé. ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: Sebastian
Posté le: 18 Mai 2020 à 10:14
|
Merci Broly san ! Donc impossible d'afficher le texte défilant (panneau slider) ailleurs qu'au centre ... Il s'agit de "apprentissage de la natation" (panneau slider 1). Je voulais un texte multiligne pour centrer le mot "apprentissage" quelque soit le média. Mais du coup il a une taille de police fixe alors que les autres textes (panneau slider 2, 3 et 4) passent de 90 pixels à 60 pixels sur smartphone... |
Posté par: brolysan
Posté le: 18 Mai 2020 à 10:29
|
Pour le texte, changez le media édition et modifiez le taille du texte selon. Il semble que vous n'ayez pas compris cette subtilité d'OE on dirait. ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: brolysan
Posté le: 18 Mai 2020 à 10:35
|
Y a une "astuce" mais bon, a vous de voir (hors template ça en plus!!!) Sélectionnez le bloc de code visuel dans le panneau slider  Menu de droite, onglet Styles puis onglet Personnalisation Mettez une marche extérieure en haut de 200 px  Vous aurez ceci : https://www.casimages.com/i/20051810461049328.jpg.html" rel="nofollow">  ------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: Sebastian
Posté le: 18 Mai 2020 à 12:24
Je pense que j'avais sélectionné le "panneau slider" et non "bloc panneau slider" . Merci Brolysan, c'est exactement ce que je voulais. Par contre, il y a une bordure haute translucide qui est apparue en décalant le panneau slider ! Dans les propriétés, j'ai bien aucune bordure, j'ai même réglé l'épaisseur sur 0 px et mis invisible mais rien n'y fait ... C'est un problème qui est déjà apparu sur OE ?? |
Posté par: brolysan
Posté le: 18 Mai 2020 à 12:56
|
non, c'est comme je vous l'ai indiqué, on "triche" pour arriver à descendre ce panneau alors qu'il n'est pas prévu pour ca. Autre solution plus "directe" du coup. Effacez l'ajout de 200px fait sur le bloc de code visuel Ouvrez Code Cliquez sur CSS ajouter ce code dedans :
------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: Sebastian
Posté le: 18 Mai 2020 à 13:57
|
Ca n'a eu aucun effet ... La bande translucide a disparu mais le texte est centré verticalement. Pas grave, je vais remettre le texte centré. Merci ! |
Posté par: Sebastian
Posté le: 18 Mai 2020 à 14:33
|
J'ai trouvé un tuto de Dmit OE qui explique comment fixer un élément (le menu en l’occurrence). - ajoutez un Bloc de Code Source type CSS: #WETop { z-index: 100000 !important; } /* pour garder le menu devant le contenu */ - ajoutez un Bloc de Code Source type JAvascript: $(function(){ $(window).scroll(function(){ $('#WETop').css('top', $(window).scrollTop()+'px'); }); }); La question que je me pose est quel est l'élément à fixer ? Il y a 3 calques qui contiennent le bandeau du menu : base base 2 (je n'ai pas compris son utilité...) base scrolling (uniquement en affichage mobile je pense) |
Posté par: brolysan
Posté le: 18 Mai 2020 à 15:30
|
Bon, je vous l'avoue, je ne vais pas vous aider à chacune de vos demandes malheureusement, car l'absence de maîtrise d'OE revient à ce que je fasse moi même votre site au final. Pas du tout le but. Et parti comme c'est partie, ce topic va finir par atteindre +100 pages dont les 3/4 seront la maîtrise d'OE. Mon code fonctionne parfaitement. Il faut aussi rajouter un autre bout pour une meilleure compatbilité avec Chrome et Firefox :
Cet ID est le panneau d'éléments centré automatiquement : https://www.casimages.com/i/200518034114261376.jpg.html" rel="nofollow">  Vérifiez que vous avez le même.
------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie |
Posté par: Sebastian
Posté le: 18 Mai 2020 à 15:39
|
Oui je comprends. J'ai l'impression de vouloir construire une fusée alors que je galère à réparer un vélo ... Grâce à vous, je pense que le plus gros est fait, la gestion des liens et des pages ne devraient pas poser de problèmes. Pour le reste, je vais essayer de me débrouiller . Encore merci pour tout le temps passé. |
Posté par: Bridet
Posté le: 18 Mai 2020 à 18:25
|
Comme je vous l'ai dit plus haut, restez modeste, remplacez et n'essayez pas de changer. ------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus |