If I have a #print stylesheet set up with 60mm margins, is it possible to have a logo appear with position: fixed; at 20mm from the top of the page? Thus far it appears that everything outside of the #page margins gets cropped.
It’s difficult to actually see the issue in the code snippet below, but check it out here: https://jsbin.com/xaxanamihu/edit?html,css,output
And the pure output here: https://output.jsbin.com/xaxanamihu
View the print preview of that page. You’ll see the .logo div is cropped because its position is technically outside of the view area set by #page margins.
I basically need to mimic the concept of a header and footer in my print styles from, say, an Apple Pages or Word document. The same logo in the header and small text in the footer on every page, with the content area given plenty of margin for the header and footer.
.logo {
background: rgb(200, 200, 200);
color: white;
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100px;
}
#page {
size: auto;
margin: 60mm;
}
#media print {
.logo {
background: black;
left: -50px;
top: -50px;
}
}
<div class="logo">Logo.</div>
Related
I have a keyboard diagram to indicate to the user that they should be able to press a key to move from one cell of the CSS grid to another. The cells are set to the width and height of the browser. (The keypress does not function yet). Still, when I scroll up and down, the arrow key image remains, but when I scroll right, the right cells of the grid shove the image off the page? (It would also be nice to get rid of the negative margin on the body tag but that seems to be necessary when the image is a sticky element.
body {
margin: 0;
padding: 0;
margin-top: -102px;
}
.nav-legend {
position: sticky;
top: 10px;
padding-left: 10px;
}
https://codepen.io/russellbits/pen/eYjmWyg
Not sure if it gets the desired result, but it seems that position: fixed might be suitable for the use case.
Forked demo with modification: codepen
Example:
body {
margin: 0;
padding: 0;
}
.nav-legend {
position: fixed;
top: 10px;
left: 10px;
z-index: 999;
}
I have this fiddle for reference that shows what i'm talking about...when you scroll the table of data within the div, the image scrolls as well. I need the image to not move while the below div is scrolled, but I cannot do it. The div that overlays could be any size and I would also need the overlayed image to be in the correct spot even if the window was resized. I suppose that if it can't be done with CSS then a javascript solution would suffice, but would of course much rather have css only.
thanks!!!!
http://fiddle.jshell.net/ts46235/BMKZa/26/
css:
div.overlay {
position: relative;
}
div.overlay:after {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: url(https://www.fadingred.com/media/images/spinner-small.gif) no-repeat 50% 50% ;
}
First, you need to move the overlay class property to a div containing your grid div (as an example your float-left clear-left div), so that the gif image do not scroll with the your table.
Then, you need to adapt your CSS code like this :
div.overlay:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 400px;
background: url(https://www.fadingred.com/media/images/spinner-small.gif) no-repeat 50%;
pointer-events: none;
}
The deal is that with top, left, width and height property, we create a box the same size as your grid div and at the same position. Then, with :before rather than :after, the image is display on top of the content of the table rather than behind. And finally pointer-events: none ensures that the image won't cause trouble when selecting text.
Here is a working Fiddle : ( Fiddle )
What I first suggested but didn't work as you wanted was :
div.overlay {
position: relative;
background: url(https://www.fadingred.com/media/images/spinner-small.gif) no-repeat 50% 50% ;
}
div.overlay:after {
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
I am in the process of designing a web page and I'm using the following CSS to create the page header with the main header image centered in a 1000px width page, and for a repeating edge image going across the top of the body and underneath the header to spread across the whole browser page width.
body {
font-family: Tahoma;
background-color: #0184AE;
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
margin: 0;
position: relative;
}
.whole-page {
width: 1000px;
margin: auto;
padding: 0;
text-align: left;
position: relative;
border-radius: 0 0 15px 15px;
}
.header {
width: 100%;
height: 120px;
color: white;
background-image: url('/images/header.jpg');
background-repeat: no-repeat;
font-size: 10pt;
margin-top: 0px;
margin-bottom: 0;
padding-top: 10px;
border: 1px black none;
position: relative;
}
The CSS above works, except when a toolbar appears. I'm using Chrome with a SEO toolbar and it displaces the centered header image correctly, it pushes it down underneath the toolbar so I can see the whole image.
However, the repeated body image is not displaced at all and the toolbar covers the top so many pixels. This puts the whole thing out of whack.
I've tried a few options in the CSS, but so far nothing seems to work. I'm guessing here, but I think the toolbar draws itself using CSS that 'exists' under the body tag.
Can anyone suggest anything, I'd like either the whole header pushed down, or not. Just so it's consistent.
Using the Chrome developer tools (hit f12) you can inspect (click the magnifying glass icon on the bottom) the toolbar element. Doing this you can see that it is indeed inserted to the body of document. This will unfortunately result in the actual behavior you are seeing. In other words, this is not your fault but the fault of the toolbar developers.
One (ugly) work around is to throw an additional div around your content and apply the background to that.
E.G.
HTML
<body>
<div id="notBody">
<!--Rest of your headers, content, etc here -->
</div>
</body>
CSS
body {
font-family: Tahoma;
background-color: #0184AE;
margin: 0;
position: relative;
}
#notBody {
background-image: url('/images/headeredge.jpg');
background-repeat: repeat-x;
background-position: top;
}
in your header class change to position: absolute; and use top to set how many pixels you want your header to be from the top of the page.
.header {
position: absolute;
/* all your other styles */
top: 200px;
}
In the picture below, I am wanting to place the driftwood/bomb image over the image directly above it; hence, I want to remove/collapse the "space" between these two divs. The gap, however, is not caused by the markup itself, because as you can see the "bomb" is making the picture bigger on the height.
I would like to position the navigation bar on the "header" (so the brown top of the navigation is just below the header bottom), so the gap disappears. These images are meant to overlap.
I assume this can be done using CSS. But how? Whatever solution needs to work cross-browser.
HTML:
<header></header>
<nav></nav>
CSS:
header {
width: 980px;
height: 327px;
background: url(../images/header.png);
}
nav {
width: 980px;
height: 180px;
background: url(../images/menu.png);
}
Maybe a negative margin?
header {
width: 980px;
height: 327px;
background: url(../images/header.png);
}
nav {
width: 980px;
height: 180px;
background: url(../images/menu.png);
margin: -90px auto 0;
}
http://jsfiddle.net/NmUfT/
Relative positioning could fix this for you:
nav {
position: relative;
top: -20px;
}
place the div inside the header div.
nav {
position: relative;
bottom: -30px;
}
A top-margin with a negative value is indeed what you seek. If the nav would disappear beneath the header, you should change the nav's z-index. Try different numbers: 100, 1000, 10000 etc.
I'm trying to make a page where I have a fixed height header and footer. The header is at the top of the screen (100% width) and the footer is at the bottom (100% width). I want to center a div with variable height content in the space between the header and footer. In the below jsfiddle, it works if the content is shorter than the space, but if the content gets too long, it goes past the footer, and over the header. It also doesn't work at all in IE (surprise, surprise).
Example: http://jsfiddle.net/VrfAU/4/
Edit: I've made some images to try and make this more clear.
Small content
Large Content
I ended up starting over and trying a different approach. The working solution is found in the new jsfiddle below. The idea was to separate the header and footer from the content area so that they would sit on top and bottom. Then it became much easier to center the content area in the space between those (with some hacks for older versions of IE).
http://jsfiddle.net/UYpnC/5/
Try something like this:
.main { min-height: 500px }
http://jsfiddle.net/VrfAU/8/
I used the css property z-index, which controls the stack order to fix this:
I also used position: fixed to fix the header and footer:
I put
#header {
background: black;
width: 100%;
height: 66px;
position:fixed;
overflow: hidden;
z-index: 20;}
.main_wrap {
display: table;
width: 100%;
height: 100%;
margin-top: -88px;
vertical-align: middle;
position: relative;
z-index: -1;
}
#footer {
background: black;
width: 100%;
position: relative;
font-size: 85%;
color: #d0d6e0;
margin-top: -22px;
position: fixed;}