> Tous les forums > Forum des Webmasters
 recherche script impressionSujet résolu
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
Nadège@64
  Posté le 29/03/2011 @ 18:00 
Aller en bas de la page 
Petite astucienne

Bonjour,

Tout récemment, je me suis enfin décidée à taper et à mettre en ligne 2 recettes basques, seulement j'aimerais ajouter ceci dans la source, un script " impression ".

Exemple : http://img4.hostingpics.net/pics/293135iconeimpression.jpg

En cliquant sur ICI ou sur le logo, le visiteur pourrait ainsi imprimer la recette.

Seulement j'ignore comment procéder

A +



Modifié par Nadège@64 le 29/03/2011 18:03
Publicité
Dreamer
 Posté le 29/03/2011 à 18:17 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Salut

Tu vas devoir créer un print.css pour afficher ta recette avant impression .

En général on utilise des display:none; pour cacher certaines parties de la page ......

Peux-tu nous montrer cette page ??

Nadège@64
 Posté le 29/03/2011 à 18:25 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Créer un print.css, je ne sais pas du tout le faire

ensuite voilà une recette à titre d'exemple :

http://www.luniversdenadege.net/Recettes/piperade.htm

Je précise que j'ai téléchargé un petit logo.ico que j'aimerais mettre dans la source.

y.bli
 Posté le 29/03/2011 à 18:31 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien
Nadège@64 a écrit :

Créer un print.css, je ne sais pas du tout le faire

ensuite voilà une recette à titre d'exemple :

http://www.luniversdenadege.net/Recettes/piperade.htm

Je précise que j'ai téléchargé un petit logo.ico que j'aimerais mettre dans la source.

Bonjour,

Avant de faire plus compliqué, fais déjà l'essai d'inclure le code :

<INPUT TYPE="button" VALUE="Imprimer cette page" onClick="javascript:window.print()">

Tu verras après pour améliorer la fonction.

@+

Dreamer
 Posté le 29/03/2011 à 19:59 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Je pense surtout que notre amie Nadège devrait modifier son script et mettre le css en fichier externe ce qui simplifierait l'ensemble .

Je m'explique en mettant l'image dans son <body> de la page, il se retrouvera imprimé , ce qui n'est pas nécessaire ainsi que toutes les images, donc il faut modifier le script de la page comme ceci :

Le fichier html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" type="image/x-icon" href="http://www.luniversdenadege.net/croix.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Recette typiquement basque</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
<br />
<table style="width: 95%; height: 10%" cellpadding="5" class="style1" align="center" cellspacing="10">
<tr>
<td>

<table style="width: 100%; height: 10%" class="style2" align="center" cellspacing="1">
<tr>
<td class="style3"><span class="style4"><br />
<br />
<br />
<span class="style10"><strong><span class="style11">PIPERADE au jambon de Bayonne</span><br class="style10" />
<br />
Préparation : 25 min - Cuisson :&nbsp; 45 min<br />

</strong></span>
<br />
<br />
<img alt="" src="http://www.luniversdenadege.net/Photos/piperade.jpg" /><br />
<br />
<br /></span>
<table style="width: 80%" align="center" cellspacing="1">
<tr>
<td class="style6" style="width: 782px">
<p class="style4"><span class="style8">Ingrédients</span>
pour 4 personnes
:</p>

<p>10 piments verts doux&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Huile d'olive</p>
<p>6 &#339;ufs&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
2 gousses d'ail</p>
<p>6 tomates&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
1 oignon</p>
<p>4 tranches de jambon de Bayonne</p>

<p class="style3">&nbsp;</p>
<p class="style3">
<!--<img alt="" src="http://www.luniversdenadege.net/Photos/livre_de_cuisine.gif" />-->
</p>
<p class="style3">&nbsp;</p>
<p><span class="style8">Préparation</span> :</p>
<p class="style4">- Epépinez et coupez les piments</p>
<p><em>-</em><span class="style4"> Faites-les dorer à
feu doux dans l'huile tiède (pour leur éviter de
noircir) avec l'ail et l'oignon.</span></p>

<p>- Ajouter les tomates après les avoir ébouillantées
pour les peler plus facilement, et laissez réduire le
tout environ 1/2 heure.</p>
<p>- Battez les &#339;ufs en omelette avec une pincée de sel,
ajoutez-les à la préparation précédente. Laissez cuire à
feu doux en remuant pour bien faire brouiller les &#339;ufs.</p>
<p>- Faites poêler séparément les tranches de jambon.<span class="style4"><br />
<br />
- Servir la piperade dans un plat chaud, garnir avec le
jambon et, si vous le désirez, d'un petit peu de persil.</span><em><span class="style6"><br />
</span></em>&nbsp;</p>

</td>
</tr>
</table>
<span class="style5">
<span class="style4">
<br />
<br />
</span>
</span>
<span class="style4">
<INPUT TYPE="button" VALUE="Imprimer cette page" onClick="javascript:window.print()" />
<br />
<a target="_blank" href="http://www.luniversdenadege.net/">
<img alt="" src="http://www.luniversdenadege.net/Photos/maison_basque.gif" class="style9" /></a><br />
<br />
</span>
</td>
</tr>
</table>
</td>

</tr>
</table>

<p class="style7">©Nadège@64</p>

</body>

</html>

On a vidé le <body> et sorti le css . Puis mis deux liens css dans le <head> pour les feuilles externes affichage ( screen) et impression (print), appelées style.css et print.css

style.css

body{
background-image: url('http://www.luniversdenadege.net/Photos/fond_exterieur.gif')
}
a {
color: #bdc6d6;
}
a:visited {
color: #bdc6d6;
}
a:active {
color: #bdc6d6;
}
.style1 {
border: 1px solid #bdc6d6;
background-image: url('http://www.luniversdenadege.net/Photos/fond_exterieur.gif');
}
.style2 {
border: 1px solid #bdc6d6;
background-color: #bdc6d6;
}
.style3 {
text-align: center;
}
.style4 {
color: #000000;
}
.style5 {
font-size: large;
text-decoration: underline;
}
.style6 {
font-size: large;
text-align: justify;
}
.style7 {
font-family: "Palatino Linotype";
font-size: medium;
text-align: center;
color:#bdc6d6;
}

.style8 {
text-decoration: underline;
}
.style9 {
border-width: 0px;
}
.style10 {
font-family: "Palatino Linotype";
}
.style11 {
border: 1px solid #990033;
padding: 5px;
}

Et le fichier print.css

body{
color:black;
font-family: "Palatino Linotype";
font-size: 14px;
}

.style3,.style7 {
text-align: center;
}

.style6 {
text-align: justify;
}

img, input, button{
display:none;
}

On ne met que le nécessaire .....

Ca marche, j'ai testé !!

Nadège@64
 Posté le 30/03/2011 à 17:18 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

C'est pratiquement résolu :

- il y a 4 erreurs à la ligne 79 {#}

Dreamer
 Posté le 30/03/2011 à 17:35 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Nadège@64 a écrit :

C'est pratiquement résolu :

- il y a 4 erreurs à la ligne 79 {#}

Normal, c'est du JS , remplaces la ligne de Y.bli

<INPUT TYPE="button" VALUE="Imprimer cette page" onClick="javascript:window.print()" />

par

<a href="#" onclick="javascript:window.print()">Imprimer cette page</a>

C'est valable W3C !!

Nadège@64
 Posté le 30/03/2011 à 20:39 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Merci Dreamer {#}

Dreamer
 Posté le 30/03/2011 à 20:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Nadège@64 a écrit :

Merci Dreamer {#}

N'oubliespas de mettre un style à ton texte sinon, on ne verra rien !!

Exemple


<a href="#" onclick="javascript:window.print()">><span style="color:black;">Imprimer cette page</span></a>

A+

Publicité
Nadège@64
 Posté le 30/03/2011 à 21:15 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Un autre détail : suite à une mise en place de la dernière version de Mozilla Firefox, le petit icône vert en bas de l'écran (il me faisait ainsi savoir que la source était propre) a disparu.

Avant tout je vais suivre ton conseil concernant le style du texte



Modifié par Nadège@64 le 30/03/2011 21:15
Dreamer
 Posté le 30/03/2011 à 21:26 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Nadège@64 a écrit :

Un autre détail : suite à une mise en place de la dernière version de Mozilla Firefox, le petit icône vert en bas de l'écran (il me faisait ainsi savoir que la source était propre) a disparu.

Avant tout je vais suivre ton conseil concernant le style du texte

Il faut parfois vider le cache, afin que l'icone ( croix rouge ou coche verte réapparaisse !!)

Nadège@64
 Posté le 30/03/2011 à 22:14 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Problème avec mon ordinateur, suite à une restauration système (ne peux plus me servir de Mozilla Firefox), donc je mets ce fil en attente.

Dreamer
 Posté le 30/03/2011 à 22:32 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Alors, j'attendrais ..♫♪

Nadège@64
 Posté le 30/03/2011 à 22:39 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Merci Dreamer !

Nadège@64
 Posté le 31/03/2011 à 10:35 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

En faisant des recherches, voici le dernier script imrpession :

<p><span class="style4"><input type="button" onclick="window.print()" value="Imprimer la page" /></span></p>

Nadège@64
 Posté le 31/03/2011 à 12:02 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Ce que je regrette, c'est que lors de l'impression, la photo n'apparait pas.

Nadège@64
 Posté le 31/03/2011 à 12:06 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

y.bli a écrit :
Nadège@64 a écrit :

Créer un print.css, je ne sais pas du tout le faire

ensuite voilà une recette à titre d'exemple :

http://www.luniversdenadege.net/Recettes/piperade.htm

Je précise que j'ai téléchargé un petit logo.ico que j'aimerais mettre dans la source.

Bonjour,

Avant de faire plus compliqué, fais déjà l'essai d'inclure le code :

Tu verras après pour améliorer la fonction.

@+

Désolée, étourdie que je suis, je viens de voir ton script

Publicité
y.bli
 Posté le 31/03/2011 à 16:50 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien
Nadège@64 a écrit :

Désolée, étourdie que je suis, je viens de voir ton script

pas grave

@+

Dreamer
 Posté le 31/03/2011 à 17:41 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Nadège@64 a écrit :

Ce que je regrette, c'est que lors de l'impression, la photo n'apparait pas.

Il suffit dans le print.css de supprimer img{display:none;}

Nadège@64
 Posté le 31/03/2011 à 21:47 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petite astucienne

Merci beaucoup Dreamer et y.bli

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
56,95 €Alimentation Seasonic B12 BC 750W Plus Bronze à 56,95 €
Valable jusqu'au 30 Juillet

RueDuCommerce propose actuellement l'alimentation Seasonic B12 BC-750 750W Plus Bronze à 56,95 €. On la trouve habituellement autour de 70 €. L'alimentation est garantie 5 ans. En plus d’être très efficaces, les unités B12 BC utilisent la conception à résonance LLC et le contrôle des ventilateurs intelligent et silencieux (S2FC).


> Voir l'offre
999,99 €Portable 15,6' Lenovo Legion 5 (Ryzen 5, 8Go, SSD 512Go, RTX3060) à 999,99 €
Valable jusqu'au 30 Juillet

Cdiscount fait une promotion sur le PC portable Lenovo Legion 5 (15ACH6H) dédié aux joueurs qui passe à 999,99 € au lieu de 1300 €. Ce PC portable très bien équipé possède un écran 15,6 pouces LED Full HD, un processeur AMD Ryzen 5 5600H, 8 Go de RAM, un SSD de 512 Go et une carte graphique GeForce RTX 3060 6 Go dédiée qui avalera tous vos jeux sans broncher. Il est fourni sans OS, mais vous pouvez facilement installer Windows 10.


> Voir l'offre
34,99 €Casque-micro filaire Corsair HS35 à 34,99 €
Valable jusqu'au 30 Juillet

Cdiscount fait une promotion sur le casque-micro filaire Corsair HS35 qui passe à 34,99 € au lieu de 48 €. Le fil mesure 1,80 m et le casque dispose d'un bouton pour couper / activer le micro. Utilisable sur PC, Xbox One, PS4, Nintendo Switch et appareils mobiles.


> Voir l'offre

Sujets relatifs
Recherche script/logiciel affichage diaporama
Recherche script sondage
Script recherche : citer un bout de variable
Recherche script php surf manuel
Recherche script faq complet ou cours ou aide :)
recherche d'un script de "votre avis m'interesse"
recherche script ou logiciel
Recherche script galerie qui fasse ca...RESOLU
Recherche script Gestion contenu !!
Recherche script pour échange de fichiers privé
Plus de sujets relatifs à recherche script impression
 > Tous les forums > Forum Forum des Webmasters