28111 sujets

CSS et mise en forme, CSS3

Css Feuille d impression.

Bonjour,
nouveau sur le forum, je suis en fin d études.
J ai un probleme avec ma feuille d'impression css.
Quand j'utilise :
[code]<link rel="stylesheet" type="text/css" href="feuille_impression_print.css" media="print"> <link rel="stylesheet" href="feuille_impression_screen.css" type="text/css" media="screen">[code]
Ma flexbox et ma table n apparraissent pas.
L'organisme formateur veux que j'utilise une feuille screen.
Y a t il un moyen de faire apparaitre table et flexbox en gardant screen ?
Administrateur
Salut ChrisFrance et bienvenue Smiley smile

J'avoue que je n'ai pas bien compris ton problème.

"Ma flexbox et ma table n apparraissent pas." : ça veut dire
- que tes éléments disparaissent de la page ?
- uniquement lorsque tu vois ta page à l'impression ?
- à quels styles CSS cette flexbox et table correspondent-ils ?
- dans quelle feuille de styles sont-ils placés ?

"L'organisme formateur veux que j'utilise une feuille screen." : pour tes styles d'impression ?

Je crois que des exemples de codes seraient les bienvenus.

Bonne journée.
Merci de m'aider a resoudre le probleme Smiley biggrin
Voici le html quand je fais l'impression, je n obtiens pas la table et la flexbox.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-Type">
<title>Feuille Impression</title>
<link rel="stylesheet" href="enrichir_une_page_web.css" type="text/css">
<link rel="stylesheet" type="text/css" href="feuille_impression_print.css" media="print">
<link rel="stylesheet" href="feuille_impression_screen.css" type="text/css" media="screen">
</head>


<body>

<div id="wrapper">

<div class="logo">
<img class="logo" img src="logo.jpg" alt="skills and you">
</div>




<div id="header">
<h1>Ceci est une pub importante en h1</h1>
</div>


<div id="nav">
<ul id="menu_horizontal">
<li>
<a href="#">Menu 1</a>
<ul class="sous_menu">
<li> <a href="#">Sous Menu 1.1</a></li>
<li> <a href="#">Sous Menu 1.2</a></li>
<li><a href="#">Sous Menu 1.3</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul class="sous_menu">
<li><a href="#">Sous Menu 2.1</a></li>
<li><a href="#">Sous Menu 2.2</a></li>
<li><a href="#">Sous Menu 2.3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>

</div>

<div id="clear"></div>




<div id="contenu">
<div class="logo2">
<img class="logo2" img src="logo.jpg" alt="skills and you">
</div>

<p id="lorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.
Fusce est. Vivamus a tellus. Pellentesque<br>habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede.<br><br>Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut<br> nonummy. Fusce aliquet pede non pede.</p>

<div id="flex">
<div id="flex-box">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>

<div id="clear"></div>



<div class="colonne droite">


<div id="aside">
<div class="textelorem"><h4>Conste muntur scandere valido dumos aut qua potest liberis</h4><p><span class="color">17/02/2013</span> - nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut<hr><h4>Conste muntur scandere valido dumos aut qua potest liberis</h4><span class="color">17/02/2013</span> - nec vox accusatoris ulla licet subditicii in his malorum quaerebatur acervis ut saltem specie tenus crimina praescriptis legum committerentur, quod aliquotiens fecere principes saevi: sed quicquid Caesaris implacabilitati sedisset, id velut fas iusque perpensum confestim urgebatur impleri.</div>
</p>

</div>
</div>


<div class="colonne gauche">


<div id="table">
<table border="1">
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Modifié par ChrisFrance (05 Feb 2023 - 17:01)
Voici la feuille screen.css

* {
margin:0;
padding:0;
}

body{background-color:grey;}

#wrapper{background-color:white;height:789px;max-width:990px;margin:auto;}

.logo{width:224px;height:96px;float:left;margin:0px 23px 0px 2px;}

.logo2{width:278px;height:96px;float:right;margin:10px 4px 27px 32px;}

#header{background-color:orange;height:60px;width:699px;margin-top: 19px;font-size: 13px;float:right;}
#header > h1{padding:9px 35px;text-align:center;font-size: 33px;}

.colonne{background-color:orange;height:570px;width:200px;}/*9 7.05 margin-right:3px;*/
.droite{float:right;margin-right:9px;margin-top:-638px;}
.gauche{float:left;margin-top:-637px;margin-left:9px;}

#lorem{text-align:justify;font-size: 18px;padding: 35px 10px;}

#contenu{background-color:yellow;min-height:638px;float:left;margin-left:220px;width:550px;left:220px;margin-top:53px;
clear: both;}

#flex-box{display: flex}
#flex-box > div {margin: 0px 10px 10px 20px;border:3px solid black;height:150px;width:150px;}

#footer{background-color:#FF3A43;height:50px;width:990px;margin-top:530px;margin-left:-8px;}

#footer > p{text-align:right;padding:15px 17px 0px 0px;}

#clear{clear:both}

/*table*/
table{background-color:orange;border-collapse:collapse;width:515px;height:100px;margin-top:536px;margin-left:232px;}
tr:nth-of-type(2){background-color:lightgrey;border-left:2px solid orange;border-right:2px solid orange;}
table Smiley border {color:white;}


/*Navigation*/
#nav{float:left;margin-left:215px;position:absolute;margin-top: 101px;}

ul#menu_horizontal li{float:left;list-style:none;width:130px;text-align:center;font-size:16px}

ul#menu_horizontal li a{text-decoration:none;border:orange thin solid;display:inline-block;}
ul#menu_horizontal li a:hover{color:royalblue;
background-image:-webkit-linear-gradient(top, yellow 0%, ghostwhite 100%);
background-image: linear-gradient(to bottom, grey 0%, ghostwhite 100%);
border-radius:0px 0px 0px 0px;}

ul#menu_horizontal li .sous_menu{display:none;}
ul#menu_horizontal li:hover .sous_menu{display:block;}

ul#menu_horizontal li a{line-height:2.5;padding:0 8px;color:orangered;
background-color:yellow;width:100px;border-radius:10px 10px 0px 0px;}


/*contenu du texte de la marge a gauche*/
#aside{overflow:scroll;background-color:lightgrey;width:190px;height:264px;margin:5px 5px;border-radius:8px 0px 0px 8px;}
.textelorem{margin:20px 15px;font-size:14px}
hr{margin:10px;color:orange;}
h4{margin-bottom:5px;}
.color{color:red;font-size:13px}
Modifié par ChrisFrance (05 Feb 2023 - 17:02)
Voici la feuille print:
/*.logo, #header, #nav, #aside, .no-print
{
display: none !important;
}*/

.logo, #header, #nav, #aside{display:none;float:none;}
#flex-box, #flex, #table, .table, #contenu{display: block;float:none;visibility:visible;width: 100%;}
#clear{clear:both;}
#table, .table{color:black;}






/** {all: unset;display: revert;}
#flex-box{display: block;}
.logo, #header, #nav, #aside{display :none;}

#flex-box{width:100%}

float: none
@page { margin: 10% }.
*{margin:0;padding:0;}
#wrapper{display:none;}
#contenu #flex-box{display:block;margin: 0;padding: 0;}


body {
background-color :#fff;
font-family :Serif;
font-size :15pt;
}

#page {
margin :0;
border :none;
}

.logo #header #nav .colonne {
display :none;
}

h1#top {
margin :0;
padding :0;
text-indent :0;
line-height :25pt;
font-size :25pt;
}

h2, h3, #contenu h3, #contenu a, a {
color :#000;
}*/
Modifié par ChrisFrance (05 Feb 2023 - 17:03)
Prévenir un modérateur
Répondre au sujet
Aller à