Questions basiques html et css

Le
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
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #22078291
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
romer
Le #22078281
SAM
> 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
Lea GRIS
Le #22078271
Bernd a écrit :
SAM
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
SAM
Le #22078261
Bernd a écrit :
SAM
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 :


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
Olivier Masson
Le #22078251
SAM a écrit :
Bernd a écrit :
SAM
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 :




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
Olivier Miakinen
Le #22078231
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
Olivier Miakinen
Le #22078221
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 (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

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.
Olivier Miakinen
Le #22078211
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
romer
Le #22078201
Olivier Miakinen
> 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
Olivier Masson
Le #22078101
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).
Publicité
Poster une réponse
Anonyme