IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

CSS print et le responsive


Sujet :

Responsive design en CSS

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2013
    Messages
    42
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Août 2013
    Messages : 42
    Points : 15
    Points
    15
    Par défaut CSS print et le responsive
    Bonjour,

    Alors j'ai un petit problème pour l'impression de ma page web.
    J'ai une page CSS en link media="print" sur ma page php.

    J'utilise également bootstrap car ma page doit être responsive.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">

    Cela permet donc que ma page s'adapte aux différents supports (ordi, smartphones, tablettes).

    Quand je lance une impression (via un ordinateur) j'ai le même resultat qu'à l'écran sur google chrome.

    Par contre (là est mon problème), sous IE et Firefox, l'impression ce fait comme si j'avais un rendu visuel sur smartphone (sa m'imprime sur 3 pages alors qu'il suffit d'une demi page pour google chrome)

    Google chrome = impression du rendu ordinateur.
    IE et Firefox = impression du rendu Smartphone.

    J'aimerais que mon impression soit comme sur mon écran d'ordinateur pour IE et Firefox.

    Est-il possible de faire disparaître l'effet de la balise ci-dessous via ma page CSS pour print, pour que le css responsive de bootstrap disparaisse pour l'impression ?

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">

    Avez vous une autre solution? Je ne vois pas quoi faire

    Cordialement.

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    En utilisant l'attribut media à bon escient.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2013
    Messages
    42
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Août 2013
    Messages : 42
    Points : 15
    Points
    15
    Par défaut
    Salut,

    Merci pour l'indication.
    Je suis en train de faire différents tests.

    J'ai testé d'imprimer avec un media comme ça :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    media="print and (min-width: 770px)"

    Pour obliger l'impression à une taille minimum mais c'est pas trop ça

    Je continu différents test sur l'attribut media.

    Ah oui et c'est ce bout de code, ci-dessous, en css qui me permet de bien mettre en page l'impression sur google chrome (mais ne marche pas sur IE et FF et je n'ai pas trouvé un équivalent qui fonctionne sur ses 3 navigateurs)

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    @page {
    size: 1620px 1920px;
    }

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    media="print and (min-width: 770px)"
    Je crois que tu n'as pas très bien saisi le concept... ou alors, tu as des feuilles de papier de moins de 770 pixels !

    Le responsive design (et les feuilles de styles le gérant) concernent l'affichage sur écran (media="screen"). Pour l'impression, il te faut une feuille de style spécifique aux particularités d'une mise en page sur papier, avec par exemple des unités en cm ou mm plutôt qu'en pixels...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2013
    Messages
    42
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Août 2013
    Messages : 42
    Points : 15
    Points
    15
    Par défaut
    oui, j'ai fait ma feuille de style spécifique

    Dans ma page index.php:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <link href="css/cutters_rules_print.css" media="print" rel="stylesheet" type="text/css">

    Ma page cutters_rules_print.css:

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    /* Mise en forme CSS - Impression */
     
    @media print {
     
    @page {
    size: 40cm 46cm;
    }
     
    #tool_result {
    border-top: 1px solid black;
    }
     
    #gravo_logo {
    display: inline;
    margin-left: 50px;
    } 
     
    .recap_print {
    font-size: 12px;	
    }
     
    #header {
    display: none;
    }
     
    #check {
    display: none;
    }
     
    .check {
    display: none;
    }
     
    #new_selection  {
    display: none;
    }
     
    .display_print {
    display: none;
    }
     
    .image_result {
    display: none;	
    }
     
    footer {
    display: none;
    }
     
    #printer {
    display: none;
    }
     
    }

    Je fais des display: none; pour tous les bloc que je ne veux pas voir à l'impression.

    la ligne :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    @page {
    size: 40cm 46cm;
    }

    Me met bien en page comme je veux mon impression mais que sur Chrome (cela m'imprime comme je le vois à l'écran)
    Mais ça ne fonctionne pas sur IE et FF (cela m'imprime comme je le verrais sur mon smartphone) du coup ce n'est pas bon, c'est moche et prend plusieurs feuilles.

    Je comprends pas pourquoi

Discussions similaires

  1. CSS print - impression texte blanc
    Par clem037 dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 08/09/2009, 12h34
  2. css print popup
    Par zekabyle dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 03/07/2009, 12h25
  3. css print sur même page
    Par zekabyle dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 02/07/2009, 11h10
  4. problème avec css print
    Par flambyture dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 02/05/2008, 13h52
  5. Problème de CSS print
    Par kenny.kev dans le forum Mise en page CSS
    Réponses: 14
    Dernier message: 14/02/2008, 17h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo