Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Questions basiques html et css

12 réponses
Avatar
romer
Hi,

Juste deux petites précisions :
1. Faut-il que la balise <img /> soit incluse dans un <p> ou un <div> ou
bien est-ce sans importance ?

2. En css existe t-il une différence entre background : xx; et
background-image : xx;

--
A+

Romer

10 réponses

1 2
Avatar
SAM
Bernd a écrit :
Hi,

Juste deux petites précisions :
1. Faut-il que la balise <img /> soit incluse dans un <p> ou un <div> ou
bien est-ce sans importance ?



quel doctype ?


2. En css existe t-il une différence entre background : xx; et
background-image : xx;



c'est exactement pareil puisque ça ne porte pas le même nom ;-)

a { background: url(a_fond.jpg) no-repeat top left }
a:hover { background-position: top right } <-- OK
a.truc:hover { background: bottom left } <-- plus d'image ni fond


--
sm
Avatar
romer
SAM wrote:

> Juste deux petites précisions :
> 1. Faut-il que la balise <img /> soit incluse dans un <p> ou un <div> ou
> bien est-ce sans importance ?

quel doctype ?



!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

> 2. En css existe t-il une différence entre background : xx; et
> background-image : xx;

c'est exactement pareil puisque ça ne porte pas le même nom ;-)



Mais alors pourquoi 2 termes différents si c'est pour le même usage ?

Par avance merci.

--
A+

Romer
Avatar
Lea GRIS
Bernd a écrit :
SAM wrote:

Juste deux petites précisions :
1. Faut-il que la balise <img /> soit incluse dans un <p> ou un <div> ou
bien est-ce sans importance ?





quel doctype ?



!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

2. En css existe t-il une différence entre background : xx; et
background-image : xx;





c'est exactement pareil puisque ça ne porte pas le même nom ;-)



Mais alors pourquoi 2 termes différents si c'est pour le même usage ?



background-image: est la propriété désignant l'image de fond
background: est la propriété regroupant l'ensemble des caractéristiques
du fond (color, image, repeate.

De même que border-top se retrouve dans la propriété de regroupement
border, padding-top dans padding,

--
Léa Gris
Avatar
SAM
Bernd a écrit :
SAM wrote:

Juste deux petites précisions :
1. Faut-il que la balise <img /> soit incluse dans un <p> ou un <div> ou
bien est-ce sans importance ?





quel doctype ?



!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"



Je ne suis pas suffisamment expert, je dirais que oui c'est mieux.

Mais ... ça ne semble pas interdit :
<http://www.la-grange.net/w3c/xhtml1/#prohibitions>


2. En css existe t-il une différence entre background : xx; et
background-image : xx;





c'est exactement pareil puisque ça ne porte pas le même nom ;-)



Mais alors pourquoi 2 termes différents si c'est pour le même usage ?



Je ne sais si tu as vu le smiley ?
Je ne sais si tu as regardé l'exemple montrant LA différence ?

background: C'est pour le générique, la totale quoi
Ça admet aussi qu'on n'y traite qu'un des attributs,
les autres semblant alors passer à 'none' ou 'default'

background-image: ne va traiter que l'image de fond
les autres attributs, s'ils ont été définis, restent
inchangés.

Si le but n'est que de mettre une image de fond (qui se répète en
mosaïque) on peut bien utiliser indifféremment générique ou spécial.

--
sm
Avatar
Olivier Masson
SAM a écrit :
Bernd a écrit :
SAM wrote:

Juste deux petites précisions :
1. Faut-il que la balise <img /> soit incluse dans un <p> ou un
<div> ou
bien est-ce sans importance ?





quel doctype ?








On s'en fout.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"



Je ne suis pas suffisamment expert, je dirais que oui c'est mieux.




En effet (pour les deux :))

Mais ... ça ne semble pas interdit :
<http://www.la-grange.net/w3c/xhtml1/#prohibitions>




Si.
Les "prohibitions" citées ici sont des particularités.
Sans rentrer dans les détails, le contenu de la page est compris dans un
élément <body>, qui est un entité de type bloc.
Habituellement, ce genre d'entité peut tout contenir, sauf exceptions et
c'est le cas ici : un <body> ne contient que des entités bloc (au
passage entité bloc != display: block;). Et aussi <ins> et <del> mais
ins et del, c'est encore un cas particulier (j'avais d'ailleurs soulevé
ici des différences d'interprétation que personne n'avait pu expliquer ;
Olivier Miakinen avait dit qu'il y réfléchirait... il y a 1 ou 2
semestre :)).
Bon bref, l'élément <img> est de type inline (en gros parce que pas très
exactement), donc on ne le met pas directement dans un <body>.
C'est comme ça.

L'idéal est de savoir lire une DTD (le truc cité dans le doctype).
Pour un résumé : http://www.la-grange.net/w3c/html4.01/sgml/dtd.html#attrs


2. En css existe t-il une différence entre background : xx; et
background-image : xx;





c'est exactement pareil puisque ça ne porte pas le même nom ;-)



Mais alors pourquoi 2 termes différents si c'est pour le même usage ?



Je ne sais si tu as vu le smiley ?
Je ne sais si tu as regardé l'exemple montrant LA différence ?

background: C'est pour le générique, la totale quoi
Ça admet aussi qu'on n'y traite qu'un des attributs,
les autres semblant alors passer à 'none' ou 'default'




Une propriété raccourcie : ça contient 'background-color' ||
'background-image' || 'background-repeat' || 'background-attachment' ||
'background-position'.
Voir le très précieux : http://www.yoyodesign.org/doc/w3c/css2/propidx.html
Avatar
Olivier Miakinen
Le 05/04/2008 15:37, Bernd a écrit :
Hi,



Ji (ou Ka),

Juste deux petites précisions :
1. Faut-il que la balise <img /> soit incluse dans un <p> ou un <div> ou
bien est-ce sans importance ?



Un élément IMG peut être dans autre chose qu'un élément P ou DIV, mais
bien sûr pas dans n'importe quel autre élément. Par exemple tu ne peux
pas le mettre directement dans un élément BODY, MAP, BLOCKQUOTE, DL,
FORM, SELECT, etc.

Voir par exemple :
http://www.la-grange.net/w3c/html4.01/sgml/dtd.html

2. En css existe t-il une différence entre background : xx; et
background-image : xx;



Oui.

{
background : <uri>;
}

est équivalent à :

{
background-color : transparent;
background-image : <uri>;
background-repeat : repeat;
background-attachment : scroll;
background-position : 0% 0%;
}

Voir par exemple :
http://www.yoyodesign.org/doc/w3c/css2/colors.html#background-properties
Avatar
Olivier Miakinen
Le 05/04/2008 20:17, Olivier Masson a écrit :

Sans rentrer dans les détails, le contenu de la page est compris dans un
élément <body>, qui est un entité de type bloc.
Habituellement, ce genre d'entité peut tout contenir, sauf exceptions et
c'est le cas ici : un <body> ne contient que des entités bloc



Justement, l'élément BODY ne fait pas partie de ce qui est défini comme
étant un « %block; » dans la DTD. En voici la liste exhaustive :

<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

Soit, en développant %heading, %list et %preformatted :

<!ENTITY % block
"P | H1 | H2 | H3 |H4 | H5 | H6 | UL | OL | PRE |
DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

(au passage entité bloc != display: block;).



Oui.

Et aussi <ins> et <del> mais
ins et del, c'est encore un cas particulier (j'avais d'ailleurs soulevé
ici des différences d'interprétation que personne n'avait pu expliquer ;
Olivier Miakinen avait dit qu'il y réfléchirait... il y a 1 ou 2
semestre :)).



Tu exagères un peu pour la date car c'était en décembre dernier, donc
moins d'un semestre, mais j'avoue que je n'y ai finalement pas réfléchi
du tout.

La question est ici :
http://groups.google.fr/group/fr.comp.infosystemes.www.auteurs/msg/ecaacabeff85815d

Bon bref, l'élément <img> est de type inline (en gros parce que pas très
exactement), donc on ne le met pas directement dans un <body>.
C'est comme ça.



En un peu moins gros, on ne met pas d'élément IMG directement dans un
élément BODY car ce n'est ni un %block; ni un SCRIPT ni un INS ni un
DEL. Voir <http://www.la-grange.net/w3c/html4.01/sgml/dtd.html#flow>
(plus exactement deux lignes plus bas).

Au fait, je viens de remarquer que les possibilités d'inclusion d'INS et
DEL dans tout élément ne sont définies *que* par cette ligne dans le
BODY. Malheureusement le « + » n'est pas expliqué clairement dans
<http://www.la-grange.net/w3c/html4.01/intro/sgmltut.html#h-3.3.3.1>.

L'idéal est de savoir lire une DTD (le truc cité dans le doctype).
Pour un résumé : http://www.la-grange.net/w3c/html4.01/sgml/dtd.html#attrs



Ou le lien que je viens juste de donner, mais il est incomplet donc.
Avatar
Olivier Miakinen
Le 06/04/2008 00:15, Olivier Miakinen a écrit :

La question est ici :
http://groups.google.fr/group/fr.comp.infosystemes.www.auteurs/msg/ecaacabeff85815d



J'avoue que le cas est assez particulier, le INS semblant vraiment en
dehors du flux.

http://www.miakinen.net/tmp/Masson.html

Dans la situation <div><ins><ol><li>texte</li></ol></ins></div>, aussi
bien dans Internet Explorer que dans Firefox, la couleur de fond du OL
est celle du DIV et pas celle du INS. Mais en plus Internet Explorer
semble attribuer aux *textes* en dessous de INS l'attribut de couleur de
fond du INS !

En résumé, si on ne fixe de couleur de fond que pour DIV et INS :

DIV : couleur du DIV
INS : couleur du INS
OL : couleur du DIV
LI : couleur du DIV
texte : couleur du INS pour IE, du DIV pour SeaMonkey
Avatar
romer
Olivier Miakinen <om+ wrote:

> 2. En css existe t-il une différence entre background : xx; et
> background-image : xx;

{
background : <uri>;
}

est équivalent à :

{
background-color : transparent;
background-image : <uri>;
background-repeat : repeat;
background-attachment : scroll;
background-position : 0% 0%;
}

Voir par exemple :
http://www.yoyodesign.org/doc/w3c/css2/colors.html#background-properties



Merci c'est clair et effectivement il existe une différence bien clairre
ici sur les exemples

--
A+

Romer
Avatar
Olivier Masson
Olivier Miakinen a écrit :

En résumé, si on ne fixe de couleur de fond que pour DIV et INS :

DIV : couleur du DIV
INS : couleur du INS
OL : couleur du DIV
LI : couleur du DIV
texte : couleur du INS pour IE, du DIV pour SeaMonkey



C'est bien, t'as bossé (bien, comme toujours) :) Mais ça, c'est la
constatation et ce sont bien ces résultats que je trouvais étranges.
J'avais testé sur presque tous les nav à ma dispo (donc
ie,ff,op,safari,konqueror).
Mais je préparais les ajouts à ma formation, donc je cherchais la petite
bête partout.
J'ai tout simplement remarqué que lorsque les règles étaient un peu
complexes et/ou inusitées, les navigateurs interprétaient à leur façon.
D'ailleurs CSS2.1 a changé quelques points en se calquant sur l'usage
(le partie sur le positionnement reste encore assez imbuvable).
1 2