Hi all I'm facing a problem with printing pages.I want to have same header on all the pages im printing.I read several answers from stack seems no straigt forward answer.
thanks in advance.
Add a stylesheet for the printing of the page.
<link type="text/css" href="print.css" rel="stylesheet" media="print">
Then create a div with your hidden print-only header.
<div class="printOnly">Header</div>
Hide the printOnly div in your regular CSS file.
.printOnly { display: none; }
In your print.css, do whatever you need to do to your div. This is also where you would hide otherwise visible properties.
.printOnly { /* Style */ }
This is how I managed print styles.
So, if you have a div called normalHeader that you want gone when you print, simply set the style to display: none; on the print.css file.
Related
I am having some issues with using Bootstrap for the first time. For some reason no matter what changes I make to my custom css it does not affect the bootstrap css or the regular html of the layout. I am currently trying to build my first website in visual studio and have been advised to work with bootstrap however I cannot seem to get it to work the way I want it to. I have successfully created web elements that I want without the use of bootstrap however when I try to use bootstrap it just does not want to display any of my custom css no matter what I do.
As I stated above, the first thing I tried was editing the bootstrap css directly, which had absolutely no effect on the layout of my webpages. After this, I discovered it was a good idea to create a seperate main.css file and then link it in to bootstrap file, with any changes being made to the main.css file should change the bootstrap css without having to mess up the bootstrap file. However, using this method none of the changes alter the way the webpages are displayed in any way. After this, I decided to follow this tutorial https://websitesetup.org/bootstrap-tutorial-for-beginners/ step by step, even though it is a notepad++ tutorial and not a visual studio tutorial. Even following this tutorial step by step none of the changes made to the css are displayed on the webpage.
When I simply add the html I want to the layout page without linking the bootstrap or main.css to the layout page the features work as intended, but I cannot customize some things with html so I need to get it working with css.
I have done a few google searches for solutions to this issue and tried several, such as moving code from the body of the layout page to the footer, ensuring the file directory for the .css files is correct, including capital letters, but I cannot seem to find where the issue is.
This is how I linked my layout page to the main.css file which contains the css for altering the nav bar of my webpages:
<head>
<link rel="stylesheet" type="text/css" href="Main.css">
this is the link to the Main.css file with my custom .css that I used in the layout view in visual studio
<link rel="stylesheet" href="BSProject/css/bootstrap.min.css">
This is the link to the bootstrap file I used when following the above tutorial and added this to the head of the index.html file
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
This is the stuff I put in my main.css file, while also finding the .nav classes in the bootstrap.css and trying to put this information in the bootstrap file also.
/* The navigation bar */
.navbar {
overflow: hidden;
background-color: #333;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
/* Links inside the navbar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change background on mouse-over */
.navbar a:hover {
background: #ddd;
color: black;
}
/* Main content */
.main {
margin-top: 30px; /* Add a top margin to avoid content overlay */
}
I am trying to change the colour of the nav bar, the colour of the text, the colour of the text on scroll over, the colour of the text on the nav bar of the page that is currently being viewed, the text type/size/position and I want the nav bar to be fixed at the top of the page so that as you scroll down the page you can still see the nav bar at the top of the window. And I want the nav bar to scale with the size of the window for mobile users, a feature that is included in bootstrap. I understand everything I mentioned is not present in the above css, this is because I wanted to test it was functional before I began typing out all the css I need.
I can already do all of this without using bootstrap but for this project I am required to use it and I just can't seem to display anything other than the default bootstrap nav bar no matter what I change in the css.
First of all move your style Link after Viewport and also move your custom css file Main.css after Bootstrap.min.css. Try this I hope it'll resolve your issue. Thanks
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- StyleSheet -->
<link rel="stylesheet" href="BSProject/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="Main.css">
</head>
I have a div named "pos". I have 3 pages like index.php, register.php and login.php. I have defined the div property in css file and it working fine as per the content of each page. But in index page i want the same div to be displayed in little bit top. so what should i do to define the div property in the index page?
#po
{
margin-top: 12em; margin-bottom: 1.8em;
}
If you want custom styles for one page, then in the HTML for that page you can either define a custom style in some <style> tags in the head or include a custom stylesheet in the head
<head>
<link rel="stylesheet" type="text/css" href="customstylesheet.css">
<style> /* This is recommended as opposed to using a separate stylesheet */
#pos {
/* Your new styles */
}
</style>
</head>
This way you can avoid adding more classes and it reduces confusion on pages where the class is not found but the same stylesheet is used
You could add a index class to the html tag in index.php, and then in your css add the property like .index #pos{values}
<html class="index">
Or you could add the index class to the same div and call it like #pos.index{values} in your css.
<div id="pos" class="index">
Set a id or class on the body of the index page
Normal
.po{
/* your style */
}
Index Page
<body class="poindex">
body.poindex .po{
/* your style */
}
I would like to know if there is a way to use a particular css page as styling for a tag.
For example, instead of
<div class="header" style="position: absolute; text-align:left; right: auto; margin: 0 auto 20px; z-index: 1; width: 60%; height: auto; left:9%">
Is there a way to specify style.css for the div tag?
For example,
This style.css must ONLY apply to the div tag above.
Also, is it possible for all tags contained within that div tag to follow the same specified css page?
Put this in the header of your page
<head>
<link rel="stylesheet" href="/styles.css" type="text/css">
</head>
If you want to specify style for a page, include that CSS when you render the page.
If you want to have multiple ways of rendering a particular tag, differentiate the tags.
I'm not aware of conditional logic you can apply to the CSS directly.
HTML:
(include this in the head)
<link href='style.css' rel='stylesheet' type='text/css'/>
CSS: (in the style.css file)
div.header{
//your style here
}
or without the class:
div{
//your style here
}
but without the class it will get all div tags so I recommend the first code
You can create the CSS page you want and then create the styling you want inside
something like this
div > table {
padding: 5px;
}
That would make the div have a padding of five as well as it's child the table a padding of 5
For printing purposes, I removed the IMG element, but I wanted an H1 element to be displayed on another portion of the site when the IMG element is removed.
Is this possible?
You can use CSS media types for this.
Don't think of it as revealing one element when another is removed; instead think of it as selectively displaying elements depending on whether they are for print or screen.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
#media print {
.screenonly { display: none; }
}
#media screen {
.printonly { display: none; }
}
</style>
</head>
<body>
<h1 class=printonly>Header for print</h1>
<h1 class=screenonly>Header for screen</h1>
</body>
</html>
Save this to a file and view it in a browser, and you will only see "Header for screen". Print the same page and you will instead see "Header for print".
This technique will work on any element and can be used to set any CSS style for print or screen.
Is it possible to print a html page with something stuck to the bottom of the page?
You can specify a CSS stylesheet to be used for a media type of print and include that in your webpage. In that stylesheet set appropriate options to "turn on" the footer element that you want whilst in the "screen" version that element might not be visible.
<link rel="stylesheet" type="text/css" media="print" href="style.css">
#media print {
.footer {display: block;}
}
#media screen {
.footer {display: none;}
}
anything of class=footer will appear only in print. It's up to you to locate it at the bottom of the page.
If you mean right at the bottom, instead of immediately after a short amount of content, then perhaps try
position:absolute;
bottom:0;
Is that the kind of thing you mean?