fixed header for print not taking full page width - css

I have a hidden header which is shown when printing a page, but when i try to print it with chrome 40 it's not taking the full width page. why?
HTML
<div id="header">
<img id="logo" src="assets/img/brand.png">
<div id="title">Departamento de diagnostico por imagenes</div>
</div>
<div id="footer">
<p class="page"></p>
</div>
CSS
#header{
top:0px;
right:0px;
width: 100%;
height: 45px;
position:fixed;
border:1px solid #ccc;
}
#logo{
position: absolute;
top: 0;
left: 0;
height: 46px;
}
#title{
position: absolute;
top: 0;
right: 0;
font-size: 18px;
font-weight: bold;
}
#footer {
position: fixed;
left: 50%;
bottom: 0;
/*right: 0;*/
height: 40px;
text-align: center;
}
#footer .page:after {
content: counter(page, upper-roman);
font-size: 18px;
}
UPDATE
I changed to position absolute, and it works, it's taking the full width
but now I realized that it's not repeating in every page, even with position fixed
Also notice the footer with number page, it's wrong centered because of fixed position, but when i change it to absolute it's correct but it goes to the bottom of the content, not of the page, and in the two cases neither repeat in every page

Remove the fixed position, add absolute instead, and I've also changed the height of #logo to 100% instead of 46px
SNIPPET
body {
font-family: Arial, sans-serif;
}
#header {
top: 0px;
right: 0px;
width: 100%;
height: 45px;
position: absolute;
border: 1px solid #ccc;
}
#logo {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
#title {
position: absolute;
top: 0;
right: 0;
font-size: 18px;
font-weight: bold;
}
h3 {
margin-top: 100px;
}
#header-table {
top: 150px;
/*Change to 0px when supposed to use*/
right: 0px;
width: 100%;
height: 45px;
position: absolute;
border: 1px solid #ccc;
display: table;
}
#logo-cell {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
#title-cell {
display: table-cell;
vertical-align: middle;
font-size: 18px;
font-weight: bold;
text-align: right;
}
<div id="header">
<img id="logo" src="http://img3.wikia.nocookie.net/__cb20140501181347/creepypasta/images/f/f6/Grumpy_Cat.jpg">
<div id="title">Departamento de diagnostico por imagenes</div>
</div>
<h3>Display: Table, if your title should be vertically centered</h3>
<div id="header-table">
<img id="logo-cell" src="http://img3.wikia.nocookie.net/__cb20140501181347/creepypasta/images/f/f6/Grumpy_Cat.jpg">
<div id="title-cell">Departamento de diagnostico por imagenes</div>
</div>

Related

Heading border expand outside of viewport

I'm trying to achieve headings with border that expands outside of viewport on one side, just like on the picture below.
I've managed to code the one that is aligned to the left and border expands to the left side using code like this:
.wrapper {
width: 1100px;
margin: 0 auto;
box-sizing: border-box;
padding: 1.5rem;
}
h2 {
font-size: 2em; /* 32/16 */
font-weight: 200;
color: #000;
position: relative;
margin: 0 -9600rem;
padding: 1.2rem 9600rem;
background: transparent;
z-index: 0;
display:block;
max-width:660px;
}
h2::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0rem;
right: 9598.5rem;
background: transparent;
border:2px solid #000;
}
h2.right {
font-size: 2em; /* 32/16 */
font-weight: 200;
color: #000;
text-align: right;
position: relative;
margin: 0 -9600rem;
padding: 1.2rem 9600rem;
background: transparent;
z-index: 0;
display:block;
max-width:660px;
}
h2.right::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 9598.5rem;
right: 0rem;
background: transparent;
border:2px solid #000;
}
<section>
<div class="wrapper">
<h2>s každou nehnuteľnosťou možno pohnúť najmä vo váš prospech</h2>
<h2 class="right">s každou nehnuteľnosťou možno pohnúť najmä vo váš prospech</h2>
</div>
</section>
HTML:
CSS:
Problem is with the text that is supposed to be aligned to the right of the wrapper and expand the border to the right. My results so far look like this:
The text still begins on the left edge of the wrapper and is not 660px from the right edge of the wrapper as it is supposed to be. Any idea how to fix this? I've tried playing around with multiple variables but nothing worked.
I have played around a little with it in a fiddle: https://jsfiddle.net/38t1286m/
EDIT: I played with it some more... https://jsfiddle.net/38t1286m/4/ ;)
Basically I have simplified it, so that the HTML looks like this:
<header>
<h2>
This is my LEFT side header
</h2>
</header>
<p>
Here is some text in between...
</p>
<header class="right">
<h2>
This is my RIGHT side header
</h2>
</header>
And with the following css:
p {
width: 660px;
margin-right: auto;
margin-left: auto;
}
h2 {
border: 1px solid black;
max-width: 660px;
margin: 0;
margin-left: auto;
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
}
header {
position: relative;
max-width: 660px;
padding: 0;
margin: 0;
margin-right: auto;
margin-left: auto;
}
header:before {
content: " ";
width: 660px;
border: 1px solid red;
position: absolute;
left: -660px;
right: -660px;
overflow: hidden;
top: 0;
bottom: 0;
}
header.right {
text-align: right;
}
header.right:before {
left: 660px;
right: 660px;
}
That's at least how I think I would solve it. :)
You could float the second heading to the right, and then clear it using :after
h2.right {
text-align: right;
background: transparent;
z-index: 0;
float: right;
}
h2.right::after {
content: '';
clear: both;
}
codepen

Fixed position inside relative container (modal with fixed header)

I am trying to create a modal with a fixed header. This was all working fine but we have since added a custom scroll bar in webkit browsers using ::-webkit-scrollbar. When we did this it causes the fixed header to be wider then the modal by the width of the custom scroll.
** edit: this is only an issue when resizing the window/when min-width kicks in **
My understanding is the fixed header is calculating its max width of 90% based on the whole window and the modal is calculating 90% based on the available space not including the scrollbar.
There are two css ways of fixing this that I can think of.
1) figure out if I am just being silly and there is a way of making a fixed element depend on the size of the relative parent.
2) if the body or the parent div of the modal has the pseudo selector add styles.
Sadly the following does not work:
div::-webkit-scrollbar ._common-modal.is-open, body::-webkit-scrollbar ._common-modal.is-open{
width:calc(100% - $scrollbarwidth );
}
Any thoughts?
css :
.modal-overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.2);
z-index: 100;
}
div::-webkit-scrollbar ._common-modal.is-open, body::-webkit-scrollbar ._common-modal.is-open {
display: none;
}
._common-modal.is-open {
bottom: 0;
left: 0;
outline: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
right: 0;
top: 0;
padding: 20px 0;
text-align: center;
z-index: 101;
}
._common-modal.is-open.header-detached .modal-header {
position: fixed;
top: -1px;
width: inherit;
max-width: 90%;
}
._common-modal.is-open.header-detached .modal-header:after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 3px;
background: rgba(85, 85, 85, 0.05);
}
._common-modal.is-open.header-detached .modal-content {
margin-top: 50px;
}
._common-modal.is-open:before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
}
._common-modal.is-open .wkModal {
text-align: left;
position: relative;
max-width: 90%;
width: 500px;
z-index: 2;
background: #ffffff;
border: 1px solid grey;
display: inline-block;
vertical-align: middle;
}
._common-modal.is-open .modal-header {
border-bottom: 1px solid grey;
padding: 0 15px;
line-height: 51px;
background-color: #fff;
z-index: 2;
}
._common-modal.is-open .modal-footer {
padding: 0 15px;
line-height: 50px;
}
._common-modal.is-open .modal-title {
font-size: 20px;
text-align: center;
font-weight: 300;
width: 80%;
margin: 0 auto;
}
._common-modal.is-open .modal-close {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
display: block;
background: url(../img/blue_small-x.svg) no-repeat center center;
}
._common-modal.is-open .modal-content {
padding: 10px 15px;
}
._common-modal.is-open .modal-content p {
text-align: center;
}
html:
<div class="_common-modal is-open">
<div class="wkModal">
<div class="modal-header" >
<div class="modal-title">
<span >Large Modal Custom</span>
</div><a class="modal-close"
></a>
</div>
<div class="modal-content" >
<h1 Test Modal Content</h1>
<div>
**content**
</div>
</div>
<div class="modal-footer"></div>
</div>
</div>

Centered image map bigger than portrait mode in mobile. How to fix?

So I just made a very simple website where an image is dead centre on the page. It's actually an image map.
The issue that I'm having is that on mobile it's wider than the phone in portrait mode.
How can I make it so the image is contained within the screen on mobile?
Here's the link:
www.thelastdescendantfilm.com
And here's the code:
body {
background-color: #000000;
margin: 0;
padding: 0;
color: #000;
}
a img {
border: none;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
#horizon
{
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -564px;
position: absolute;
top: -254px;
left: 50%;
width: 1129px;
height: 508px;
visibility: visible
}
.map_image { display: block; width: 1129px; height: 508px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
.map_image #map_link_0 { width: 434px; height: 56px; top: 390px; left: 662px; }
.map_image #map_link_1 { width: 261px; height: 48px; top: 453px; left: 836px; }
</style></head>
<body>
<div id="horizon">
<div id="content">
<div class="map_image" style="background-image: url('tldmain.jpg');">
<a class="map_link" id="map_link_0" title="" href="http://igg.me/p/the-last-descendant/x/6785523">Join Us</a>
<a class="map_link" id="map_link_1" title="" href="http://www.facebook.com/thelastdescendant">Follow Us</a>
</div>
</div>
<!-- end .container --></div>
</body>

Lightbox CSS customizing

This is the Lightbox CSS sheet:
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
But using it I get my pictures like this :
Pic1:
in other words - on the whole width of my page, I want to customise it in a way to get this result :
Pic2 :
I want to get 3-4 pics on each row, I tried by simply doing this:
<body style="width: 500px;">
<img src="pic/1.jpg" width="110" height="90" alt="image" />
<img src="pic/2.jpg" width="110" height="90" alt="image" />
</body>
But this leads to a bug when I go to large view for a single picture...
Thanks
Leron
use responsive image gallery plugins which display your images, when they are clicked by resizing them according to the width and height of your screen. a good one would be shadowbox or yoxview.

CSS need div to extend it's containers width

This is my current HTML structure. The footer div is sitting alone in the BODY.
<div id="footer">
<div class="container">
<div id="footer-bg">
<div class="footer1">
<p class="p1">asd</p>
<p class="p2">asd</p>
</div>
<div class="footer2">
<p class="p1">asd</p>
<p class="p2">asd</p>
<p class="p3">asd</p>
</div>
<div class="footer3">
<p class="p1">asd</p>
</div>
</div>
</div>
</div>
Here's the CSS for it:
#footer
{
position: relative;
background: url('../footer-bg-repeat.jpg') repeat-x;
height: 307px;
}
#footer #footer-bg
{
background: url('../footer.jpg') no-repeat top left;
height: 528px;
width: 1587px;
position: absolute;
left: -380px;
top: -221px;
}
#footer .footer1
{
position: absolute;
top: 137px;
}
#footer .footer1 .p1
{
position: absolute;
left: 500px;
background: #dcdcdc;
height: 23px;
width: 80px;
text-align: center;
line-height: 25px;
font-weight: bold;
}
#footer .footer1 .p2
{
position: absolute;
left: 1000px;
top: -20px;
background: url() no-repeat top right;
height: 40px;
width: 249px;
text-indent: -9999px;
z-index: 6;
}
#footer .footer2
{
position: absolute;
top: 159px;
height: 23px;
width: 100%;
background: #000;
}
#footer .footer2 p
{
display: inline;
line-height: 25px;
color: #636466;
height: 23px;
}
#footer .footer2 .p1
{
position: absolute;
left: 500px;
background: url() no-repeat center right;
width: 175px;
}
#footer .footer2 .p2
{
position: absolute;
left: 700px;
background: #dcdcdc url() no-repeat 60px 8px;
width: 75px;
padding-left: 15px;
}
#footer .footer2 .p3
{
position: absolute;
left: 800px;
}
#footer .footer3
{
position: absolute;
top: 190px;
}
#footer .footer3 .p1
{
position: absolute;
left: 500px;
width: 1000px;
}
I'm trying to get .footer2 and .footer3 to extend the width of the container allowing me to have a background colour set for what ever width the screen may be.
Setting 100% width just gets it to the size of the container - As I'd expect. How can I, though, get it to the width of the page?
Try setting both left and right property to 0;
you didn't define question well.
if you want to set it in middle set margins
margin:0 10px;
width:%your pages width%;
if you mean something else download Firebug plugin for Firefox and inspect a page's footer that did what you want to do and take a look at structure and css rules. it always works

Resources