Pages à passer de tableaux en CSS

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

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

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

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


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:

---

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:

---

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:

---

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

Citation:

---

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:

---

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:

---

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

Citation:

---

Envoyé par pop_up

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

Citation:

---

Code:

---

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

+

Bon, alors pour t'aider :P :

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:

---

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

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

Code:

---

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:

---

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:

---

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 ?

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

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

Citation:

---

Envoyé par pop_up

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

Mais maintenant si on fait :

Code:

---

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:mouarf:
ça

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

Code:

---

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)

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

re,

le HTML complet

Code:

---

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+

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.

Citation:

---

Envoyé par veevee

re,

le HTML complet

Code:

---

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

Ex:

Code:

---

<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

re,

Halleck écrit

Citation:

---

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

Citation:

---

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:cry:
ç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

Citation:

---

Envoyé par veevee

re,
alors là, c'est plus ésotérique, un point qu'on passe en virgule...nous voila bien:cry:
ç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 ;)

Citation:

---

Envoyé par Halleck

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

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

Grazie mille

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

Bonjour,

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

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

Code:

---

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

---

avec un CSS :

Code:

---

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 ?

Salut,

Citation:

---

Envoyé par veevee

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

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