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

[Halleck]

C'est à prendre au sens propre : mouvement

=> flux qui continu (ex: span): l'élement suit le mouvement normal de lecture, de gauche à droite, puis de haut en bas en fin de ligne

=> flux qui coupe (ex: h1) : l'élément ne suit pas le mouvement normal de lecture, on va à la ligne


Donc en gros :
<span>... => inline = virgule
<h1><ul> => block = point, à la ligne (sans alinéa )

[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

[pop_up]

Si si ça marche et j'avais vérifié:

Code :

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

1
2
3
4
5
6
7
8
9
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
</head>
<body>
<p style="float:left;">toto</p><p>titi</p>
</body>
</html>

Testé avec IE6 -> OK
Testé avec FF 2.0.0.13 -> OK (mis a part des padding ou margin a changer)

[Halleck]

Si ça ne marche pas c'est que tu as du changer les propriétés de certains éléments. Quoi je ne sais pas, mais ça ne peut que marcher

Par exemple, si toto (dans cet exemple ) fait la largeur de la page, ou de son conteneur, titi ne peut pas se mettre à droite, et c'est bien normal : il dépasse; Il se met donc en dessous. Pour que ça marche, il faut que titi + toto soit plus petit que le conteneur ou que la page

[veevee]

re,

le HTML complet

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
<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<!-- date de creation: 16/04/2008 -->
<head>
<title></title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta name="Author" content="non, je ne dirai pas mon nom">
<meta name="Generator" content="WebExpert 2000">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p style="float:left;">toto</p><p>titi</p>
</body>
</html>

sous FF et Opera, ça passe à la ligne
Sous IE, sur la même ligne


Je subodore (on dirait un gendarme) une vérole de doctype !!!

A+

[pop_up]

J'ai essayé avec ton code et ça marche chez moi.

Est tu sur que tu n'a pas une extension qui te desactive les styles ?

Sinon, pour le doctype, c'est mieux d'ecrire ce mot en majuscule.
<!DOCTYPE au lieu de <!doctype

ma version de firefox : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13

EDIT: en y repensant, essai de remplacer le
float:left;

par

float:left; background-color:red;

et regarde si ton paragraphe est rouge.

[Halleck]

re,

le HTML complet

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
<!doctype html public "-//w3c//dtd html 4.0//en">
<html>
<!-- date de creation: 16/04/2008 -->
<head>
<title></title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta name="Author" content="non, je ne dirai pas mon nom">
<meta name="Generator" content="WebExpert 2000">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p style="float:left;">toto</p><p>titi</p>
</body>
</html>

sous FF et Opera, ça passe à la ligne
Sous IE, sur la même ligne


Je subodore (on dirait un gendarme) une vérole de doctype !!!

A+

normal, le deuxième aussi interrompt le flux, il faut lui aussi le passer en virgule plutôt qu'en point

Ex:

Code :

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

<p style="float:left;">toto</p><p style="float:left">preuve que c'est à droite</p>

testé sur IE et sur FF, c'est ok alors ça marche FORCEMENT

Mais le p n'est pas à mon avis le plus adapté ici, une div serait mieux je pense

[veevee]

re,

Halleck écrit

normal, le deuxième aussi interrompt le flux,

là, j'ai compris qu'il était question du 2° <p>, chuis tellement sioux que j'en suis fier comme un p'tit banc

il faut lui aussi le passer en virgule plutôt qu'en point

alors là, c'est plus ésotérique, un point qu'on passe en virgule...nous voila bien
ça signifie sans doute qu'on retire (avec le float à tout faire, le couteau suisse de CSS) le passage à la ligne.

Mais chacun sait que l'informatique c'est limpide !

Maintenant "ça marche" sur les 3 navigateurs
Ce qui prouve au passage que IE est une bouse pire que ce qu'on pensait, parce que, sans le float il devait aller à la ligne et qu'il n'y allait pas

Merci

[Halleck]

re,
alors là, c'est plus ésotérique, un point qu'on passe en virgule...nous voila bien
ça signifie sans doute qu'on retire (avec le float à tout faire, le couteau suisse de CSS) le passage à la ligne.

Mais chacun sait que l'informatique c'est limpide !

Je faisais allusion à mon explication plus haut, où je faisais l'analogie écran / livre : flux continu (inline) = une virgule dans un texte, flux block = point à la ligne dans un texte

Au passage, n'oublie de mettre les sujets en résolu quand c'est le cas, ou en délestage

[veevee]

Au passage, n'oublie de mettre les sujets en résolu quand c'est le cas, ou en délestage

Hum...ces jeunes gens donneraient-ils des signes de fatigue ?

Le vieux cheval de retour continue... de bons progrès aujourd'hui.....
grace à vous

Grazie mille

[veevee]

Bonjour,
grâce à vous, depuis hier (Jeudi) matin, j'arrive à "évoluer" tout seul avec force hésitations, retour en arrière, remise en question... mais ça progresse

Cependant, bien que je marque Résolu, tout n'est pas résolu !!
Certes le but qui est le titre de cette discussion est atteint, j'ai réalisé ce que je voulais, mais comprendre est une autre chose
Aussi, si vous le voulez, la discussion remontera quand je n'aurais pas pu résoudre seul une question particulière

Merci à vous pour votre aide EFFICACE, mais, si je peux me permettre une requête : n'employez jamais avec un débutant, la notion de flux : elle met dans la tête de l'ignare une confusion terrible

Merci à vous

[veevee]

Bonjour,

ça n'a pas trainé, je suis bloqué !

Je "travaille" les blocs et je modifie les éléments suivants :

Code HTML :

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

1
2
<div class="boitenglobante"></div>
<div class="boitenglobante"></div>

avec un CSS :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
.boitenglobante{
background-color:#FFBBBB;//visu du bloc
color:#0000FF;
float;left;
display:inline;
height: 15px ; //c est ICI que ça pêche
width: 40px;//et ici aussi
border-style:solid;//visu du bloc
border-color:#FF0000;
border-width:1px;
margin-left:15px;
}

le bloc, vide NE FAIT PAS 40x40 (tiens tiens)
Si j'entre du texte dans le bloc le texte est bien en bleu (donc la class s'applique)
Mais le bloc s'étire autant que le texte entré s'allonge ??? donc la spec de dimension ne remplit pas son rôle... le bloc peut même prendre plusieurs lignes

Comprends pas


Pouvez-vous m'aider ?

[MasterOfChakhaL]

Salut,

...mais, si je peux me permettre une requête : n'employez jamais avec un débutant, la notion de flux : elle met dans la tête de l'ignare une confusion terrible

Pourtant, cette notion est fondamentale. Une fois maîtrisée, il ne reste plus grand chose à comprendre en CSS.

Pour tes blocs de 40x40, on est d'accord que ton code défini des boites de 40x15 non?

Ensuite, les dimensions, c'est une chose, mais si le contenu est trop grand, le navigateur doit bien faire un choix pour l'affichage.
C'est à ça que sert la propriété overflow

D'ailleurs pour IE, la propriété height est gérée comme un min-height. Cela a peut-être un rapport avec ton problème.

[Halleck]

Bien d'accord, les flux restent le plus important.

En plus de l'overflow, il faut penser à définir des max-width, max-height, et mettre au moins caractères vide (&nbsp quand il n'y a aucun texte dans un bloc vide.

Ca va venir, ça va venir