[W3C] Stratégie de construction

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 :
http://mistervideo.free.fr/TEST/but.jpg

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

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:

---

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:

---

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.

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

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

[QUOTE=Erwan31;3108630]

Code:

---

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:

---

1 2 3 4 5 6

#conteneur li { float:left; width:...px; height:...px; }

---

Citation:

---

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

---

Gros pb : je ne comprend pas pourquoi

Citation:

---

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

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+

re,

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

Code:

---

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+

Citation:

---

Envoyé par veevee

Code:

---

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.

Citation:

---

Envoyé par veevee

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.

Citation:

---

Envoyé par veevee

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:

---

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*/ }

---

Citation:

---

Envoyé par Erwan31

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.

---

Bonsoir,

question annexe
je pensais que, plus important que la taille de l'écran, c'était la résolution qui était importante, et ça, on peut l'oàbtenir par un script JS

Juste ou faux ?

Merci

Citation:

---

Envoyé par veevee

Bonsoir,
question annexe
je pensais que, plus important que la taille de l'écran, c'était la résolution qui était importante, et ça, on peut l'oàbtenir par un script JS
Juste ou faux ?
Merci

---

Vous pouvez l'obtenir par du JS mais pourquoi passer par du JS?
Oui en effet petite imprécision il est préférable de parler de pourcentage
de la résolution ou si vous préférez de % de la zone de visualisation.

Citation:

---

Envoyé par Erwan31

Vous pouvez l'obtenir par du JS mais pourquoi passer par du JS?

---

Bonsoir,

et pourquoi pas du JS ?
La vraie raison est que je comprend bien mieux le JS que le CSS.

Par exemple, je ne comprend toujours pas pourquoi, en indiquant une largeur pour le conteneur dans le script CSS, les li changent d'affichage

Code:

---

1 2 3 4 5 6 7 8

#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*/ }

---

Pour mon degré de compréhension c'est tout simplement incohérent (et répulsif)

Par ailleurs la ligne

Code:

---

#conteneur li {

---

signifie-t-elle :
ce script CSS concerne le conteneur de chaque li ?


Merci

Citation:

---

Envoyé par veevee

et pourquoi pas du JS ?
La vraie raison est que je comprend bien mieux le JS que le CSS.

---

Et bien alors vous ne devriez pas avoir trop de mal à assimiler CSS
en dépit de l'absence totale de similitude avec JS, c'est beaucoup plus simple dans
la théorie.
Pourquoi pas JS, parce que l'exécution des script JS ne doit pas être une condition nécessaire à l'affichage et donc à l'accessibilité d'un contenu.
Environ 5% des internautes le désactivent.

Citation:

---

Envoyé par veevee

Par exemple, je ne comprend toujours pas pourquoi, en indiquant une largeur pour le conteneur dans le script CSS, les li changent d'affichage

---

Les li ne s'affichent que sur la largeur disponible.
Si vos li font chacun 150px de large et que la largeur du conteneur ne fait que 500px, il n'y en aura que 3 sur la ligne, est ce que ça répond à votre problème?

Citation:

---

Envoyé par veevee

Pour mon degré de compréhension c'est tout simplement incohérent (et répulsif)

---

Difficile d'appréhender le niveau de connaissance de son interlocuteur...
Pour avoir une définition précise, mieux vaut que vous alliez jeter un coup d'oeil sur les specs CSS.

Citation:

---

Envoyé par veevee

Par ailleurs la ligne

Code:

---

#conteneur li {

---

signifie-t-elle :
ce script CSS concerne le conteneur de chaque li ?

---

Non cela concerne uniquement les li descendant de l'élément ayant pour ID conteneur.
Au passage, en language CSS, il vaut mieux parler de règle CSS (ou de règle de style) que de script ;)

Citation:

---

Envoyé par Erwan31

Les li ne s'affichent que sur la largeur disponible.
Si vos li font chacun 150px de large et que la largeur du conteneur ne fait que 500px, il n'y en aura que 3 sur la ligne, est ce que ça répond à votre problème?

---

NON
le conteneur fait 1000, donc une ligne devrait en affichercontenir 1000/165 =6 cote à cote dans un cas,
500/165=3 dans l'autre

dans tous les cas, les li s'affichent l'une au-dessous de l'autre

Et la proposition de lire les specs CSS "sort du cadre de l'épure"

Je considère la question comme résolue
Merci

Citation:

---

Envoyé par veevee

dans tous les cas, les li s'affichent l'une au-dessous de l'autre

---

Alors c'est que le float:left n'est propablement pas appliqué.