A voir également:
- Foncer une image au passage de la souris HTML
- Quelle touche pour débloquer la souris ? - Guide
- Image iso - Guide
- Editeur html - Télécharger - HTML
- Comment agrandir une image - Guide
- Acronis true image - Télécharger - Sauvegarde
2 réponses
@Bill-Billion "Il est recommandé de mettre la balise image dans une balise paragraphe
en raison parce que la balise img est une balise de type inline "
ah bon pourquoi? Surtout que comme on peut voir dans le CSS la propriété display est clairement définie.
Donc il est recommandé de mettre une balise image dans un texte de paragraphe quand elle fiat partie du texte, le reste c'est n'importe quoi. Justement la façon de créer une page web encourage(même plus que cela) à séparer le contenu de sa forme.
Le contenu est (entre autres sans parler des bases de données) la définition du type de contenu: donc un texte, une article de paragraphe, une image etc...
C'est de la sémantique.
Et la forme c'est sa présentation: le CSS dans la plupart des cas sauf si on garde le HTML comme il est et ici ce n'est clairement pas la question , la question concerne comment appliquer le CSS. Ma réponse aussi peu intelligente soit-elle est simplement en sachant comment écrire le CSS et l'appliquer au contenus(le HTML) de la page.
Clairement si on vous a dit de toujours mettre des balises images dans un texte de paragraphe on vous a mentit.
Si l'image est seule et illustratrice elle n'a rien à faire dans un texte, si l'image concerne un texte et est à sa suite alors oui on peut garder l’intégrité du contenu(donc relier l'image au texte) en la mettant dans la balise de texte. On peut mais rien ne nous y oblige, si la sémantique est établie(texte et image dans un même bloc avec du sens ) il n'y aura aucun problème à ce que l'image soit hors d'une balise de texte(paragraphe ou autre) et c'est même plus pratique si on veut faire une mise en page qui ne conserve pas l'image à la suite des contenus textes: on peut appliquer un CSS au texte qui ne sera pas appliqué à l'image sans avoir à définir des propriétés CSS particulière à l'image.
en raison parce que la balise img est une balise de type inline "
ah bon pourquoi? Surtout que comme on peut voir dans le CSS la propriété display est clairement définie.
Donc il est recommandé de mettre une balise image dans un texte de paragraphe quand elle fiat partie du texte, le reste c'est n'importe quoi. Justement la façon de créer une page web encourage(même plus que cela) à séparer le contenu de sa forme.
Le contenu est (entre autres sans parler des bases de données) la définition du type de contenu: donc un texte, une article de paragraphe, une image etc...
C'est de la sémantique.
Et la forme c'est sa présentation: le CSS dans la plupart des cas sauf si on garde le HTML comme il est et ici ce n'est clairement pas la question , la question concerne comment appliquer le CSS. Ma réponse aussi peu intelligente soit-elle est simplement en sachant comment écrire le CSS et l'appliquer au contenus(le HTML) de la page.
Clairement si on vous a dit de toujours mettre des balises images dans un texte de paragraphe on vous a mentit.
Si l'image est seule et illustratrice elle n'a rien à faire dans un texte, si l'image concerne un texte et est à sa suite alors oui on peut garder l’intégrité du contenu(donc relier l'image au texte) en la mettant dans la balise de texte. On peut mais rien ne nous y oblige, si la sémantique est établie(texte et image dans un même bloc avec du sens ) il n'y aura aucun problème à ce que l'image soit hors d'une balise de texte(paragraphe ou autre) et c'est même plus pratique si on veut faire une mise en page qui ne conserve pas l'image à la suite des contenus textes: on peut appliquer un CSS au texte qui ne sera pas appliqué à l'image sans avoir à définir des propriétés CSS particulière à l'image.
Bill-Billion
Messages postés
41
Date d'inscription
lundi 23 décembre 2019
Statut
Membre
Dernière intervention
2 septembre 2020
11 mars 2020 à 20:00
11 mars 2020 à 20:00
Il est recommandé de mettre la balise image dans une balise paragraphe
en raison parceque la balise img est une balise de type inline
En réponse à ta question:
tu veux rendre ton image totalement opaque sans que tu ne l'a pas donné une valeur initial
:retravail ton code
Donne une valeur initial à la classe .fond_image
Puis une autre valeur dans :hover
en raison parceque la balise img est une balise de type inline
En réponse à ta question:
tu veux rendre ton image totalement opaque sans que tu ne l'a pas donné une valeur initial
:retravail ton code
Donne une valeur initial à la classe .fond_image
Puis une autre valeur dans :hover
Salut NNK
vous avez de sérieuses lacunes en CSS. Les 2 parties de CSS doivent fonctionner ensemble:
_la première partie vous définissez des règles de styles en utilisant une class (exprimé par le point) et pseudo-classe(comportement au survol exprimé par :hover)
_dans la seconde partie vous devez appliquer cette cllasse en utilisant l'attribut de balise HTML class. Que ce soit div figure ou n'importe quelle balise cela fonctionne de la même manière.
Je ne sais pas où vous avez eu les 'infos' dont vous parlez mais il serait préférable de commencer un cours/tuto CSS à partir de la base(pour peu que vous ayez déjà une bonne compréhension de HTML sinon c'est cela qu'il faut faire en premier).
Je serais nettement moins complet qu'un cours et ne tends pas à l'être mais voici un eemple du fonctionnement de CSS qui comme vous devez le savoir se 'greffe' sur le HTML
Dans le head en utilisant la balise style dûment définie(ou bien sûr encore mieux un fichier à part avec l'extension .css et dans ce cas il faudrait mettre le lien pour charger le fichier contenant le CSS, voir link et @import pour le CSS):
Donc pour appliquer les règles crées il faut l'indiquer au HTML:
Vous pouvez tester en écrivant un fichier HTML et en changeant les balises utilisées vous verrez qu'il n'y aucun rapport avec la balise(sauf que certaines ont des propriétés par défaut il faudra donc les changer avec le CSS) et évitez les DIV qui n'ont pas de valeur sémantique marquées , ils ne définissent qu'un espace de la page sans aucune autre précision(divide en anglais) contrairement à une balise de paragraphe(p) , une élément de type article ou section...etc
vous avez de sérieuses lacunes en CSS. Les 2 parties de CSS doivent fonctionner ensemble:
_la première partie vous définissez des règles de styles en utilisant une class (exprimé par le point) et pseudo-classe(comportement au survol exprimé par :hover)
_dans la seconde partie vous devez appliquer cette cllasse en utilisant l'attribut de balise HTML class. Que ce soit div figure ou n'importe quelle balise cela fonctionne de la même manière.
Je ne sais pas où vous avez eu les 'infos' dont vous parlez mais il serait préférable de commencer un cours/tuto CSS à partir de la base(pour peu que vous ayez déjà une bonne compréhension de HTML sinon c'est cela qu'il faut faire en premier).
Je serais nettement moins complet qu'un cours et ne tends pas à l'être mais voici un eemple du fonctionnement de CSS qui comme vous devez le savoir se 'greffe' sur le HTML
Dans le head en utilisant la balise style dûment définie(ou bien sûr encore mieux un fichier à part avec l'extension .css et dans ce cas il faudrait mettre le lien pour charger le fichier contenant le CSS, voir link et @import pour le CSS):
/* avec une classe */
.uneRegleCSS{
color:red;
}
/* avec une id*/
#uneAutreRegleCSS{
background-color:rgba(240,240,110,0.5);
}
Donc pour appliquer les règles crées il faut l'indiquer au HTML:
<p class='uneRegleCSS'>ce texte sera en rouge</p> <div id='uneAutreRegleCSS'> le fond de cet élément sera de couleur jaune avec une semi transparence de 50% </div>
Vous pouvez tester en écrivant un fichier HTML et en changeant les balises utilisées vous verrez qu'il n'y aucun rapport avec la balise(sauf que certaines ont des propriétés par défaut il faudra donc les changer avec le CSS) et évitez les DIV qui n'ont pas de valeur sémantique marquées , ils ne définissent qu'un espace de la page sans aucune autre précision(divide en anglais) contrairement à une balise de paragraphe(p) , une élément de type article ou section...etc
12 mars 2020 à 20:35
à preciser encore:les balise div,span ce sont des balise qui ne sert à rien incomprehensible par le navigateur,c'est vrai utilisé un div un p dans ce cas donne le même resultat la seul différence le navigateur comprend p
mettre une image dans un paragraphe tu dis que tu ne veux pas d'autres truc à coté bahh là pas besoin de mettre encore un display
Modifié le 13 mars 2020 à 06:42
"Pourquoi un display:inline-block; puisque div est une balise de type bloc"
Je ne saurais dire pourquoi et on peut faire ce que l'on veut en CSS mais inline-block et différent de block sinon ça n'existerais pas. Cela sert pour des mises en page. Et dans le cas d'une classe celà peut s'appliquer à n'importe quel élément(automatisation) donc pas forécément un DIV. L'aantage c'est qu'on peut changer le CSS indépendamment du HTML ou le contraire(changer le HTML indépendamment du CSS, donc mettre un autre élément que div comme un élément de display inline ou block et garder la mise en page associée à inline-block). Donc même si l'auteur u sujet à des lacunes en CSS l'exemple et la règle CSS est tout à fait correcte quand il indique inline-block(qi forcément à un autre comporteent que block ou inline, ça date de CSS3 il me semble car avant justement il n'y avais pas cette possibilité et c'était un peu plus galère pour certains trucs).
j'ai pas dit qu'elle ne servait à rien mais div définit un container sans sémantique , donc des éléments qui n'ont rien de remarquable(et seront indexés en tant que tel par les moteurs de recherche). Avec un div ce n'est pas le sens qui va primer mais simplement ajouter une division à un élément qui sera pas un autre article ou section(ni nav , header ou footer etc...), donc ça peut servir, nottament pour faire des visuels qui ne vont pas couper le sens d'un élément.
pour la sémantique span à bien un rôle définit(et pris en compte par les moteurs de recherche), ma définition est celle d'un élément texte subalterne à travers un autre élément texte mais la définition précise est ici:
https://www.w3schools.com/tags/tag_span.asp
13 mars 2020 à 15:47
13 mars 2020 à 16:06
Effectivement, cela vaut mieux, ce que tu écris est soit erroné (les balise div,span ce sont des balise qui ne sert à rien incomprehensible par le navigateur), soit incompréhensible (tu veux rendre ton image totalement opaque sans que tu ne l'a pas donné une valeur initia).
Tu pratiques réellement CSS ?
13 mars 2020 à 22:08
Ou alors vous dites n'importe quoi et au lieu d'essayer de dire devrais dire les choses réelles.
div et span, ne sont pas incompréhensible par un navigateur, le dire est faux(voir mes précisions). Et display block et différent de display : inline-block...donc autant vous taire en effet si c'est pour dire nimp!!