28172 sujets

CSS et mise en forme, CSS3

Faire un style comme <fieldset>

Un <fieldset> est un bloc, de présetnation un peu particulière, mais pour strucurer une page je recommande

<section>
  <header>
    <h2>Titre</h2>
    autres éléments de l'en-tête
  <header>
   <div> (ou autre balise de bloc)
      ....
   </div>
   éventuellement
    <footer>.....</footer>
</section>

Les <fieldset> sont à un seul niveau.
Les <section> peuvent inclure d'autres <section> si on le désire, ce qui permet de hiérarchiser la présentation d'un document.
Modifié par PapyJP (17 Aug 2020 - 13:31)
merci pour votre réponse, mais je me suis mal exprimé

ce que je veux faire, ce n'est pas tant structurer ma page que de mettre en valeur des prestations au sein même d'une page structurée.

Parce qu'un exemple vaut mieux qu'un long discours, voici ce que je veux faire :
http://jeancode.chez.com/test.html

sauf que pour le faire j'ai utilisé des balises <fieldset>, ce qui est incorrect puisque <fieldset> c'est uniquement pour des formulaires. Du coup j'aimerais savoir comment avoir exactement le MEME résultat mais en utilisant des balises correctes <div>.

Dans mon exemple, on notera d'ailleurs que la légende de la prestation 2 s'adapte parfaitement lorsqu'elle tient sur 2 lignes (c'est équilibré par rapport au trait)

Merci d'avance.
Merci pour ton retour, par contre malheureusement il y a un soucis : si on met 2 lignes (et encore plus avec 3 ou 4) ça ne "s'adapte" pas.

Je ne sais pas comment expliquer... Essaie de mettre 3, 4 ou 5 lignes dans le H2 du milieu par exemple, et tu verras ce que je veux dire.

Je ne sais pas s'il est réellement possible d'"imiter" un fieldset Smiley bawling
Modérateur
bonsoir,

si tu as un fond uni, voici une autre option possible : https://codepen.io/gc-nomade/pen/oNxLedV

code de la démo:
HTML:
<h1>Mes prestations</h1>
	<p>Voici ce que je vous propose :</p>
	<div class="prestation">
		<h2><span>Titre de la prestation 1</span></h2>
		<p>descriptif de la prestation 1<br><a href="acheter.html">commander</a></p>
	</div>
	<div class="prestation">
    <h2><span>Titre de la prestation 2<br>sur deux lignes</span></h2>
		<p>descriptif de la prestation 2<br><a href="acheter.html">commander</a></p>
	</div>
	<div class="prestation">
		<h2><span>Titre <br>de <br> la <br> prestation 3</span></h2>
		<p>descriptif de la prestation 3<br><a href="acheter.html">commander</a></p>
	</div>

CSS

html {
  --bg-color: #bee;
  --epaisseur: 1px;
  --borderStyle: var(--epaisseur) solid gray ;
  background:var(--bg-color)
  
}
.prestation {
  border:var(--borderStyle);
  margin:1em;
}

h2 {
  margin: calc(var(--epaisseur) * -1);
  background:var(--bg-color);
  display:flex;
}
h2:before,h2:after {
  content:'';
  border-top: var(--borderStyle);
  transform:translateY(50%)
}
h2:before {
  width:0.75em;  
  border-left: var(--borderStyle);
}
h2:after {
  flex:1;  
  border-right: var(--borderStyle);
}
h2 span {background:#111;color:#fff;font-weight:400;padding:0 0.25em}
p {padding:0 1.5em;}


une marge négative égale a la largeur des bordures pour h2 avec une couleur de fond identique.
Un formatage en flex (grid aussi possible) pour injecter 2 pseudo et recréer les bordures cachées , avec un décalage vers le bas pour s'aligner au centre.

Dans la demo les variables CSS ne sont utilisées que pour réduire les redondances CSS.
Meilleure solution
Administrateur
PapyJP a écrit :
Sur le fond, si &lt;fieldset&gt; te convient, pourquoi ne pas le garder tel quel?

Parce que ce n'est pas sa fonction Smiley cligne
PapyJP a écrit :
Sur le fond, si &lt;fieldset&gt; te convient, pourquoi ne pas le garder tel quel?

Parce que, comme le dit Raphael ce n'est pas prévu pour à la base. L'utiliser comme je le fais c'est du bricolage non conforme aux standard W3C. Même si j'avoue que c'était TELLEMENT plus simple de procéder de la sorte !

Je me suis basé sur ce sujet après recherche Google pour me faire un avis : https://forum.alsacreations.com/topic-2-17811-1-UtiliserlabaliseFieldsetpourstructurerunepageweb.html

Et puis aussi il faut penser au SEO. Pour Google, un fieldset c'est pour un formulaire, donc je pense que Google ne s'intéresse pas vraiment au contenu d'un formulaire pour le référencement. Or placer comme je voulais le faire des liens stratégiques (donc importants) dedans, c'était littéralement foirer mon coup point de vue SEO.

Sinon merci gcyrillus pour ta contribution ! Aujourd'hui je n'ai malheureusement pas le temps de tester mais dès que je trouve du temps je vous tiens au courant Smiley cligne

Merci.
Notez que le rendu d'un fieldset par défaut n'est pas le même pour tous les navigateurs donc je vous suggère de vous attacher à un modèle qui fera de vos div-fieldset des modèles identiques sur tous les navigateurs.
Le rendu est excellent gcyrillus :

http://jeancode.chez.com/test2.html

par rapport à
http://jeancode.chez.com/test.html

c'est génial lorsque l'on débute le développement d'une page web (en gros qu'on part d'un site à coder totalement à partir de 0), le seul soucis c'est que ça risque d'être mission impossible pour intégrer ce code dans un template Wordpress déjà créé par exemple.

@Greg_Lumiere
oui effectivement c'est à prendre en compte. Maintenant je remarque que les résultats donnés par les contributeurs est identique au rendu d'un fieldset à la fois sur mon ordinateur (Firefox) et sur mon smartphone (Edge nouvelle version donc avec le moteur de Chrome), donc il semblerait qu'il n'y ait plus de grandes différences de rendu entre les navigateurs désormais. Smiley cligne Smiley cligne
Modérateur
Sinon, pour compléter la solution de gcyrillus , on peut aussi le faire sans fond uni:

https://codepen.io/kustol/pen/YzqGbxz

a écrit :
le seul soucis c'est que ça risque d'être mission impossible pour intégrer ce code dans un template Wordpress déjà créé par exemple.


Pourquoi?
parce que ça nécessite de l'adapter au thème pré-existant, et que lorsque l'on est débutant dans ce domaine cela semble être mission impossible

je vais tester en local pour voir si je suis capable d'intégrer le code sur un thème pré-existant
Sujet clos
Aller à