i have to divs
one is fixed and its the header for all pages
and the ather is the content
and this is my code
<style>
#print-head {
display: none;
}
#media print {
#print-head {
display: block;
position: fixed;
top: 0pt;
left:0pt;
right: 0pt;
text-align: center;
}
}
</style>
<div id='print-head'>
page header herer for all page
</div>
<div id='content'>
content here coming from foreach loop
</div>
my problem the div content gat many many lines thats print preview in the first page everything is ok
the header with content looking like this
but in the next page the content will be stack with header like this
i need a code to make content div always get margin from top not just in the first page
how can i clear:both margin between first div and the second div in every page thanks a lot
Try
#print-head {
position: absolute;
top: 0px;
left:0px;
width: 100%;
text-align: center;
padding: 20px 0;
}
Related
I have some web page to fetch the user related data and huge count of images. The problem is while load the page it took more time due to images , Images are rendered in separate div in the page. So i want loader spinner for that particular div.
Note: I know how to implement for page load. Just need for particular div.
Just look the below my implementation idea.
<body>
<div id="divUserContent">
</div>
<div id="divuserimages">
</div>
</body>
Just make sure the parent element to the loading element has a position set to relative. See this example below.
body {
margin: 0px;
font-size: 16px;
}
.container {
background: rgba(0,0,0,.2);
height: 100vh;
align-items: center;
justify-content: center;
display: flex;
position: relative;
}
.loading-container {
padding: 10rem;
border: 1px solid #000;
position: relative; /* this keeps .loading-text inside it */
width: 5rem;
}
.loading-text {
position: absolute;
top: 50%;
left: 50%;
margin-top: -9px; /* take .loading-text height, divide by -2 */
margin-left: -35px; /* take .loading-text width, dividide by -2*/
}
<div class="container">
<div class="loading-container">
<div class="loading-text">Loading...</div>
</div>
</div>
So I have a vertical page divider that is used multiple times on a page, it is a div within a div, on the page scroll, I would like the inner div to scroll with the page and then stop when it reaches the end of the parent div.
Any ideas?
Simple HTML
<div class="verticalscroll">
<div class="verticalscroll_bar"></div>
</div>
CSS
.verticalscroll {
width: 3px;
height: 335px;
background: #D8D8D8;
margin: 80px auto 0;
}
.verticalscroll_bar {
width: 3px;
height: 100px;
background: pink;
}
I appreciate the help!
Fixed it... simple really!
Adding this CSS to .verticalscroll_bar
top: 200px;
position: -webkit-sticky;
position: sticky;
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
How can I have a footer which always stays at the bottom of my page even if this page is too little to fill the entire screen or more ?
I have a button in my page, and when you touch it, it adds thanks to javascript many elements to my page and the page size changed, but my footer doesn't adapt its position.
The problem is when I set the position of my footer to relative, when my page size is too short, he is not at the bottom of my screen, but just under the last element I put on.
I tried position: absolute;, but when the user clicks on the button, my footer stays stuck at his position and it doesn't go to the new bottom of my page.
I don't want my footer to be always visible, but just to be at the real bottom of my page.
Use this:
footer {
position: fixed;
bottom: 0;
/* Add a height and a width! */
}
The complete solution is explained in this article: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Major trick is, that you will have three parts: Header, Body and Footer:
HTML:
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#header {
background: #ff0;
padding: 10px;
}
#body {
padding: 10px;
padding-bottom: 60px; /* Height of the footer */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Height of the footer */
background: #6cf;
}
Use the following
footer {
position: absolute;
bottom: 0;
}
try this one... this will keep your footer at the bottom of your page:
position: fixed;
bottom: 0;
Working demo: https://jsfiddle.net/maky/bgeLbpd9/
#footer {
position: fixed;
bottom: 0;
background-color: black;
min-width: 100%;
font-family: Agency FB;
transition: height 3s;
height: 50px;
}
#footer1 {
text-align: center;
color: #4e4e4e;
}
#footer:hover {
opacity: .8;
color: white;
height: 100px;
}
Current my page has a menu bar and iframe section to load the items in the menu bar when clicked. I wanted the iframe to scroll but not the parent page (i want the menu bar fixed to the top).
But the parent page scroll as well. So I set position: fixed for the parent page, the Content below can only be scrolled to a point and will eventually be cut off (see image below). How do I resolve this issue?
Here is a way using display: table, flex would be another way.
html,
body { height: 100%; margin: 0 }
.container {
display: table;
width: 100%;
height: 100%;
}
.page-row {
display: table-row;
height: 0;
}
.page-row-expanded {
height: 100%;
}
main iframe {
display: block;
width: 100%;
height: 100%;
border: none;
}
.header {
background-color: #bbb;
padding: 10px;
}
<div class="container">
<header class="page-row">
<div class="header">
Navigation bar
</div>
</header>
<main class="page-row page-row-expanded">
<iframe src="http://www.w3schools.com/"></iframe>
</main>
</div>
I dont know if its more complicated because of
position:fixed;
but have a look over here: Scroll Down iFrame - jQuery/JS
I want to keep the content of my page to always appear beneath the navigation bar, similar to how this page works:
http://www.google.com/intl/en/enterprise/apps/business/products.html#calendar
You can scroll down or up in the content, but the navigation bar never goes away.
For this purpose, I've used position:fixed to fix the navigation bar to the top of the page. This works, but I'm still able to scroll the content up and down, causing it to run 'through' and over the navigation bar, when I want the content to always be pushed below the navigation bar.
Any ideas on how to do this? Here's my css code for the <ul id='navigation'> containing the navigation:
#navigation
{
text-align: center;
position: fixed;
float: left;
margin: 0;
padding: 0;
top: 0;
left: 0;
list-style-type: none;
}
#navigation li
{
display: inline-block;
width: 150px;
height: 110px;
cursor: pointer;
}
And here's the css for the <div id="container"> which appears below #navigation and holds all of the page content body:
#container
{
position: absolute;
margin-top: 180px;
font-size: 25px;
width: 90%;
}
The reason it's going through is because you didn't set a background color to your navigation bar. Try that.
Edit: Looked at your source code. Replace navigation CSS in style.css file with this:
#navigation
{
text-align: center;
position: fixed;
float: left;
margin: 0;
padding: 0;
top: 0;
left: 0;
list-style-type: none;
background-color: #FFFFFF;
z-index:999;
}
The problem was the z-index. Putting it at 999 puts the navigation bar on top of all other elements.
You can use the property z-index:xxx, did you try that?
Years ago created my site with that same functionality. I opted for Server Side Includes and it works great. I created a 'header' the navigation links and a 'footer' that gets included on each page.
Have you tried to add data-role="header" ?
<div data-role="header" data-position="fixed">