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]

Re,

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

Ce n'est pas une digression, puisqu'il s'agit (pour moi) d'un apprentissage et que je crois que ce message va au fond de la question
Au contraire, il demande une méditation et une analyse serrées.

Quand j'en aurai tiré la quintessence, je reviendrai ici dire ce que j'en aurai tiré... car je suis certain qu'il y a beaucoup à en tirer

Merci

[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).

[veevee]

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>

Panique à bord
les newbies, ça sait utiliser (assez bien) des class, (assez peureusement) des id, mais id ET class dans la même ligne : panique (impossible d'écrire la CSS)
et c'est pas dans ce forum qu'on en cause !

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

UTILE et pas qu'un peu, et je t'en remercie vivement

Je passe en search pour trouver des infos sur la signification et l'effet de id, la signification, l'effet et la syntaxe de id+class

J'ai utilisé déja (sans rien comprendre et avec angoisse) des id dans des formulaires qui appelaient des fonctions JS, l'impression de jouer avec une grenade dégoupillée

Je n'y suis pour personne

Merci à tous

[12monkeys]

Panique à bord
les newbies, ça sait utiliser (assez bien) des class, (assez peureusement) des id, mais id ET class dans la même ligne : panique (impossible d'écrire la CSS)

La différence entre id et class c'est que les id sont uniques dans une page et les class peuvent se retrouver plusieurs fois dans une page. Dans l'exemple de MasterOfChakhaL l'id alfred sera unique : il n'y aura qu'une fois alfred (en id) dans la page, alors que la class realisateur peut se retrouver plusieurs fois dans la page.

Un exemple : tu peut définir une police à la class realisateur et une couleur de fond propre à l'id alfred. Tous les realisateurs aurons la même police alors que tu vas définir une couleur de fond propre à chaque realisteur par son id propre...

Peut tu préciser en quoi tu n'as pas réussi à écrire la css ?

Encore un peu de lecture. Ceci n'est pas réservé qu'aux pros (comme tu le disais dans ton message privé) ce sont les règles (spécifications) qui s'appliquent au html, au début c'est un peu flou, mais c'est comme tout en apprenant ça viendra...

[veevee]

Bonjour,

en progressant (si lentement !) dans la lecture de l'excellent tutoriel de P.B Naigeon, je lis



Je lis dans un sens, dans l'autre, je chausse mes lunettes, lit en travers...NON, je vois, moi, que les deux éléments sont positionnés en absolu.
Décidement, je n'ai vraiment pas les moyens de comprendre
Je vais me convertir à autre chose....j'hésite entre le bilboquet et la roulette russe

A+

[Candygirl]

Non, il me semble qu'il y a effectivement une incohérence entre ce qui est dit dans le tutoriel et le code proposé. En faite, pour pouvoir utiliser le z-index sur un élément dans le flux, c'est un position:relative qu'il faudrait utiliser.

[veevee]

re-bonjour,

trop tard, j'ai un gros trou dans la tête

En fait, j'ai testé le tout tel quel, et ça fonctionne très bien, tant sous IE que sous FF.

Puis-je en conclure que j'avais bien lu ce qu'il fallait lire et que je ne suis pas si borné que je le craignais ?

Merci

[titoumimi]

effectivement, c'est bien une incohérence

Le code est le bon, ce sont les explications qui ne sont pas les bonnes...

Je me charge de mettre ça à jour de suite.

de me l'avoir signalé, et désolé pour l'erreur

[veevee]

re,

ma derniere question dans cette discussion :

quand une boite-mere contient des boites-filles et que les boites-filles sont positionnées par rapport à la boite-mere, si on déplace, en HTML, la boite-mere dans la feuille (elle passe de la gauche à la droite par exemple), les boites-filles la "suivent"
VRAI (j'ai tout compris) ou FAUX (j'ai rien compris)

Merci

[titoumimi]

vrai

petit exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#conteneur {
	background-color:#00FF66; /* vert */
	position:absolute;
	top:450px;
	left:25px;
	width:200px;
	height:200px;
	}
#element1 {
	background-color:#0066FF; /* bleu */
	position:absolute;
	top:5px;
	left:5px;
	width:50px;
	height:50px;
	}
#element2 {
	background-color:#FF66CC; /* rose */
	position:absolute;
	bottom:5px;
	right:5px;
	width:50px;
	height:50px;
	}

Code :

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

1
2
3
4
<div id="conteneur">
	<div id="element1"></div>
	<div id="element2"></div>
</div>

tu peux ainsi déplacer à volonté "conteneur", les boites contenues gardent leur positions

[Erwan31]

Bonjour,
L'exemple de balisage de Masterofchakhal (via un DL) est intéressant et permet une économie de moyens mais cette sémantique n'apporte aucun valeur ajoutée réel ni pour l'utilisateur ni pour les robots d'indexation.
Leur utilisation un peu détournée vient d'une trop grande ambiguité des spec HTML 4.01 et prive de la possibilité d'un titrage quant à lui exploitable.

Donc pour ma part je les remplacerais par un truc dans le genre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul id="conteneur">
  <li>
    <h2>Alfred ADAM</h2>
    <img src="brandt carlo.jpg" width="165" height="110" alt="" />
    <p class="annee">1903-1980</p>
    <p class="film">La belle américaine</p>
  </li>
  <li>
    <h2>...</h2>
    <img src="....jpg" width="165" height="110" alt="" />
    <p class="annee">...</p>
    <p class="film">...</p>
  </li>
</ul>

[veevee]

re,

Waaah ! (gros hurlement de joie sauvage)

maintenant, je vais lancer une autre discussion pour éclaircir cette sombre question id/class

Merci à tous ceux qui ont participé à celle-ci, elle fut fertile.
Je marque résolu


A+