Discussion :

[veevee]

Bonjour,

actuellement j'ai des pages bâties en tableau et impossible à maintenir proprement (ça c'est certain)
Je souhaite afficher des portraits (images alignés cote à cote en rang, des lignes de portraits les unes au-dessus des autres, quelque chose comme ceci



je voudrais définir des blocs positionnés comme ci-dessous




Ces blocs seraient définies par un code ul et li
La boite 1 serait la boite englobante contenant :
Le bloc 2 serait lié à img
Le bloc 3 serait liée à h2
Le bloc 4 serait liée à h3
Le bloc 5 serait liée à h4
Le bloc 6 serait liée à h5

Ce qui donnerait un code HTML

Code HTML :

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
<ul id="boite1">
  <li class=esp>
    <img src="abbass.jpg" border=0 width=165 height=110>
    <h3>Hiam ABBASS</h3><br>
    <h4>Née en 1950</h4>
    <h5>Dialogue avec mon jardinier</h5>
    <h6>2004</h6>
  </li >
  <li class=esp>
    <img src="toto.jpg" border=0 width=165 height=110>
    <h3>Jules MACHIN</h3><br>
    <h4>Née en 1959</h4>
    <h5>Le deuxieme souffle</h5>
    <h6>2004</h6>
  </li >
...........
 </ul>

Le code CSS pourrait être:

Code CSS :

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

1
2
3
4
#boite1 li { 
float:left;
list-style-type: none;/*pour supprimer les puces*/
}

1° Question : le "float.left" signifie que les li de boite1 flottent ou que ce qui est contenu dans les li flotte ?

2° question : qu'est-ce que je dois écrire pour que boite2, boite3.. soient des enfants de boite1 ?
Je pensais à :

Code CSS :

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

1
2
3
4
5
6
7
#h3 li{
....
}
#h4 li{
...
}
....

Vos avis vont peut-être me guider

Cette discussion reprend une discussion antérieure (3 pages) non résolue


Merci

[pop_up]

1° Question : le "float:left" signifie que les li de boite1 flottent ou que ce qui est contenu dans les li flotte ?

le float:left; défini pour chaque li de #boite1 signifie que le flux continuera à droite de ton li car il est flottant à gauche

Code :

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

2° question : qu'est-ce que je dois écrire pour que boite2, boite3.. soient des enfants de boite1 ?

Boite2 et boite3 seraient dans ton dessin enfant de boite1 car ils sont dedans. Ils faut dans ton code que tu les mettent entre le début de ton id="boite1" et avant sa fermeture.

Si tu veux définir une propriété css pour ces éléments, utilise les propriétés en cascade des css. exemple :

Code :

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

1
2
3
4
 
#boite1 #boite2 {
    color: red;
}

ici, toutes les boite2 enfant de boite1 auront une couleur de police rouge. Si boite2 n'est pas dans boite1, alors cette propriété css ne s'appliquera pas.

en espérant avoir répondu a tes interrogations.

[veevee]

le float:left; défini pour chaque li de #boite1 signifie que le flux continuera à droite de ton li car il est flottant à gauche

ça, je peux déja pas comprendre, je n'arrive pas à imaginer/assimiler ce qu'est le flux qui évoque pour moi un courant, un débit, et l'explication que j'ai déja reçue m'a montré que ce n'était pas ça

Code :

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

2° question : qu'est-ce que je dois écrire pour que boite2, boite3.. soient des enfants de boite1 ?

Boite2 et boite3 seraient dans ton dessin enfant de boite1 car ils sont dedans. Ils faut dans ton code que tu les mettent entre le début de ton id="boite1" et avant sa fermeture.

encore une autre incomprehension absolue de ma part
Dans ma tête, ce que tu dis est vrai A CONDITION que boite2 soit en relatif (donc par rapport à boite1) et que le bloc 2 soit enfant du bloc1 et le fait que dans mon dessin boite2 soit dans boite 1 n'a rien à voir avec la parenté
Entre le float, le positionnement absolu, le positionnement relatif, le flux, et les blocs.... je patauge à mort

Seule solution lire lire et lire encore, et en espérant que mes lectures n'ajouteront pas à la confusion

+

[Halleck]

Bon, alors pour t'aider :

Tu as remarqué, et tu le fais, qu'on laisse à chaque fois un espace sur le côté quand on descend d'un niveau dans les balises. Cet alinéa symbolise une descendance, dans tous les langages. En HTML, c'est d'autant plus évident que cette descendance hérite des attributs de ses parents :

Code :

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

1
2
3
4
5
6
7
8
9
 
<grand-père>
   <mère>
       <fils>
       </fil>
   </mère>
   <père>
   </pères>
</grand-père>

Le fils descend de la mère, car il est inclus dans ses balises. Ca n'a rien à voir avec sa position absolute ou relative, juste avec sa position hiérarchique.

On dit que <grand-père> est parent, <mère> descendant. De sorte, comme en génétique, le descendant hérite des propriétes de ses parents.

En espérant t'aider

[pop_up]

Pour l'histoire du flux, je vais essayer de faire court :
imaginons ce code :

Code :

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

1
2
3
 
<span>toto </span>
<span>titi</span>

ceci va s'afficher e cette manière :
toto titi

pourquoi ? -> span est un élément de type inline ainsi, le flux continu aprés, sans revenir à la ligne.

Autre exemple :

Code :

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

1
2
3
 
<p>toto </p>
<p>titi</p>

ceci va s'afficher e cette manière :
toto
titi

pourquoi ? -> parce que <p> est un élément de type bloc. Ainsi, à chaque <p> que tu fais, cela fait un nouveau paragraphe qui revient a la ligne

Mais maintenant si on fait :

Code :

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

1
2
3
 
<p style="float:left;">toto </p>
<p>titi</p>

Dans ce cas, titi passera à droite de toto car en mettant float: left, on lui dit : "je veux que le mon <p> qui contient toto soit flottant à gauche et ainsi que le flux continu à droite de mon élément".

Est ce qu ç'est mieux comme explication ?

[veevee]

Pour pop_up

Bonjour,

merci de t'inquiéter de mes progrès

Je serai clair
coté flux : ça n'a pas bougé d'un pouce
Le reste : tes conseils me sont utiles

Je crois que mon gros handicap sur ce point est que je donne au mot "flux" son vrai sens : quelque chose qui coule, qui débite...
Il est sans doute la mauvaise traduction du terme américain qui a un autre sens
Je ne vois PAS DU TOUT ce qui coule et qui passe à coté de certaines choses (les li par exemple)


Merci

[veevee]

Pour l'histoire du flux, je vais essayer de faire court :

Mais maintenant si on fait :

Code :

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

1
2
3
 
<p style="float:left;">toto </p>
<p>titi</p>

Dans ce cas, titi passera à droite de toto car en mettant float: left, on lui dit : "je veux que le mon <p> qui contient toto soit flottant à gauche et ainsi que le flux continu à droite de mon élément".

Est ce qu ç'est mieux comme explication ?

L'explication est claire
Mais elle est fausse, en effet, ttit est bel et bien en-dessous de tot, on a sauté à la ligne

Dans ma tête un salmigondis
ça