Position image texte
Fermé
Max0123456
Messages postés
97
Date d'inscription
dimanche 24 octobre 2021
Statut
Membre
Dernière intervention
2 février 2023
-
Modifié le 4 nov. 2021 à 19:05
Orthox - 6 nov. 2021 à 11:58
Orthox - 6 nov. 2021 à 11:58
A voir également:
- Position image texte
- Image iso - Guide
- Ma position - Guide
- Excel cellule couleur si condition texte - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Transcription audio en texte word gratuit - Guide
2 réponses
Salut,
si l'image est "illustrative" de quoi que ce soit elle doit être mise en tant qu'image et non élément de décoration(en image de fond).
Déjà si vous faites cela dans le HTML(ajouter l'image en tant qu'élément) vous pouvez positionner plus facilement.
Encore mieux et plus respectueux de HTML c'est d'utiliser une balise texte pour...indiquer du texte.
DIV n'est pas à utilisé sauf si les éléments ne sont pas des éléments identifiables(et qui vont être référencé en tant qu'entité identifié) car n'a aucune valeur sémantique.
Dans le cas l'image est une image (par opposition à un élément uniquement décoratif) vous pouvez facilement les positionner l'un à côté de l'autre dans l'ordre de leur apparition CSS, les méthodes sont nombreuses(marges, définir une taille dans leur container...).
Ce qui m'étonne c'est que vous utilisez HTML5 mais de façon incomplète.
Une balise section doit être suivie d'un élément article et celui ci avoir un titre(ce qui fait une table des matières clairement identifiable pour référencement ainsi que pour les utilisateurs qui le demande).
Ici vous avez un div qui n'a aucune valeur sémantique, donc n'indique pas la qualité de son contenu.
Explication ici par exemple sur l'utilisation correcte de section./article/titre et pourquoi éviter les div quand on peut faire autrement:
https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
Et pour le CSS une recherche sera mieux que des explications sur un forum:
https://www.google.fr/search?q=positionnement+CSS
éventuellement regardez les autres propriétés de "background" en CSS pour positionner l'image de fond si vous voulez garder la même structure(et donc virer
Par exemple en donnant 100% de largeur(width) à article et en divisant en autant de pourcentage que l'on veut les 2 éléments(le paragraphe texte et l'image) on a facilement 2 colonnes:
Largeur article = 100% de la taille de la page
Largeur texte = 40% de article
Largeur image = 60% de article
En espérant avoir été clair sinon direction apprentissage CSS pour comprendre le positionnement.
/!\ : une ID(identifiant) doit être unique! Donc le div et H1 ne peuvent pas avoir la même ID.
Quand vous "demandez" l'élément identifié par "slogan" lequel sera choisit?
Si vous devez utiliser des éléments avec les mêmes propriétés(ce qui n'est pas logique dans le cas présent, un container a d'autres règles CSS que ses contenus et réciproquement dans notre cas) il faut passer par l'attribut/le sélecteur CSS "class" qui est fait pour être multiple et ainsi avoir des règles appliqués à différents éléments(et ça peut même se combiner en attribuant plusieurs classes à un élément).
Voir par là pour comprendre:
recherche @google: "Les bases CSS" ou "apprendre CSS les classes et ID"
si l'image est "illustrative" de quoi que ce soit elle doit être mise en tant qu'image et non élément de décoration(en image de fond).
Déjà si vous faites cela dans le HTML(ajouter l'image en tant qu'élément) vous pouvez positionner plus facilement.
Encore mieux et plus respectueux de HTML c'est d'utiliser une balise texte pour...indiquer du texte.
DIV n'est pas à utilisé sauf si les éléments ne sont pas des éléments identifiables(et qui vont être référencé en tant qu'entité identifié) car n'a aucune valeur sémantique.
Dans le cas l'image est une image (par opposition à un élément uniquement décoratif) vous pouvez facilement les positionner l'un à côté de l'autre dans l'ordre de leur apparition CSS, les méthodes sont nombreuses(marges, définir une taille dans leur container...).
Ce qui m'étonne c'est que vous utilisez HTML5 mais de façon incomplète.
Une balise section doit être suivie d'un élément article et celui ci avoir un titre(ce qui fait une table des matières clairement identifiable pour référencement ainsi que pour les utilisateurs qui le demande).
Ici vous avez un div qui n'a aucune valeur sémantique, donc n'indique pas la qualité de son contenu.
Explication ici par exemple sur l'utilisation correcte de section./article/titre et pourquoi éviter les div quand on peut faire autrement:
https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
Et pour le CSS une recherche sera mieux que des explications sur un forum:
https://www.google.fr/search?q=positionnement+CSS
éventuellement regardez les autres propriétés de "background" en CSS pour positionner l'image de fond si vous voulez garder la même structure(et donc virer
background-size:cover;qui signifie que l'image doit couvrir l'espace disponible donc tout l'espace et non une portion).
Par exemple en donnant 100% de largeur(width) à article et en divisant en autant de pourcentage que l'on veut les 2 éléments(le paragraphe texte et l'image) on a facilement 2 colonnes:
Largeur article = 100% de la taille de la page
Largeur texte = 40% de article
Largeur image = 60% de article
En espérant avoir été clair sinon direction apprentissage CSS pour comprendre le positionnement.
/!\ : une ID(identifiant) doit être unique! Donc le div et H1 ne peuvent pas avoir la même ID.
Quand vous "demandez" l'élément identifié par "slogan" lequel sera choisit?
Si vous devez utiliser des éléments avec les mêmes propriétés(ce qui n'est pas logique dans le cas présent, un container a d'autres règles CSS que ses contenus et réciproquement dans notre cas) il faut passer par l'attribut/le sélecteur CSS "class" qui est fait pour être multiple et ainsi avoir des règles appliqués à différents éléments(et ça peut même se combiner en attribuant plusieurs classes à un élément).
Voir par là pour comprendre:
recherche @google: "Les bases CSS" ou "apprendre CSS les classes et ID"
Max0123456
Messages postés
97
Date d'inscription
dimanche 24 octobre 2021
Statut
Membre
Dernière intervention
2 février 2023
Modifié le 4 nov. 2021 à 22:00
Modifié le 4 nov. 2021 à 22:00
<section class="top-page">
<p id="slogan-text">
<h1 id="slogan">texte</h1>
</p>
<img class="image" src="code.jpg">
</section>
.top-page {
height: 85vh;
padding-top: 80px;
}
#slogan-text{
width: 50%
}
#slogan{
color: black;
font-size: 80px;
margin-left: 50px;
}
.image{
background-size: cover;
float: right;
}
doit on utiliser p id ou p class ? quelle est la différence entre id et class ?
je me cite:
/!\ : une ID(identifiant) doit être unique! Donc le div et H1 ne peuvent pas avoir la même ID.
Voir par là pour comprendre:
recherche @google: "Les bases CSS" ou "apprendre CSS les classes et ID"
Si vous ne savez pas ça vous n'avez pas les bases pour faire du CSS.
J'ai déjà expliqué ensuite: une class peut être multiple une ID est obligatoirement unique donc ça sert dans des cas différents. L'avantage d'un jeu de propriétés utilisant class est qu'il peut donc être réutilisé(même sur une autre page en fichier externe). L'avantage de propriétés associée à une ID c'est qu'elle ne peut servir qu'une fois(pour un seul élément donc) et assure qu'il sera utilisé qu'une fois(par page).
Je vous conseille (encore) d'aller/retourner sur un tuto CSS (ou aller voir un autre destiné au débutants) cela sera certainement mieux détaillé qu'une réponse sur forum.
Un élément peut bien sûr avoir ID et class ce qui permet de combiner si besoin.
ID et class peuvent aussi servir pour la programmation(JavaScript), avec une ID l'élément sera 'plus facilement' repérable pour le programme(et surtout pour le programmeur).
/!\ : une ID(identifiant) doit être unique! Donc le div et H1 ne peuvent pas avoir la même ID.
Voir par là pour comprendre:
recherche @google: "Les bases CSS" ou "apprendre CSS les classes et ID"
Si vous ne savez pas ça vous n'avez pas les bases pour faire du CSS.
J'ai déjà expliqué ensuite: une class peut être multiple une ID est obligatoirement unique donc ça sert dans des cas différents. L'avantage d'un jeu de propriétés utilisant class est qu'il peut donc être réutilisé(même sur une autre page en fichier externe). L'avantage de propriétés associée à une ID c'est qu'elle ne peut servir qu'une fois(pour un seul élément donc) et assure qu'il sera utilisé qu'une fois(par page).
Je vous conseille (encore) d'aller/retourner sur un tuto CSS (ou aller voir un autre destiné au débutants) cela sera certainement mieux détaillé qu'une réponse sur forum.
Un élément peut bien sûr avoir ID et class ce qui permet de combiner si besoin.
ID et class peuvent aussi servir pour la programmation(JavaScript), avec une ID l'élément sera 'plus facilement' repérable pour le programme(et surtout pour le programmeur).