Est-ce si dur de faire un beau cadre arrondi??

(reprise du message précédent)

Et vaut-il mieux utiliser un <span> vide, ou un <p> vide?

En fait, avec ce que tu m'as dit, je verrais bien un truc de ce genre :

<div class="cadre"> /*affiche la partie gauche du cadre*/
    <h1 class="titre">titre</h1> /*affiche la partie haute+le titre*/
    <p class="contenu">contenu</p> /*affiche la partie droite, + le contenu*/
    <je-sais-pas-quoi class="fin"></je-sais-pas-quoi> /*affiche le bas */
</div>

Donc la dernière balise serait vide...
Ce principe tient-il plus la route que mon code plus haut dans les posts? Et que mettre, dans ce cas, comme dernière balise?

Helldream a écrit :

<div class="cadre"> /*affiche la partie gauche du cadre*/
    <h1 class="titre">titre</h1> /*affiche la partie haute+le titre*/
    <p class="contenu">contenu</p> /*affiche la partie droite, + le contenu*/
    <je-sais-pas-quoi class="fin"></je-sais-pas-quoi> /*affiche le bas */
</div>

La question qui me viens directement à l'esprit en lisant ton code c'est pourquoi le contenu ne comprend il qu'un élément p ?
En situation réelle il y en aura souvent plus et donc autant de conteneurs css.

C'est cela qui me semble avoir du mal à passer. Un document réel offre souvent autant voire plus de potentiel de support des css que les petite constructions de div ex nihilo.

Pour ton cas, pense plutôt :

<div>
<h1>titre</h1>
<p>début contenu</p>
...
<p>fin contenu</p>
</div>

A partir de celà je verrais quatre possiblités

1. en css pure, c'est l'exemple que je teste ici :
http://clb56.freezee.org/test_roundcorner/test2.php
Acrobatique et risqué, mais une fois de plus à tout le moins cela prouve que c'est possible. au passage c'est la technique que j'avais utilisé pour le design de la patie contenu (#page) du site http://www.ecoledemusique.concarneau.fr/



2. En intervenant dans le document html
2.1 création d'un élément vide (div ou span c'est pareil, c'est neutre donc c'est neutre)
2.2 doublure du conteneur : <div class="conteneur"><div class="sub_conteneur"> ... </div></div>
2.3 création d'un conteneur pour le contenu hors titre

<div class="conteneur">
<h1>titre</h1>
<div class="contenu">
<p>début contenu</p>
...
<p>fin contenu</p>
</div>
</div>

Quelle la meilleure solution ?

En situation de production efficace c'est à voir. Personnellement je privilégierai 2.2 ou 2.3 car les doubles conteneurs donnent plus d'opportunités en css que de simples div vides (exemple type : donner une marge interne en pixels à un élément dimensionné en pourcentage).

Mais en situation d'apprentissage (ou recherche et développement) je dis que la solution 1 doit être essayée, testée et approfondie. une fois qu'elle est maitrisée il est alors bien temps de revenir à des solutions de rationalité plus stricte (mais au moins avec un background de connaissance plus riche).

L'erreur à ne pas commettre serait à mon avis de mimer une situation de production alors qu'il ne s'agit que d'apprentissage.
Modifié par clb56 (30 May 2006 - 11:14)

Helldream a écrit :
Et vaut-il mieux utiliser un <span> vide, ou un <p> vide?

Je pense que j'y avais répondu dans le post juste avant :

mpop a écrit :
Si vraiment j'ai besoin de faire un bloc vide pour une mise en page, j'utiliserais plutôt un élément de plus "faible" importance, par exemple un span en affichage de type bloc (display: block) si nécessaire.

Mais je suis plutôt d'accord avec clb56 pour dire que plus on peut éviter des éléments vides, mieux c'est.

Petit bémol : dans certains cas, la gestion que l'on peut avoir du contenu n'est pas assez poussée pour, par exemple, attribuer un identifiant au dernier paragraphe d'un bloc. Surtout avec un contenu généré par un CMS.
Mais bon, la plupart du temps on trouve quelque chose déjà là à portée de main dans l'interface. Et même avec quelque chose de minimal, on s'en sort.

Par exemple :

<h3>Mon menu</h3>
<ul>
	<li>Premier lien</li>
	<li>Deuxième lien</li>
</ul>

Et avec ça, je donne l'illusion d'un bloc à bords arrondis (mais en largeur fixe), grâce à deux images de fond, sur mon site (voir le menu à droite).

Donc bon, c'est tout de même souvent faisable !

Salut,

Je relance un peu ce sujet pour une question qui y fait suite.

Helldream disait :

a écrit :
Par contre, j'utilise les <div> pour placer les éléments de "décoration" (comme les cadres). Ainsi, si quelqu'un a envie de faire un cadre, et de ne pas mettre de balise <p> ou <h1>, bah le cadre sera toujours là. Alors que si le cadre dépend des autres balises, et que la personne ne veux pas mettre de titre, ou ne met pas de <p class="last_element">, il est embêté.

Dans ton exemple à un seul div, Mpop, je me suis posé aussi la question. Comment fais-t-on quand on a pas de titres pour garder le cadre? Puis je me suis dit : "tout bêtement en ne mettant pas de contenu entre les balises du titre...
Est-ce finalement la solution ? Ou vaut-il mieux dupliquer le morceau de code attribuant le haut de cadre à <hx>, pour l'avoir aussi pour la balise <span> dans le cas ou on aurait pas de titre (ce qui impliquerait d'intervertir les balises dans le code html dans les cas ou le titre ne serait pas présent)
Modifié par Mikachu (16 Jun 2006 - 17:42)

Mikachu a écrit :
Dans ton exemple à un seul div, Mpop, je me suis posé aussi la question. Comment fais-t-on quand on a pas de titres pour garder le cadre? Puis je me suis dit : "tout bêtement en ne mettant pas de contenu entre les balises du titre...
Est-ce finalement la solution ? Ou vaut-il mieux dupliquer le morceau de code attribuant le haut de cadre à <hx>, pour l'avoir aussi pour la balise <span> dans le cas ou on aurait pas de titre (ce qui impliquerait d'intervertir les balises dans le code html dans les cas ou le titre ne serait pas présent)

Je ne me rappelle plus bien des détails de ce sujet, et là je suis en train d'écouter « Poor Edward » de Tom Waits, alors j'arrive pas à me concentrer tout à fait (sans oublier l'heure), mais je peux répondre sur les généralités :

– Si l'on est dans une configuration où l'on sait que l'on aura toujours un titre pour ouvrir un bloc du type en question, on met l'image de fond du haut sur le titre, comme dans mon tuto (je suppose que tu parlais de celui-là ?).

– Si le contenu qu'est censé accueillir ce type de bloc est non prévisible, on ne peut bien sûr pas se baser sur un titre. Plutôt que de mettre un titre vide, il me semble moins pénalisant de mettre une image (img) ou un span, peut-être même un span en positionnement absolu si l'image de fond à placer est un peu haute et doit pouvoir être recouverte en partie par du contenu.

– une troisième solution serait de donner un style particulier aux premiers et derniers éléments enfants du bloc, quelles que soient leur natures respectives. Mais ça risque d'être pas évident à gérer…

Merci de ta réponse,

a écrit :
comme dans mon tuto (je suppose que tu parlais de celui-là ?).

Oui je parlais bien de celui la.
tu réponds là à ma question sur la méthode utilisable.

Par contre je me posais une autre question :

a écrit :
Si vraiment j'ai besoin de faire un bloc vide pour une mise en page, j'utiliserais plutôt un élément de plus "faible" importance, par exemple un span en affichage de type bloc (display: block) si nécessaire.

Tu as dis ca aussi, ce qui m'a un peu intrigué. Qu'entends tu par des éléments de faibles ou forte importance... Pour moi il n'y a que des éléments de type bloc ou de type en ligne.
Comment classifie tu ces éléments selon cet autre critère, et que prends tu en référence pour faire ce classement ?

Salut,

La question n'est pas du tout ce que l'on fait quand le code du document html n'y suffit pas. L'utilisation de div permet assez facilement de gérer beaucoup de problème.

La question est bien ce que viennent faire toutes ces div alors que le balisage déjà présent suffisait largement.

Le problème une fois de plus c'est une question de méthode. A vouloir à toute force régler la question du stylage à coup de div produites ex nihilo on s'accorde certes un certain confort et un sentiment d'efficacité. Mais on fait surtout l'économie d'un travail sur l'articulation entre la feuille de style et le document html. Le résultat de tout celà est je trouve une approche un peu bidouilleuse et opportuniste du document lui même soit donc exactement le contraire de la logique des standards :

. Le document html est le lieu de la structuration/organisation/hiérarchisation du document

. Les css permettent de s'appuyer de manière optimale sur le document ainsi constitué dans la perspective d'un rendu quelconque.

. Le balisage neutre permet en dernier recours de pallier aux insuffisances du système (le dernier recours arrive le plus souvent bien vite... Certes, certes... Mais il arrive après quoiqu'il en soit).

Sur la caractérisation des premiers et derniers éléments d'un conteneur. Il s'agit bien de caractérisation puisque ces éléments existent de toutes façons. Tout conteneur a bien un premier élément et un dernier et en général il ne se confondent pas.

Pour le premier élément c'est je pense assez peu problématique et effectuer une caractérisation via une class ou un id est le plus souvent possible. Ne pas utiliser cette possibilité simple et bien c'est plutôt dommage non ?

Concernant le dernier élément il y a effectivement le problème des contenus générés en php (pour parler de ce que je connais). Mais par rapport à celà je poserais deux questions.

1. La situation est elle réellement insoluble ou n'y aurait il pas un moyen de concevoir un script de récupération des données qui permette de générer cette caractérisation ? En fait s'est on réellement posé la question de cette possibilité ?

2. De manière très pragmatique (au cas par cas donc) le dernier élément du contenu généré est il bien le dernier élément du conteneur dans lequel ce contenu s'inclut ? Là aussi est ce que l'on prend réellement la peine de se poser la question ?

clb56 a écrit :
1. La situation est elle réellement insoluble ou n'y aurait il pas un moyen de concevoir un script de récupération des données qui permette de générer cette caractérisation ? En fait s'est on réellement posé la question de cette possibilité ?

Tu veux dire, pour un contenu généré dynamiquement, mettre une classe "first" pour le premier élément, et une classe "last" (par exemple) pour le dernier élément ?
C'est tout à fait jouable. Après tout dépend de la situation exacte, il peut y avoir des complications (contenu de la boîte très aléatoire et hétérogène…).

Mikachu a écrit :
Qu'entends tu par des éléments de faibles ou forte importance... Pour moi il n'y a que des éléments de type bloc ou de type en ligne.
Comment classifie tu ces éléments selon cet autre critère, et que prends tu en référence pour faire ce classement ?

Je faisais référence au moindre poids sémantique d'un span par rapport à un h2, par exemple. Si vraiment on doit/veut utiliser un élément vide pour la mise en forme, il faut se poser les questions suivantes :

1 – Comment sera rendu un h2 vide, un paragraphe vide, une div vide ou un span vide par un navigateur non graphique ? Et par un lecteur d'écran ? Et par un terminal mobile ? Dans chaque cas, quelle solution est la plus discrète ?

2 – Dans une optique web sémantique (documents organisés de telle sorte que les informations qu'ils contiennent seront exploitables directement par des systèmes automatisés), vaut-il mieux un h2 vide ou un span vide ? Un service web qui offrirait aux utilisateurs la possibilité d'afficher un plan de la page généré automatiquement (de manière intégrée à un moteur de recherche, en tant que preview…) par exemple, risque d'analyser le h2 comme un titre de section, et d'afficher un plan avec des titres vides… donc des plans peu lisibles. On peut bien sûr trouver un certain nombre d'autres exemples.

Merci de ces points de vue

OK, je vois bien le point de vue, en effet un <hx> vide doit certainement être plus perceptible. Seulement, il m'a semblé lire à plusieurs d'endroits que le <div> vide était un élément non lu par les navigateurs non graphiques et autres. En quoi le <span> serait-il plus discret que le <div>, est-ce pasque le premier est un élément de type en ligne à l'instar du dernier qui est de type bloc ?
Ou pour une autre raison ?
Je n'ai qu'une idée approximative de ce que peuvent lire ces navigateurs (d'ailleurs existe-il un moyen de tester cela simplement chez soi ?), ce qui provoque ces interrogations.

Pour l'utilisation du "premier élément", il semble bien sur évident que c'est une solution à privilégier, du moins dans un bloc arrondi de largeur fixe, je ne pense pas que l'on puisse s'épargner des balises vides pour un bloc arrondi étirable dans les deux sens.
Concernant le deuxième élément, je trouve que la méthode du fond masqué sous le haut du bloc qui contient le contenu de ce cadre, et qui descend ou monte en fonction de la quantité d'information n'est pas mal en réalité... Mais la encore, il ne sera pas utilisable pour le bloc arrondi doublement étirable.

Ce que j'aime pas avec le "dernier élément", c'est le fait de devoir se préoccuper (que ce soit manuellement ou non) d'attribuer une classe ou id à ce dernier élément, cela impose une certaine contrainte je trouve. Sachant qu'effectivement cet élément n'est pas toujours du même type et va nécessiter de multiples propriétés pour uniformiser le tout.

Mikachu a écrit :
En quoi le <span> serait-il plus discret que le <div>, est-ce pasque le premier est un élément de type en ligne à l'instar du dernier qui est de type bloc ?

C'est vrai que concrètement, entre un span vide et une div vide, il n'y a pas une grande différence. Avec Lynx par exemple, les balises div ne sont tout simplement pas sensibles, qu'elles aient un contenu ou pas (bien sûr ce contenu sera présent le cas échéant !). Cela m'étonnerait également que les lecteurs d'écrans disent « bloc » quand on arrive sur une div. Donc pourquoi pas une div. Après c'est toi qui choisis ce qui est le plus évident pour toi.

Mikachu a écrit :
je ne pense pas que l'on puisse s'épargner des balises vides pour un bloc arrondi étirable dans les deux sens.

Si si, on peut. Mais dans ce cas il faut avoir à l'avance une bonne maîtrise du code de la page. Donc ça s'appliquera plutôt à un gabarit général qu'à un petit bloc de contenu généré.
Cf :
http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html
http://clb56.freezee.org/test_roundcorner/ (avec tout plein de détails, plusieurs alternatives, tout ça)

a écrit :

C'est vrai que concrètement, entre un span vide et une div vide, il n'y a pas une grande différence.

Ah bon je me disais bien.

Si si, on peut. Mais dans ce cas il faut avoir à l'avance une bonne maîtrise du code de la page. Donc ça s'appliquera plutôt à un gabarit général qu'à un petit bloc de contenu généré.

Oui ca je pense bien. Ma maîtrise n'est pas encore assez avancée pour tout faire en CSS, et j'ai pas mal à apprendre (tant mieux d'ailleurs). Et il est vrai que je pense avoir moins besoin de cadres fluides dans les deux sens, dans la mesure ou je suis graphiste et que je privilégie forcément un graphisme fidèle et si possible complexe (à la mesure de ma maîtrise des CSS)

Merci encore de tes réponses.