[nouveau tuto] Un bloc de largeur fixe avec coins/bordures graphiques

Suite à la discussion ayant eu lieu sur ce sujet : design fluide et 4 coins ou bordures graphiques ; je me propose donc de reprendre un petit tutoriel assez simple réalisé par votre serviteur, afin de l'adapter en tutoriel pour Alsacréations.

Le tutoriel d'origine :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html

Qu'y aurait-il à changer sur ce tutoriel ? En sachant qu'il ne s'agit pas de se lancer dans les considérations propres au design fluide (ce sera peut-être l'objet d'un deuxième tutoriel, plus complexe, comme discuté dans le sujet précité). Il s'agit ici de donner un exemple facile à comprendre et à reproduire pour un débutant.

Dans mon tutoriel d'origine, je présente un cas avec deux images de fond : une pour la bordure du haut, et une autre couvrant l'ensemble du bloc et la bordure du bas. Le problème, c'est que ce cas n'est pas forcément le plus fréquent. Non seulement l'image à utiliser pour le milieu de la boîte n'est pas forcément aussi géométrique régulière (et donc très légère en PNG), mais en plus on peut avoir des blocs sans titre, ou ne pas pouvoir prédire exactement quel type de titre (quel élément hN) sera utilisé, surtout dans le cas d'un CMS.

Bref, ne faudrait-il pas présenter ce premier cas assez simple, puis un deuxième cas avec trois éléments (le bloc principal accueillant, en plus de son contenu de base, deux éléments porteurs des bordures du haut et du bas. Éléments positionnés en absolu, pourquoi pas...

Quelque chose avec trois images différentes, donc, et un code du genre :

<div class="boite">
	<span class="boite-haut">&nbsp;</span>
	... ici le contenu de la boîte ...
	<span class="boite-bas">&nbsp;</span>
</div>

Moins propre, mais peut-être plus simple à adapter à des besoins réels...

De même, dans quel ordre présenter ces deux exemples ? D'abord le cas général avec éléments vides, et ensuite le cas particulier où l'on exploite des éléments du contenu du bloc (code du connu à l'avance), ou plutôt l'inverse ?
Je commencerais pour ma part plutôt par le cas particulier.

Hop, j'attends votre avis avant de me lancer là dessus.

Hello,

A noter que dans certains cas, il est bien possible de faire encore plus simple en terme de structure avec seulement une imbrication :
http://www.alsacreations.com/articles/cadre/ (première partie)
C'est un cas particulier car l'arrière-plan volontairement très allongé ne doit pas être trop lourd... mais c'est la solution que j'emploie presque tout le temps

Autre solution, à ne pas laisser de côté, la simplissime méthode d'employer :before et :after, ce qui ne rajoute aucune structure.

Et enfin, le border-radius et dérivés, pour les cadres simples.

Dans tous les cas de figures, je suis assez d'avis :
- de proposer une méthode très simple pour les débutants
- d'évoquer les autres méthodes simples existantes
Modifié par Raphael (30 Aug 2006 - 17:49)

Bonjour à tous et principalement à mpop puisque c'est à lui que s'adresse directement ce qui suit.

Dans ton exemple lié plus haut (simple bloc à bordures et coins graphiques - fixe en largeur et étirable en hauteur) tu préconises l'utilisation de deux images…
Grâce à une petite aberration d'affichage via Safari 1.2.4, ton exemple m'a fait penser qu'il était peut-être possible d'utiliser une seule image au lieu de deux. Les captures d'écran qui viennent te mettrons sur la piste.

En effet, l'image du haut (taille 50%) est telle qu'elle s'affiche d'entrée sur ta page web…

…quant à celle du bas c'est la même mais…

…après une visite en bas de page, la capture d'écran est réalisée après être remonté pour revoir vers le haut. Miracle, (ou déception) un gros décalage s'est produit. Ça me fait furieusement l'effet d'une image d'arrière plan mal placée qui justement me donne une idée intéressante: Une unique image BG pourrait être calée au "top" pour la tête et au "bottom" pour le contenu ?

Ce qui donnerait par exemple pour la position du décor de fond:

.bloc .titre {
	background: #fff url("fondbloc.jpg") 0 top no-repeat;
}
.bloc .contenu {
	background: #fff url("fondbloc.jpg") 0 bottom no-repeat;
}

Je n'ai pas fait d'essai pour ce post mais il me semble que ceci (ou cela) peut être intéressant en terme de mémoire cache et rapidité d'affichage même si l'on utilise une image de grande hauteur.

Jusqu'à présent je n'ai pas encore répondu à ta question qui était plus ou moins "quoi faire, quoi changer ou améliorer dans ce tuto ?"
Ben moi, je ne changerais rien car je le trouve bien, clair et concis. Sauf, peut-être, si ce n'est deux suggestions vaseuses:

1/ Au début de ton didacticiel* (et c'est une bonne chose de montrer comment faire ce qu'il ne faut plus faire quand le but est de présenter le palliatif adéquat), tu attaques par l'exemple la construction d'une boite conçue en tableaux en disant "Traditionnellement, on a souvent… etc.".

• J'aurais préféré un ton plus cruel: "au temps des dinosaures… (ou des mammouths)", "mon prof faisait comme ça quand j'avais 5 ans…", "avant le web, au temps des romains on faisait la comptabilité sur des tabulas** et les fresques bellement composées sur les murs des palais".

• Ou plus sadique: "Si vous n'avez jamais remis en question votre manière de construire une boite depuis l'avènement des CSS (y'a plus de 10 ans et ce serait bien de préciser la date) vous faites probablement comme ceci:" (ton exemple en deux images) "Mais il y a manière plus simple, plus élégante et plus accessible de représenter cela:"(la suite…).

• Ou bien plus "Humour Très Mauvaise Langue":
Vous êtes habitués à faire ceci (pof! un smiley qui signifie: "spèce de giga con Grrr je te merde, t'es qu'un gros nul qui pue du code") dorénavant faites comme ceci: (baboum! un autre smiley qui signifie cette fois: "Eh! c'est mon copain qu'assure! Il est fin cool ce mec, en plus il code super propre") Bon, tu as compris que je n'étais pas très bon en humour.

2/ Plus bas dans la page:
"Voici ces deux images (entourées d'une petite bordure pour en distinguer les limites)"
que je remplacerai par:
"Voici ces deux images (entourées d'une petite bordure rouge pour en distinguer les limites)", ou bien "finement bordées de rouge pour en distinguer les limites".
Je sais, c'est pas bien utile de préciser la couleur du contour entre personnes qui ont "tout compris" mais dans ce tuto qui parle beaucoup de cadres/blocs/bordures, ce serait juste pour éviter une éventuelle confusion entre la bordure représentée dans l'image et celle qui la borde, pour les novices… quitte à faire de la redondance.

Voilà, c'est tout, j'aimerai bien critiquer davantage car je me sens en verve mais, manque de bol… le reste me plaît comme il est.
Salut.

Notes:
* j'ai bien trouvé "didacticiel" dans le dictionnaire mais pas "tutoriel", est-ce normal docteur ? Alors, à quand ces didactos et autres tutos chez nos académiciens embaumeurs de la langue française ?
** (tabula: latin = table - tableau, d'où l'adjectif "tabulaire": qui a rapport aux tableaux [encyclopédie Quillet 6 volumes / 1958]) donc une "donnée tabulaire" est une notion aussi simple à comprendre au point de vue de la langue française qu'un "vélo rouge", une "idée folle" ou une "escarmouche fallacieuse".

PS: C'est quand même pratique les académiciens; je crois que j'ai gagné une bière sur ce coup là !

Au fait 1968 ça ne te dis rien ?
Modifié par Aureance (31 Aug 2006 - 12:14)

Hello les gens,

Je vois que ce sujet a stagné pendant mes congés (mérités, si si).
Qu'en-est-il ?