Cadre extensible avec bordures : comment faire?

Bonjour,

tout d'abord je m'excuse pour la mauvaise qualité du titre, mais je ne savais pas du tout comment nommer mon problème .

Donc, voilà une explication de mon problème :
je suis en train (dans le cadre de mes études) de développer un nouveau système de forum (comme phpBB). J'ai créé un design (assez simpliste) pour celui-ci. Mais je sèche sur le codage d'une partie. Voici l'image de la partie de laquelle je sèche :

http://img245.imageshack.us/img245/9965/categoriemo3.jpg

La méthode la plus simple serait d'utiliser les tableaux, mais ça je m'y refuses . Pourriez vous m'indiquer des pistes pour le codage Xhtml/CSS de cette partie?

Ah oui j'allais oublié, voilà quelques infos :
* la hauteur de la catégorie n'est pas fixe : elle va varier en fonction du nombre de forums
* la bordure (gauche et droite) doit faire la même hauteur que la catégorie

Je vous remercie pour votre aide
WebFan

Salut,

Je pense que tu peu facilement trouver ta réponse ici : http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.htm

Salut Funk

je te remercie pour ton lien, mais celui-ci concerne des cadres avec des longueurs fixes , alors que moi je souhaiterais que l'ensemble de mon cadre fasse 90% de largeur (ta méthode n'est donc pas applicable ici)

Aurais-tu une autre idée,
Merci pour ton aide

Finality

Re,

Lit le tutoriel jusqu'au bout

Je suis sur que tu y trouvera ton bonheur :

a écrit :

Variantes

On peut imaginer plusieurs variantes à cette méthode. Par exemple, on pourrait utiliser pour le bloc conteneur une image de fond ne comprenant que les bordures latérales (cette image pourra même ne faire que quelques pixels de hauteur, et on la répétera en hauteur grâce à la propriété CSS background-repeat: repeat-y;). Les bordures du haut et du bas seront alors introduites soit directement par des images (balise HTML <img />, soit par un système de titre et de "pied-de-bloc".

Ceux qui correspond intégralement a ton cas.
Modifié par FunK (31 Mar 2008 - 08:54)

Bonjour

On a plusieurs solutions, dont la moins bonne est de partir d'un design et de chercher ensuite comment le traduire en pratique (c'est celle que tu as choisie). L'autre consiste à penser l'interface en terme de structure et à la "designer" après.
Donc dans ton cas tu as une solution en 5 blocs : 1 englobant le tout, un top-left et un top-right contenant pour l'un la déco-cadre (15-20px de large) et l'autre les textes avec déco en background - à toi de choisir lequel contiendra quoi - et idem en bas en 15-20px de haut pour fermer le design - inconvévient : l'image de background du bloc texte sera très lourde (1200 à 1500px de large). Tu as aussi une solution en 7 blocs : outre le contenant tu as 2 blocs top-left et top-right de 15-20px avec déco de bord de cadre et un top-centre avec un repeat-x d'image de fond, et idem pour le bas. Et enfin la solution en 10 blocs, 3 en haut, 3 au milieu, 3 en bas et un englobant le tout.
Tout ça est bien lourd...
Restent alors deux autres possibilités : le tout en tableaux, mais apparemment tu ne le souhaites pas, ou alors concevoir les interfaces web en cohérence avec la technologie qui les porte. Mais c'est déjà un autre travail.
Modifié par Arsene (31 Mar 2008 - 09:03)

WebFan a écrit :
mais celui-ci concerne des cadres avec des longueurs fixes , alors que moi je souhaiterais que l'ensemble de mon cadre fasse 90% de largeur (ta méthode n'est donc pas applicable ici)

Si tu cherches une largeur fluide (90%) et une hauteur en fonction du contenu, cette technique n'est effectivement pas applicable car elle nécessite au moins une dimension fixe (hauteur ou largeur).

Je pourrais te diriger vers ce tutoriel plus complet, mais ton design est assez simple donc tu devrais pouvoir simplifier à l'extrême. Par exemple, en bas tu as un dégradé sur toute la largeur et pas de coins arrondis... ça fait donc juste une image de fond. Au milieu, c'est un aplat de couleur, donc une couleur de fond en CSS (pour un bloc interne au cadre). En haut, tu as deux solutions:
- une image de fond pour le dégradé répété sur toute la largeur, et deux images à placer dans les coins avec le positionnement absolu;
- une seule image de 3000px de large contenant les coins arrondis et au centre le dégradé, et deux blocs imbriqués pour cette image.

Côté code HTML, tu devrais pouvoir partir de ceci:

<div class="cadre">
	<h2>
		<span>Mon titre</span>
	</h2>
	<div class="content">

	</div><!-- content -->
</div><!-- .cadre -->

(En se basant sur la deuxième solution pour le titre.)

Arsene a écrit :
Donc dans ton cas tu as une solution en 5 blocs

Moi j'en suis à 4 blocs dont deux de contenu (un hN et un div...). C'est pas la mer à boire, tout de même.

Non, mais multiplié par autant de posts sur la page ça en fait des div tout de même... alors qu'un h[n] suivi d'un <p> aurait été autrement plus économique et en terme de design y'a sûrement moyen d'approcher le résultat escompté :



avec un <p> doté d'un border 3px.

Désolé, j'ai cru qu'il y avait aussi des coins arrondis en bas, d'où l'inflation de div...

Arsene a écrit :
Non, mais multiplié par autant de posts sur la page ça en fait des div tout de même...

Je ne suis pas d'accord, je trouve que ça reste parfaitement raisonnable, même si on répète ce schéma N fois. Et le code que je propose rajoute seulement deux div qui correspondent toutes les deux à un rendu visuel, donc le code devrait être assez simple à relire et à maintenir.

J'ai droit à un gage si je dis «surqualité»?

PS: ceci dit, je préfère ton interprétation graphique à l'original.
Modifié par Florent V. (31 Mar 2008 - 17:19)

Bonsoir,

tout d'abord je tiens à vous remercier pour votre aide, et les nombreux liens que vous m'avez donné (très intéressants au passage ).

Sinon, pensez vous que l'interprétation graphique de Arsene est mieux? Je demande cela, car mon forum doit bien se mettre au service des utilisateurs .

Je vous remercie encore pour votre aide
Cordialement

WebFan

Toutes les solutions se valent et la limitation de l'usage des div ne correspond pas à une démarche de "surqualité" mais plutôt à une tendance à n'utiliser que ce qui est utile... Sur le fond ça ne change rien, on est d'accord, mais disons que dans ce cas précis il m'a semblé qu'un balisage h et p était très largement suffisant et pouvait se développer sans aucune difficulté particulière. Rajouter des div est utile si ça contourne une difficulté, si ça limite les risques d'erreur de placement ou si ça prépare à un besoin ultérieur (genre intervenir via JS sur l'ensemble), mais là c'était apparemment pas le cas. La démarche (pédagogique ?) était juste de montrer qu'en modifiant très légèrement l'aspect final on passait de plusieurs <div> à zéro.

Arsene a écrit :
La démarche (pédagogique ?) était juste de montrer qu'en modifiant très légèrement l'aspect final on passait de plusieurs <div> à zéro.

Je crois que tu peux confirmer l'adjectif «pédagogique».
Je dirais même que la recherche d'un code aussi simple que possible (ou anti-divite aigüe) est intéressante surtout dans un cadre pédagogique. En production, il faudra pouvoir trancher entre les cas où on peut utiliser un balisage très épuré, et ceux où il est nécessaire ou prudent de «charger» un peu le balisage pour, paradoxalement, faciliter la maintenance... et avoir un résultat qui s'adaptera plus facilement à un contenu variable.

Dans le cas qui nous occupe ici, et par rapport au code que je proposais, on peut à priori virer le div externe, mais mieux vaut garder le div interne car rien ne dit qu'on n'aura qu'un seul paragraphe dans cet espace bleu.

Bonsoir tout le monde!

tout d'abord merci de vos remarques très pédagogiques, qui me permettent de mieux appréhender le CSS.

Comme le fait remarquer Florent V., ce cadre va contenir un ensemble de lignes et de colonnes (le cadre correspond à une catégorie du forum, et à l'intérieur se trouveront les forums concernés). D'où cette question : pour les forums, je voudrais afficher leur nom, leur nombre de messages, leur dernier message. Pour cela dois-je utiliser les tableaux (données formulaires?) ou alors une grande quantité de paragraphes?

Une fois encore merci pour votre aide
Cordialement

WebFan

WebFan a écrit :
D'où cette question : pour les forums, je voudrais afficher leur nom, leur nombre de messages, leur dernier message. Pour cela dois-je utiliser les tableaux (données formulaires?)

Cela s'y prête plutôt bien, oui.

d'accord c'est bien ce que je pensais . Mais niveau accessibilité, cette solution est-elle correcte?

WebFan

À priori oui, mais je ne suis pas expert.