Discussion :

[veevee]

Bonsoir,

j'essaie de mettre au point la technique que je dois utiliser pour réaliser une page HTML qui afficherait quelque chose du genre :


actuellement cette page est réalisée en HTML pur, sous forme de tableau (1 tableau par ligne) 5 cellules par ligne.
Je dois périodiquement rajouter une ou deux cellules qui, généralement se trouvent en plein milieu du tableau, donc maintenabilité NULLE, je suis obligé de rajouter des cellules en vrac à la fin de la page, ce qui ne suit pas, bien sûr, l'ordre alphabétique souhaité.
Le site n'accepte pas le PHP

Je vois plusieurs solutions :
1° la page (tableaux) est stockée en vrac sur le site et comporte un script Javascipt qui remet les cellules dans l'ordre alphabétique (chez le client)
2° quand la nouvelle page (tableaux) est écrite (en vrac), un script Javascript (extérieur à la page HTML) remet les cellules dans l'ordre alphabétique
3° on utilise HTML + CSS en structure in-line ce qui permet de rajouter une "unité" au milieu des autres en respectant l'ordre alphabétique

1° solution : lourde, ne fonctionne pas si JS est inhibé
2° solution : pourquoi pas, mais le script JS va être "musclé"
3° il faut mélanger une structure bloc (unité = image et texte en dessous) avec une structure in-line qui aligne les unités 5 par ligne.

Est-ce que ma manière de voir cette ébauche de construction est correcte (pour un amateur absolu) ?

Merci

[Erwan31]

Dans ce cas là (ajout de nouveau profils n'importe ou), le tableau n'est en effet pas une bonne solution.
Il faut se tourner vers les flottant via un float:elft sur chaque unité
sachant que la propriété float génère une boîte de bloc qui permet de dimensionner l'élément.

Ce qui donne par exemple comme modèle:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="conteneur">
  <li>
    <img src="...jpg" width="165" height="110" alt="" />
    <h3>...</h3>
    <p class="annee">...</p>
  </li>
  <li>
    <img src="....jpg" width="165" height="110" alt="" />
    <h3>...</h3>
    <p class="annee">...</p>
  </li>
</ul>

CSS

Code :

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

1
2
3
4
5
6
 
#conteneur li {
float:left;
width:...px;
height:...px;
}

De cette façon si vous injecté un <li> tout le reste de décalera automatiquement.

[MasterOfChakhaL]

...
D'où l'intérêt de réfléchir d'abord sur le contenu et non la présentation.

Dans ton cas, tu as clairement besoin d'une liste (eventuellement une liste ordonnée balise ol au lieu de ul).

La présentation que tu souhaites peut être rendue par un tableau, mais au fond tu souhaites justes aligner des blocs.

La piste d'Erwan31 est selon moi celle à explorer. N'hésite pas à revenir vers nous si tu as des petits problèmes avec le rendu quand tu écriras ton css.

Pour continuer la propagande sur l'intérêt de la séparation contenu/présentation, je ferais simplement remarquer qu'il te suffira de définir la largeur de ton conteneur (1 ligne dans le css) pour modifier le nombre d'items par ligne. Alors que si tu devais manipuler un tableau html, et bien la modification ne serait vraiment pas aussi simple...

[veevee]

Bonjour,
merci de vos deux réponses, mais il faut que je les digère, c'est pas immédiat

Je reviendrai dès que ce sera fait

Merci

[veevee]

[QUOTE=Erwan31;3108630]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="conteneur">
  <li>
    <img src="...jpg" width="165" height="110" alt="" />
    <h3>...</h3>
    <p class="annee">...</p>
  </li>
  <li>
    <img src="....jpg" width="165" height="110" alt="" />
    <h3>...</h3>
    <p class="annee">...</p>
  </li>
</ul>

CSS

Code :

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

1
2
3
4
5
6
 
#conteneur li {
float:left;
width:...px;
height:...px;
}

De cette façon si vous injectez un <li> tout le reste de décalera automatiquement.

Gros pb : je ne comprend pas pourquoi

si vous injecté un <li> tout le reste de décalera automatiquement.

en effet, dans chaque ul, il y aura 5 li, et si j'en rajoute 1, le 6° li ne passera pas(je crois) dans le ul suivant

Je ne sollicite pas de réponse, je vais tester

a+ (minuscule, c'est du SHTML)

[veevee]

re,

Résultat des courses
Si, dans le CSS, je met une dimension QUELCONQUE à width (j'ai tenté 1000 qui est largement plus large que les 5 éléments dont chacun fait 165px de large) les 5 élements sont au-dessus les uns des autres.

Je suis perdu

Au sec... (zut, il vient de se noyer)

A+

[veevee]

re,

je progresse très vite.
Le script CSS est maintenant :

Code :

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

1
2
3
4
5
6
7
#conteneur li {
height:250px;
float:left;
border-style:solid;
border-color:#FF0000;
border-width:1px;
}

la bordure est là pour "voir" ce que je fais


les items sont rangés 5 par 5 sur une ligne, c'est ce que je veux, mais je ne comprend pas pourquoi ils sont 5x5 et pas 7x7 ???
Par contre, comme le disait erwan31, quand j'en rajoute 1, les suivants se décalent "tout seul"

J'ai encore des choses à comprendre...

A+

[Erwan31]

Code :

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

1
2
3
4
5
#conteneur li {
height:250px;
float:left;
border:1px solid #FF0000;
}

La largeur du flottant n'est en effet par forcément nécessaire puisque un élément flottant (doté d'un float)) s'adapte à son contenu contrairement au comportement par default des block (div, p...) qui eux prennent toute la largeur disponible (width:auto) par default.

Pour les propriétés relatives au border, vous pouvez les écrire dans une seule propriété raccourci border: (border: width style color) les deux premières valeur étant le minimum indispensable pour obtenir un border.

la bordure est là pour "voir" ce que je fais

Oui c'est une bonne technique pour voir ou s'arrêtent les blocs, mais penser quand même à tester le rendu sans leur présence.

les items sont rangés 5 par 5 sur une ligne, c'est ce que je veux, mais je ne comprend pas pourquoi ils sont 5x5 et pas 7x7 ???

Le nombre de profils par ligne dépendra de la largeur disponible pour les afficher, c-à-d la largeur du conteneur UL. Je vous conseil d'indiquer cette taille en % de la taille de de l'écran pour que le nombres de profils varie en fonction de la taille de l'écran et s'adaptent. D'autre part une largeur maximum
peut fixer le nombre maximum de profils par ligne.

Ce code commenté (vous pouvez le copier tel quel) puisqu'il vous manquent certaines déclarations:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#conteneur {
	padding-left: 0; /* supprime l'espacement par default de tous les navigateurs alternatif (tous sauf IE)*/
	margin-left:0; /* supprime la marge par default sur IE et les anciennes version d'Opera*/
}
#conteneur li {
	height:250px;
	float:left;
	border: 1px solid #FF0000;
	padding: 10px; /*permet d'ajouter des espacement entre chaque profil*/
	text-align:center; 
	list-style:none; /*supprime les puces par default*/
}