Mettre un texte çoté droit d'une photo
Fermé
jadami
Messages postés
103
Date d'inscription
mercredi 14 mars 2007
Statut
Membre
Dernière intervention
18 septembre 2020
-
28 nov. 2018 à 19:35
morlaixfort - 29 nov. 2018 à 04:28
morlaixfort - 29 nov. 2018 à 04:28
A voir également:
- Mettre un texte çoté droit d'une photo
- Traduction photo gratuit - Guide
- Photo de profil - Guide
- Partage photo - Guide
- Mettre un texte en majuscule - Guide
- Photo aérienne de ma maison - Guide
1 réponse
Salut, vous montrez du CSS c'est là que ça se passe.
Déjà on peut remarquer que les tailles sont définies en pixels. Ce qui n'est pas vraiment terrible pour un design vu que chaque utilisateur utilise une résolution d'écran différente(le nombre de pixels affichés longueur/largeur) donc chaque utilisateur aura une page qui s'affiche différemment selon si la mise en page est plus grande , plus petite ou par le plus grand des hasard que l'internaute qui regarde le site à exactement la même taille d'écran/pixels que celle faite pour.
Plus de la majorité (largement) des sites étant consultés sur un appareil mobile(téléphone, tablette, etc...) les écrans étant beaucoup plus petit il faut faire :
_Un affichage en taille relative(% , em -le quadratin typographique qui est un ratio utilisant la hauteur de ligne de texte courante) donc pas en pixels qui sont fixé et ne s'adapteront jamais.
_éventuellement tester, le CSS étant parfois interprété différemment selon les navigateurs ou les dimensions pouvant avoir des écarts pour la même raison, voire des fonctionnalités(règles de CSS ici) pas encore existante sur certains navigateurs.
Pour la mise en page et l'alignement il existe énormément de tutos et différentes méthodes, à chacun de trouver la sienne comme ici :(premier résultat trouvé)
https://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html
Où si vous n'avez pas les bases de HTML et CSS commencez par le début, les règles d'écriture(syntaxe etc...) de ces 2 langages très simple.
Par ex:
https://www.qwant.com/?q=apprendre+html+css&t=web
Notez que la méthode d'alignement est ici en float(pour les balises li) donc si vous restez là dessus vous pouvez aligner simplement à l'intérieur des div(au passage mieux vaut éviter les balises div pour les remplacer par les balises qui indiquent la sémantique du contenu : ex un paragraphe de texte, une section ou chapitre(balise section et article) ce qui permet d'incorporer lors du référencement le contenu pour la désignation qu'il a(c'est cela la sémantique) et de pouvoir avoir une table des matières cohérente(les moteurs de recherche savent à quoi correspond quels contenus et peuvent ainsi l'indexer pour la page).
Pour être plus concret un exemple avec un syntaxe HTML correcte:
J'ai volontairement omis les classes css(attribut de balise class) puisque que vous voulez les refaire.
Déjà on peut remarquer que les tailles sont définies en pixels. Ce qui n'est pas vraiment terrible pour un design vu que chaque utilisateur utilise une résolution d'écran différente(le nombre de pixels affichés longueur/largeur) donc chaque utilisateur aura une page qui s'affiche différemment selon si la mise en page est plus grande , plus petite ou par le plus grand des hasard que l'internaute qui regarde le site à exactement la même taille d'écran/pixels que celle faite pour.
Plus de la majorité (largement) des sites étant consultés sur un appareil mobile(téléphone, tablette, etc...) les écrans étant beaucoup plus petit il faut faire :
_Un affichage en taille relative(% , em -le quadratin typographique qui est un ratio utilisant la hauteur de ligne de texte courante) donc pas en pixels qui sont fixé et ne s'adapteront jamais.
_éventuellement tester, le CSS étant parfois interprété différemment selon les navigateurs ou les dimensions pouvant avoir des écarts pour la même raison, voire des fonctionnalités(règles de CSS ici) pas encore existante sur certains navigateurs.
Pour la mise en page et l'alignement il existe énormément de tutos et différentes méthodes, à chacun de trouver la sienne comme ici :(premier résultat trouvé)
https://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html
Où si vous n'avez pas les bases de HTML et CSS commencez par le début, les règles d'écriture(syntaxe etc...) de ces 2 langages très simple.
Par ex:
https://www.qwant.com/?q=apprendre+html+css&t=web
Notez que la méthode d'alignement est ici en float(pour les balises li) donc si vous restez là dessus vous pouvez aligner simplement à l'intérieur des div(au passage mieux vaut éviter les balises div pour les remplacer par les balises qui indiquent la sémantique du contenu : ex un paragraphe de texte, une section ou chapitre(balise section et article) ce qui permet d'incorporer lors du référencement le contenu pour la désignation qu'il a(c'est cela la sémantique) et de pouvoir avoir une table des matières cohérente(les moteurs de recherche savent à quoi correspond quels contenus et peuvent ainsi l'indexer pour la page).
Pour être plus concret un exemple avec un syntaxe HTML correcte:
<section> <article> <h3>Claude</h3> <img src="Photos-Bureau/Claude-150x113.png" alt="" width="150" height="113" /><!-- plutôt à éviter aussi les dimensions en pixels et indiquées directement dans le HTML, il faut utiliser CSS qui est mieux et sert à ça, voir aussi mes reccomandations sur les tailles par rapport à clles des écrans d'utilisateurs---> <h4>SECRÉTAIRE GENERAL</h4> <p>TIR A L'ARC</p> </article> <article> <!-- même chose ici mais pour une autre personne --> <!-- notez aussi qu'en général ce genre de chose répétitive utilise une base de données, cela permet de ne pas avoir à changer l'affichage mais d'avoir un programme qui automatise tout-cf 'région répétées' ou simplement utilisez un CMS qui contient page web, la base de données et le programme qui permet de mettre les 2 en rapport, bref automatiser plutôt que devoir tout réecrire à chaque changement nécessaire et tôt ou tard qui surviendra --> </article> </section>
J'ai volontairement omis les classes css(attribut de balise class) puisque que vous voulez les refaire.