I am stuck with this problem, I have a responsive fixed header that is overlapping the main content!
I am using internal/anchor linking on the same page. Both from the nav-menu/header links and from the VERTIAL DOT NAVIGATION Jquery plugin. I am not able to link to the different sections without the header overlapping the first 60px of the section. I have been trying to add margin-top: 60px; to the .container and .section-top class with no success.
I would like to be able to link both from the nav-menu/header links and the jQuery dot navigation, without the header overlapping with 60px.
See this jsfiddle for more!
Just add this:
[id^="section"]{
padding-top: 60px;
}
and remove this
.section-top {
margin-top: 60px;
}
https://jsfiddle.net/w8u2kg1j/
Try using the following CSS, to have the header overlap with only the padding area:
section {
padding-top:60px;
}
Related
I am trying to create a "document viewer" of sorts using html and css. I'm wanting the end result to look somewhat of a pdf when viewed in an iframe with no border.
I have a parent div setup with a class of paper. This has some box shadow and other styles attached to it.
<div class="paper">
</div>
Within this I have children divs setup with a class of page. This is where all the content sits for the page.
<div class="page">
</div>
My problem is when the content gets too long for a page and you scroll to the next "page" it all mixes together and looks like junk. I have attached a code pen to further assist in being able to visually see what I am struggling with.
CodePen
CodePen Link Here
You can change your page class in CSS with this:
.page {
height: 100%;
margin-bottom: 15px;
padding: 20px;
display: table;
text-align: center;
}
What is the problem?
If the content in your pages gets too long, it overflows the height end kind of "bleeds" on the next page.
What to do?
You should set a fixed height of 100vh to your paper
Then, tell it not to expand with: overflow: scroll
Use min-height to set the height of your page, instead of height: it will naturally expand the height of the pages instead as you content grows
Finally, just in case, set overflow: hidden to page
I have a situation where I have 3 divs :
- Menu - Header (#rt-top-surround)
- Showcase (#rt-showcase)
- Main Body content (#rt-mainbody-surround)
The Menu is 'sticky' with position: fixed. Therefor I have to move the div that is rendered below it with padding (padding-top: 120px; margin-bottom: -120px;).
The problem that I run into is that on some pages the second DIV is #rt-mainbody-surround. (Than this div is rendered properly.)
But on other pages I have #rt-showcase (that displays some promotional images) as second DIV followed by the main body DIV.
So what I would need to implement is a rule that not adds the padding & margin on the rt-mainbody-surround div when the rt-showcase is displayed. And I'm not wether to do this with Javascript or with PHP and how to accomplish this.
I've made an illustration to show what I exactly mean.
Hope anyone can help me out here! Thanks!
Illustration
If I understand the question correctly you want a margin below a specific div only if another div isn't actively visible. The best way to handle this is to add a bottom margin to the top div and negative margin to the div below it (that can be shown and hidden). The css for that is:
.top {
margin-bottom: 20px;
}
.middle {
margin-top: -20px;
}
Sometimes a picture is worth more than some code though so I created a fiddle here. Enjoy!
I have page with a fixed header with absolute top value. So, as I scroll up the content in the body of the page srolls into the background of the header. So, when I click on an , the page scrolls to that element and by default places the element at the top of the browser window, which in my case is hidden behind the page header. So, I need a href click to scroll the page to the (#element window vertical position)+(height of the page header), so that the element doesn't hide inside the header, but instead sits just below the page header.
Here is the fiddle link. Please look through this and help me to solve out.
"http : //jsfiddle.net/harshavardhanks/pz1a3z2u/"
Here, on click the 'two' link on left hand index div, my page is scroll such that the title of 'two' section in the right side content div scrolls to the top behind the header "This is a header part" div. I need it top position below this div
Advanced thanks for any help regarding this.
You can add with pseudoselector :before a margin tall like the fixed header.
section > h1:before{
content: "";
display: block;
height: 1px;
float:right;
margin-top: 80px;
position: relative;
width: 100%;
}
section > h1{
margin-top:-80px;
position:relative;
}
Please check this fiddle:
http://jsfiddle.net/ff8rqr53/
I am trying to add a "sticky footer" to my web site based on skeleton but I can't get it to work correctly. I am doing this based on the instruction on this website: http://www.cssstickyfooter.com/using-sticky-footer-code.html. In Chrome I get an extra pixel or two in the height of the page which result in a vertical scrollbar and in IE the main container becomes left-aligned.
Any idea how I should implement this properly based on Skeleton? Thank you Dave for the great work!
I've developed a dead-simple pure-CSS solution to this now, located here. The solution is based on Skeleton 2.0.4 and basically consists of creating two separate skeleton containers/rowstacks: One for the header/body, another for the sticky footer.
Jquery
$(document).ready(function() {
var footerHeight = $('.footer').height()+30; // "+30" footer on to add space
$('body').css('margin-bottom',footerHeight);
});
Css
html {
position: relative;
min-height:100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
padding: 10px;
color: white;
background-color: #7bbc42;
}
If you prefer to have the footer only come into view if the user tries to scroll down to the very bottom of the page, put everything that goes above the footer into a single div that has a min-height of '100vh'.
On the demo link below, I am using jQuery slideUp and you will notice after it slides up, there is a quick jump of the content.
Do you know why this is? My html is valid (with the exception of the select option not having a label attribute..which I am still figuring out...). Do I have something positioned incorrectly?
http://demo.phppointofsalestaging.com/index.php
(Click login --> Sales -->Show Item Grid THEN Hide Item Grid to see the bug)
this inline style
<div style="margin-top: 39px;" id="content">
and line 724 of unicorn.css
#content {
...
margin-top: -39px;
...
}
... are conflicting with each other.
If you remove both, the page doesn't jump.
You have set a margin-top on the content div of 39px. This is only visible when you slide down the item grid. It seems to 'jump' when sliding back up because of this margin. Try setting the margin to 0px;
<div id="content" style="margin-top:0px;">
I played around a little bit and this is being caused by the margin-top:39px on your #content div, if you remove that and use top:39px instead of margin-top:39px on the #content element instead it doesn't jerk either - but it also causes the button to jump a bit on slideUp and slideDown so you will need to tweak the css of the button wrapper area like so:
To fix the button jumping issue:
#show_hide_grid_wrapper {
position: relative;
text-align: right;
padding: 10px;
}
As prev. answers mention, you have margin-top 39px on #content. Setting it to 0 will solve the problem, but it will also remove your beautiful dark gray section above the content. To get it back, add this to your CSS:
#content:before {
content: '';
display: block;
width: 100%;
height: 39px;
background: YOUR GRAY COLOR;
}