Boa tarde à todos.
Pessoal, estou com o seguinte problema: preciso imprimir uma ficha mensal de trabalho, mas quando vou imprimir, a página para impressão sai "cortada".
 

 
A imagem acima representa a ficha que preciso imprimir, está tudo ok com essa (tirei o cabeçalho, pois não vinha ao caso)
 

 
Vejam como fica na impressão: com aproximadamente 2/3 da largura.
 
<style> body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #FAFAFA; } * { box-sizing: border-box; -moz-box-sizing: border-box; } .page { width: 210mm; min-height: 297mm; padding: 4mm; margin: 1mm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } /*.subpage { padding: 0.5cm; border: 0px red solid; height: 257mm; outline: 2cm #FFEAEA solid; }*/ .cliente { margin-top: 30px; font-size: 20px; } th {font-size: 14px; } td {font-size: 12px; } .logo {height: 64px; margin: 20px 0px 0px 20px;} .font-cabecalho {font-size: 12px; margin-left: 20px; text-align: center; margin: 20px 0px 0px 20px;} @page { width: 100%; height: 100%; margin: 0; padding: 0; } @media print { html, body { width: 210mm; height: 297mm; } .page { margin: 0; border: initial; border-radius: initial; width: initial; min-height: initial; box-shadow: initial; background: initial; page-break-after: always; } } </style> Código CSS da página.
 
O que pode ser? Como faço pra deixar a página de impressão igual à página PHP? Obrigado desde já à todos.

Um abraço.
 

Opa galera. Fiz um preview de imagens através de um input e ele está funcionado bem agora como eu faço para fazer uma mesmo preview em inputs diferentes. Quando coloco mais de um input e seleciona arquivos ele sempre mostra no primeiro input.
Meu codigo:
 
CSS: 
*{     padding: 0;     margin: 0;     box-sizing: border-box;     font-family: "Rubik",sans-serif; } body{     background-color: #f5f8ff; } .container{     background-color: #ffffff;     width: 60%;     min-width: 450px;     position: relative;     margin:  50px auto;     padding: 50px 20px;     border-radius: 7px;     box-shadow: 0 20px 35px rgba(0,0,0,0.05); } input[type="file"]{     display: none; } label{     display: block;     position: relative;     background-color: #025bee;     color: #ffffff;     font-size: 18px;     text-align: center;     width: 300px;     padding: 18px 0;     margin: auto;     border-radius: 5px;     cursor: pointer; } .container p{     text-align: center;     margin: 20px 0 30px 0; } #images{     width: 80%;     position: relative;     margin: auto;     display: flex;     justify-content: space-evenly;     gap: 20px;     flex-wrap: wrap; } figure{     width: 45%; } img{     width: 100%; } figcaption{     text-align: center;     font-size: 2.4vmin;     margin-top: 0.5vmin; }  
HTML:
   <div class="container">         <input type="file" id="file-input" accept=".png, .jpeg, .jpg, .pdf" onchange="preview(this)" multiple>         <label for="file-input">             <i class="fas fa-upload"></i>   Escolha seus arquivos         </label>         <p id="num-of-files">Nenhum arquivo escolhido</p>         <div id="images"></div>     </div>     <div class="container">         <input type="file" id="file-input" title="2" accept=".png, .jpeg, .jpg, .pdf" onchange="preview(this)" multiple>         <label for="file-input">             <i class="fas fa-upload"></i>   Escolha seus arquivos         </label>         <p id="num-of-files">Nenhum arquivo escolhido</p>         <div id="images"></div>     </div>  
JAVASCRIPT:
let fileInput = document.getElementById("file-input"); let inputFile = document.querySelectorAll("#file-input"); let imageContainer = document.getElementById("images"); let numOfFiles = document.getElementById("num-of-files"); function preview(input){     imageContainer.innerHTML = "";     numOfFiles.textContent = `${fileInput.files.length} Arquivos selecionados`;             for(i of fileInput.files){         let reader = new FileReader();         let figure = document.createElement("figure");         let figCap = document.createElement("figcaption");         figCap.innerText = i.name;         figure.appendChild(figCap);         reader.onload=()=>{             let img = document.createElement("img");             if(figCap.innerText.split('.').pop() == 'pdf'){                 img.setAttribute("src","pdf.png");             }else{                 img.setAttribute("src",reader.result);             }             figure.insertBefore(img,figCap);         }         imageContainer.appendChild(figure);         reader.readAsDataURL(i);     } }  

Pessoal, não tenho certeza se coloco a dúvida aqui ou no html. Envolve os dois. 
Eu tenho um site muito antigo, php 5.2, e resolvi mudar a página principal colocando um efeito parallax.
No servidor local o site roda normalmente, mas no servidor da localweb as imagens do parallax não aparecem.
a página mostrada é esta:
<div class="container-fluid"> <!-- começo do parallax --> <div class="caixa1"> <div class="conteudo-titulo"> <!-- <span class="titulo">TECNOCLEAN - SEGURANÇA E EFICIÊNCIA</span> --> </div> </div> <div class="conteudo"> <h3>A EMPRESA</h3> <p style="width: 80%; margin: auto; text-align: justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida dolor sed mattis mollis. Morbi sodales euismod rhoncus. Suspendisse potenti. Integer hendrerit vitae lectus at feugiat. Quisque libero neque, imperdiet a est congue, elementum ultrices diam. Sed ut felis scelerisque, volutpat justo ut, congue quam. Ut non vestibulum erat, vel semper dolor. Nulla facilisi. Sed convallis at lacus quis venenatis..<br> </p> </div> <div class="caixa2"> <div class="conteudo-titulo" > <!-- <span class="titulo">NOSSO DIFERENCIAL</span> --> </div> </div> <div > <div> <ul class="list-group list-group-flush text-center font-weight-bold"> <li class="list-group-item"><h3>Tradição</h3> 26 anos de experiência</li> <li class="list-group-item"><h3>Confiabilidade</h3> mais de mil clientes</li> <li class="list-group-item"><h3>Segurança</h3> técnica e equipamentos</li> <li class="list-group-item"><h3>Garantia</h3> produtos de qualidade</li> <li class="list-group-item"><h3>Rapidez</h3> equipe especializada</li> </ul> </div> </div> <div class="caixa3"> <div class="conteudo-titulo"> <!-- <span class="titulo">CLIENTES</span> --> </div> </div> <div class="caixa4"> <div class="conteudo-titulo"> <!-- <span class="titulo">EQUIPAMENTOS</span> --> </div> </div> </div> </div> </div> O Css é este:
/* Efeito Parallax -------------------------------*/ .caixa1, .caixa2, .caixa3, .caixa4 { position: relative; height: 100%; opacity: 0.9; background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } .caixa1 { background-image:url(../imagens/principal.png); } .caixa2 { background-image: url(../imagens/insetos.png); } .caixa3 { background-image: url(../imagens/logos/clientes.png); } .caixa4 { background-image: url(../imagens/equipamentos.png); } .conteudo-titulo { position: absolute; left: 0; top: 45%; width: 100%; text-align: center; } .conteudo-titulo span.titulo { color: #fff; background-color: #111; padding: 18px; font-size: 25px; letter-spacing: 5px; text-transform: uppercase; }  
Coloquei o arquivo com a estrutura do site e o erro que aparece na url. (um css que não deveria aparecer e dá página não encontrada)
Coisa interessante: tanto faz colocar ../imagens/foto.png  ou imagens/foto.png e funciona no local e não no servidor.
Se alguém tiver alguma dica para eu resolver ou testar este erro, agradeço.
 
 

 

//modelo.html <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Hora do dia</title>     <link rel="stylesheet" href="estilo.css"> </head> <body onload="carregar()">     <header>         <h1> Hora do dia </h1>         </h1>     </header>     <section>         <div id="msg">             msg         </div>         <div id="foto">             <img class="imagem" src="fotomanha.jpg" alt="foto do dia">         </div>     </section>     <footer>         <p>&copy; Rodapé </p>     </footer>     <script src="script.js"></script> </body> </html>   //script.js function carregar () {     var msg = window.document.getElementById('msg')     var img  = window.document.getElementsByClassName('imagem')      var data = new Date()     var hora = data.getHours()          msg.innerHTML = 'Agora são ' + hora + ' horas'          if (hora >= 0 && hora < 12){         //Bom dia         img.src = 'fotomanha.jpg'         } else if (hora >= 12 && hora < 18){         //Boa tarde         img.src = 'fototarde.jpg'      } else {         //Boa noite         img.src = 'fotonoite.jpg'     } }   //estilo.css body{     background-color: aqua;     font: normal 15pt Arial; } header{     color:rgb(255, 255, 255);     text-align: center; } section{     background: white;     border-radius: 10px;     padding: 15px;     width: 500px;     margin:auto;     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329);      } footer{     color:white;     text-align: center;     font-style: italic;   } div{     text-align: center; } .imagem{     width: 500px;    /* largura da imagem */     height: 350px;   /*  altura da imagem  */     margin-top: 10px; /* margem do topo */ }

Opa, blz?
Alguém me da um help?
 
Estou criando um relatorio em PDF com o dompdf e ao adicionar algumas imagens no documento, as mesmas saem deitadas.
 
No html as fotos saem com a orientação normal(em pé) conforme foi inserida
 
alguém sabe o que pode ser?