Pages :
Modérateur
(reprise du message précédent)

Et puis ce ne serait pas un mal que de respecter ton lycée : Lycée Paul-Louis Cyfflé Smiley murf
1. Ok je vais bouger ça j'ai vraiment un souci d'ordre Smiley lol

2. C'est pas mon lycée Smiley lol ,il ont réussi à se planter dans le nom de leur architecte sur leur flyers (Wielherski au lieu de Wielhorski Smiley biggol ) donc remplacer un y par un i pendant la conception du site c'est pas trop grave Smiley langue
bazooka07 a écrit :
Et bien donne moi le texte, j'ai mis les premières choses qui me passent par la tête


T'inquiète je commence a prendre en main mais merci ^^
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)
Oui c'est vrai sans le faire vraiment exprès je l'avais mis dans une div qui prenait une classe de bootstrap donc mes svg se sont misautomatiquement en responsive
Ç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 Smiley decu Smiley decu
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
En fait les ressources ,on me les a fourni et il n'y en a pas d'autre .

Sauf le footer c'est moi qui est du le dessiner.
Mais l'image est redimensionner pour pas être trop étirer si elle fait tous le bandeau Smiley sweatdrop
Le travail des formes et du texte en SVG a étais rejeté au final donc je pense travailler avec le after ou before
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
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
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 :
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.jpg

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)
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
@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.
Smiley cannelle Au final, on peut faire cela en pure CSS, sans JS. Smiley cannelle

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. Smiley party
Mais on a dit qu'on faisait Wordpress Smiley rocket
Modifié par bazooka07 (08 Jun 2018 - 12:04)
@bazooka07

Justement la gueule que doit avoir le site est fini plus qu'a mettre le contenu quand je le recevrais Smiley cligne
Pages :