i'm using a wordpress template called "Lay Theme" and i want the information-text to be fixed on the left of my site. I fixed it using position:fixed, but when i scroll down and the text is slightly longer than other, it overlays the footer.
I want the text to move up when te footer appears, how do i fix this?
I gave the text-div the class "uitleg" (dutch for information)
Here is the example: https://www.zwtsr.nl/housenation-x-ade/
.uitleg position: fixed; top: 45%; }
Try to use "position: sticky;"
.container {
width: 1400px;
margin-left: auto;
margin-right: auto;
}
.content {
height: 2000px;
}
.content .text {
width: 50%;
position: sticky;
top: 50%;
}
footer {
width: 100%;
height: 1080px;
color: #fff;
box-sizing: border-box;
padding: 40px;
background: #212121;
}
<div class="container">
<div class="content">
<div class="text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
<footer>
footer
</footer>
Related
I need to create the illusion that an article's content is sliding underneath it's title when scrolling the page. The HTML looks like this:
<div class="wrapper">
<div class="header">
<h1>Title</h1>
</div>
<div class="body">
<p>a lot of content</p>
</div>
</div>
CSS looks like this at this point:
.wrapper{
height: 100vh;
width: 50%;
margin-left: 25%;
margin-top: 100px;
position: relative;
}
.header{
padding: 20px;
background-color: #fff;
position: fixed;
display: block;
box-sizing: border-box;
width: calc(50% - 8px);
z-index: 2;
}
.body{
z-index: 1;
top: 120px;
position: absolute;
padding: 20px;
background-color: #fff;
}
https://jsfiddle.net/joris508/frad472j/
Because there's an image in the background of the real website, I can't just put an element with a higher z-index to the top to hide that part.
I also tried to make the content portion (.body) scrollable itself. That created the right effect visually, but because the background-image on the page has a parallax scroll effect, scrolling the div itself caused problems.
Is there any solution to this problem?
I've made a footer section which is placed at the bottom of my webpage. I ran into a problem when the content of my webpage is smaller than the height of the browser viewport, which leaves a blank space between the footer and the end of the page. I tried to solve it by using this piece of css.
.footer {
position: absolute;
bottom: 0;
height: 125px;
}
It worked perfectly on my webpages with little content but for big webpages, the footer had overlapped the content. I followed a few online tutorials but I still can't make it right.
<body class="bg-1">
<div class="container-full">
<div class="container">
...
</div>
</div>
<div class="footer text-center">
...
</div>
</body>
.container-full {
width: 100%;
height: 100%;
padding-top: 70px;
margin: 0 auto 125px;
}
.bg-1 {
background: url(../img/1.png) no-repeat center center fixed;
background-size: cover;
height: 100%;
}
.footer {
position: absolute;
bottom: 0;
height: 125px;
}
I am using Twitter Bootstrap.
You can try following Method:
html,
body {
height: 100%;
}
.container-full {
table-layout: fixed;
background: #ccc;
display: table;
height: 100%;
width: 100%;
}
.footer {
display: table-footer-group;
background: #2f2f2f;
overflow: hidden;
color: #fff;
width: 100%;
height: 1%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body class="bg-1">
<div class="container-full">
<div class="container">
<p>Main Content goes here</p>
</div>
<div class="footer text-center">
<p>Footer text goes here..</p>
</div>
</div>
</body>
this is a tricky one...
Say if I have the following: (see diagram).
If the content + 'content footer' does not exceed the scrollheight I need the 'content footer' to be positioned at the bottom of the page. (See image, example A)
If the content + 'content footer' exceeds the scrollheight, Then as the content increases, I want to have the 'content footer' flow after the main content just as if it were another block element, but be the full width of the page. (See image example B)
It could be made with flex
http://codepen.io/HerrSerker/pen/GpaxNJ
#content-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;right: 0;
bottom: 0;
height: 100%;
width: 100%;
overflow-y: visible;
}
#content {
width: 400px;
margin: 0 auto;
background-color: silver;
padding: 20px;
}
#actual-footer {
position: fixed;
bottom: 0;
left: 0;right: 0;
height: 20px;
background-color: gold;
text-align: center;
padding: 5px;
}
#content-footer {
margin-bottom: 30px;
background-color: blue;
color:white;
text-align: center;
padding: 5px;
padding-top: 50px;
}
body {
padding: 0;
margin: 0;
overflow-y: scroll;
}
body,html {
height: 100%;
}
<div id="content-wrapper">
<div id="content">
<h1>Content</h1>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
<div id="content-footer">Content Footer</div>
</div>
<div id="actual-footer">Actual Footer</div>
edit
If flex is no good, you should try using display table, table-row and table-cell
I've got a breakout CSS here: http://codepen.io/HerrSerker/pen/PqjBrg
It works by wrapping the content-footer with two divs
<div class="breakout"><div class="breakout_back"> with the style
.breakout {
position: relative;
left: 50%;
width: 100vw;
text-align: center;
}
.breakout .breakout_back {
position: relative;
left: -50%;
}
This is only compatible with browsers which support 100vw (view width) units:
http://caniuse.com/#feat=viewport-units
A different strategy would be: Every content has 100% width by default. And every content should deal with it's width for itself
I'm working with Rails 3.2 and Ruby 4.
I have the following footer:
<div class="container">
<footer class="footer">
<p class="pull-right">Back to top</p>
<p class="pull-left">© <%= Date.current.year %> Company, Inc. · Privacy · Terms</p>
</footer>
</div>
And the following CSS for this:
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
.footer p {
position: absolute;
bottom: 0;
}
body {
margin-bottom: 60px;
}
I'm basically trying to combine the Bootstrap footer from http://getbootstrap.com/examples/sticky-footer/ and http://getbootstrap.com/examples/carousel/.
Problem: Vertically the footer positions as desired. Horizontally what should be floated to the left also positions correctly. The problem is that what should float to the right is positioned over the text that is floated left, i.e., "Back to top" floats over the other text.
Minor issue: Also, when I don't add class="footer" in it doesn't implement the CSS for the footer.
The problem is that your CSS is making the p tags inside the footer absolutely positioned. Remove that and it works. Additionally, I would tidy up your CSS by adding these lines to the footer tag, this will stop the footer floating off to the right.
left: 0;
padding-left: 50px;
padding-right: 50px;
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
left: 0;
padding-left: 50px;
padding-right: 50px;
}
.footer p {
bottom: 0;
}
body {
margin-bottom: 60px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="container">
<footer class="footer">
<p class="pull-right">Back to top</p>
<p class="pull-left">© 2015 Company, Inc. · Privacy · Terms</p>
</footer>
</div>
I am trying to generate pdf using Dompdf. I have the following script for the design of my generated pdf.
<html>
<head>
<style>
#page { margin: 180px 50px; }
#header { position: fixed; left: 0px; top: -180px; right: 0px; height: 120px; background-color: orange; text-align: center; }
#footer { position: fixed; left: 0px; bottom: -180px; right: 0px; height: 150px; background-color: lightblue; }
#footer .page:after { content: counter(page, upper-roman); }
</style>
<body>
<div id=\"header\">
<h1>Charlie Sheen</h1>
</div>
Hi, This is Charlie Sheen <br>
<p> Winning </p>
<p> Winning </p>
<p> Winning </p>
<p> Winning </p>
<p> Winning </p>
<p> Winning </p>
<p> Winning </p>
<div id=\"footer\">
<p class=\"page\">Page </p>
</div>
<div id=\"content\">
<p>the first page</p>
<p style=\"page-break-before: always;\">the second page</p>
</div>
</body>
</html>
When I generate the PDF it looks like the image above. Now my problem is I want my content to start from a little upper than it starts from now. If you notice the image above there is a sentence "Hi, this is charlie Sheen"... I want this to start from a little upper. I have tried to add the following code inside the style but it doesn't work:
#content { position: fixed; margin-top: 0px;}
Would you please kindly help me to get the content start from a little upper?
Thanks in Advance :)
You're pushing the body in 180px from the top and bottom of the document with #page { margin: 180px 50px; }. However, the height of your header is only 120px. So there will naturally be 60px of space between your header and body content. You should either increase the size of your header or decrease the #page margins.
<html>
<head>
<style>
#page { margin: 120px 50px; }
#header { position: fixed; left: 0px; top: -120px; right: 0px; height: 120px; background-color: orange; text-align: center; }
#footer { position: fixed; left: 0px; bottom: -120px; right: 0px; height: 150px; background-color: lightblue; }
#footer .page:after { content: counter(page, upper-roman); }
</style>
<body>
<div id="header">
<h1>Charlie Sheen</h1>
</div>
<div id="footer">
<p class="page">Page </p>
</div>
<div id="content">
<p>Winning!</p>
<p style="page-break-before: always;">Winning!</p>
</div>
</body>
</html>
(Your original code, cleaned up a bit.)
Changing the margin on the #content will not make a difference because #content is way down the page.
I would consider wrapping the first sentence in p tags, like so
<p>Hi, This is Charlie Sheen</p>