Menu
Community /Pin to ProfileBookmark@Ashley128#1642294
I edited your posting in order to make the display more clear. Hope you agree.@Ashley128#1642294
Check if this meets your requirements:
` Hi,
I have a problem here.
When I print out my web page, I will get all stuff including logo nav list etc. I do not want this printed. I just want the text outprinted, see picture above regarding grid on my page.
I tried using
@media print
but I do not get it right.
Please help ` is the correct approach. If it doesn't work for you, please post your attempt.
This is my print.css file
I just want the text and figures in .item4 printed out on the paper for all webpages.
Apply a class e. g. "noprint" to any element you do not want to be printed:
<div class="item1 noprint">
<nav>
<ul>
<li><a href="#" id="activePage">Home</a></li>
<li><a href="html/tourism.html">Tourism</a></li>
</ul>
</nav>
</div>
this iwill also mbe printed out on the screen This is my grid.css
.container {
display: grid;
grid-template-columns: 200px auto;
background-color: #8EDFCF;
}
.item1, .item2, .item3, .item4 {
text-align: left;
}
.item1 {
font-size: 1.2rem;
position:sticky;
top: 0.01rem;
left: 0.01rem;
padding-top: 0.5rem;
padding-right: 0.8rem;
padding-left: 0.8rem;
}
.item1 nav ul li {
padding: 0.2rem 0.2rem;
}
.item1 nav ul li:hover, nav ul li:focus, nav ul li:active {
grid-column: span 20;
color: #5A440D;
list-style-type:none;
text-decoration:none;
font-weight: bold;
letter-spacing: 0.1rem;
} ` Where should i put this
<div class="item1 noprint">
<nav>
<ul>
<li><a href="#" id="activePage">Home</a></li>
<li><a href="html/tourism.html">Tourism</a></li>
</ul>
</nav>
</div>
.container {
display: grid;
grid-template-columns: 200px auto;
background-color: #8EDFCF;
}
.item1, .item2, .item3, .item4 {
text-align: left;
}
.item1 {
font-size: 1.2rem;
position:sticky;
top: 0.01rem;
left: 0.01rem;
padding-top: 0.5rem;
padding-right: 0.8rem;
padding-left: 0.8rem;
}
.item1 nav ul li {
padding: 0.2rem 0.2rem;
}
.item1 nav ul li:hover, nav ul li:focus, nav ul li:active {
grid-column: span 20;
color: #5A440D;
list-style-type:none;
text-decoration:none;
font-weight: bold;
letter-spacing: 0.1rem;
}
-----------------------------------------------
index.html
<body>
<div class="container">
<div class="item1">
<nav>
<ul>
<li><a href="#" id="activePage">Home</a></li>
<li><a href="html/tourism.html">Tourism</a></li>
</ul>
</nav>
</div>
Forget what I wrote about the class "noprint". Take your page as it is and add my latest CSS. For me it worked fine. I want to add this to my print out
<div class="item2">
<img src="images/cropped-IMG_7105.jpg" />
<p>lklkj</p>
</div>
Responsive grid
Hi,
I have a grid which look like this
“`
_____________________________
| nav | |
| list | logo |
|________________|__________|
| | |
| empty | text |
|________________|__________|
The nav list is fixed to the left upper former, sticky. Always there when scrolling the mouse.
After respositivity should look like this
“`
____________
| logo |
| |
|__________|
| |
| navlist |
|__________|
| |
| text |
____________
| |
| |
|__________|
The logo is fixed, nav list is scrolling.
VCan anybody help me?
Sign in
to post a comment31 Comments(s) ↴
0
@SempervivumFeb 08.2022 — #I edited your posting in order to make the display more clear. Hope you agree.
reply?
0
@SempervivumFeb 08.2022 — #Check if this meets your requirements:
``<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Layout</title>
<style>
body {
margin: 0;
}
* {
box-sizing: border-box;
}
#logo {
width: 100%;
position: sticky;
left: 0;
top: 0;
}
nav,
section {
padding: 0.5em;
}
@media (min-width: 600px) {
#logo {
width: 50%;
position: fixed;
left: 0;
top: 0;
}
nav,
section {
margin-left: 50%;
width: 50%;
}
}
</style>
</head>
<body>
<body>
<img id="logo" src="images/busleft.png">
<nav>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</nav>
<section>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua.
Shortened, large amount of text here.
</section>
</body>
</html><i>
</i>``reply?
0
@SempervivumFeb 08.2022 — #Alternative CSS, just flex layout, no position</C>:
<CODE>`<i>
</i> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Layout</title>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
flex-direction: column;
}
#logo {
width: 100%;
}
nav,
section {
padding: 0.5em;
}
#wrapper {
overflow: auto;
}
@media (min-width: 600px) {
body {
flex-direction: row;
align-items: flex-start;
}
#logo {
flex: 1;
}
#wrapper {
flex: 1;
height: 100%;
}
}
</style>
</head>
<body>
<body>
<img id="logo" src="images/busleft.png">
<div id="wrapper">
<nav>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</nav>
<section>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
et earebum.
Shortened, large amount of text here.
</section>
</div>
</body>
</html><i>
</i>``reply?
0
@Ashley128authorFeb 23.2022 — #I have a problem here.
When I print out my web page, I will get all stuff including logo nav list etc. I do not want this printed. I just want the text outprinted, see picture above regarding grid on my page.
I tried using
@media print
but I do not get it right.
Please help
reply?
0
@SempervivumFeb 23.2022 — #@media print`reply?
0
@Ashley128authorFeb 23.2022 — #Hi,This is my print.css file
``<i>
</i>@media print {
body {
text-align: center;
margin: 0;
color: #000;
background-color: #fff;
}
}<i>
</i>`</CODE>
<HR>---------------------------</HR>
This is my index.html
<CODE>`<i>
</i><body>
<div class="container">
<div class="item1">
<nav>
<ul>
<li><a href="#" id="activePage">Home</a></li>
<li><a href="html/tourism.html">Tourism</a></li>
</ul>
</nav>
</div>
<div class="item2">
<img src="images/cropped-IMG_7105.jpg" />
<h1>AAA</h1>
</div>
<div class="item3">
</div>
<div class="item4">
<article class="info">
<h2>Info</h2>
</article>
<article class="news">
<h2>News</h2>
<h3>Party</h3>
<p>2019-04-06</p>
<p>....</p>
<img src="images/party.jpg" />
<img src="images/party2.jpg" />
</article>
<article class="fence">
<h3>...</h3>
<p>2018-07-16</p>
<p>....</p>
<img src="images/fence.jpg" />
<img src="images/fence2.jpg" />
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc faucibus a pellentesque sit.
Ultrices gravida dictum fusce ut placerat orci nulla. Tempor orci eu lobortis elementum nibh tellus. Faucibus vitae aliquet nec ullamcorper sit. Vestibulum lorem sed risus ultricies tristique nulla. Pellentesque nec nam aliquam sem et.
Aenean sed adipiscing diam donec adipiscing tristique risus. Tortor condimentum lacinia quis vel eros donec ac odio. Integer enim neque volutpat ac tincidunt vitae semper quis lectus. Feugiat scelerisque varius morbi enim nunc faucibus.</p>
<p>Nisl nisi scelerisque eu ultrices vitae auctor eu augue. Sapien pellentesque habitant morbi tristique senectus et netus et malesuada. Placerat vestibulum lectus mauris ultrices eros in. Pellentesque habitant morbi tristique senectus et netus.
Quam id leo in vitae turpis massa. Risus nec feugiat in fermentum posuere urna nec. Enim diam vulputate ut pharetra sit amet aliquam id. Vulputate sapien nec sagittis aliquam malesuada. Sit amet consectetur adipiscing elit ut aliquam.
Laoreet id donec ultrices tincidunt arcu. Ut eu sem integer vitae justo. Penatibus et magnis dis parturient montes. Aliquam purus sit amet luctus venenatis lectus magna fringilla. Odio tempor orci dapibus ultrices in iaculis nunc.
Vestibulum sed arcu non odio euismod lacinia at. Mauris sit amet massa vitae tortor condimentum lacinia. Faucibus scelerisque eleifend donec pretium. In est ante in nibh mauris cursus mattis molestie a.</p>
</article>
<br><br>
</div>
<main>
</main><i>
</i>``reply?
0
@Ashley128authorFeb 23.2022 — #reply?
0
@SempervivumFeb 23.2022 — #Try this:Apply a class e. g. "noprint" to any element you do not want to be printed:
``<i>
</i> <div class="item1 noprint">
<nav>
<ul>
<li><a href="#" id="activePage">Home</a></li>
<li><a href="html/tourism.html">Tourism</a></li>
</ul>
</nav>
</div><i>
</i>`</CODE>
The parent is sufficient.<br/>
Then hide these elements while printing:
<CODE>`<i>
</i>@media print {
.noprint {
display: none;
}
body {
text-align: center;
margin: 0;
color: #000;
background-color: #fff;
}
}<i>
</i>``reply?
0
@Ashley128authorFeb 23.2022 — #<nav>
<ul>
<li><a href="#" id="activePage">Home</a></li>
<li><a href="html/tourism.html">Tourism</a></li>
</ul>
</nav>
</div>
this iwill also mbe printed out on the screen
reply?
0
@Ashley128authorFeb 23.2022 — #.container {
display: grid;
grid-template-columns: 200px auto;
background-color: #8EDFCF;
}
.item1, .item2, .item3, .item4 {
text-align: left;
}
.item1 {
font-size: 1.2rem;
position:sticky;
top: 0.01rem;
left: 0.01rem;
padding-top: 0.5rem;
padding-right: 0.8rem;
padding-left: 0.8rem;
}
.item1 nav ul li {
padding: 0.2rem 0.2rem;
}
.item1 nav ul li:hover, nav ul li:focus, nav ul li:active {
grid-column: span 20;
color: #5A440D;
list-style-type:none;
text-decoration:none;
font-weight: bold;
letter-spacing: 0.1rem;
}
reply?
0
@SempervivumFeb 23.2022 — #When testing I realized the issue. You have to adjust the grid-template-columns</C> too:
<CODE>`<i>
</i> @media print {
body {
text-align: center;
margin: 0;
color: #000;
background-color: #fff;
}
div.container>div:not(.item4) {
display: none;
}
.container {
grid-template-columns: auto;
}
}<i>
</i>``reply?
0
@Ashley128authorFeb 23.2022 — #<div class="item1 noprint">
<nav>
<ul>
<li><a href="#" id="activePage">Home</a></li>
<li><a href="html/tourism.html">Tourism</a></li>
</ul>
</nav>
</div>
reply?
0
@Ashley128authorFeb 23.2022 — #css file.container {
display: grid;
grid-template-columns: 200px auto;
background-color: #8EDFCF;
}
.item1, .item2, .item3, .item4 {
text-align: left;
}
.item1 {
font-size: 1.2rem;
position:sticky;
top: 0.01rem;
left: 0.01rem;
padding-top: 0.5rem;
padding-right: 0.8rem;
padding-left: 0.8rem;
}
.item1 nav ul li {
padding: 0.2rem 0.2rem;
}
.item1 nav ul li:hover, nav ul li:focus, nav ul li:active {
grid-column: span 20;
color: #5A440D;
list-style-type:none;
text-decoration:none;
font-weight: bold;
letter-spacing: 0.1rem;
}
-----------------------------------------------
index.html
<body>
<div class="container">
<div class="item1">
<nav>
<ul>
<li><a href="#" id="activePage">Home</a></li>
<li><a href="html/tourism.html">Tourism</a></li>
</ul>
</nav>
</div>
<div class="item1 noprint">
<nav>
<ul>
<li><a href="#" id="activePage">Home</a></li>
<li><a href="html/tourism.html">Tourism</a></li>
</ul>
</nav>
</div>
<div class="item2">
<img src="images/cropped-IMG_7105.jpg" />
</div>
<div class="item3">
</div>
<div class="item4">
<article class="info">
<h2>hjkjhk</h2>
</article>
<article class="news">
<h2>Senaste nytt</h2>
<h3>Party</h3>
<p>2019-04-06</p>
<p>kgk.</p>
<img src="images/party.jpg" />
<img src="images/party2.jpg" />
</article>
<article class="fence">
<h3>cfdt</h3>
<p>2018-07-16</p>
<p>ghjhg.</p>
<img src="images/fence.jpg" />
<img src="images/fence2.jpg" />
<br>
<img src="images/lawn.jpg" />
<img src="images/lawn2.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc faucibus a pellentesque sit.
Ultrices gravida dictum fusce ut placerat orci nulla. Tempor orci eu lobortis elementum nibh tellus. Faucibus vitae aliquet nec ullamcorper sit. Vestibulum lorem sed risus ultricies tristique nulla. Pellentesque nec nam aliquam sem et.
Aenean sed adipiscing diam donreply?
0
@SempervivumFeb 23.2022 — #reply?
0
@Ashley128authorFeb 23.2022 — #<div class="item2">
<img src="images/cropped-IMG_7105.jpg" />
<p>lklkj</p>
</div>
reply?
0
@SempervivumFeb 23.2022 — #Change the CSS to this:``<i>
</i> @media print {
body {
text-align: center;
margin: 0;
color: #000;
background-color: #fff;
}
/*hide item1 and image in item 2 */
div.container>div.item1,
div.container>div.item2 img {
display: none;
}
.container {
grid-template-columns: auto;
}
}<i>
</i>``reply?
0
@SempervivumFeb 23.2022 — #Feel free to add more CSS in order to resize the images:``<i>
</i> @media print {
body {
text-align: center;
margin: 0;
color: #000;
background-color: #fff;
}
/* hide item1 and image in item 2: */
div.container>div.item1,
div.container>div.item2 img {
display: none;
}
/* resize images inside item4: */
div.container>div.item4 img {
width: 300px;
}
.container {
grid-template-columns: auto;
}
}<i>
</i>``reply?