I design fixed header and main box, but the problem is when I scroll the page the box come over the header since the header is fixed. why it is coming like that? How to solve this position: fixed stacking order issue?
header{
background-color: black;
width:100%;
height: 50px;
position: fixed;
}
.mainbox{
width: 800px;
height: 100%;
background-color: white;
position: absolute;
border: 1px solid lightgrey;
border-radius: 5px;
top: 55px;
left: 50%;
margin-left: -500px;
}
You should increase the z-index property in your header
header {
background-color: black;
width:100%;
height: 50px;
position: fixed;
z-index: 999;
}
What is the use of z-index?
It specifies the stack order of an element. Element which have higher stack order is always in front of the element with lower stack. For example, if your header has z-index: 10 and your mainbox has z-index: 9, then your header is stacked in front of your mainbox.
You should add z index property for header in css i.e. z-index:2
z-index property can do what you want from css.
I have just commented margin-left from css, to showcase you result. You can keep it as it is in your code.
Run below code. I hope it will solve your CSS issue.
header{
background-color: black;
width:100%;
height: 50px;
position: fixed;
z-index:20;
color: white;
}
.mainbox{
width: 800px;
height: 100%;
background-color: green;
position: absolute;
border: 1px solid lightgrey;
border-radius: 5px;
top: 55px;
left: 50%;
/**margin-left: -500px;*/
z-index:5;
}
<html>
<header class="header">
This header
</header>
<div class="mainbox">
Here will be list of questions by php
</div>
</html>
Related
I have figured out a new problem in TCPDF (new for me), ie I can't place elements next to each other. I have tried so many solutions but they were zero in the end. Seems like TCPDF doesn't support the converting from all the css attributes. Hope you can help ;)
The code I had tried:
<style>
.protHeader{
position: relative;
border: 2px solid black;
display: table;
height: 250px !important;
}
.protHeader div{
width: 100%;
}
.protHeader div img{
position: relative;
display: inline-block;
float: left;
height: 100px;
overflow: hidden;
}
.protHeader div a{
position: relative;
display: inline-block;
text-align: right;
horiz-align: right;
overflow: hidden;
float: right;
font-weight: bold;
font-size: 50px;
width: 40% !important;
}
</style>
And the html:
<div class="protHeader">
<div class="fl_left">
<div style="border: 1px solid black;"><img src="$LogoN"></div>
<div style="border: 1px solid black;"><a>$protocol</a></div>
</div>
</div>
Thanks in advance for the answers!
Maybe this is your problem:
You are adding this:
.protHeader div{
width: 100%;
}
that means, that every <div> in your class .protHeader has 100% width.
EDIT: (i change the last part of the css and colored the inline-block divs red, for viewing that they should stay next each other)
Try to remove this line or change your styling to:
.protHeader{
position: relative;
border: 2px solid black;
display: table;
height: 250px !important;
}
.protHeader .fl_left{
width: 100%;
}
.protHeader div img{
position: relative;
display: inline-block;
float: left;
height: 100px;
overflow: hidden;
}
.protHeader div a{
position: relative;
display: inline-block;
text-align: right;
overflow: hidden;
float: right;
font-weight: bold;
font-size: 50px;
width: 40% !important;
}
.protHeader .fl_left div {
background-color: red;
display: inline-block;
}
<div class="protHeader">
<div class="fl_left">
<div style="border: 1px solid black;"><img src="$LogoN"></div>
<div style="border: 1px solid black;"><a>$protocol</a></div>
</div>
</div>
Okay, found a method, I had changed the whole framework to another (dompdf), which is easier to use and supports the newer CSS too.
I'm using bootstrap4 fixed-top navbar which works fine in normal browser.
However, when I test on a mobile device (Galaxy S5 using chrome dev options) the content starts behind the nav bar, I've tried some padding in my css but I can't seem to get it to work correctly.
Below is a jsfiddle of the HTML and CSS, the page content starts behind the fixed-top nav bar.
https://jsfiddle.net/8kefh4u7/6/
Also here is my CSS
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.epg-container {
position: relative;
width: 100%;
max-width: 1500px;
overflow: hidden;
display: block;
margin: 0 auto;
background-color: black;
}
.epg-container ul.listings-grid {
list-style-type: none;
padding: 0;
margin: 0;
white-space: nowrap;
background-color: #262626;
}
.epg-container ul.listings-grid li {
font-size: 20px;
text-align: left;
}
.epg-container ul.listings-grid .listings-channel-row {
height: auto;
padding: 0;
border-bottom: solid;
border-bottom-width: 6px;
border-color: #262626;
overflow: hidden;
}
.epg-container ul.listings-grid .listings-channel {
/* color not necesary */
color: white;
width: 20%;
height: 83px;
float: left;
text-align: center;
}
.epg-container ul.listings-grid .listings-channel img {
max-width: 100%;
max-height: 100%;
}
.epg-container ul.listings-grid .listings-program {
color: #989898;
border-right: solid;
border-right-width: 3px;
border-left: solid;
border-left-width: 3px;
border-color: #262626;
float: left;
padding: 10px 10px;
background-color: black;
}
.epg-container ul.listings-grid .listings-details-now-info {
color: #fa9609;
font-size: 12px;
}
.epg-container ul.listings-grid .listings-details-next-info {
color: #fa9609;
font-size: 12px;
}
What would be the best way to make the content page always start under the NAVBAR that would work well on mobile.
The recommended method is padding-top on the BODY, the same height as the navbar...
body {
padding-top: 56px;
}
From the Bootstrap docs..
"Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the ) to prevent overlap with other elements."
It is unreliable to use a fixed amount for the height of the header to introduce a padding-top to the body element. I'm using this bit of code after a page refresh to set the body to the correct height.
$("body").css({'padding-top': $('nav.navbar').height()});
The navbar is identified using the nav element with the navbar class.
I fixed this so now the content will always start after the fixed nav bar.
I added the below to the body css
min-height: 51.5rem;
padding-top: 2.5rem;
Thank you #ZimSystem for pointing me in the right direction.
I have been using PHP and ImageMagick for to generate a 3D preview of a canvas print (see image below).
There are options to change the edge type, depth, size etc which are AJAX calls to a PHP support file which re-renders the preview with new settings and I reload it into the DOM.
This is starting to overload our server when busy. So I thought I could do this in CSS3 and do all the preview rendering client-side instead.
Here's what I have so far:
<div class="wrapper">
<div class="inner">
<div>
<img src="http://lorempixel.com/200/200/nature" alt="Nature">
</div>
</div>
</div>
.wrapper {
perspective: 500px;
margin: 4em auto;
width: 37em;
}
.inner {
transform: rotateY(40deg);
}
.inner div {
width: 11em;
display: inline-block;
margin-right: 1em;
}
.inner img {
display: block;
height: auto;
max-width: 100%;
margin: 0 auto;
}
The problem I am having is wrapping the image around the edges like in the image above. How can I do this?
I have done a demo, with 2 elements holding the same image.
Just set the image origin on them accordingly to the dimension, and it will match.
.main {
width: 400px;
height: 300px;
border: solid 1px red;
background-image: url(http://lorempixel.com/400/300);
background-size: 0px 0px;
perspective: 500px;
position: relative;
}
.front {
position: absolute;
width: 360px;
height: 100%;
left: 40px;
top: 0px;
transform: rotateY(45deg);
transform-origin: left center;
background-image: inherit;
background-position: -40px 0px;
}
.side {
position: absolute;
width: 40px;
height: 100%;
left: 0px;
top: 0px;
transform: rotateY(-45deg);
transform-origin: right center;
background-image: inherit;
background-position: 0px 0px;
}
<div class="main">
<div class="side"></div>
<div class="front"></div>
</div>
I'm trying to update the logo for my farm (manayunkfarm.org) and I need to center the logo. I'm wondering if someone could help me understand how I need to do this.
within the style.css under .logo there is this:
.logo {
position: absolute;
left: 50%;
width: 500px;
height: auto;
margin-left: -4.1665em; }
given this info, I'm not sure if you can help me but let me know what else I need to share with you.
Thanks
That or CSS that will center any div/object as long as it has a width set.
.logo {
position: absolute;
left: 0px;
right: 0px;
width: 500px;
height: auto;
margin-left: auto;
margin-right: auto;
}
All you have to do is add this property
text-align: center;
I'm using Laravel-snappy and am trying to absolutely position 6 columns so that 3 print on each page..
View
...
body {
position: relative;
}
.col1-1 {
text-align: right;
background-color: #00dd00;
position: absolute;
top: 0px;
left: 0px;
width: 250px;
height: 11in;
}
.col1-2 {
text-align: right;
position: absolute;
background-color: #1c94c4;
top: 0px;
left: 270px;
width: 250px;
height: 11in;
}
.col1-3 {
text-align: right;
background-color: #46b8da;
position: absolute;
top: 0px;
left: 540px;
width: 250px;
height: 11in;
}
.col2-1 {
text-align: right;
background-color: #dd0100;
position: absolute;
top: 11in;
left: 0px;
width: 250px;
height: 11in;
}
.col2-2 {
text-align: right;
position: absolute;
background-color: #c4770b;
top: 11in;
left: 270px;
width: 250px;
height: 11in;
}
.col2-3 {
text-align: right;
background-color: #da0073;
position: absolute;
top: 11in;
left: 540px;
width: 250px;
height: 11in;
}
</style>
</head>
<body>
<div class="col1-1"></div>
<div class="col1-2"></div>
<div class="col1-3"></div>
<div class="col2-1"></div>
<div class="col2-2"></div>
<div class="col2-3"></div>
....
Controller
return $pdf->stream('page.pdf');
return view('page');
the problem is that the columns come up short, so the 2nd row start on the 1st page...
I have the pagesize set to letter
'pdf' => array(
'enabled' => true,
'binary' => 'C:\wkhtmltopdf\bin\wkhtmltopdf',
'timeout' => false,
'options' => array('page-size'=>'letter'),
So I'm not really sure what to do next...
I feel like it's a scaling issue?
If I don't use Snappy, and just display the page on the screen and print the screen as a PDF, the results are much better (just a few pixels off), but of course I need the page returned as a PDF.
Snappy uses wkhtmltopdf, which in turn uses Webkit to render the HTML. (Might help you to find more info if my suggestions can't help you as your issue is probably not specifically related to Snappy.)
I think you could solve your issue by preventing the page from breaking inside the columns.. To do that you can use the following CSS on each of the columns:
.col{
page-break-inside: avoid;
}
You might also try wrapping the 3 columns in a div and applying that css on the wrapper div.
You can also try page-break-after: avoid or page-break-before: avoidon the columns or by creating an empty div between the sets of columns and styling it with `page-break-after: always'.