I have a header element that I want to repeat on every page when it prints. Currently it works as desired but when the body text flows to the next page it overlaps the header and so on. I have tried numerous things in the css messing with page breaks, display: block, adding a height to the header. I tried changing the position to something other than fixed but then the header doesn't display at the top of the page on every page.
header {
display: block;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
I created a simple jsfiddle to show the code but it doesn't show my issue as I can't show it in print mode.
https://jsfiddle.net/v76p8qfm/
Here is a screenshot of the issue in print view:
Could you post your table HTML code?
Please, be sure that the <table> tag has no <caption> tag inside of it.
That worked for me.
Related
Here is the html and css that i am using: https://gist.github.com/zacatac26/d5733e9289be157982a448a03bda6711
this is only a single page but just making this page work is fine.
I want to make it so the header and body is always in the same place on the webpage but also have the text in the body scroll. I have tried position: fixed and overflow: scroll/auto, but when i do so the page appears how i want but the text does not scroll.
Any help would be appreciated.
Typically the best way to achieve this is just to apply the position: fixed CSS rule to the container of the header element. position: fixed removes the element from the flow, like position: absolute, so you need to also tell the browser where to position the container, e.g. top: 0. To manage the width of the header, you can use left: 0; right: 0; or width: 100%.
I think this page gives the best example of how to achieve what you are going for: https://www.w3schools.com/howto/howto_css_fixed_menu.asp. I'd suggest starting with the HTML/CSS templates given in the tutorial and then add the content and styles from your Gist piece by piece, reviewing the results after each change to make sure that it still looks/behaves as you expect.
I had to make the background image part of the fixed header so that the page content would go underneath the header image and navmenu with no overlapping. I used the same percentages that enclosed the header for the background image with top:, bottom:, left: and right:
I'm making a website using fullPage.js, On the second page (or equivalently, second section) I want to achieve a very simple layout where I have a header fixed on top of the page displaying an image which should be responsive, or decreases in size as the window shrinks but stays at the top.
Currently, I'm wrapping the image to be displayed in a div. I then scale the div fullscreen using,
.post-header {
background: #22BDA0;
max-width: 100%;
height: auto;
}
The img tag inside of the div has a class header-image which I style as,
.post-header .header-image {
max-width: 100%;
height: auto;
margin: 0;
}
However, I'm not getting the desired result. There is a small space on top of the second page which I can't get rid of. You can see the website I'm making along with the source code HERE. Just scroll down to second page, or click Personal Details on the homepage.
Thanks a lot for the help!
What if you just give height:100%; to .section2-container? Will it solve your issue?
Remove display: table-cell; from .fp-tableCell and the padding disappears. Does this need to have display set to table-cell?
fullPage.js has an option: verticalCentered that can be set to false. This seems like a good solution, since the alternative means always trying to ensure that the content of the containing element is always 100%.
Hi All,
I am trying to develop a simple HTML page for the test results. I am very new to HTML development so i might sound really dump with this question.
My aim is to use some thing like frameset available in HTML but point it to the internal links (href). Or some thing like a navigation bar that is always present on the Top of the HTML page or Vertical from which I can point to different sections inside HTML Page. I don't want to divide my HTML page into multiple pages. I want to keep it as a single HTML page.
I would appreciate for some help in this regards,
You can use a div with the CSS position: fixed; top: 0 set. This will allow the div to "stick" to the top of the page, regardless of where the document is scrolled.
You can use anchors to navigate to separate parts of the document. For example:
Section 1
<div>
<a name="section1" id="section1"></a>
Whatever section 1 might contain here.
</div>
As for making the navigation persisent (i.e. fixed position), you can use the position: fixed CSS set. See the jsFiddle sampel here > http://jsfiddle.net/PWP2T/
And the code:
div#mynav {
width: 100%;
padding: 10px 0;
background-color: #ff00ff;
position: fixed;
top: 0;
left: 0
}
i grabbed a template from themeforest and modded it. all works well, except, on some pages, the footer isn't sticking at the bottom of the page. i've messed w/ the css a bit, but haven't been able to get it stick. i'm still learning html/css so wanted some help in reviewing it to make sure i don't have any mistakes in my html. i haven't modded the css from the initial template. i did some, but reverted them before the post, as they were attempts at getting the footer to stick.
here is a link to the site > http://capitalcrestoration.com/build/
I think from your question you are asking how to make the footer appear at the bottom of the window at all times.
To do this you just need to change the CSS rule for #subfooter-wrapper:
#subfooter-wrapper {
background: url("images/sub_footer_bg.jpg") repeat-x scroll 0 0 transparent;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1000;
}
You could try giving CSSStickyFooter a shot.
You need to do something with your CSS to position the footer element at the bottom of the window. Otherwise it's just a block element that will be directly under it's sibling.
Try placing div id="subfooter-wrapper" just before the closing tag of the wrapper, and using position:absolute; bottom: 0;
Im helping a friend with a website and when i resize the browser windows the scroll bar on the right side is not showing up. Is there a fix for this or a way to work around it?
here is the site page im working on
Fixed
Your whole web-page is wrapped inside a DIV with the ID "style" like this:
<body>
<div id="style">
your web-page
<div>
</body>
The CSS for this DIV is:
#style {
background: url(http://upupandfly.com/envie/images/bg_style.PNG) no-repeat;
left: 0px;
min-height: 100%;
min-width: 100%;
position: fixed;
top: 0px;
}
This CSS is causing the problem. You have to either get rid of the fixed positioning, or just try to remove that DIV...
The div#style and html elements are position:fixed, try removing these declarations, and your problem will cease to exist (promise!)