I currently have the problem that my maps my 9th map is displayed on two pages although there is still enough space on the first page. Does anyone have a suitable solution to the problem?
I tried anything: page-break-inside, page-break-before, page-break after. Anything does not work.
Picture: https://drive.google.com/drive/my-drive
index.blade snipped:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
#yield('third_party_stylesheets')
#stack('page_css')
<style>
.layout{
width: 100%;
height: 100%;
/*margin: 11mm 20mm;*/
margin-top: 10mm;
margin-bottom: 0;
margin-left: 25px;
}
.box {
/*border: 1px dashed black;*/
display: inline-block;
width: 87mm;
margin-top: -15px;
margin-bottom: 0px;
margin-left: -10px;
margin-right: -1px;;
padding-top: 15px;
}
p {
text-align: right;
}
.card{
width: 85mm;
height: 55mm;
border: 1px solid black;
.pb {
page-break-inside: always;
}
</style>
</head>
<body class="layout">
#for( $i = 0; $i < 10 ; $i++)
<div class="box">
<div class="card">
....
</div>
</div>
#if($i % 2)
<br>
#endif
#if($i % 10 == 9)
<p class="pb" style="display: none;"></p>
#endif
#endfor
</body>
</html>
Related
I use Dompdf to generate a pdf from an html.
Before using the Dompdf library, I built the html to have a preview directly on my browser.
Here is the result when I read html via my browser:
The problem is related to Dompdf. The result is not the same as on my browser:
As you can see, the elements are not placed correctly:
I need the logo and the term "RELEVE DE COMPTE" on the same line. The
logo on the left and, "Statement of Account" in the middle.
The same goes for the company’s information. In the pdf, it’s at the
bottom.
My Dompdf function:
public function render(string $html)
{
$pdf = new Dompdf();
$pdf->loadHtml($html);
$pdf->setPaper('A3');
$pdf->render();
$pdf->stream();
}
My html/css code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Statement</title>
<style type="text/css">
body {
background-size: 100% 100%;
padding: 50px;
font-family: -webkit-pictograph, 'Roboto', sans-serif;
}
.header {
display: flex;
flex-direction: row;
}
.header-logo {
width: 30%;
}
.header-title {
width: 30%;
text-align: center;
}
.header-baseline {
color: #3E5064;
}
.spacer {
width: 100%;
border-bottom: solid 1px #E5E5E5;
margin: 1em;
}
.infos {
display: flex;
flex-direction: row;
margin-bottom: 8em;
}
.infos > div > div > p {
margin: 0;
}
.infos > div > div > h3 {
margin: 0;
margin-top: 1em;
margin-bottom: 0.3em;
}
.user-info {
width: 50%;
text-align: left;
}
.agent-info {
width: 50%;
text-align: right;
}
.statement-first-balance {
display: flex;
flex-direction: row;
}
.statement-first-balance-period {
width: 50%;
text-align: left;
}
.statement-first-balance-amount {
width: 50%;
text-align: right;
}
.statement-operations {
margin-bottom: 10px;
width: 100%;
height: auto;
}
.statement-operations-debit {
text-align: right;
}
.statement-operations-credit {
text-align: right;
}
table {
border-spacing: 0;
}
table > thead > tr {
height: 3em;
background-color: #F7F9FF;
}
table > thead > tr > th {
text-align: left;
padding: 1em;
}
table > tbody > tr {
height: 3em;
}
.statement-recap {
display: flex;
flex-direction: row;
}
.statement-recap-amount {
width: 40%;
margin-left: 60%;
}
</style>
<link
href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900'
rel='stylesheet' type='text/css'/>
</head>
<body>
<div class="header">
<div class="header-logo">
<img alt="agent-logo" class="agent-image"
src=""
width="70%">
<span class="agent-name"></span>
</div>
<div class="header-title">
<h1>RELEVE DE COMPTE</h1>
<p class="header-baseline">Compte - en euros</p>
</div>
<div class="header-page"></div>
</div>
<div class="spacer"></div>
<div class="infos">
<div class="user-info">
<div>
<h3>firstName lastName</h3>
<p>test address</p>
<p>11111 Town</p>
</div>
<div>
<h3>IBAN</h3>
<p>AA1111111111111111111111111</p>
</div>
<div>
<h3>BIC</h3>
<p>AZERTYUIOPQ</p>
</div>
</div>
<div class="agent-info">
<div>
<h3>Company</h3>
<p>Company address</p>
<p>11111 Town</p>
</div>
</div>
</div>
<div class="statement-first-balance">
<div class="statement-first-balance-period">
<p>du 2022-02-04 au 2022-02-27</p>
</div>
<div class="statement-first-balance-amount">
<p>Votre précédent solde</p>
<h3>216.25 €</h3>
</div>
</div>
</body>
</html>
I don’t understand why rendering from the browser is OK but the PDF is not OK. Could you please help me?
I'm developing a website that has several pages, and to avoid having to write the entire menu I want to use the php include method. However I am not making the menu appear inside the html file. how do I make the menu appear whenever I call include?
<header>
<nav id="navbar">
<div id="navbar-div">
<span id="navbar-spam">
<h1 id="navbar-logo">
<img src="images/logo.png" alt="" srcset="" class="logo1">
</h1>
</span>
<nav id="menu">
<ul>
<li>home</li>
<li>quem somos</li>
<li>destaques</li>
<li>representantes</li>
<li>clientes</li>
<li>contato</li>
</ul>
</nav>
</div>
</nav>
</header>
style.css
*{
margin: 0;
padding: 0;
}
#font-face {
font-family: 'mandina';
src: url('font/Madina.otf')/*Para navegadores Internet Explorer*/;
font-weight: normal;font-style: normal;
}
#font-face {font-family: 'mandina';
src: url('/font/Madina.ttf') /*Para os demais navegadores*/;
font-weight: normal;
font-style: normal;
}
/* INICIO CABEÇALHO */
header {
width: 100%;
height: 4.5em;
}
#navbar-logo {
margin-left: 0.5em;
width: 17vh;
height: 9vh;
}
#navbar{
background-color: white;
position: fixed;
z-index: 10;
height: 4.5rem;
width: 100rem;
}
#navbar-div {
position: absolute;
width: 100%;
}
#navbar-spam {
position: fixed;
width: 15em;
height: 3.5em;
}
#navbar-logo {
position: absolute;
margin-right: 40rem;
margin-top: 0;
width: 50%;
height: 100%;
text-align: center;
}
#menu {
z-index: 9;
position: fixed;
margin-top: 1.5rem;
margin-left: 28rem;
width: 100%;
height: 4.5rem;
font-weight: bold;
text-transform: uppercase;
}
#menu li{
float: left;
list-style: none;
}
#menu li a {
color: black;
text-decoration: none;
padding: 1.4rem;
}
/* INICIO CORPO DO SITE */
main {
position: relative;
height: 200em;
width: 100%;
background-color: white;
color: black;
}
.design-tec {
font-family: mandina;
font-size: 15vh;
margin-left: 30rem;
margin-top: -20rem;
color: black;
text-shadow: 3px 3px 6px #f3c569;
}
.linha-home {
border: 1px dashed black;
margin-left: 39rem;
margin-top: -0.9rem;
width: 16rem;
}
#img-home {
margin-top: 4rem;
margin-left: 5rem;
width: 55vh;
}
.texto-home {
margin-top: 1rem;
margin-left: 33rem;
font-style: italic;
}
#itens-home {
position: absolute;
margin-left: 33rem;
margin-right: 21rem;
margin-top: 3rem;
font-weight: bold;
}
#ico-catalogo,
#ico-representantes,
#ico-tutoriais {
margin-left: 0.5rem;
width: 8vh;
height: 8vh;
}
#ico-representantes{
margin-left: 1.7rem;
}
#div-catalogo{
position: absolute;
margin-left: 1rem;
}
#div-representantes {
position: absolute;
margin-left: 11rem;
}
#div-tutorial {
position: absolute;
margin-left: 23rem;
}
#ico-catalogo:hover,
#ico-representantes:hover,
#ico-tutoriais:hover{
width: 9vh;
height: 9vh;
transition: 1s;
}
#home{
position: relative;
height: 20%;
width: 100%;
background-color: white;
}
/* INICIO RODAPÉ */
footer {
position: fixed;
background-color: blue;
color: black;
}
This is the index.htm file, which will be the main page
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<?php require "navbar.php" ?>
<main>
<section id="home">
<img src="images/img-home.gif" id="img-home">
<h2>
<p class="design-tec">Design & Tecnologia</p>
</h2>
<hr class="linha-home">
<div class="texto-home">
<p>Modernidade e tecnologia em um produto exclusivo para o seu imóvel!</p>
</div>
<div id="itens-home">
<div id="div-catalogo">
<img src="images/catalogo.svg" id="ico-catalogo">
<p id="Pcatalogo">Catálogo</p>
</div>
<div id="div-representantes">
<img src="images/aperto-de-mao.svg" id="ico-representantes">
<p id="Prepresantantes">Representantes</p>
</div>
<div id="div-tutorial">
<img src="images/mail.svg" id="ico-tutoriais">
<p id="Pcontato">Tutoriais</p>
</div>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Just rename your file index.htm to index.php then at the index.php, you can now use a mixture of php and html code.
To include a file inside an html, you can do this:
index.php
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<?php
require "navbar.php";
//or
// require_once "navbar.php"
?>
You can read more about using php on html here.
Note: After changing your extension to .php, you can't run the file without a server unlike with static files such as html or htm.
To do this, you can install a development server on your development environment such as XAMPP.
References to XAMPP can be found here.
my login page is not implementing the css i have used for it my code is designed using mvc and php i tried changing background to pink to see if its working but the css isnt working at all
my code isnt complete so dont worry about missing stuff for the form etc but this is login page code.
<?php
require APPROOT . '/views/includes/head.php';
?>
<div class="navbar">
<?php
require APPROOT . '/views/includes/navigation.php';
?>
</div>
<div class="container-login">
<div class="wrapper-login">
<h2>Sign in</h2>
<form action="<?php echo URLROOT; ?>/users/login" method="POST">
<input type="text" placeholder="Username *" name="username">
<span class="invalidFeedback">
<?php echo $data['usernameError']; ?>
</span>
<input type="password" placeholder="Password *" name="password">
<span class="invalidFeedback">
<?php echo $data['passwordError']; ?>
</span>
<button id="submit" type="submit" value="submit">Submit</button>
<p class="options">Not registered yet? Create an account! </p>
</form>
</div>
</div>
this is my css for the page.
.container-login {
width: 100%;
margin: 0 auto;
position: relative;
top: 20%;
}
.wrapper-login{
width: 80%;
margin: 0 auto;
text-align: center;
}
.wrapper-login input {
width: 200px;
height: 26px;
border: 1px solid #cccccc;
background-color: #f5f5f5;
font-size: 18px;
display: block;
position: relative;
margin: 20px auto;
}
input::placeholder{
color: #a1a1a1;
font-size: 14px;
}
.wrapper-login h2 {
font-size: 40px;
text-transform: uppercase;
}
.btn-submit {
width: 200px;
height: 42px;
border: 1px solid #000000;
background-color: #000000;
color: #ffffff;
font-size: 20px;
margin: 20px 0 0 0;
}
#submit:hover {
border: 1px solid #a1a1a1;
background-color: #a1a1a1;
transition: 0.15s ease-in;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta htttp-equiv="Cache-control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auction System</title>
<link rel="stylesheet" href="http://localhost/mframe/css/style.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700&display=swap" rel="stylesheet">
</head>
I'm discovering Laravel and VueJs
I just intalled it using laravel installer
I think blade is not working because when i do npm run dev, the welcome.blade.php looks like that:
As you can see, the blade directives appear...
I didn't change the code give but it looks like this:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<div class="links">
Docs
Laracasts
News
Blog
Nova
Forge
Vapor
GitHub
</div>
</div>
</div>
</body>
</html>
If someone have an idea to fix that ;)
I'm just starting with HTML and PHP and I ran into the following problem:
When having a PHP command the webpage shows wrong colors!
With PHP command (<?php phpinfo( ); ?>)
Without PHP command:
It's pretty clear to see that the navbar elements change color, depending on the command, but why?
I can't get this fixed, no matter what I do. Here's my other code:
PHP-Source-File:
<!DOCTYPE HTML>
<html>
<head>
<title>PHP-Info</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/index.css" type="text/css" media="all">
</head>
<body>
<ul class="navbar">
<li class="navbar"><a class="navbar" href="index.php">Home</a></li>
<div style="float: right;">
<li class="navbar"><a class="navbar" href="">Server-Info</a></li>
<li class="navbar"><a class="navbar active" href="phpinfo.php">PHP-Info</a></li>
</div>
</ul>
<div>
<?php phpinfo( ); ?>
</div>
</body>
</html>
Stylesheet:
* {
margin: 0;
padding: 0;
font-family: Tahoma, sans-serif;
font-size: 100%;
}
body {
margin-top: 55px;
}
ul.navbar {
position: fixed;
top: 0;
width: 100%;
height: 5.4%;
list-style-type: none;
overflow: hidden;
background-color: rgba(33, 33, 33, 0.35);
}
li.navbar {
float: left;
}
li a.navbar {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover.navbar {
border-bottom: 4px solid dodgerblue;
}
li a.active.navbar {
background-color: #666666;
border-bottom: 4px solid #666666;
}
In your CSS stylesheet I see you have :hover and :active before your classes. Try switching them around, like this:
li a.navbar:hover {
border-bottom: 4px solid DodgerBlue;
}
li a.navbar:active {
background-color: #666666;
border-bottom: 4px solid #666666;
}
EDIT: Plus you had a period . instead of a colon : before active.
It is also a good idea to capitalize your color names. DodgerBlue instead of dodgerblue. Some browsers are strict about this.