Problème pour une page à imprimer

[Nullette]

Bonjour à toutes et à tous,

Je n'arrive pas à bien réaliser une page à imprimer.

Je voudrais qu'il n'y ait qu'une seule page imprimée.

1)Les cases prénom, nom, etc ... ne s'alignent pas correctement. Si je mets des paragraphes après chaque label, cela rallonge la page.

2)Je voudrais que certains paragraphes ne s'impriment pas. Si j'utilise la classe "noprint" dans la feuille css générale, le paragraphe disparaît à l'écran et la classe "noprint" mise dans la feuille impression.css donne le même effet.

Si quelqu'un peut, veut bien m'aider

Voici la page :

La page à imprimer

Le code de la feuille pour impression :

* {
  font-family:"times new roman",times,serif;
 } 
#centre3 {
  margin :0;
}
h1 {
  font-size:16pt;
  }
h2 {
  font-size:14pt;
   }
p  {
  font-size:10pt;
  }
#haut, #headertop, #headerbottom, #menurapide, #position, #pied
  {
 display:none;
 }

.noprint {
	 display: none;
	 }

Bon week-end.

[baulet]

bonjour,

tu peux utiliser deux feuilles css :

<link rel="stylesheet" type="text/css" href="....main.css" media="screen" />

<link rel="stylesheet" type="text/css" href="....printer.css" media="print" />

une pour afficher, et une pour imprimer....

dans la feuille printer tu utilises :

{display: none;}

pour masquer ce dont tu ne veux pas par exemple...

bon courage

[Nullette]

Merci baulet.

Je me suis probablement mal exprimée ou tu n'as pas lu jusqu'au bout mon message.

Le code que j'ai affiché est celui de la feuille spéciale pour impression.

Dis-moi comment je dois faire pour qu'un certain paragraphe ne soit pas imprimé.

[Dudu]

Salut Nullette.

Par exemple, si tu ne veux pas faire imprimer le paragraphe "position", tu agis comme suit.

Soit tu rajoute la classe noprint à ton paragraphe. Donc tu changes ça:

<p id="position">Vous êtes ici : <a href="../index.html" title="Accueil" accesskey="1">page d'accueil</a> >Association Bulgaria France > Formulaire d'adhésion </p>

comme ça

<p id="position" class="noprint">Vous êtes ici : <a href="../index.html" title="Accueil" accesskey="1">page d'accueil</a> >Association Bulgaria France > Formulaire d'adhésion </p>

Soit la deuxième solution: tu ne touches rien au code HTML et tu ajoutes ceci dans la feuille impression.css (et surtout pas dans la feuille style.css

#position {display: none;}

[Nullette]

Merci Dudu. J'ai déjà fait ça et ça marche.

Mais je ne sais pas comment faire pour ne pas imprimer certains paragraphes. Je n'ai pas d'"ID" (pas d'idée non plus ) pour les paragraphes.

J'ai aussi un autre problème, qui est celui de la disposition des cases Peudo, nom, prénom, etc .... (là il s'agit d'un problème en html, je crois, car tout s'affiche bien, mais pas en affichage pour impression.)

PS Je viens de renommer la feuille impression.css en print.css car sur le site du zéro il est indiqué que s'il est est nommée autrement que print, les navigateurs ne la reconnaissent pas ! (Je doute de cette affirmation ou peut-être que cela se réfère-t-il aux anciens navigateurs).

[Nullette]

Me revoilà !

J'ai pu supprimé certains paragraphes qui ne doivent pas être imprimés en les mettant entre <div class="noprint><p> ... </div> dans la page html mais PAS de class .noprint dans la feuille de style.

Il me reste le problème d'afficher les cases les unes sous les autres, sans être obligée de mettre le formulaire dans un tableau.

Si une bonne âme passe par ici ...

[Monique]

Bonjour,

Une petite remarque hors sujet... si tu veux que ton formulaire soit totalement accessible, il faut utiliser des labels explicites

<label for="pseudo">Pseudo :</label><input id="pseudo" size="35" name="pseudo" />

... pas vraiment regardé pour l'impression

[Nullette]

Oui Monique, c'est bien ça que j'ai mis :

<label for="pseudo">Pseudo :</label><input size="35" name="pseudo" />

Ce n'est pas bon ?

Au passage, Monique, tu m'as beaucoup aidée pour mes tableaux.

[Monique]

Il manque le id="pseudo"

Essaie de cliquer sur une étiquette de ton formulaire, tu verras que le curseur ne se positionne pas automatiquement.

Pour ton problème d'alignement des cases, essaie de définir une largeur pour l'élèment fieldset

fieldset {
padding:100px;
}

(unité et valeur à essayer selon celles établies pour tes autres éléments)

[Dudu]

en les mettant entre <div class="noprint><p> ... </div> dans la page html

Oh ben non, pourquoi faire des divs supplémentaires ?

Rajoute juste la class="noprint" à la balise <p> de ton paragraphe et c'est tout bon ! Sauf si tu tiens à te balader avec 25 divs par ligne...

mais PAS de class .noprint dans la feuille de style.

je n'ai pas compris cette partie-là

En fait, c'est très simple.

* Pour les paragraphes qui ont des ids, il faut écrire ceci dans la feuille impression.css

#machin, #truc, #bidule

... en admettant que les paragraphes que tu ne veux pas imprimer ont les ids "machin, "truc, et "bidule", bien sûr ! Tu peux rajouter tous les ids que tu veux dans la CSS, il suffit de les séparer par une virgule pour pouvoir les regrouper sous le même "display: none"

* Pour les paragraphes qui n'ont pas d'id, tu leur rajoutes juste class="noprint" dans le code HTML. Et dans la CSS impression, tu définis bien la classe noprint en display:none (normalement, c'est déjà fait).

Ou alors, tu peux aussi jouer sur les sélecteurs CSS, mais on verra ça plus tard

Quant à cette histoire du site du zéro, je n'y crois pas une seule seconde. Tu peux appeller ton fichier comme ça te chante du moment qu'il est appelé ainsi dans l'HTML:

<link rel="stylesheet" type="text/css" href="croquignol-filochard-et-ribouldingue.css" media="print" />

[Dadou]

Quand à présenter correctement le formulaire, ben tout simplement ajouter à print.css les styles qui lui sont associés, ceux de style.css ne sont pas appliqués puisque le media défini pour cette derniere est screen

#form_asso {
  padding: 10px;
  font-family: arial,"trebuchet ms",sans-serif;
}
#form_asso fieldset {
  padding: 10px;
  margin-bottom: 10px;
}
#form_asso legend {
  font-weight:bold
}
#form_asso label {
  margin-top:20px;
  display:block;

}
#form_asso label.inline {
  display: inline;
}
#form_asso input {
  border: 1px solid black;
  background-color: #eeeeee;
}
#form_asso input[type=radio] {
  margin-right: 50px;
  background-color: transparent;
  border: none;
}

#form_asso textarea {
border:1px solid black;
background-color: #eeeeee;
}

[Nullette]

Merci Monique, merci Dudu, merci Dadou.

Je crois que la page fonctionne maintenant (du moins, il y a une grande amélioration ) :

Le formulaire (accessible) à imprimer

Rajoute juste la class="noprint" à la balise <p> de ton paragraphe et c'est tout bon ! Sauf si tu tiens à te balader avec 25 divs par ligne...

je n'ai pas compris cette partie-là

Je ne comprenais pas ce qui se passait car dans Dreamweaver les "class" de la feuille de style pour impression ne s'affiche pas.

Bonne fin de week end