[HTML] Parenté mère-fille de boites en CSS

Version imprimable

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <span id="conteneur">  <div id="photo">  <IMG SRC="brandt carlo.jpg" BORDER=0 WIDTH=165 HEIGHT=110> </div>  <div id="nom">  Alfred ADAM </div>  <div id="naissance">  1903-1980 </div>  <div id="film">  La belle américaine </div>  </span> 
est-ce que je détermine ipso facto les boites "photo, nom, naissance et film " filles de la mère "conteneur" ?

Merci

31/03/2008, 08h26
12monkeys

Citation:

Envoyé par veevee

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.
31/03/2008, 09h04
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 :
http://mistervideo.free.fr/TEST/xpl1.jpg
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
31/03/2008, 09h44
NikoGJ

Citation:

Envoyé par veevee

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

Ici, tout en DIV ^^
31/03/2008, 12h15
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+
31/03/2008, 12h44
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:

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.
31/03/2008, 14h40
veevee

Re,

Citation:

Envoyé par MasterOfChakhaL

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
31/03/2008, 15h02
veevee

Bonjour,

Citation:

Envoyé par 12monkeys

Voir ici.

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

Citation:

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

Citation:

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
31/03/2008, 17h34
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).
31/03/2008, 18h49
veevee
Citation:
Envoyé par MasterOfChakhaL

Je pense que j'aurais utilisé une liste de définition (balise dl).

Code:

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 :oops:
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 !

Citation:

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:D

Merci à tous
31/03/2008, 19h45
12monkeys

Citation:

Envoyé par veevee

Panique à bord :oops:
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...
01/04/2008, 08h31
veevee

Bonjour,

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

http://mistervideo.free.fr/TEST/absolu.jpg

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+
01/04/2008, 14h39
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.
01/04/2008, 14h54
veevee

re-bonjour,

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

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
01/04/2008, 15h13
titoumimi

effectivement, c'est bien une incohérence :oops::oops::oops:

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

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

:merci: de me l'avoir signalé, et désolé pour l'erreur :oops:
01/04/2008, 15h22
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

vrai :king:

petit exemple :

Code:

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:

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 :)

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:

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>

01/04/2008, 15h47
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+