Hin und wieder möchte man ja seinen Webseitenbesuchern ja die Möglichkeit geben, den Inhalt der Seite auszudrucken. So könnte man die Produktbeschreibung, Dokumentation oä zum drucken bereitstellen. Wenn man aber einfach im Browser auf Drucken klickt, dann kann das sehr schlimm aussehen. Aus diesem Grund ist es wichtig dass man als Webseitenbetreiber auch darauf schaut, dass die Webseite gut ausdruckbar ist. Man kann dafür auch gezielt einen Druckbutton vorbereiten und verlinken. Mit ein wenig CSS Hexerei kann man dann auch dafür sorgen, dass die ganze Seite schön aussieht und nicht nur wie von einem 2 Jähriges Kind gezeichnet 🙂
Video
HTML
1
2
3
4
5
6
7
8
9
10
11
12
| <div class="container">
<h2>Print</h2>
<button class="drucken" type="button">
<span class="material-symbols-outlined"> print </span>
</button>
<div class="box">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore
similique perspiciatis quaerat aliquam quos doloremque aspernatur
asperiores? Iste veniam obcaecati, nam earum quas distinctio suscipit
accusamus. Adipisci, molestiae. Sunt, consequatur!
</div>
</div> |
<div class="container">
<h2>Print</h2>
<button class="drucken" type="button">
<span class="material-symbols-outlined"> print </span>
</button>
<div class="box">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore
similique perspiciatis quaerat aliquam quos doloremque aspernatur
asperiores? Iste veniam obcaecati, nam earum quas distinctio suscipit
accusamus. Adipisci, molestiae. Sunt, consequatur!
</div>
</div>
CSS
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
| * {
margin: 0;
padding: 0;
}
body {
background-color: #d4a373;
}
h2 {
text-align: center;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.drucken {
width: 25px;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 300px;
text-align: center;
padding: 10px;
margin: 30px;
border: 1px #000 solid;
}
@media print {
body {
background: #d4a373;
}
} |
* {
margin: 0;
padding: 0;
}
body {
background-color: #d4a373;
}
h2 {
text-align: center;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}.drucken {
width: 25px;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
}.box {
width: 300px;
text-align: center;
padding: 10px;
margin: 30px;
border: 1px #000 solid;
}@media print {
body {
background: #d4a373;
}
}
Javascript
1
2
| const buttonDrucken = document.querySelector(".drucken");
buttonDrucken.addEventListener("click", () => window.print()); |
const buttonDrucken = document.querySelector(".drucken");
buttonDrucken.addEventListener("click", () => window.print());
0 Kommentare