avoir en CSS le même affichage qu'un tableau HTML

Version imprimable

Voir 40 message(s) de cette discussion en une page

08/04/2008, 18h02
veevee

Bonsoir,

les choses s'améliorent nettement avec la proposition de darkstar

Je la met en action et j'obtiens l'affichage :

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

L'ennui, toutes les dt et dd sont à la queue leu leu

Pour essayer quelque chose (n'importe quoi) j'écrit mon HTML :

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

ça ne change rien à l'affichage.... dans IE.
Par contre l'affichage dans FF est OK dans les deux cas :

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

Vous avez beaucoup progressé les gars, le grand brûlé est content:lol:

Merci

Bonjour,

je finis de mettre en test la page construite selon vos prescriptions
Elle est à l'adresse
adresse

Elle me satisfait, mais elle est sans doute améliorable

1° point (les autres points seront abordés plus tard)

Il n'y a pas assez d'espace entre les lignes.

Code HTML

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
25
26
27
<ul id="conteneur">
  <li class=esp>
    <IMG SRC="IMG/A_E/abbass.jpg" BORDER=0 WIDTH=165 HEIGHT=110>
    <h3>Hiam ABBASS</h3>
    <p class="annee">Née en 1950<BR>Dialogue avec mon jardinier</p>
  </li >
  <li class=esp>
    <IMG SRC="IMG/A_E/abeille.jpg" BORDER=0 WIDTH=165 HEIGHT=110>
    <h3>Jean ABEILLE</h3>
    <p class="annee">Né en 1932<BR>Mocky's gang</p>
.........................
  <li class=esp>
 
    <h3></h3>
    <p class="annee"></p>
  </li>
  <li class=esp>
 
    <h3></h3>
    <p class="annee"></p>
  </li>
  <li class=esp>
 
    <h3></h3>
    <p class="annee"></p>
  </li>
</ul>

Code CSS

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
25
26
27
28
29
30
31
32
33
34
35
#conteneur li {
float:left;
}
.esp{
padding-left:5px;
padding-right:5px
}
.annee{
text-align:center;
font-size:12px;
font-weight:600;
 
}
h4{
margin-top:4px;
font-size:10px;
text-align.center;
font-family:Garamond;
}
h3 {
margin-top:4px;
text-align:center;
font-size:13;
font-family:Garamond;
}
h5{
font-size:x-large;
text-align:center;
color:#0000FF;
}
h1{
text-align:center;
font-size:xx-large;
font-weight:700;
}

j'espère un conseil pour mettre de l'espace entre les lignes en CSS

Merci

11/04/2008, 09h13
Halleck
Par exemple :
Code:

1 2 3 4 5 .esp{ padding-left:5px; padding-right:5px margin-bottom:50px; }
pour rajouter un espace de 50px entre les lignes, vers le bas.

Sinon, pourquoi répéter à chaque fois

Code:

<IMG SRC="IMG/A_E/abbass.jpg" BORDER=0 WIDTH=165 HEIGHT=110>

?? L'intérêt du CSS c'est justement d'éviter ce genre de choses :
Code:

1 2 3 4 .esp img { width:165px; height:110px; }
Enfin une dernière chose :
Les balises du code HTML doivent être mises en minuscule. Ca marchera en majuscules, mais ça ne passera jamais le test du W3C, donc autant prendre tout de suite l'habitude de mettre en minuscules + fermer les balises "<img src ... />"

;)
11/04/2008, 11h47
veevee
Citation:
Envoyé par Halleck

Par exemple :

Code:

1 2 3 4 5 .esp{ padding-left:5px; padding-right:5px margin-bottom:50px; }

pour rajouter un espace de 50px entre les lignes, vers le bas.
ça, ça "marche" pas (Et je ne comprend pas pourquoi), je l'avais déja remarqué il y a 2 ou 3 jours.
Citation:
Sinon, pourquoi répéter à chaque fois

Code:

<IMG SRC="IMG/A_E/abbass.jpg" BORDER=0 WIDTH=165 HEIGHT=110>

?? L'intérêt du CSS c'est justement d'éviter ce genre de choses :

Code:

1 2 3 4 .esp img { width:165px; height:110px; }
parce que je suis très mal à l'aise avec ces "balises double" .esp ET img

Citation:

Enfin une dernière chose :
Les balises du code HTML doivent être mises en minuscule. Ca marchera en majuscules, mais ça ne passera jamais le test du W3C, donc autant prendre tout de suite l'habitude de mettre en minuscules + fermer les balises "<img src ... />"
;)

parce que mon editeur met tout en majuscules et j'oublie (ou j'ai la flemme) de passer en minuscules
@+
11/04/2008, 12h00
MasterOfChakhaL
Si si,

Le coup du margin-bottom pour faire de l'espace, ça marche.
En tout cas avec Firefox...

Le problème vient peut-être du fait que tu as des <br/> qui trainent entre tes <li>.
Tu peux mettre ce que tu veux dans tes <li> mais le <ul> ne doit contenir que des <li>; peut-être que c'est cela qui gène l'affichage.

De plus, je te suggère d'ajouter cette règle sur ton conteneur:
Code:

1 2 3 4 #conteneur { list-style-type: none; }
Ca enlevera les petites puces qu'il y a à côté de chaque case, car je suppose que ca ne fait pas partie du résultat voulu.

Pour info, ".esp img" n'est pas une balise double mais un sélecteur CSS qu'il faut lire de droite à gauche.
Pour cet exemple, le sélecteur sélectionne "tous les éléments img contenues dans un élément qui possède la classe esp".
11/04/2008, 12h20
veevee
Citation:

Envoyé par MasterOfChakhaL

Si si,

Le coup du margin-bottom pour faire de l'espace, ça marche.
En tout cas avec Firefox...

Le problème vient peut-être du fait que tu as des <br/> qui trainent entre tes <li>.
Tu peux mettre ce que tu veux dans tes <li> mais le <ul> ne doit contenir que des <li>; peut-être que c'est cela qui gène l'affichage.

Il n'y en a pas entre les li, mais il y en a DANS les li; ça gêne ?
et "ça ne marche pas", ni avec IE, ni avec FF
Code:

1 2 3 4 5 <li class=esp> <IMG SRC="IMG/A_E/abeille.jpg" BORDER=0 WIDTH=165 HEIGHT=110> <h3>Jean ABEILLE</h3> <p class="annee">Né en 1932<BR>Mocky's gang</p> </li>
Citation:
De plus, je te suggère d'ajouter cette règle sur ton conteneur:

Code:

1 2 3 4 #conteneur { list-style-type: none; }

Ca enlevera les petites puces qu'il y a à côté de chaque case, car je suppose que ca ne fait pas partie du résultat voulu.
je le rajoute
Cependant, sans cette règle, il n'y avait pas de puce sur les li ,'"pleines" mais il y en avait sur les li vides ?

Citation:

Pour info, ".esp img" n'est pas une balise double mais un sélecteur CSS qu'il faut lire de droite à gauche.
Pour cet exemple, le sélecteur sélectionne "tous les éléments img contenues dans un élément qui possède la classe esp".

Je crois que, cette fois, j'ai compris

Merci et @+

Citation:

Envoyé par veevee

Il n'y en a pas entre les li, mais il y en a DANS les li; ça gêne ?

Voilà ce que j'observe à la ligne 47 dans le lien que tu as fourni quelques messages plus haut:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <li class=esp> <IMG SRC="IMG/A_E/abraham.jpg" BORDER=0 WIDTH=172 HEIGHT=110> <h3>Bruno ABRAHAM</h3> <p class="annee">Né en<BR>La vouivre</p> </li> <BR><BR> <li class=esp> <IMG SRC="IMG/A_E/adam.jpg" BORDER=0 WIDTH=165 HEIGHT=110> <h3>Alfred ADAM</h3> <p class="annee">1908-1982<BR>Que la fête commence</p> </li>
Citation:

Envoyé par veevee

Cependant, sans cette règle, il n'y avait pas de puce sur les li ,'"pleines" mais il y en avait sur les li vides ?

Ben en fait, à ce niveau là, il n'y a pas de raison qu'il y ait de différence entre un li "plein" et un li "vide".
Par contre, je t'accorde que cela ne saute pas aux yeux. Tes images ont pour la plupart un cadre noir, et la puce (noire elle aussi) tombe souvent en plein dedans.

Pour t'en convaincre, il te suffit de tester cela:

Code:

#conteneur li { color: yellow; }

Là, il n'y aura plus de doute possible ;)

Citation:
Envoyé par MasterOfChakhaL
Voilà ce que j'observe à la ligne 47 dans le lien que tu as fourni quelques messages plus haut:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <li class=esp> <IMG SRC="IMG/A_E/abraham.jpg" BORDER=0 WIDTH=172 HEIGHT=110> <h3>Bruno ABRAHAM</h3> <p class="annee">Né en<BR>La vouivre</p> </li> <BR><BR> <li class=esp> <IMG SRC="IMG/A_E/adam.jpg" BORDER=0 WIDTH=165 HEIGHT=110> <h3>Alfred ADAM</h3> <p class="annee">1908-1982<BR>Que la fête commence</p> </li>
Exact, mais mes essais sont fait en local
Maintenant sur l'adresse il y a la page et le script CSS que tu as prescrit,
"ça ne donne pas, patron"

Citation:

Ben en fait, à ce niveau là, il n'y a pas de raison qu'il y ait de différence entre un li "plein" et un li "vide".
Par contre, je t'accorde que cela ne saute pas aux yeux. Tes images ont pour la plupart un cadre noir, et la puce (noire elle aussi) tombe souvent en plein dedans.

Hum, je me tapote le menton

Citation:

Pour t'en convaincre, il te suffit de tester cela:

Code:

#conteneur li { color: yellow; }

Là, il n'y aura plus de doute possible ;)

C'est ce qui est sur l'adresse de test

le vieux schnock attire la poisse, semble-t-il ??

@+

12/04/2008, 11h09
Candygirl

Citation:

Envoyé par Halleck

Les balises du code HTML doivent être mises en minuscule. Ca marchera en majuscules, mais ça ne passera jamais le test du W3C, donc autant prendre tout de suite l'habitude de mettre en minuscules + fermer les balises "<img src ... />"

Attention à ne pas confondre html et xhtml. En html on peut très bien mettre le nom des balises en majuscules, c'était d'ailleurs l'usage à l'époque. De plus on devrait, au contraire, éviter la fermeture de la balise img.
12/04/2008, 12h19
veevee

Bonjour,

eh oui, je sais cela, hélas
Mais pour les grands vieillards comme moi :D,il est très difficile de changer ses mauvaises habitudes:cry:

Merci
12/04/2008, 13h11
Halleck

Citation:

Envoyé par Candygirl

Attention à ne pas confondre html et xhtml. En html on peut très bien mettre le nom des balises en majuscules, c'était d'ailleurs l'usage à l'époque. De plus on devrait, au contraire, éviter la fermeture de la balise img.

En fait j'essaie toujours de rendre mon code compatible w3c... et je prend toujours le XHTML transitionnel comme doctype.

Pourquoi vaut-il mieux ne pas fermer les balises images ?
12/04/2008, 15h03
Candygirl

Si toi, tu travailles avec du xhtml, il est clair que tu dois fermer tes balises img et avoir tes balises en minuscules.

Par contre, veevee travaille, lui, en html; tes recommandations raport aux majuscules et à la fermture de la balise img dans son code n'étaient donc pas pertinentes. Un code html est tout à fait valide avec les noms de balise en majuscule ainsi que les balises img non fermées (le contraire entraîne un avertissement)
12/04/2008, 19h16
Halleck

Citation:

Envoyé par Candygirl

Si toi, tu travailles avec du xhtml, il est clair que tu dois fermer tes balises img et avoir tes balises en minuscules.

Par contre, veevee travaille, lui, en html; tes recommandations raport aux majuscules et à la fermture de la balise img dans son code n'étaient donc pas pertinentes. Un code html est tout à fait valide avec les noms de balise en majuscule ainsi que les balises img non fermées (le contraire entraîne un avertissement)

Oui mais dans le cas de veevee, si on suit ce raisonnement, passer par du CSS plutôt que d'utiliser des tableaux n'est pas plus approprié, non ?
12/04/2008, 19h38
FremyCompany

Un tableau de donnée, c'est idiot de vouloir le transformer en CSS, dans 99% des cas.

Par contre, un UI (interface graphique) c'est stupide d'utiliser un tableau alors qu'on peut utiliser le CSS.

XHTML ou HTML, ca ne change rien à cela.

Voir 40 message(s) de cette discussion en une page