I am trying to achieve a 75px margin on the top and bottom of each printed page. So far, I have attempted adding the margin to both the body and a wrapper div, but it seems that these methods only apply the margin to the entire document. This results in a 75px margin at the top of the first page, around 10px margins on the top and bottom of the second page, and the last page having the bottom margin.
For reference, I have included an image that may assist you: https://i.sstatic.net/GrTpq.jpg
While some answers touch on the right idea, it's important to incorporate units with physical dimensions (such as using pt over cm or mm) and consider implementing a print style sheet for optimal results. To specifically adjust the top and bottom margins of a printed page, utilizing the @page rule is necessary. A solution could look something like this:
<style>
@page {
margin: 75pt 0;
}
</style>
It is recommended to use cm or mm as the unit of measurement when printing.
When you opt for pixels, the browser may translate it to a display size similar to what appears on screen.
To maintain a consistent size on paper, stick with using cm or mm.
body {
margin: 0mm 25mm 25mm 0mm;
}
Include a specified media type in your CSS
<style>
div {
font-family: times new roman;
font-size: 12px;
margin: 15px 15px;
}
</style>
<style media="screen">
// CSS rules for screen viewing only
div {
margin: 7px 7px;
}
</style>
The HTML code will maintain the same general CSS styling but with adjusted margin values.
I'm struggling to achieve a simple layout with Bootstrap (4.3.1). Although it looks right, the CSS isn't working as expected. My goal is to have an image that covers the entire width and height of the col-xs-4 column with a fixed position so it ...
<button type="button" className = {styles.googleButton}> <img className = {styles.image} src = "assets/pictures/google.jpg"></img> <p className = {styles.buttonText}> Go To Google</p> <img ...
I need to run this code, but I'm missing one key variable that I can't seem to locate. Here's my current code snippet: SELECT CODE = 'P1R2G1' and CATEGORY = '20M' IF RANK op1 = '1' THEN UPDATE tourneyeventga ...
I am currently working on a website using three.js and Nuxt.js. However, I have encountered an issue when trying to implement the EffectComposer. The console is showing numerous warnings like: three.webglrenderer.render(): the rendertarget argument has be ...
I'm looking to develop a survey using HTML, PHP, and Javascript. I have my questions and answers stored in a csv file (which will eventually be transferred to a SQL server). My main concern is how to convert my answers into radio button types so that ...
I am managing multiple models: class Game(models.Model): name = models.CharField('Nom du jeu', max_length=100) logo = models.ImageField('Logo', blank=True, upload_to='game_logos') class League(models.Model): game ...
I am working on a form that includes a button and an input field. When the user clicks on the button "ADD MORE FIELDS," I want to dynamically generate a new input box. Although I have tried using code from this jsfiddle link and it works, my goal is to ach ...
A div is used to insert information <div class="inputs"> <div class="content">@Html.TextBoxFor(model => invoices.ProductDesc, new { disabled = "disabled", @readonly = "readonly" })</div> <div class="content">@Html.TextBo ...
I am currently developing a project in C# webforms and incorporating Twitter cards to share the website's image and description. When I validate the card, it appears correctly but with a yellow warning indicating that "this card is redirected to the s ...
One common question is how to load a modal from another page onto the current page, or how to open a modal on the current page when it loads. My idea is a little different: I want to click on an image hotspot (like a person in a team photo) on the /home p ...
I'm currently learning how to use bootstrap and I've encountered an issue while trying to create a navigation bar. The problem is that despite using the correct code, the nav bar is not appearing on my webpage. I suspect it might be due to compat ...
I am currently in the process of updating my research lab's website using a Jekyll framework with Bootstrap. However, I have encountered an issue where the font size grows slightly whenever I navigate to a new page or refresh the current one, before r ...
Issue with Bootstrap select rendering in Firefox and Chrome: Firefox: https://i.sstatic.net/HWEcR.png Chrome: https://i.sstatic.net/GBuDP.png Looking for ways to make the two browsers render consistently, preferably in Chrome's style. This questio ...
I am facing a challenge that I thought would be simple, but despite my efforts to research and experiment, I can't seem to get it right. I have a database that stores image file names, and I need to retrieve the file name based on the ID specified in ...
Hey everyone! I'm currently working on implementing a mouse follow effect, but I'm facing an issue where the circle I've created moves along with the page when scrolling, instead of staying fixed to the mouse. Any suggestions or tips would b ...
Looking for the XPath of this specific element: <a> href="/resident/register/">Register another device </a> I initially tried $x("//*[contains(@href, 'resident/register')]") Unfortunately, no results were returned. Any other su ...
My goal is to create a virtual reality experience similar to this: https://i.sstatic.net/8pZx0.png However, my background image is 4096x1024 and I want it to have a VR effect where the center appears further away from the screen and the edges are slightl ...
My goal is to specifically target the class .page-has-children within this code snippet: <div id="dc_jqverticalmegamenu_widget-2" class="widget sidebarwidget "> <div class="dcjq-vertical-mega-menu" id="dc_jqverticalmegamenu_widget-2-item"> ...
I've encountered an issue with the code below and I'm not sure what I'm doing wrong. It seems to work in Dreamweaver, although not in live view, but it sticks to the top and left in Safari and Firefox. I attempted replacing the masthead div ...
How can I limit the height and width of an image within the <img> tag to a maximum size of 400x400 px? If the image is smaller than this, it should display at its original size, but if larger, it should be compressed to fit within these dimensions. ...