28173 sujets

CSS et mise en forme, CSS3

Bonjour.

Après une recherche sur ce forum et sur google, je n'arrive pas à résoudre mon problème. Je précise ça tout de suite.

Je suis donc en train de rédiger mon CV en xhtml et css dans le but de l'imprimer (traitement de textes assez nuls - pas assez de contrôle, et LaTeX est un peu trop lourd pour moi). Jusque là, rien de bien méchant. Le problème, c'est que j'utilise une balise hr pour séparer mes titres de catégories (formation, expériences, etc...) de leur contenu. Ca apparait bien dans ma page à l'écran, mais pas dans mon impression.

Pourtant, j'utilise la même feuille de style pour le media "screen" et le media "print". Et les propriétés du hr appelé sont les suivantes.

hr.separation {
	border: none;
	width: 80%;
	height: 2px;
	color: black;
	background-color: black;
	margin-bottom: 30px;
	}


J'utilise firefox au passage. Et je ne comprends pas pourquoi ça n'apparait pas dans l'impression, surtout que je n'ai pas mis de "display: none;". Et un "display: block;" ne change rien du tout (normal me direz-vous). J'ai cherché sur le web mais je n'ai rien trouvé qui puisse m'éclairer.

J'éspère que vous pourrez m'aider. Smiley confused
Modifié par Juste (30 Aug 2006 - 20:42)
Bonjour Juste et bienvenue sur ce forum.

Aurais-tu un exemple en ligne, ou à défaut le code HTML et CSS de la page concernée ? Cela permettrait de tester directement le comportement des navigateurs, voire de tester des solutions en direct, etc.
Je viens de mettre ça en ligne...

La page est largement incomplète, mais ça n'est pas l'essentiel...
La balise <hr /> sépare le titre "formation" du texte... Lorsque l'on fait "aperçu avant impression", le trait n'apparait pas, mais les marges sont bien respectées.
Bonsoir,

L'impression des <hr /> dépend fréquemment de l'option "imprimer les arrière-plans" du navigateur. Il n'est pas possible de forcer cette option à la place de l'utilisateur.
Juste a écrit :
La balise <hr /> sépare le titre "formation" du texte... Lorsque l'on fait "aperçu avant impression", le trait n'apparait pas, mais les marges sont bien respectées.

Pourquoi ne pas tout simplement utiliser une bordure de quelques pixels d'épaisseurs (deux pixels ?) sur le titre h1 ? Ça serait d'ailleurs plus logique du point de vue de la structure du document (à voir...), et ça permettrait peut-être d'obtenir une impression avec l'effet voulu.

Utiliser un border-bottom, ainsi que les marges et padding pour placer la boîte et le texte à l'intérieur de celui-ci comme désiré.
En effet, ça marche (presque) pareil. Presque parce qu'il faut revoir un autre truc, mais peu importe.

Et donc, ça marche aussi pour l'impression. Merci. Smiley cligne
Par contre, par curiosité, est-ce que quelqu'un sait pourquoi le hr n'est pas imprimé ?
Juste a écrit :
Par contre, par curiosité, est-ce que quelqu'un sait pourquoi le hr n'est pas imprimé ?

Il me semble que Laurent Denis à répondu à cette question, non ?
À moins que ta question ne signifie « est-ce quelqu'un sait pourquoi certains navigateurs considèrent les HR comme des arrière-plans ? »
mpop a écrit :

À moins que ta question ne signifie « est-ce quelqu'un sait pourquoi certains navigateurs considèrent les HR comme des arrière-plans ? »


Auquel cas la réponse serait: "Parce qu'ils ne peuvent guère en faire autre-chose" Smiley ravi

HR est un de ces éléments un peu "étranger" au HTML, ne relevant pas vraiment de la logique SGML et du balisage structurel (SGML aime les choses qui délimitent de part et d'autre d'un contenu, beaucoup moins celles qui tracent des coupures). Et puis, il y a un lourd héritage du HTML héroïque des débuts ...
Modifié par Laurent Denis (30 Aug 2006 - 21:51)
clb56 a écrit :


Les débuts sont toujours héroïques...


Pas toujours. Il y en a des piteux aussi.

Tiens, par exemple, dans le tout premier draft HTML, au hasard...The empty P element indicates a paragraph break Smiley ravi

clb56 a écrit :

... suis plus là [] Smiley lol


Je suis encore plus loin [] Smiley lol
Modifié par Laurent Denis (30 Aug 2006 - 22:05)
Laurent Denis a écrit :

Pas toujours. Il y en a des piteux aussi.
Tiens, par exemple, dans le tout premier draft HTML, au hasard...The empty P element indicates a paragraph break Smiley ravi


C'est vrai que de définir p comme paragraphe il fallait le faire. surtout pour nous pauvres français avec notre phrase ben on a du mal. Si au moins la spécification avait indiqué :

"p mean the poorest block element"

Alors là on comprendrait bien je pense.

Celà dit le <l> pour line du XHTML™ 2.0 - W3C Working Draft 26 July 2006 qui se retrouve de type inline c'est pas mal non plus.
Par contre c'est bien le concept de break que je trouve intéressant par rapport au type block.

D'où mon désarroi par rapport au <l> du xhtml2 (pour l'instant je comprend "le changement de ligne n'est pas break")
clb56 a écrit :
Par contre c'est bien le concept de break que je trouve intéressant par rapport au type block.

D'où mon désarroi par rapport au <l> du xhtml2 (pour l'instant je comprend "le changement de ligne n'est pas break")

Le W3C voudrait remplacer
<p>A<br />B</p>
par
<p><l>A</l><l>B</l></p>
?

Ça ne me semble pas illogique.

br est un élément un peu singulier en HTML, je trouve. Ce n'est ni un contenu « ponctuel » (comme on pourrait le dire des éléments img ou hr), ni un élément englobant un contenu.

Que signifie <br />, d'ailleurs ? Qu'elle est l'information apportée ? Dans le cadre d'un paragraphe, est-ce qu'il ne signifie pas que A et B sont deux sous-ensembles de ce paragraphe ? Dans ce cas, l'utilisation d'un élément l délimitant précisément ces sous-ensembles me semble logique et même utile.

Bien sûr, c'est généraliser un peu vite un emploi particulier -- littéraire -- du retour à la ligne : on reste dans la même idée (et donc le même paragraphe), mais on marque une légère séparation entre des « sous-idées ».

Dans la pratique, je me demande si un tel élément l ne serait pas trop lourd à gérer. À voir.
mpop a écrit :

Il me semble que Laurent Denis à répondu à cette question, non ?


En effet, oui. Smiley confused J'avais oublié son message après avoir testé votre solution. Smiley langue
Toutes mes excuses, et encore merci. Smiley biggrin