i want to create footer like footer on elementaryos.org
i don't know what css code that make the footer below the page container and will be unveiled when we scroll it down.
<!doctype html>
<html lang="en">
<head>
<title>Test page</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
nav{
background-color: yellow;
width: 100%;
position: fixed;
z-index: 2;
height: 70px;
}
.container{
padding-top: 80px;
width: 100%;
background-color: #dadada;
position: relative;
z-index: 1;
line-height: 3em;
}
footer{
background-color: #bababa;
height: 200px;
width: 100%;
position: relative;
z-index: 0;
}
</style>
</head>
<body>
<nav>
<h1>Navigation</h1>
</nav>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum enim odio, vel placerat dui aliquam sed. Vivamus rhoncus massa commodo nulla scelerisque accumsan. Nunc ac ligula velit. Mauris eu pharetra turpis, eget fermentum lectus. Maecenas ornare sem vel nisi accumsan, at placerat libero vulputate. Pellentesque sit amet neque ac est dapibus faucibus. Morbi pellentesque, dolor ut elementum mattis, lectus nunc auctor nulla, vel lobortis quam ante eu neque.
Mauris sed ligula in lorem rhoncus volutpat. Ut pulvinar dolor id bibendum mollis. Morbi eu facilisis risus. Nullam quis eros elit. Donec quis facilisis dui. Duis hendrerit, lectus id ultrices tincidunt, urna tellus convallis quam, eget vehicula ipsum arcu vitae nulla. Etiam tristique varius enim nec volutpat. Fusce non odio nec massa placerat aliquam id eu ligula. Nam nulla urna, iaculis sit amet nisi non, auctor congue magna. Suspendisse potenti. Duis vehicula consectetur feugiat.
Quisque ut luctus diam. Aliquam quis blandit eros. Vestibulum dolor velit, egestas non vehicula et, viverra in lacus. Donec luctus id libero at tincidunt. Donec in euismod tortor, id fermentum mi. Phasellus leo dui, placerat sed enim elementum, aliquet convallis mauris. Duis cursus mauris vehicula tortor auctor faucibus. Praesent euismod enim eget luctus facilisis. Donec condimentum, neque id convallis consectetur, lorem ipsum gravida nisl, vel fermentum lectus diam at magna. Aenean in urna sagittis, condimentum magna nec, egestas neque. Nulla gravida neque massa.
Nulla consequat, quam at fringilla mollis, nunc magna dapibus eros, ut ultrices sapien mauris eu libero. Duis sollicitudin orci posuere est vulputate, eu vestibulum mi vestibulum. Etiam eu elementum nisi, consectetur accumsan turpis. Sed dignissim sapien et posuere interdum. In adipiscing gravida enim vestibulum suscipit. Aliquam aliquet sem et dapibus mollis. Praesent quis lorem augue. Donec facilisis justo vel est pharetra, eget rhoncus magna ultricies. Suspendisse ac justo quis dui accumsan dignissim at non sapien. Cras vitae ultrices justo, quis venenatis nibh. Sed vestibulum adipiscing enim non volutpat. Duis ac euismod sapien. Pellentesque sit amet ornare velit. Duis venenatis tempus facilisis.
Sed sem lectus, mattis ut nunc sit amet, dictum sollicitudin sapien. Integer vitae ornare tellus. Vestibulum et cursus urna, vel aliquet mi. Duis lacinia tincidunt lorem. Cras sem felis, bibendum eu lorem luctus, dictum imperdiet augue. Quisque eleifend lectus pellentesque arcu faucibus tempus. Etiam sollicitudin in est eu lacinia. Curabitur faucibus in neque et imperdiet. Mauris libero enim, suscipit sit amet odio eget, molestie ornare ligula. Nam a lorem convallis, ornare nibh id, viverra tellus.
</div>
<footer>
Page footer
</footer>
</body>
</html>
here is the demo. Thanks a lot.
There you go: http://jsfiddle.net/8cxvr/2/
It's pretty simple, just give the footer a fixed position (= relative to window) and the container gets some margin on the bottom.
Relevant changes:
.footer {
position: fixed;
bottom: 0;
}
.container {
margin-bottom: 200px; /* footer-height */
}
To start, that is a horrible effect, please don't do that.
For a complete answer though, what they did is fixed the footer with positioning at the bottom of the page, and then gave it a lower z-index. So it's always at the position. Once you scroll past the content, the it comes into view. You can use a tool like IE Developer tools, or Firebug (for Firefox) to look at how they worked the code.
Related
I am trying to set a block of text in an HTML page using #page to create a printed output for multiple pages.
If set the div of the text block to position: fixed; bottom: 0; then it appears on every page.
If I set the HTML body to position: relative; and the div of the text block to position: absolute; bottom: 0; then it only appears on the first page.
How is it possible to position a block of text at the bottom of the last printed page? This is not a footer to appear in the margins but a block of text in the page that I am trying to position.
Any pointers would be appreciated.
My solution is as follows. Keep the footer fixed, but set z-index: -1 by doing this, the footer will always hide behind the text until the end of the text, its not a perfect solution, but its feasible solution to replicate your expected result.
html,
body {
margin-bottom: 20px;
}
.wrapper {
position: relative;
}
.footer {
z-index: -1;
position: fixed;
bottom: 0px;
text-align: center;
width: 100%;
}
.content {
z-index: 3;
overflow: hidden;
padding-bottom: 30px;
background-color: white;
}
#media print {
.footer {
position: fixed !important;
bottom: 0px;
}
}
<div class="wrapper">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc ex, iaculis ut maximus vel, euismod in enim. Aenean neque purus, vehicula rhoncus congue sed, sodales et nunc. Quisque pharetra tellus non auctor gravida. Sed in felis accumsan, dapibus
ex at, elementum urna. Maecenas ut massa faucibus felis aliquam scelerisque. Quisque at molestie nunc. Nullam est nibh, aliquam non augue vitae, tempus imperdiet massa. Mauris sed feugiat lectus. Aenean vel dapibus tortor. In dolor augue, dignissim
vel blandit eget, laoreet vel mi. In hac habitasse platea dictumst. Pellentesque metus ante, finibus in nisl ac, mollis blandit justo. Nulla a tincidunt orci. Proin malesuada ac est vitae eleifend. Donec tincidunt ipsum felis, ut feugiat dolor mattis
ac. Integer lectus tellus, tincidunt eget aliquet eu, mattis non dolor. Vivamus tempus sapien at sem aliquam, commodo rutrum quam pulvinar. Praesent eu leo sit amet risus malesuada porttitor quis quis augue. Cras placerat felis quis ligula auctor
fringilla. Cras efficitur tellus quis velit posuere, et aliquam libero egestas. Donec eu tincidunt felis, ut sodales erat. Phasellus vitae neque massa. Maecenas ut erat nibh. Aenean vitae ligula arcu. Maecenas justo velit, sagittis eget turpis ac,
tempus congue elit. Morbi egestas nisi risus, quis varius purus varius ac. Donec in viverra augue. Proin vel sem in enim volutpat rhoncus non sit amet diam. Nullam tellus lorem, tempus sit amet accumsan id, finibus ac turpis. Integer quis nunc id
tortor fermentum bibendum ut in leo. Cras magna velit, pellentesque sit amet dignissim non, aliquam eu odio. Quisque id tristique urna. Donec fermentum dolor vel pharetra placerat. Curabitur ullamcorper iaculis nulla quis sagittis. Proin scelerisque
ullamcorper porta. Praesent id odio ex. Sed in gravida augue, sed pretium erat. In hac habitasse platea dictumst. Proin congue dolor eu felis lacinia euismod. Aliquam varius, justo ut interdum dapibus, diam nulla molestie ante, eu pellentesque mi
</div>
<div class="footer">this is the footer</div>
</div>
I have a fixed header at the top of my page, but when I scroll up the content text stays on top of my header. I want the content to go behind the header.
I have tried adjusting the margins and using z-index, but nothing has worked thus far.
.header {
position: fixed;
border-bottom: 1px solid #000000;
width: 90%;
z-index: 1000;
}
.main {
position: relative;
top: 140px;
z-index: 1;
}
<header class="header">
<img src="">
</header>
<div class="main">
<h1>Hello World!</h1>
</div>
Your code is working as intended. However, you forgot to set the background color of your header which means it is transparent.
I did a few modifications to your snippet to make it a bit more obvious from the snippet but the important CSS is the background colour.
.header {
position: fixed;
border-bottom: 1px solid #000000;
width: 90%;
z-index: 1000;
background: #fff;
top: 0; left: 0; right: 0;
width: 100%;
height: 50px;
}
.main {
position: relative;
top: 140px;
z-index: 1;
}
<header class="header">
<img src="">
</header>
<div class="main">
<h1>Hello World!</h1>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis tellus at magna vulputate, sed tempus arcu finibus. Fusce cursus aliquam posuere. Cras sodales dolor vitae massa eleifend bibendum. Nunc pulvinar dui quis hendrerit pulvinar. Nam interdum, justo non tristique hendrerit, leo nibh posuere diam, sed facilisis est mauris id libero. Suspendisse eget lectus augue. Fusce eget justo ut enim convallis ornare. Maecenas tincidunt dui non lectus elementum rhoncus. Nam sed porttitor turpis. Fusce sit amet urna quis tellus tempus tempus vehicula id tortor. Maecenas tincidunt sit amet eros a ultrices.
</p>
<p>
Vivamus pharetra eget tortor ac imperdiet. Nulla vitae mauris a mauris convallis ultricies at non arcu. Sed blandit turpis quis purus dapibus ornare. Cras ultricies dignissim lorem, sed viverra leo elementum eget. Ut condimentum a nunc in auctor. Pellentesque quis tortor blandit, tincidunt sem et, vestibulum sem. Pellentesque tincidunt ligula ac lectus suscipit dictum. Integer ante ex, pulvinar sit amet laoreet ac, lacinia vel nisl.
</p>
<p>
Cras lacinia at nibh ac placerat. Donec ut molestie felis. Quisque non rutrum diam, a laoreet risus. Maecenas vitae cursus massa, ut ultricies ante. Donec sed sem vel lorem luctus consequat. Integer efficitur pulvinar nulla sed malesuada. Curabitur sollicitudin, libero sit amet cursus pharetra, massa risus auctor neque, vel luctus nulla massa sit amet erat. Quisque at vestibulum nulla. Vestibulum porttitor augue nec placerat scelerisque. Nulla sed augue ac est venenatis viverra vitae non enim. Nulla facilisi. Ut tincidunt est nec volutpat vulputate.
</p>
<p>
Aenean quam risus, ornare et lacus eu, ultricies lobortis metus. Sed ut eleifend nisl. Vestibulum sed odio lobortis, eleifend ex ac, lacinia dui. Nullam sagittis varius sollicitudin. Vestibulum vel nisi diam. Aliquam nulla dolor, porta id ultricies eu, vulputate nec ipsum. Suspendisse porta lectus in augue egestas dictum. Nullam felis sapien, pulvinar quis felis non, ultrices accumsan dolor. Curabitur at diam mollis, porttitor orci ut, posuere nulla. Suspendisse nec sapien eros. Sed sit amet cursus est. Etiam ut lectus ut purus dictum ornare vitae eget lacus. Quisque rhoncus auctor sollicitudin. Nulla feugiat est sit amet tristique hendrerit.
</p>
<p>
Praesent vel enim vel est tincidunt aliquet. Nullam feugiat odio id ante consectetur commodo. Nam sagittis accumsan enim, non faucibus lacus lobortis sit amet. Aliquam tellus dui, volutpat sed gravida sit amet, tincidunt nec diam. Ut rhoncus facilisis tortor, et eleifend sem sagittis id. Maecenas sed odio felis. Donec eu iaculis metus. Integer dignissim volutpat lectus, id ultricies nisl hendrerit sit amet. Donec egestas gravida felis. Aenean blandit iaculis elit, nec luctus tortor luctus ut.
</p></div>
</div>
I have a dynamically generated HTML page that has to be saved as pdf. The page has border that has to appear on the edge of the page thus in the #media print, I have set the #page size as A4 and margins as 0. The problem is that the content will get overwritten on the page border.
When I set the padding to the border, the top of the page first page gets properly printed but the content gets overwritten on the border at the bottom and in the remaining pages.
This can be clearly seen as shown in the images below.
Since I gave padding to the top border, the top of the first page is fine but not the bottom.
In this second page, the entire content gets inside the margin.
Here is the HTML for the same document.
body {
margin: 0px;
padding: 0px;
}
#pageborder {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 10px solid #F5821F;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
margin: 0px;
padding: 0px;
}
#pageborder2 {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 10px solid #F5821F;
margin: 0px;
padding: 0px;
}
#pageborder3 {
position: fixed;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
border: 3px solid #F5821F;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
padding-top: 90px;
padding-bottom: 90px;
}
#innerContent {
margin: 50px;
}
#media print {
#page{
margin: 0;
}
#pageborder3 {
padding-top: 90px;
padding-bottom: 90px;
}
}
<body>
<div id="pageborder">
</div>
<div id="pageborder2">
</div>
<div id="pageborder3">
</div>
<div id='innerContent'>
<h1>Test</h1>
<p>Lorem Ipsum</p>
</div>
</body>
A combination between page-break-inside: avoid and padding/margin on paragraphs will do the trick.
This will look strange if there are very large paragraph around the page break, as this will make a big gap at the bottom of the page, so you should divide the text in smaller paragraphs.
/* I have removed your pageborder styles from answer to only include
the relevant styles for the sollution to the problem. */
#page{
size: A4;
margin: 0;
}
#innerContent {
/* This is the margin around the content */
margin: 50px;
}
h1, h2, h3, h4, h5, h6, p, .flow-control
/* Add any element types here that can occur as top element in the document flow
or just add class="flow-control" where needed */
{
page-break-inside: avoid; /* Make sure no page breake inside a paragraph */
padding-top: 50px; /* Creates a buffer to enlarge the area for page break.
This is also the visual padding for the firs paragraph on each page. */
margin-top: -50px; /* Cancel the top padding for all except the first paragraph on each page. */
}
h1, h2{
margin-top: -20px; /* Reduce the cancelling of top padding, so that
these elements actually will have some top padding */
}
p {
padding-bottom: 20px; /* This is the margin between paragraphs and also
works as buffer size at bottom of the page */
}
<body>
<div class="pageborder" id="pageborder1"></div>
<div class="pageborder" id="pageborder2"></div>
<div class="pageborder" id="pageborder3"></div>
<article id='innerContent'>
<h1>Lorem Ipsum</h1>
<section>
<blockquote cite="https://la.wikisource.org/wiki/De_finibus_bonorum_et_malorum/Liber_Primus">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</blockquote >
<blockquote cite="https://www.quora.com/What-is-the-origin-of-lorem-ipsum-text">
There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
</blockquote >
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, justo quis elementum elementum, dui dolor accumsan ligula, vitae condimentum est magna a dui. Praesent accumsan mi eget augue cursus, vel maximus ante cursus. Nullam luctus massa gravida ipsum luctus dignissim. In eget turpis ut sapien consequat euismod. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac porttitor nisl. Fusce ac sapien eget lacus gravida pharetra non id risus. Donec luctus finibus commodo. Cras convallis in nunc a venenatis. Curabitur at nisi nec nisl semper sagittis sed vel sem.</p>
<p>Sed dictum massa quam, nec bibendum neque egestas non. Ut mattis lacus nisi, gravida hendrerit erat scelerisque sit amet. Nulla eget leo venenatis eros rhoncus bibendum et at quam. Morbi ac leo convallis, maximus velit et, porttitor justo. Aliquam erat volutpat. Donec aliquam ultricies nunc, vitae dapibus sapien sollicitudin non. Pellentesque ac diam ut odio posuere efficitur non finibus ante. Vivamus aliquam leo a suscipit finibus. Mauris a ex metus. Phasellus luctus augue sit amet ipsum venenatis, at imperdiet nunc sollicitudin. Cras iaculis lorem ac justo posuere, sed venenatis nibh fringilla.</p>
<p>Duis imperdiet euismod sem, id dignissim erat gravida vel. Duis nec nibh lectus. Donec in rhoncus sapien. Nulla nisi nisl, gravida at vulputate at, ornare id tortor. Nulla varius ligula ac turpis porta, non tristique leo efficitur. Quisque suscipit, est ut aliquam interdum, mi nulla pharetra metus, imperdiet imperdiet ex sapien sed metus. Integer sit amet lectus ut justo tincidunt laoreet sit amet ac ipsum.</p>
<p>Donec mollis tempus cursus. Mauris et tincidunt ante. Nam leo ex, volutpat non velit ac, imperdiet luctus tellus. Vestibulum vitae consectetur mauris, eu imperdiet dolor. Vestibulum viverra mi id diam viverra, at convallis ex bibendum. Nam mollis feugiat pulvinar. Maecenas neque ipsum, consequat a iaculis at, semper in ipsum. Vivamus a porta sapien. Fusce pulvinar, nulla at euismod semper, ipsum arcu vestibulum orci, sed egestas lectus odio et mi. Sed venenatis felis accumsan, consectetur orci sed, convallis risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin mattis, orci ac rutrum lobortis, odio tellus euismod mi, et scelerisque tellus massa ut risus.</p>
<p>Aenean in elit vitae risus pharetra suscipit eu sed risus. Maecenas sollicitudin nunc ac lacus fermentum tincidunt. Maecenas a pretium ipsum. In viverra eros sit amet lectus eleifend, at auctor velit mollis. Proin aliquam risus vel arcu pellentesque, eget volutpat justo facilisis. Nunc in ex tellus. Mauris euismod luctus commodo. Pellentesque arcu justo, aliquam ut quam in, egestas dapibus ante. Morbi facilisis mi nec leo semper laoreet. Aenean ac dolor vel erat suscipit vulputate. Praesent sit amet eleifend libero, sit amet viverra lorem. Ut eleifend lectus non tempus placerat. Praesent magna ipsum, porta sit amet mattis vel, condimentum eleifend magna.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas velit tortor, faucibus vitae rhoncus eget, laoreet vel sem. Proin interdum ut risus a tempor. Aliquam malesuada, tellus et luctus iaculis, est est aliquet nisl, volutpat elementum augue nunc ut lorem. Nulla facilisis ipsum vestibulum, iaculis magna in, maximus libero. Suspendisse tortor odio, euismod nec leo placerat, mattis varius elit. Suspendisse a ipsum vehicula, viverra metus eget, scelerisque dui. Suspendisse potenti. Vivamus a sapien eget felis mollis imperdiet.</p>
<p>Sed accumsan eu dolor nec vestibulum. Aenean interdum porttitor mattis. Curabitur finibus, erat nec posuere luctus, elit nisi imperdiet neque, eget maximus nulla dolor at justo. In sem odio, feugiat quis condimentum id, sodales id felis. Nulla facilisi. Vestibulum odio ex, blandit vel ullamcorper ac, tincidunt et justo. Vestibulum congue congue vehicula. Praesent tempor tortor ut tellus vulputate hendrerit. Proin lectus ante, dapibus eu laoreet varius, dictum sit amet lacus.</p>
<p>Integer vel mollis justo, quis commodo diam. Morbi cursus mauris nibh. Proin vestibulum ornare turpis, in consequat tellus condimentum quis. Praesent nulla magna, commodo sit amet molestie a, sollicitudin laoreet elit. Fusce ut augue vitae ligula commodo mattis sit amet non augue. Nulla a lectus purus. Sed sed consequat magna, in tempus quam. Cras sed consectetur nulla, tempus luctus ligula. Proin porttitor porttitor nisl, quis pretium turpis imperdiet id. Fusce commodo nulla sem, vitae gravida nulla molestie eu. Donec accumsan ex eget faucibus luctus. Ut leo eros, accumsan id aliquam et, aliquet at tellus.</p>
<p>Proin fringilla congue metus, ac semper ex aliquam ullamcorper. Integer porttitor tempor leo ac elementum. Vivamus a nisi vitae tellus interdum rhoncus. Nam eleifend ipsum sit amet enim feugiat, vitae pulvinar elit dignissim. </p>
<p>Vivamus tempus felis enim, non fermentum erat venenatis a. Morbi dolor ante, iaculis in nulla sit amet, eleifend aliquam nisl. Phasellus ultrices turpis ut ipsum molestie, a euismod sem venenatis. Duis a leo ac quam gravida sagittis nec vitae dui. Proin pellentesque, nulla sed fringilla malesuada, dui erat dignissim ex, eget sollicitudin enim purus pellentesque risus. Aenean a porta lacus, nec ullamcorper tellus.</p>
<div class="flow-control"><!-- This is to make sure there are no page brake
between the header and next paragraph -->
<h2>Header test</h2>
<p>Curabitur eros metus, maximus ornare mollis suscipit, commodo sed erat. Suspendisse dolor lectus, suscipit auctor risus a, malesuada auctor magna. Cras erat augue, venenatis luctus erat ac, ultrices pretium tellus. Mauris faucibus convallis euismod. Mauris tincidunt sit amet metus quis mattis. Quisque luctus quam rutrum mollis mollis. Donec velit tortor, iaculis in mattis sed, consequat vitae ligula. Vestibulum tempus lacinia blandit. Integer eleifend lacus id lorem feugiat, at varius sapien accumsan. Nam fermentum hendrerit lorem, et euismod diam tincidunt sit amet. Donec vitae dolor in nunc eleifend tincidunt. Curabitur vel maximus purus. Donec varius lorem justo, a commodo dolor vehicula in. In condimentum risus sed placerat condimentum. Ut enim ex, pellentesque eget metus vel, gravida viverra arcu. Suspendisse interdum leo ac porta vestibulum.</p>
</div>
<p>Fusce ipsum justo, convallis et venenatis id, tincidunt non orci. Nam vestibulum molestie egestas. Vivamus ultricies ultrices fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin sit amet dui porta, tempor nibh finibus, suscipit felis. Aenean rhoncus enim at imperdiet porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tellus eros, euismod sit amet gravida sit amet, mattis ut tortor. Fusce nec lectus a massa iaculis tempor. Morbi tortor ante, facilisis eget diam suscipit, dignissim pulvinar nulla. Nunc ultrices eros sed facilisis mattis.</p>
<p>Vestibulum lobortis metus velit, id cursus justo viverra id. Sed euismod nisi nunc, id malesuada nulla porttitor ultricies. Quisque cursus ut nisl eu vehicula. Ut a convallis nulla. Maecenas vehicula dolor a dui mattis, non sollicitudin lorem malesuada. Sed faucibus vulputate turpis in fringilla. Donec feugiat dui at nulla iaculis rhoncus. Mauris venenatis congue maximus. Vivamus maximus volutpat dictum. Cras vehicula sodales ante ut viverra.</p>
<p>Vivamus at rutrum justo. Vestibulum vulputate scelerisque convallis. Etiam vulputate nunc tempor tortor varius lobortis. Suspendisse ut posuere augue. Proin nunc metus, fermentum at tincidunt in, gravida ut massa. Curabitur eu ex tristique, accumsan justo in, luctus dui. Praesent a dolor eu tellus gravida lobortis sed ut magna. Nunc feugiat elit ultricies, bibendum lacus nec, cursus elit. Proin facilisis mauris a dolor imperdiet, vel lacinia enim rutrum. Sed tristique ultricies magna ac lobortis. Integer nec varius sapien. Vestibulum convallis finibus enim, sed tincidunt lectus scelerisque quis.</p>
<p>Nam faucibus lorem et ultrices luctus. Aliquam id pharetra nisi. Curabitur malesuada elit eget nisi imperdiet fringilla. Quisque orci eros, pulvinar eget finibus ut, mollis vitae magna. Nulla molestie massa at convallis facilisis. Maecenas sagittis facilisis feugiat. Quisque rutrum, urna at consectetur pellentesque, mauris dolor faucibus nisl, vel tristique leo est vitae magna. Curabitur fermentum dignissim nisi tincidunt rhoncus.</p>
<p>Suspendisse pretium enim volutpat, fringilla urna tempor, dictum metus. Nunc vel purus vel arcu molestie hendrerit. Vestibulum sed mollis mauris. Fusce nisi velit, imperdiet sed porttitor at, elementum at mauris. Quisque at magna volutpat, rhoncus velit volutpat, aliquet dolor. Ut metus ante, commodo non risus sed, congue posuere metus. Mauris a sem metus. Duis accumsan mi non facilisis mollis. Maecenas et dolor eget felis rhoncus pretium. Aenean vitae arcu cursus, ultricies massa vel, congue leo. Proin suscipit nisi odio, malesuada interdum nisi aliquam at. Aliquam ac congue magna.</p>
</article>
</body>
Add these lines of code in your CSS, it will work :)
#pageborder2:after{
content: "";
width: 92%;
background: #FFF;
height: 10px;
position: fixed;
margin-left: 15px;
top: 10px;
border-radius: 10px;
}
#pageborder3:after{
content: "";
width: 92%;
background: #FFF;
height: 10px;
border-radius: 10px;
position: fixed;
bottom: 10px;
}
I am creating a website in which the minimum height of the page is 200vh. I have a full page image, followed by text content below that. I want to prevent the text from overflowing out of the container. Here is an example:
* {
margin: 0;
padding: 0;
}
.container {
position: absolute;
width: 100%;
min-height: 200vh;
background: red;
}
.full-page-image {
background-image: url("https://i.ytimg.com/vi/xC5n8f0fTeE/maxresdefault.jpg");
background-size: cover;
position: absolute;
height: 100vh;
width: 100%;
}
.content {
position: relative;
top: 100vh;
left: 10vw;
width: 80vw;
}
.content p {
font-size: 1.4em;
}
<div class="container">
<div class="full-page-image">
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum leo at hendrerit pulvinar. Integer non lacus dapibus, dictum ipsum sed, gravida erat. Quisque fermentum fermentum arcu, ac sollicitudin est. Mauris nec pulvinar mi, eu eleifend nisi. Cras lorem ligula, condimentum eget dictum quis, dapibus et est. Quisque tincidunt libero sit amet odio tincidunt, quis bibendum neque malesuada. Proin elementum nulla diam, ac porta est sodales at. Cras ac tortor in odio scelerisque scelerisque. Vestibulum eu ligula semper, lacinia purus ac, auctor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vestibulum aliquam nisi ligula, scelerisque imperdiet ante consequat ut. Proin est dolor, egestas a sapien vitae, ultricies euismod ex. Nam eget euismod ante. Praesent finibus sed nisi tincidunt pretium. Vestibulum porta laoreet sapien, et congue odio posuere eu. Proin nec lectus vel libero vestibulum tincidunt. In dapibus a nisl eu imperdiet. Donec faucibus odio a metus sagittis, et vulputate dui dapibus. Etiam non ex libero. Duis ultricies dignissim nulla, in mollis sem condimentum vitae. Etiam tincidunt sed dolor vitae venenatis. Maecenas volutpat felis eu vehicula pharetra. Donec a turpis lacus. Aenean tortor justo, iaculis ut erat eu, rhoncus sagittis elit. Nullam non sapien purus. In at consectetur augue, sit amet mollis justo.
Suspendisse feugiat quam vitae massa tempor luctus. Duis aliquam commodo dolor et commodo. Aenean sit amet nisl vitae quam tincidunt molestie id ac enim. Fusce eu ante imperdiet, viverra lacus at, efficitur risus. Vestibulum placerat, libero quis luctus faucibus, diam nisl tempor justo, eu tempus mauris ligula in libero. Pellentesque ut odio quis orci interdum gravida vitae ut neque. In hac habitasse platea dictumst. Ut finibus mi vitae enim euismod auctor. Integer libero dui, laoreet vel euismod vitae, eleifend mattis urna. Praesent convallis sodales elit, vel elementum purus dapibus nec. Curabitur euismod ullamcorper dolor, a egestas nibh porttitor rhoncus. Nam elementum bibendum elementum.
Fusce non nibh quis odio tempor lobortis ut et lorem. Quisque volutpat dapibus mauris, vitae varius ipsum sollicitudin malesuada. Etiam ultricies sapien tortor, et vehicula ipsum volutpat sollicitudin. Nulla id nisl nunc. Sed sit amet iaculis lacus. Nulla egestas ex purus, eget elementum nibh molestie et. Vivamus sodales rhoncus varius. Donec malesuada, quam et pharetra aliquet, odio erat gravida nunc, nec vehicula tellus diam in purus. Curabitur feugiat tempor nulla, euismod ornare lorem consequat at. Nam rutrum arcu porta nulla convallis viverra. Mauris pharetra velit arcu, ac placerat quam ornare ut. Morbi vitae diam quis turpis fringilla ornare at in urna. Nulla elit lectus, molestie sit amet risus nec, pretium vehicula diam. Morbi velit massa, accumsan eget iaculis eget, pharetra at ex. Duis purus eros, iaculis nec enim at, dignissim pellentesque purus. Nulla convallis, erat quis elementum posuere, metus libero malesuada erat, eu pharetra mauris libero id lacus.
Curabitur placerat accumsan hendrerit. Proin vel mauris eget justo fringilla volutpat eget a libero. Nullam iaculis varius fringilla. Morbi in urna mi. Pellentesque sit amet lacinia odio. Nunc vel dolor aliquet, vulputate magna non, consequat purus. Mauris non malesuada est, nec congue ante. Sed sit amet vestibulum nunc, id hendrerit urna. Ut porta eget risus a tincidunt. Aliquam ut dui elit. Nulla quis varius sapien, vulputate auctor mi. Phasellus rhoncus vestibulum purus, vestibulum porttitor libero mattis in. Aenean elit velit, ultrices in lacinia et, lobortis id tortor. Quisque dapibus cursus lorem, et consequat tellus pretium eu. Maecenas vitae magna bibendum mi placerat pellentesque.
</p>
</div>
</div>
How can I prevent the text from going outside of the red background?
You can prevent text overflowing a container by either 1. expanding the container to fit the text, or 2. hiding the overflowing text beyond the container.
1:
a. In your case, usage of top: 100vh will not change the height of the element, but will push the entire element downwards 100vh. Therefore it will overflow the parent/container element (the red background) by 100vh. The text inside this element will reach to the bottom, also overflowing by 100vh. Use margin-top: 100vh instead, to let the element start 100vh from the top, but end within it's parent element.
2:
a. Ensure the container is the desired height. Use dev tools to view/highlight the height of an element.
b. Set overflow: scroll; or overflow: hidden; see css overflow This will hide the text beyond the container height, with either scrollbars or not. Note: overflow: auto will (should) not show scrollbars if there is no overflow.
Pretty sure this what you are looking for:
.container {
position: absolute;
width: 100%;
min-height: 200vh;
overflow-y: auto;
background: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
I asked this question which worked great for making text (top links) forced to the right after scrolling.
The issue is one on the page, when I scroll vertically, the top links stay on the top of the page even when I scroll down so they show above my main content.
What is a way to force text to be forced to the right but don't move when I scroll vertically?
Here is my CSS today:
#toplinks ul
{
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
border:medium none;
color:#2F6FAB;
cursor:default;
line-height:1.4em;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0 1em 0 1em;
text-align:right;
z-index:0;
font-size: 85%;
position:fixed;
right:0;
}
I think you want something like this. Correct me if I am wrong. I edited ptriek's code and fixed it so that the sticky thing doesn't move if the page is vertically scrolled but moves with the page keeping its position fixed if the page is horizontally scrolled.
The CSS code is the same:
#sticky
{
background:red;
position: fixed;
top: 0px;
right: 0px;
width: 206px;
padding: 0;
font-size: 0.6875em;
}
p {
width:1000px;
}
But the JavaScript code is slightly modified:
$(window).scroll(function(event) {
$("#sticky").css("margin-top", 0-$(document).scrollTop());
});
Alternately, this can be done without JavaScript as Aaron has suggested. You can see the effect here.
I hope it works.
You can use z-index to make your relatively-positioned content overlay your fixed content when scrolled, as per this example: http://jsfiddle.net/R4jEj/.
You'll need a combination of CSS + jQuery to achieve this. My answer was inspired by this question, which does the exact oposite.
http://jsfiddle.net/hEvSu/
The JS:
$(document).ready(function () {
var o = $("#sticky").offset();
s = o.left;
});
$(window).scroll(function () {
$("#sticky").offset({ left: s - $(window).scrollLeft() });
});
The CSS:
#sticky {
background:red;
position: fixed;
bottom: 35px;
right: 0px;
width: 206px;
}
p {
width:1000px;
}
May be for that page you can define position:absolute instead of position:fixed.
Like this:
#fixed {
position: absolute;
height: 20px;
padding: 5px;
background-color: #333;
color: #fff;
right: 0;
top:0;
}
#container {
margin-top: 30px;
padding: 5px;
}
http://jsfiddle.net/R4jEj/2/
Try this
<div id="header">
<div id="right">
<div class="link">test</div>
</div>
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam erat nulla, rhoncus vel vestibulum a, adipiscing et eros. Curabitur nibh est, mattis ac euismod quis, dapibus vitae mauris. Nam scelerisque augue sit amet justo vulputate laoreet. Nulla eu est metus. Nulla tristique, lorem sit amet lobortis sodales, purus felis congue mi, id auctor ligula urna ac massa. Praesent venenatis vulputate porttitor. Fusce eget justo dolor. Praesent vel ipsum id metus bibendum porta. Nunc gravida, tortor non tincidunt posuere, ante turpis bibendum nulla, sed ultricies sem felis et arcu. Maecenas faucibus lectus sed nibh tincidunt sed vulputate massa tristique. Curabitur pulvinar, ante a luctus ornare, ipsum massa faucibus tellus, et faucibus odio orci sed arcu. Suspendisse tincidunt rutrum lorem malesuada viverra. Duis eleifend lobortis augue, ut gravida odio scelerisque ac. Phasellus bibendum hendrerit eros, nec adipiscing neque dignissim ut.
<br/><br/>
Praesent dictum hendrerit felis quis porttitor. Duis at tortor eu nibh cursus pretium in vitae libero. Maecenas pellentesque orci non urna facilisis id interdum massa aliquet. Etiam dictum, orci non egestas eleifend, nulla tortor tristique turpis, ut porttitor elit ante in est. Ut pretium urna at lacus auctor convallis. Curabitur mi risus, euismod nec pharetra et, viverra dictum justo. Phasellus accumsan luctus libero, nec sollicitudin augue tristique non. Vivamus vulputate metus quis arcu varius ac aliquet libero elementum. Suspendisse consequat feugiat lacus ut pellentesque.
<br/><br/>
Proin lacus lorem, rhoncus sit amet tincidunt semper, convallis eu quam. Sed bibendum rutrum velit, imperdiet ultrices odio condimentum a. Donec ac justo turpis, quis laoreet massa. Phasellus eu massa nisl, et laoreet quam. Suspendisse potenti. Maecenas odio risus, euismod interdum egestas vel, interdum non diam. Nunc luctus adipiscing orci pulvinar gravida. Quisque dapibus enim in mauris imperdiet vel vehicula lorem imperdiet. Aenean vel ligula libero. Maecenas sit amet tortor eu dolor rutrum hendrerit at a orci. Aliquam erat volutpat. Vestibulum eu vehicula est. Vestibulum non metus quam, eu molestie magna. Duis venenatis malesuada tincidunt.
<br/><br/>
Nam sed metus lacus. Sed ac sapien tellus. Maecenas eleifend sodales diam sit amet aliquam. Quisque libero justo, egestas at scelerisque nec, dictum et libero. Quisque sollicitudin, dui sed lobortis viverra, risus ante condimentum urna, hendrerit varius augue tellus non purus. Maecenas id erat lorem, vel mattis mauris. Morbi sed elit ut metus laoreet congue. Phasellus ac urna diam. Duis faucibus varius magna, eu lacinia nisl tempor id. Ut facilisis quam et augue consectetur at vestibulum risus imperdiet. Curabitur sed tellus ante, et ultrices diam. Duis sem leo, venenatis quis ornare in, viverra et enim.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
<br/><br/>
Proin mattis molestie molestie. Suspendisse potenti. Nam luctus, urna in laoreet volutpat, nisi orci mattis nisl, sed pretium massa ligula sit amet elit. Nam quis tellus mi. Donec hendrerit justo sit amet est aliquet adipiscing. Fusce et urna eros. Nulla non magna arcu, sed tristique eros. Nunc id velit felis. Praesent nec lorem purus. Cras a sapien ipsum. Sed placerat suscipit leo vitae mollis. Nam sit amet ligula nisl, ac egestas ante. Maecenas libero est, porttitor in molestie vitae, auctor sit amet orci. Maecenas fermentum molestie tellus, quis facilisis est mattis et. Vestibulum ligula metus, iaculis vitae posuere at, mollis a eros.
</div>
CSS
#header{ border: 1px solid black;background-color: #888888;
height: 30px;
position: fixed;
top: 0;
width: 100%;}
#right{position:relative;right:0;}
#container{margin-top:40px; width: 2000px;}
.link{ border: 1px solid red;
color: yellow;
font-weight: bold;
padding: 1px;
position: absolute;
right: 3px;
top: 3px}
check this code at fiddle also
http://jsfiddle.net/2MZwr/14/
Let me know if this is not fix your problem.
I think you should use position: absolute instead of fixed. Note that the positioning will be relative to the first element that you have given a position:relative. So you could write:
body { position: relative; }
ul { position: absolute;
top: 20px;
right: 0px;
/* if you want the content to overlap everything, you should set the z-index */
z-index: 1;
}
The reason that your first try with absolute positioning didn't work out is probably because you didn't set a relative element, in wich case it will be relative to the browser window. So if you scroll, the links will move;)
If you can alter the HTML a bit, you can achieve the desired effect by simply putting the top links in the first root-level div, and everything else in the second root-level div.
<html>
<head>
<style type="text/css">
#foo{position: absolute; height: 20px; border:2px solid red; background: gray; top:0; right: 0;}
#bar{overflow:auto; width:100%; margin-top:24px;}
</style>
</head>
<body>
<div id="foo">Links Links Links Links Links Links Links Links Links Links Links Links</div>
<div id="bar"><img alt="The rest of the page goes here" src="https://www.google.com/images/nav_logo99.png" width="2000"></div>
</body>
</html>
Simple answer: *"To not make it move around when scrolling, you need to define the vertical position. FIXED expects both horizontal as well as vertical positioning. So you have the option to go
position:fixed;
right:0;
top:0;
or
position:fixed;
right:0;
bottom:0;
Then, you'll need z-index to make sure that - when things start overlapping - the correct div/layer/whatever is the topmost and therefore the visible one, hiding the lower z-index underneath it.
An alternative layout option...
... would be to give the parent container/element a
position:relative;
and then position the child elements as you like using
position:absolute;
top:0;
left:0;
or whatever position you want to give them.