18041 sujets
Questions générales et questions de débutants
) donc remplacer un y par un i pendant la conception du site c'est pas trop grave Enjoy :
https://kazimentou.fr/divers/ciffle.svg
Créé directement dans un éditeur de texte. c'est comme du HTML ou du XML
Sur Github, appuyer sur "<>" pour voir le code source :
https://gist.github.com/bazooka07/c2a1a11b37eb400b00b0d970e5b2a87e
Tout savoir sur le SVG ou presque :
https://la-cascade.io/tag/svg/
http://svground.fr/
Noter qu'on peut insérer directement la balise <svg> et sont contenu de l'image au format svg directement dans la page HTML comme une balise ordinaire dans un <div>
Modifié par bazooka07 (01 Jun 2018 - 14:04)
https://kazimentou.fr/divers/ciffle.svg
Créé directement dans un éditeur de texte. c'est comme du HTML ou du XML
Sur Github, appuyer sur "<>" pour voir le code source :
https://gist.github.com/bazooka07/c2a1a11b37eb400b00b0d970e5b2a87e
Tout savoir sur le SVG ou presque :
https://la-cascade.io/tag/svg/
http://svground.fr/
Noter qu'on peut insérer directement la balise <svg> et sont contenu de l'image au format svg directement dans la page HTML comme une balise ordinaire dans un <div>
Modifié par bazooka07 (01 Jun 2018 - 14:04)
Ça n'a rien à voir directement avec le sujet mais mon renard de feu (Firefox) est complétement éreinté par le poids de l'image du bandeau 
http://ebialec.bialec.fr/Ciffle/css/images/Bandeau.jpg
2 897,16 Ko (2 966 692 octets)
3 722px × 1 110px (redimensionné à 1 213px × 361px)
C'est pour afficher sur un smartphone ?
Prévoir des images de fond de tailles différentes et gérer avec des média-queries
http://ebialec.bialec.fr/Ciffle/css/images/Bandeau.jpg
2 897,16 Ko (2 966 692 octets)
3 722px × 1 110px (redimensionné à 1 213px × 361px)
C'est pour afficher sur un smartphone ?
Prévoir des images de fond de tailles différentes et gérer avec des média-queries
Je vois pas trop comment tu vas t'en sortir avec un ::after et un ::before.
La solution est de créer un <div> avec comme image de fond un hexagone et lui coller un "position:relative".
Et à l'intérieur tu mets ton texte dans une nouvelle <div> mais avec "position: absolute" et de la positionner avec des "text-align: center", "margin-top: 50%" et "transform: translateY('-50%')" pour centrer.
Je crois que vertical-align ne marche pas sur une div.
Perso j'essaierai d'imposer l'hexagone en svg pour éviter la pixelisation sinon t'as affaire à des gens bornés.
AMHA, tu n'auras pas le même rendu visuel.
Je suis sûr que si tu leur proposes WP et JQuery ils seront super contents.
D'autres docs sympas :
https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web
https://www.alsacreations.com/tuto/lire/1421-svg-initiation-syntaxe-outils.html
@dew,
Tu devrais mettre un lieu vers la la-cascade.io dans le tuto ci-dessus.
Il y a pas mal de traductions d'articles anglophones intéressants
La solution est de créer un <div> avec comme image de fond un hexagone et lui coller un "position:relative".
Et à l'intérieur tu mets ton texte dans une nouvelle <div> mais avec "position: absolute" et de la positionner avec des "text-align: center", "margin-top: 50%" et "transform: translateY('-50%')" pour centrer.
Je crois que vertical-align ne marche pas sur une div.
Perso j'essaierai d'imposer l'hexagone en svg pour éviter la pixelisation sinon t'as affaire à des gens bornés.
AMHA, tu n'auras pas le même rendu visuel.
Je suis sûr que si tu leur proposes WP et JQuery ils seront super contents.
D'autres docs sympas :
https://developer.mozilla.org/fr/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_%C3%A0_une_page_web
https://www.alsacreations.com/tuto/lire/1421-svg-initiation-syntaxe-outils.html
@dew,
Tu devrais mettre un lieu vers la la-cascade.io dans le tuto ci-dessus.
Il y a pas mal de traductions d'articles anglophones intéressants
Pour le ::after ou ::before le texte se mettais quasiment au centre automatiquement.
Pour la div je suis reparti la dessus et j'avais jamais utiliser transforme:translateY
Mon "patron" m'a dit de larguer le SVG et pour l'histoire de WordPress "I dont Know" j'ai pas de contact direct et le cahier des charges a du être fait par un enfant de 5 ans.
Mais tiens le lien du site : http://ebialec.bialec.fr/Ciffle/index.html
Pour la div je suis reparti la dessus et j'avais jamais utiliser transforme:translateY
Mon "patron" m'a dit de larguer le SVG et pour l'histoire de WordPress "I dont Know" j'ai pas de contact direct et le cahier des charges a du être fait par un enfant de 5 ans.
Mais tiens le lien du site : http://ebialec.bialec.fr/Ciffle/index.html
Le SVG est la solution qui va bien pour gatantir que le texte ne sorte pas dans l'hexagone
Démo ici :
https://kazimentou.fr/divers/ciffle/
Essaie avec l'émulateur "responsive design" de Chrome
Le résultat n'est pas encore au top, il y a quelques (?:margin|padding) à ajuster selon les modèles de terminaux
Je te conseille de réduire la taille de la photo pour ton bandeau. Cela change énormément la vitesse de téléchargement de la page en utilisant srcset :
taille des images avec largeurs de 1024, 1366, 1920, 414 et très grosse :
Les images redimensionnés sont compressées à 80% et expurgées de exif, vignette et cie
Vous n'avez pas de graphiste qui maitrise le dessin vectoriel dans votre boite ?
Modifié par bazooka07 (03 Jun 2018 - 10:33)
Démo ici :
https://kazimentou.fr/divers/ciffle/
Essaie avec l'émulateur "responsive design" de Chrome
Le résultat n'est pas encore au top, il y a quelques (?:margin|padding) à ajuster selon les modèles de terminaux
Je te conseille de réduire la taille de la photo pour ton bandeau. Cela change énormément la vitesse de téléchargement de la page en utilisant srcset :
taille des images avec largeurs de 1024, 1366, 1920, 414 et très grosse :
jpierre@smarteck:/home/www/test/ciffle/img$ ll batiment*
-rw-rw-r-- 1 jpierre jpierre 65K juin 1 23:00 batiment-1024x.jpg
-rw-rw-r-- 1 jpierre jpierre 107K juin 2 02:14 batiment-1366x.jpg
-rw-rw-r-- 1 jpierre jpierre 194K juin 1 23:42 batiment-1920x.jpg
-rw-rw-r-- 1 jpierre jpierre 17K juin 1 23:06 batiment-414x.jpg
-rw-rw-r-- 1 jpierre jpierre 2,9M mai 28 16:02 batiment.jpgLes images redimensionnés sont compressées à 80% et expurgées de exif, vignette et cie
Vous n'avez pas de graphiste qui maitrise le dessin vectoriel dans votre boite ?
Modifié par bazooka07 (03 Jun 2018 - 10:33)
Pour l'image je vais voir pour la réduire, mais non on a pas de graphiste (je n'y suis que stagiaire je précise)
Mais le souci c'est que apparemment le site devrait être modifié par des personnes "lambda" on va dire.
Donc qui n'y connaissent rien directement dans le code pas via une appli ou autre qui va juste modifié une base de donnée pour afficher d'autre infos.
C'est pour ça que mon tuteur me dis de dégager le svg car il faut vérifier que tout rentre dans ta formes avec le texte en utilisant les balises
Mais le souci c'est que apparemment le site devrait être modifié par des personnes "lambda" on va dire.
Donc qui n'y connaissent rien directement dans le code pas via une appli ou autre qui va juste modifié une base de donnée pour afficher d'autre infos.
C'est pour ça que mon tuteur me dis de dégager le svg car il faut vérifier que tout rentre dans ta formes avec le texte en utilisant les balises
Bonjour Tryno,
On sait jamais cela peut être t'intéresser voici un exemple pour faire un hexagone en css
autours d'un bloc de texte.
https://codepen.io/Zonecss/pen/bKerjv
On sait jamais cela peut être t'intéresser voici un exemple pour faire un hexagone en css
autours d'un bloc de texte.
https://codepen.io/Zonecss/pen/bKerjv
@aliasdmc,
"Bien vu" comme dirait mon épicier pour les "transform: rotate(60deg)".
J'ai essayé d'utiliser les pseudo-éléments ::before et :: after comme toi.
C'est le bazar, ils n'ont pas la même hauteur que leur parent.
Il vaut mieux utiliser des <div> à la place avec "position: absolute"
Pour le container de texte, il faut régler son "width: 200%" et utiliser des " span { display: inline-block; width: xx%; } pour éviter une forme rectangulaire imposante à l'intérieur de l'hexagone.
Au final, on peut faire cela en pure CSS, sans JS.
Démo inline :
https://kazimentou.fr/divers/ciffle/hexagone-css.html
source one-page html :
https://gist.github.com/bazooka07/57d04a45d69f932444fd7ec5dc47f8e7
Il faudrait rajouter encore un niveau de div pour corriger un petit défaut visuel
Il faut rajouter des medias queries pour régler les "font-size"
Donc effectivement, Mme Michu peut le faire sans SVG.
Mais on a dit qu'on faisait Wordpress
Modifié par bazooka07 (08 Jun 2018 - 12:04)
"Bien vu" comme dirait mon épicier pour les "transform: rotate(60deg)".
J'ai essayé d'utiliser les pseudo-éléments ::before et :: after comme toi.
C'est le bazar, ils n'ont pas la même hauteur que leur parent.
Il vaut mieux utiliser des <div> à la place avec "position: absolute"
Pour le container de texte, il faut régler son "width: 200%" et utiliser des " span { display: inline-block; width: xx%; } pour éviter une forme rectangulaire imposante à l'intérieur de l'hexagone.
Au final, on peut faire cela en pure CSS, sans JS. Démo inline :
https://kazimentou.fr/divers/ciffle/hexagone-css.html
source one-page html :
https://gist.github.com/bazooka07/57d04a45d69f932444fd7ec5dc47f8e7
Il faudrait rajouter encore un niveau de div pour corriger un petit défaut visuel
Il faut rajouter des medias queries pour régler les "font-size"
Donc effectivement, Mme Michu peut le faire sans SVG.
Mais on a dit qu'on faisait Wordpress
Modifié par bazooka07 (08 Jun 2018 - 12:04)
