Discussion :

[veevee]

Bonjour,

j'essaie en ce moment de comprendre "l'esprit" de CSS et les rapports des élements entre eux
Je vous demande une grande indulgence pour la naïveté de mes questions.
Je m'appuie sur le tutoriel de P.B Naigeon
Je n'arrive pas à passer du stade apprentissage au stade assimilation
Je procède par questions simples demandant une réponse par OUI / NON


Quand j'écris :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span id="conteneur">    <!-- début de déclaration de "conteneur"-->
<div id="photo">    <!-- début de déclaration de "photo"-->
<IMG SRC="brandt carlo.jpg" BORDER=0 WIDTH=165 HEIGHT=110>
</div>   <!-- fin de déclaration de "photo"-->
<div id="nom">  <!-- début de déclaration de "nom"-->
Alfred ADAM
</div>   <!-- fin de déclaration de "nom"-->
<div id="naissance">  <!-- début de déclaration de "naissance"-->
1903-1980
</div>   <!-- fin de déclaration de "naissance"-->
<div id="film">   <!-- début de déclaration de "film"-->
La belle américaine
</div> <!-- fin de déclaration de "film"-->
</span>   <!-- fin de déclaration de "conteneur"-->

est-ce que je détermine ipso facto les boites "photo, nom, naissance et film " filles de la mère "conteneur" ?

Merci

[12monkeys]

est-ce que je détermine ipso facto les boites "photo, nom, naissance et film " filles de la mère "conteneur" ?

Merci

En effet "conteneur" est un bloc conteneur et "photo, nom, naissance et film" sont les descendants de ce bloc.

Par contre il y a un tout petit souci avec ton code : ton span contient des div or span étant un élément en ligne il ne peut contenir des éléments de type bloc (comme un div). Voir ici.

[veevee]

Merci
de cette réponse très claire

Donc il faut, au moins par souci de cohérence que toutes les boites soient du même type, soit DIV soit SPAN ?


Pour obtenir un résultat du genre :

une image + une boite 1° texte+une boite 2° texte+une boite 3° texte
Il est cohérent de mettre tout en DIV, ou tout en SPAN ?

Merci

[NikoGJ]

Il est cohérent de mettre tout en DIV, ou tout en SPAN ?

Ici, tout en DIV ^^

[veevee]

Bonjour,

j'avais déja remarqué, en HTML pur, que <div></div> renvoyait à la ligne et <span<>/span> ne le faisait pas, ce qui marque bien le caractère bloc du 1° et en-ligne du 2°.

Autre aspect de la question :
CSS est fait, semble-t-il, pour alléger le code HTML.
Quand je compare la même objet (ma boite avec image et texte) crée avec un tableau <table> et avec CSS, l'allègement n'est pas au rendez-vous.
Puis-je en conclure que CSS n'est pas la panacée mais qu'une évaluation doit précéder le choix de la stratégie HTML ou HTML+CSS?

A+

[MasterOfChakhaL]

Salut,

En fait, CSS n'est pas fait pour alléger le code HTML.
Le but est de séparer au maximum le contenu (le code html) de la présentation (le css).
Ceci est intéressant quand tu gardes en tête que ton design peut évoluer sans que le contenu soit modifié et vice versa. Ca facilite grandement la maintenabilité.

La conséquence en est le plus souvent un code plus léger. Mais il est également possible que le HTML sur lequel tu t'appuies ne soit pas de très bonne qualité.

Le html propose pas loin d'une centaine de balises auxquelles un sens est associé (des listes, des titres, des paragraphes...). Si tu n'utilises que des span et des div, tu vas être obligé de multiplier les id et/ou les classes dans ton html afin de pouvoir les différencier dans ton css.

Par exemple, en me basant sur ton petit bout d'html, j'aurais écris quelque chose de différent:
On va supposer que tu cherches à décrire des réalisateurs auxquels tu associes certaines propriété (un nom, des dates, des films...)
Je pense que j'aurais utilisé une liste de définition (balise dl).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<dl id="alfred" class="realisteur">
  <dt>Alfred ADAM</dt>
  <dd class="epoque">
    1903 - 1980
  </dd>
  <dd class="film">
    La belle américaine
  </dd>
</dl>

Mon choix peut se discuter, mais j'aurais choisi d'insérer l'image via le css (sur l'élément dl ou dt)

Ensuite, une fois que tu es content de ton html (que tu penses que la structure choisie décrit bien l'information que tu présentes). Alors, il te reste à le mettre en forme avec css.

Désolé de la digression, mais peut-être que cela pourra t'être utile dans ton apprentissage.

[veevee]

Bonjour,

Voir ici.

Ce lien est particulierement intéressant, mais il soulève des questions :
dans

the user agent supplies the initial width (c'est l'agent utilisateur qui fournit cette largeur initiale )

qu'est-ce que "l'agent utilisateur" ? la boite fille ?

dans

the current width of the viewport ( largeur effective de la zone de visualisation.)

qu'est-ce que la zone de visualisation ? L'écran du visiteur ? la boite fille ?

Par contre, ce lien est explicite et complet sur les relations "parentales"

Merci

[franculo_caoulene]

Salut,

L'agent utilisateur (user agent en anglais) est l'outil utilisé pour naviguer sur un site, un navigateur quoi. La zone de visualisation (viewport en anglais) est la zone affichée dans l'agent utilisateur (il suffisait de cliquer sur le lien de la page).