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

**veevee** · 08/04/2008, 18h02

Bonsoir,

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

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

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

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

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

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

Merci

**veevee** · 11/04/2008, 07h21

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 :

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

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

**Halleck** · 11/04/2008, 09h13

Par exemple :

Code css :

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

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

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

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

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

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

**veevee** · 11/04/2008, 11h47

Envoyé par Halleck

Par exemple :

Code css :

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

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.

Sinon, pourquoi répéter à chaque fois

Code html :

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

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

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

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

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
@+

**MasterOfChakhaL** · 11/04/2008, 12h00

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 :

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

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

**veevee** · 11/04/2008, 12h20

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

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

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>

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

Code :

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

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 ?

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 @+

**MasterOfChakhaL** · 11/04/2008, 12h35

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

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

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>

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 :

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

#conteneur li { color: yellow; }

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

**veevee** · 11/04/2008, 13h22

Envoyé par MasterOfChakhaL

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

Code html :

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

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"

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

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

Code :

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

#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 ??

@+

**Candygirl** · 12/04/2008, 11h09

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.

**veevee** · 12/04/2008, 12h19

Bonjour,

eh oui, je sais cela, hélas
Mais pour les grands vieillards comme moi

,il est très difficile de changer ses mauvaises habitudes

Merci

**Halleck** · 12/04/2008, 13h11

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 ?

**Candygirl** · 12/04/2008, 15h03

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)

**Halleck** · 12/04/2008, 19h16

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 ?

**FremyCompany** · 12/04/2008, 19h38

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.

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

Tableau en CSS

Discussions similaires

Partager

Partager