I'm designing a print stylesheet for a document which will run to a few pages. I want every page to have a company logo at the top, and top padding of 5 centimeters, so I did this:
body {
background:url(logo.png) no-repeat center top;
padding-top:5cm;
}
The logo appears on each page as requested, perfectly. But the top padding only appears on the FIRST page, and every subsequent page has padding-top of zero.
Am I doing something wrong? How can I get the top padding on EVERY page?
This may be because padding is counted relative to body tag. Use padding-top style with immediate wrapper element after body tag.
Related
I'm trying to print from my website to PDF. I have a background image and want a 1 in margin. When printing, the background only gets added to the first page and the top margin only applies to the first page and the bottom margin only applies to the last page.
I need to print pages that can then be placed in a booklet.
Using just a color instead of an image does place the color on every page, though stops when the text ends without covering the bottom of the page.
I have tried various background-size and #page styles
<head>
<style>
body {
background-image: url("../includes/images/paperback.jpg");
margin: 1in;
background-repeat: repeat-y;
}
</style>
</head>
<body>
test<br><br> <!-- repeated to fill multiple pages -->
</body>
I just received my answer elsewhere. I had been trying to use Chrome for this, but was directed to work in Firefox. By adding the same background to every div, setting the div margin to 0, and letting Firefox add a 1in margin, I was able to get a file that I can then add a background to in Acrobat that then fills in the empty margins. It works, though I welcome a simpler answer.
I have an avatar in my header (inserted with a shortcode as a custom menu item). Unfortunately it sits directly under the top of the container (header) and I can't figure out the CSS to nudge it down. I guess I need to use CSS margin-top but I don’t know how to correctly target the item.
In Chrome Inspector, this is where it's at:
#menu-lift-your-reading-main > #menu-item-3850 > a > img.avatar.avatar-90.photo.lazyloaded
(You can only see this avatar if you're logged in as it's for current user.)
All answers much appreciated!
You probably don't have a margin or padding on your body. Then the margin from the image has nothing to bounce against... it gets pushed outside the screen.
So instead of a margin-top on your image (child) add a padding-top to the parent element.
Bases on the CSS rule you gave, I'm guessing that this should do the trick:
#menu-lift-your-reading-main > #menu-item-3850 {
padding-top: 1em;
}
Here is the relevant jsFiddle with full code sample.
I am trying to:
Change the color of the footer's <hr/>, however my styling rule doesn't seem to work; and
Figure out why, if you break the page out into a fullscreen, the page appears too wide and the browser presents you with a horizontal scrollbar
My CSS rule to color the <hr/> is:
hr {
color: rgb(255,0,0);
}
And as for why the page is too wide, I'm totally out of ideas. Any idea as to why my attempts here aren't working?
The hr tag use the property border to set the line ... if you need to change that color then use:
border-top-color
Try this:
footer hr {
border-top-color:blue;
}
The DemoFiddle
And the scroll bar on the page is because you are breaking the layout with the absolute position on the footer. http://jsfiddle.net/7j9q1ye4/2/
The HR will go over the whole Div so it depends how big the div is,
if the width of the div where the HR is within is over the whole page wide that the HR will do the same. It has probably something to do with the DIV where the HR is standing in.
My page http://dl.dropbox.com/u/49912546/anchor_link_test.htm displays differently when an anchor is used too http://dl.dropbox.com/u/49912546/anchor_link_test.htm#vanquish-s - content below an image is moved up slightly
This happens consistently across browsers, so there must be something in the spec that means this is the correct behaviour... but what? It only happens when an image is loaded (if the src is invalid the bug doesn't happen).
*edit
By the way, I found a workaround already http://dl.dropbox.com/u/49912546/anchor_link_test_solved.htm#vanquish-s, so I'm not looking for bug fix - I just want to know why all browsers have CSS implementations that cause this behaviour.
half content appears to shift upwards because the .panel
its contained within is set to overflow:hidden & has content that is being clipped as a result.
When the browser attempts to identify the element in the named anchor it sees thats its within a container that can clip its content & so scrolls that element to the top to ensure its visible.
For example if you were to add any elements within contentInner but above the named h3, then they would not be visible on the page when the named anchor was used as half content is scrolled such that h3 is at the top. (The same result as if overflow:scroll were applied; the named anchor causes the scrollbar to position itself in line with the top of the named element)
In my case removing overflow:hidden worked
#maincontent {
width: 100%;
background: transparent;
/* overflow: hidden; */
clear:both;
}
I have background style of #bg_inner as background:transparent url(../images/bg_inner.jpg) repeat-x scroll center top;. But only part of it appears. Any idea why?
Test link:
http://www.aslanyurek.com/inner.asp?Section=myaccount&SubSection=signin
It's because #bg_inner is only the size of #header, which is 35 pixels. There's nothing to display the background in once #bg_inner's block is drawn. See, you have the inner form set to float left, which brings it outside of #bg_inner. Basically, you've shortened your own header section.
You should just define your background properties on the body element itself and remove #bg_inner entirely. Either that or remove the float:left; property from the form element.