I have some A4 sized divs with different amount of content. I try to place footers in each page with page numbers. Footer should be fixed on the bottom of the page.
.page {
border:1px solid;
width: 210mm;
height: 297mm;
margin: 10px;
padding: 20px
}
.footer {
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet diam sit amet magna dapibus, a mollis nisi tempus. Etiam hendrerit nec dolor ac euismod. Aenean dignissim eget massa congue vestibulum. Duis volutpat semper dictum. Mauris ut magna ultricies, sagittis urna pretium, convallis est. Curabitur nisl turpis, vehicula vel luctus eu, laoreet ac neque. In congue in nulla vitae luctus. Proin quis felis consectetur, sodales elit vitae, laoreet quam.</p>
<p>Cras pharetra, metus blandit dignissim mollis, libero erat ultrices augue, porttitor finibus velit lacus eu elit. Sed sit amet nulla gravida, interdum erat iaculis, congue sapien. Donec id magna eget sem tincidunt vulputate in vitae tortor. Proin malesuada ut leo et pharetra. Cras enim lacus, pellentesque quis mauris eget, fringilla venenatis risus. Proin varius dui eget rhoncus auctor. Praesent non egestas lorem, eget placerat nunc. Maecenas aliquet orci turpis, quis elementum sem laoreet id. Praesent metus leo, laoreet sed mollis ut, feugiat ut arcu. Vestibulum tempus elit eu neque maximus, eu vulputate leo ullamcorper. Nam commodo sem risus, vitae viverra felis lobortis a. Nulla ac leo nisl. Sed nec lobortis lacus.</p>
<div class="footer">FOOTER page 1/2</div>
</div>
<div class="page"><p>Praesent non justo vitae neque viverra malesuada. Mauris sagittis venenatis diam, sed aliquet nisl sollicitudin id. Suspendisse potenti. Nullam et ornare orci. Nunc eleifend pulvinar leo, vitae viverra lorem. Nunc hendrerit pellentesque consectetur. Vivamus lectus urna, iaculis vel lectus eu, tempus laoreet quam. Integer commodo tincidunt nunc vitae hendrerit. Mauris eget ex ipsum. Mauris pellentesque iaculis metus, vel convallis tellus rutrum sit amet. Pellentesque pretium faucibus justo ut hendrerit. Phasellus vehicula blandit efficitur.</p>
<div class="footer">FOOTER page 2/2</div>
</div>
</body>
</html>
Here is a JsBin too, to play with.
When you're using position: absolute you have to correctly identify containing block:
If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky) (from MDN).
In your case there's no containing block with position value other than static - so .footer elements position themselves relative to root html element.
Set position: relative on .page and everything will work:
.page {
border:1px solid;
width: 210mm;
height: 297mm;
margin: 10px;
padding: 20px;
position: relative;
}
.footer {
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="page">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet diam sit amet magna dapibus, a mollis nisi tempus. Etiam hendrerit nec dolor ac euismod. Aenean dignissim eget massa congue vestibulum. Duis volutpat semper dictum. Mauris ut magna ultricies, sagittis urna pretium, convallis est. Curabitur nisl turpis, vehicula vel luctus eu, laoreet ac neque. In congue in nulla vitae luctus. Proin quis felis consectetur, sodales elit vitae, laoreet quam.</p>
<p>Cras pharetra, metus blandit dignissim mollis, libero erat ultrices augue, porttitor finibus velit lacus eu elit. Sed sit amet nulla gravida, interdum erat iaculis, congue sapien. Donec id magna eget sem tincidunt vulputate in vitae tortor. Proin malesuada ut leo et pharetra. Cras enim lacus, pellentesque quis mauris eget, fringilla venenatis risus. Proin varius dui eget rhoncus auctor. Praesent non egestas lorem, eget placerat nunc. Maecenas aliquet orci turpis, quis elementum sem laoreet id. Praesent metus leo, laoreet sed mollis ut, feugiat ut arcu. Vestibulum tempus elit eu neque maximus, eu vulputate leo ullamcorper. Nam commodo sem risus, vitae viverra felis lobortis a. Nulla ac leo nisl. Sed nec lobortis lacus.</p>
<div class="footer">FOOTER page 1/2</div>
</div>
<div class="page"><p>Praesent non justo vitae neque viverra malesuada. Mauris sagittis venenatis diam, sed aliquet nisl sollicitudin id. Suspendisse potenti. Nullam et ornare orci. Nunc eleifend pulvinar leo, vitae viverra lorem. Nunc hendrerit pellentesque consectetur. Vivamus lectus urna, iaculis vel lectus eu, tempus laoreet quam. Integer commodo tincidunt nunc vitae hendrerit. Mauris eget ex ipsum. Mauris pellentesque iaculis metus, vel convallis tellus rutrum sit amet. Pellentesque pretium faucibus justo ut hendrerit. Phasellus vehicula blandit efficitur.</p>
<div class="footer">FOOTER page 2/2</div>
</div>
</body>
</html>
As #fen1x said, you have to set the position of parent div to relative. Just add this CSS rule.
.page{
position: relative;
}
Related
OVERVIEW
I am building a website to showcase my blockchain and cybersecurity projects I'd worked with. So far, I'd implemented two pages of my website using bootstrap v5.1.3. I'm no front-end developer, but still I wanted to build something of my own.
Currently, I'm writing the description of one of my projects, and later I will add some images into it.
PROBLEM
I'm currently facing the issue of an horizontal bar showing if I write too much paragraphs in the page and I don't know how to make it disappear.
I'm trying to solve this issue so that all the paragraphs are responsive and only appear within the viewport width of a screen, and don't overflow creating the horizontal bar.
Check the image below for a better explanation.
IMAGE
QUESTION
How can I solve this only using bootstrap v5.1.3?
WEBPAGE CODE
/* test.css */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: Hack, monospace !important;
background-color: #0f0f0f;
}
body {
display: flex!important;
}
.wrapper {
background-color: #0f0f0f;
}
.text-center.h1 {
color: #F4364C !important;
font-size: 4vw !important;
}
.h6 {
color: #F4364C !important;
font-size: 1.25vw !important;
opacity: 0.5 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Joshua">
<title>Project 1 | XXX XXX</title>
<!-- hack fonts -->
<link href='https://cdn.jsdelivr.net/npm/hack-font#3.3.0/build/web/hack.css' rel='stylesheet' >
<!-- stylesheet -->
<link href='test.css' rel='stylesheet'>
<!-- bootstrap-5.1.3 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- bootstrap-5.1.3 script bundle with popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="d-flex flex-column min-vh-100 min-vw-100 wrapper">
<!-- Project Title -->
<div class="container-fluid my-auto">
<p class="text-center h1"><span>Astronomy Star Registry</span></p>
</div>
<div class="container-fluid my-auto">
<p class="h6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non nibh sit amet eros ullamcorper tincidunt. Curabitur sed imperdiet erat. In facilisis urna magna, ut mollis est posuere nec. Duis non neque vel libero dignissim dictum. Nullam scelerisque, sem porttitor dignissim blandit, enim felis condimentum enim, non cursus felis ex vel felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc lectus odio, finibus nec porta non, varius pulvinar eros. Aenean eget vulputate lorem, sed mollis ipsum. In mollis iaculis sem, quis sodales metus sodales quis. In nec efficitur libero, quis pharetra turpis. Nunc a felis vestibulum lacus feugiat euismod. Integer id diam a arcu dictum imperdiet nec at libero. Aliquam lorem dui, faucibus non posuere vel, venenatis vel augue. Aenean lorem ex, eleifend ut dictum a, semper nec risus. Nunc varius erat tortor, vitae sagittis sem vehicula non.
</p>
<p class="h6">
Aliquam erat volutpat. Pellentesque sagittis, nisi ac tempor lobortis, lacus neque posuere libero, vel maximus nibh dui non massa. Nulla at lectus vestibulum, tristique nisi at, vulputate ex. Vestibulum sit amet pharetra tortor. Sed felis nulla, finibus ut ipsum eget, pretium mollis quam. Proin urna metus, cursus non turpis vel, elementum blandit nulla. Nulla eu accumsan ipsum. Donec sodales tellus a turpis dapibus tincidunt. Praesent luctus vestibulum magna, ac feugiat metus ullamcorper eu. Mauris non elementum nunc, sed sagittis risus. Cras sed elit laoreet, faucibus ligula quis, tempus quam. Donec posuere eget eros eu pulvinar. Vestibulum justo augue, feugiat elementum erat sit amet, tempor porttitor urna. Integer malesuada mauris et ultricies sollicitudin.
</p>
<p class="h6">
Cras hendrerit quis velit vel molestie. Proin ut velit metus. Sed semper et neque non rhoncus. Cras semper dui eget eros tempus, sed malesuada nisi dignissim. Aliquam ante dolor, ultricies quis varius at, pellentesque nec urna. Mauris sit amet commodo nulla, ac malesuada lacus. Proin bibendum quis quam vel volutpat. Ut pulvinar tincidunt vehicula.
</p>
<p class="h6">
Phasellus sit amet vulputate neque, id mattis velit. Vivamus porttitor tellus ac est dictum lacinia. Aenean tincidunt tempus fringilla. Sed aliquam nibh ut turpis condimentum, eget malesuada nibh iaculis. Ut tincidunt at nisl vel tristique. Nam quam nunc, lacinia eget augue dictum, aliquet aliquam lectus. Aenean eleifend quam nec est tempus imperdiet.
</p>
<p class="h6">
In nec leo at tellus bibendum blandit sodales at neque. Sed vel dolor in tellus lobortis imperdiet venenatis in lectus. Ut ex ex, bibendum in fringilla et, vestibulum id mauris. Nam eu lorem nisi. Donec vitae fermentum est. Quisque sodales imperdiet felis, viverra consectetur enim egestas a. Duis leo orci, malesuada nec dolor ac, efficitur consequat dui. Aliquam lobortis commodo viverra.
</p>
<p class="h6">
Nunc vulputate ultricies metus in molestie. Mauris ultrices metus feugiat augue mollis ultrices. Quisque ac mattis enim, sed suscipit orci. Fusce eu enim tempor, bibendum ligula quis, faucibus ligula. Aenean nec iaculis tortor, eu suscipit sem. Proin in elit at lectus euismod lacinia. Quisque ac auctor felis, eget ultrices orci. Curabitur accumsan, massa dictum pellentesque feugiat, mauris velit tincidunt mi, ut porta nisl nibh id nisi. Nam non facilisis arcu. Aliquam eros est, elementum a leo sit amet, porttitor euismod ligula. Maecenas tellus massa, molestie ut ultrices at, finibus ac mauris.
</p>
<p class="h6">
Aliquam congue faucibus libero. Aenean sed suscipit ipsum. Aenean varius eleifend metus in pulvinar. Ut dapibus condimentum vehicula. Sed dictum arcu nulla, eget semper turpis fermentum at. Nam congue pretium rutrum. Mauris sit amet mauris sagittis, pulvinar nunc et, posuere diam.
</p>
<p class="h6">
Nunc tortor elit, interdum eget lacinia sed, tincidunt quis ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et nunc eu nibh pulvinar eleifend. Pellentesque porttitor feugiat placerat. In at felis est. Etiam scelerisque velit pharetra, blandit erat non, mattis ex. Aenean congue tortor nec diam maximus, eget auctor nisi accumsan. Sed at dignissim sem, eu placerat tellus. Curabitur lobortis dui nec lorem gravida pellentesque. Duis sagittis, tortor sit amet dapibus finibus, nisi lacus maximus tellus, nec convallis orci velit non libero. Cras sodales, sem in sodales tincidunt, nisi magna facilisis felis, imperdiet elementum erat turpis a dui. Duis non felis pretium, viverra dui eget, condimentum erat. Nunc lobortis convallis felis, ac scelerisque sem cursus a. Ut in gravida tortor. Cras porttitor sapien sem. Aenean cursus erat et libero scelerisque placerat.
</p>
<p class="h6">
Suspendisse potenti. Sed varius ipsum sem, imperdiet vehicula orci pharetra sit amet. Nulla facilisi. Integer faucibus sed tellus quis cursus. Donec lacinia varius ipsum, vitae bibendum justo pharetra vel. Nunc facilisis a dolor sit amet maximus. In nec leo iaculis, pharetra tortor ac, imperdiet arcu. Duis non rhoncus enim, vehicula tincidunt orci. Ut in augue at ante sagittis efficitur ac eget tortor. Nunc eget felis ac quam tempor volutpat. Phasellus id volutpat tortor. Sed cursus eros at interdum convallis. Morbi ullamcorper felis eget massa porttitor pulvinar sed vitae purus. Ut iaculis ante eget ipsum congue, ut efficitur diam condimentum. Etiam lobortis dolor est, sed fringilla diam placerat eget.
</p>
<p class="h6">
Vivamus consectetur, nisi in dapibus vehicula, ipsum eros congue nunc, a posuere nisl mauris vitae sem. Sed interdum placerat commodo. Quisque id molestie sapien. Vestibulum vitae tempus ligula. Morbi eu molestie risus. Vivamus ac sapien tincidunt, hendrerit nibh ut, sagittis lacus. Maecenas pellentesque elementum libero non pretium. Proin in sodales massa. Praesent eu blandit libero. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
</div>
</div>
</body>
</html>
Please remove min-vw-100 class from your div
<div class="d-flex flex-column min-vh-100 wrapper">
I was wondering if there is a way to make a div with position fixed immobile, so if the user scrolls the div will be immobile to the initial position. I need it because I have a toast spawning inside another div, and I need this toast in foreground otherwise it will spawn inside the div (with scrollbar and partially visible).
That's an example image to explain better:
With position absolute:
With position fixed (the desired effect):
That's my component code (it's a child component):
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position:absolute; z-index:999; left:80%; width:300px;opacity:1;cursor:unset !important" *ngIf="!isCollapsed && onlyOnePopup == dataItem.Id">
<div class="toast-header" style="background-color: #00549F;">
<strong class="mr-auto" style="color:#fff;"></strong>
<button (click)="onlyOnePopup = null && isCollapsed = true" type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true" class="close" style="color:white;">×</span>
</button>
</div>
<div class="toast-body" style="font-family:Font; white-space:pre-line; color:black; cursor:unset">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
</div>
Use position: fixed, and then set the exact position that you want. Here's a snippet showing you an example of how to do it.
body {
height: 2000px;
background-color: aqua;
}
.fixed-div {
width: 200px;
heigth: 200px;
background-color: white;
padding: 50px;
position: fixed;
top: 0px;
right: 0px;
margin-right: 20px;
margin-top: 20px;
}
<html>
<head></head>
<body>
<div class="fixed-div">
Fixed Div
</div>
</body>
</html>
Instead of left: 80% try bottom: 0; right: 0 along with position: fixed; and then set right-margin accordingly.
the main thing is to set the height of html as 100vh (veriable height) and width to 100vw(veriable width). this will set your page to 100% of the space available in the browser window regardless of size. then set the toast div to fixed with the right and bottom set where you like (0 for bottom and right puts it in the lower right corner completly)
you cannot set a fixed point with no reference to what it should be fixed to. so by setting the html page size explicitly, the fixed position can be set based off that.
html {
height: 100vh;
width: 100vw;
}
.toast {
position: fixed;
right: 1rem;
bottom: 1rem;
background-color: rgb(0, 255, 255, 0.8);
padding: 1rem;
height: 2.5rem;
width: 15rem;
}
.display-content {
max-height: 100vh;
overflow-y scroll;
}
<div class="display-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur felis neque, et viverra tellus fermentum eget. Quisque nunc tellus, pulvinar id felis sed, sodales iaculis magna. Morbi sodales pellentesque sapien, nec dignissim augue. Integer odio enim, posuere et convallis et, ultricies in odio. Curabitur felis libero, iaculis et elit in, feugiat tempor augue. Duis finibus mattis leo eu facilisis. In faucibus tincidunt dui. Nullam pulvinar est vel mauris rhoncus euismod. Praesent vel pharetra neque, vitae sollicitudin enim. Nunc placerat sagittis malesuada. Suspendisse potenti. In tempus risus eget dapibus semper. Vestibulum vitae elit congue, tempor quam at, ultricies mauris.
</p>
<p>
Suspendisse ut ullamcorper libero. Quisque consectetur gravida nisi, non faucibus turpis iaculis nec. Phasellus vulputate, tellus sed dapibus dapibus, turpis mauris facilisis eros, eu sagittis quam ante eget felis. In nec nisl at lorem tincidunt vulputate vel eu est. Phasellus ipsum velit, placerat quis pulvinar non, auctor at ex. Nam pharetra dolor a semper feugiat. In sed commodo mauris. Aenean in turpis sed orci molestie efficitur quis id orci. Duis laoreet leo a nulla interdum hendrerit. Suspendisse molestie tristique semper. Vestibulum convallis purus et orci mollis sodales. Praesent ut lectus laoreet, suscipit velit nec, pharetra neque.
</p>
<p>
Morbi placerat metus a eros viverra, luctus ultricies eros fringilla. Nunc mollis lorem at lacus lobortis, vitae blandit ex condimentum. Maecenas et ultricies tortor, sit amet ornare risus. Nunc id nisl et ligula commodo vehicula in et risus. Pellentesque molestie et risus quis lacinia. Quisque quis risus laoreet, venenatis enim nec, hendrerit nisl. Nulla facilisi. Pellentesque pretium turpis vestibulum urna auctor sodales. Vivamus mattis sem eu tellus scelerisque tempus. Sed venenatis felis in mollis suscipit. Sed quis felis ac erat facilisis pellentesque eget nec purus. Phasellus libero odio, semper sed auctor at, ultrices non nibh. Proin consectetur metus sed ultrices aliquam. Pellentesque placerat, nibh vitae semper sodales, mauris elit vestibulum mauris, sit amet condimentum odio est tincidunt neque. Quisque metus lacus, ullamcorper non accumsan nec, placerat et lectus.
</p>
<p>
Vestibulum nec sem ex. Pellentesque volutpat quam eget justo rhoncus congue. Etiam in lorem pellentesque, pulvinar turpis non, dignissim nibh. Etiam eget urna congue, sodales nulla eget, fringilla lorem. Aliquam suscipit dapibus augue eget mollis. Phasellus feugiat sagittis massa, in posuere odio ultrices eu. Aliquam erat volutpat. Morbi eleifend augue vel sagittis pellentesque. Cras auctor interdum purus non fermentum. Aliquam erat volutpat. Integer elit mi, molestie vitae pulvinar vel, elementum et dui. Pellentesque leo risus, elementum eu accumsan nec, pharetra non massa. Phasellus pulvinar mollis aliquam.
</p>
<p>
Sed elementum facilisis erat, in molestie tortor varius ut. Vestibulum dapibus dolor quis mi malesuada, id venenatis ante vulputate. Aliquam fermentum viverra ante, sit amet rhoncus turpis laoreet vel. Vestibulum a vestibulum dolor. Mauris ut efficitur nunc. Donec sit amet consectetur orci. Ut at erat non sem mattis dictum. Aliquam vestibulum nulla nunc, nec varius est vestibulum sit amet.
</p>
<p>
Aenean imperdiet eros non eleifend molestie. Nullam venenatis nibh non pellentesque imperdiet. Quisque volutpat eros non odio convallis ultricies. Etiam convallis facilisis libero, a commodo tellus condimentum quis. Curabitur congue erat ut tincidunt eleifend. Donec tincidunt ullamcorper consequat. Etiam iaculis elementum fermentum.
</p>
<p>
Fusce vehicula libero nisl. Aliquam tempor sem at lacinia facilisis. Donec vestibulum sit amet augue non rhoncus. Nulla sagittis leo elit, a interdum metus dapibus in. Nulla in mattis nunc. Sed sit amet est in tellus vehicula molestie vel tempor nisl. Donec dignissim est lectus, ac pharetra neque bibendum nec.
</p>
<p>
Sed porta dui eget turpis scelerisque rutrum. Aliquam eu diam nec nunc ultrices hendrerit. Quisque convallis metus vitae tellus fermentum finibus. Cras id ullamcorper nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed gravida lorem non blandit porta. Aliquam ac dui laoreet, interdum dui vel, pellentesque arcu. Aenean gravida nunc sit amet arcu rhoncus mollis. Nullam sit amet risus at urna dictum pharetra. Nunc maximus condimentum dui, sed hendrerit metus pretium et. Curabitur eu sollicitudin lorem, et luctus magna. Donec tincidunt id purus sed placerat. Proin vel tristique velit. Donec ornare nisi at laoreet luctus. Integer id metus molestie, fermentum massa non, porta diam.
</p>
<p>
Quisque at volutpat augue. Maecenas porttitor ornare scelerisque. Ut pretium sapien a placerat dapibus. Fusce vel urna eu sem blandit euismod. In imperdiet eros sit amet quam tempor aliquam. Morbi volutpat tincidunt massa, non convallis dui pharetra nec. Ut velit odio, pellentesque mollis sodales et, eleifend ac libero. Curabitur orci ante, varius ac congue id, rutrum id leo. Pellentesque massa massa, lacinia pretium sapien ut, dignissim congue ipsum. Aliquam commodo leo in nisl pharetra, sed viverra est auctor.
</p>
</div>
<div class="toast">This is a toast</div>
I'd like to get non-scrolling background div on page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="back"/>
<div class="front">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus turpis tortor, semper id suscipit vel, bibendum eu magna. Nullam a libero nisi. Fusce eget elementum augue. Ut tellus leo, dignissim varius finibus a, aliquet ut turpis. Proin non elit luctus, maximus nunc ac, auctor elit. Nullam erat ante, faucibus ac viverra eget, finibus nec ipsum. Vivamus sit amet purus accumsan justo finibus rutrum eu nec nunc.</p>
<p>Suspendisse eros lorem, luctus vitae volutpat ultricies, egestas et risus. Morbi fermentum iaculis nunc, ac tincidunt elit tristique sed. Aenean efficitur velit elit, vitae efficitur ex lobortis non. Etiam in orci ut libero lobortis laoreet. Suspendisse efficitur et sem non bibendum. Nam iaculis, mi in pharetra auctor, diam tellus commodo eros, eget volutpat ipsum enim vitae justo. Sed non ullamcorper odio, ac euismod ligula. Proin euismod eleifend convallis. Vivamus maximus accumsan dignissim. Morbi interdum magna sit amet tempor lacinia. Vivamus nec mi ligula. Donec tortor ex, commodo a est sit amet, volutpat gravida risus. Mauris vitae malesuada est. Curabitur blandit posuere ligula sit amet feugiat. Sed est tellus, cursus eget laoreet et, imperdiet eget dui. Donec facilisis, leo at mollis maximus, sapien purus lacinia mauris, ut fringilla turpis nibh finibus nunc.</p>
<p>Maecenas eget lorem posuere, tincidunt massa sit amet, vehicula diam. Nunc vel consequat nulla. Etiam volutpat volutpat fringilla. Suspendisse potenti. In mattis ex non ex iaculis, eu gravida nulla ultrices. Curabitur ut sem purus. Donec quis tempor lorem, faucibus condimentum eros. Donec massa dui, euismod non tincidunt sed, tempor id nisl. Pellentesque varius mollis nibh.</p>
</div>
<script src="script.js"></script>
</body>
</html>
My style.css looks like:
.back {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: lightblue;
}
.front {
position: relative;
}
What I expect - my long text scrolled over lightblue background (first div).
Whit I've seen - scrolling locked, I see just on-screen portion of long-text. So, div.back seems to be at top of z-index stack, when I expect opposite.
Why it's happen?
Thanks to #Alohci:
<div class="back"/> is invalid.
Correct is <div class="back"></div>
I am making a website in which I have a fixed position menu bar on the left side, a fixed position menu on the top and a scrolling area on the right for the main content of the page. The issue I am having is that the text scrolls over the top menu as such:
Before Scrolling:
After Scrolling
Here is my current code (home.php):
<style>
#heading{margin-top:50px;}
#left {
width: 20%;
height: 100%;
position: fixed;
margin-top:50px;
outline: 1px solid;
background-color:#D6EBEB
}
#right {
width: 80%;
height: auto;
padding-top:50px;
position: absolute;
right: 0;
}
</style>
<?php
//IncludeHeader
include_once 'includes/header.php';
?>
<div id="right">
<legend><h1 align="center" class="text-info" >Home Page</h1></legend>
<h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum porttitor, mollis diam sit amet, elementum enim. Nunc eleifend dui eu augue condimentum sollicitudin. Sed vel tristique lacus. Morbi rutrum dui at pellentesque blandit. Praesent congue, turpis eget luctus posuere, dui mi bibendum sem, vitae hendrerit purus lectus nec lorem. Cras non porttitor nulla. Praesent mollis nec urna ac laoreet. Curabitur at ipsum a ante iaculis fermentum. Sed ut sagittis velit, ac tincidunt purus. Suspendisse auctor mauris nibh, feugiat pretium felis ultrices quis. Sed rutrum finibus bibendum. Mauris sagittis leo at mollis efficitur. Cras eu finibus eros, nec accumsan lorem. Nulla consequat lacus quis massa sagittis egestas. Nam at orci pharetra, commodo nibh eget, venenatis dui. Donec orci tellus, egestas ut leo eget, accumsan hendrerit felis.
Sed ultrices, nisi vel mattis condimentum, nunc dui fringilla felis, at facilisis massa turpis eu lacus. Morbi lectus urna, vehicula in consectetur posuere, egestas sit amet mauris. Donec nisi leo, luctus id tristique non, ultrices quis purus. Cras quis convallis tortor, sit amet laoreet odio. Donec aliquet ipsum eu fringilla accumsan. Integer gravida orci in laoreet tristique. Maecenas scelerisque leo non felis malesuada, quis commodo mauris porttitor. Aliquam ut commodo risus. Integer condimentum ipsum id maximus pretium.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc non aliquam lorem, sit amet mollis tellus. Aenean vulputate quam nibh, vitae congue dolor lacinia ut. Nunc pharetra ligula turpis, vitae congue felis sollicitudin non. Duis ut justo sit amet nulla dictum commodo et non elit. Morbi varius metus massa, nec fermentum sapien blandit a. Curabitur at lectus sapien. Praesent at lectus nec nulla convallis efficitur blandit nec dui. Duis sed est placerat orci fringilla pellentesque commodo et sem. Sed viverra sem eget pretium ultricies. Duis a diam eget sapien tincidunt dignissim nec sed quam. In ultricies tincidunt sapien id blandit. In ut justo non turpis commodo gravida. Phasellus auctor venenatis ante, interdum fermentum lacus venenatis sit amet. Vivamus nisl lorem, posuere a vulputate quis, placerat ut mi. Vestibulum facilisis bibendum nunc, vitae blandit purus.
Sed eget orci lectus. Sed egestas risus nibh, vel semper metus accumsan nec. Cras gravida diam vitae lorem vestibulum viverra. Vivamus mollis condimentum vehicula. Nullam mauris est, laoreet sit amet suscipit ac, interdum a massa. Suspendisse aliquam mollis arcu non malesuada. Quisque tellus erat, lacinia in augue vitae, mattis vulputate dolor. Donec ultricies vel augue non fermentum. Nulla et convallis urna, quis ultrices quam. Sed urna ipsum, porta sed dapibus sed, commodo eu lorem. Proin tempor neque ut nulla varius lacinia et id nunc. Nunc condimentum porta tellus eu suscipit. Ut convallis turpis sed diam gravida, a blandit tortor dictum.
In et aliquet justo. Proin id leo aliquet nibh elementum volutpat tincidunt malesuada est. In vehicula eleifend ante, at tincidunt nisl lobortis quis. Sed gravida scelerisque est egestas consequat. Curabitur fringilla, enim quis ornare laoreet, sapien nulla bibendum lacus, vel malesuada felis dui viverra enim. Praesent varius dictum nulla. Pellentesque eu gravida velit. Vivamus auctor arcu lectus, et placerat dolor molestie id. Aliquam leo lacus, consequat fermentum porta sed, imperdiet a nibh. Aliquam rutrum nunc sit amet lacus auctor, eu sollicitudin erat auctor. Nullam at rhoncus turpis. Aenean venenatis quam ut tellus gravida, vel suscipit tellus auctor.
Nulla facilisi. Aliquam id condimentum sapien, vel laoreet justo. Nullam erat odio, facilisis a velit eget, consequat laoreet velit. Vivamus dictum sit amet nibh finibus pharetra. Aliquam et nibh vitae massa scelerisque dapibus. Etiam ultrices, tellus eget dapibus scelerisque, augue dolor faucibus quam, sed gravida nunc eros ac dolor. Donec eu metus nec mauris lobortis condimentum sed ac libero. Nullam sit amet nulla euismod, pharetra libero nec, molestie sapien. Mauris gravida placerat est, vitae imperdiet orci lobortis in. Nulla vitae vehicula sem. Vestibulum nec sagittis mauris.
Nulla pharetra ligula nec arcu porta, vel elementum tortor malesuada. Vestibulum metus urna, egestas a viverra eu, convallis at ex. Donec elit elit, maximus ut odio at, tempus interdum erat. In pharetra commodo mi id vestibulum. Sed tristique dui ut elit lacinia feugiat. Quisque vitae ante rutrum ante luctus scelerisque. In hac habitasse platea dictumst. Quisque metus magna, lacinia a orci et, volutpat mattis nisi. </h4>
<br/>
</div>
Here is the header.php code:
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<?php /* Check for set Name */ if (!$fname) { $fname = 'Please Sign In'; } ?>
<Style>
#nav{ background-color: #222; position: fixed; width: 100%; top: 0; }
#nav ul{ list-style-type: none; padding: 0; margin: 0; text-align="right";}
#nav ul li{ display: inline-block; }
#nav ul li:hover{ background-color: #333; }
#nav ul li a,visited{ color: #CCC; display: block; padding: 15px; text-decoration: none; }
#nav-wrapper
{
width:100%;
margin: 0 auto;
padding-right:10px;
}
</Style>
<div id="nav">
<div id="nav-wrapper">
<ul>
<li style="color: white; text-align:left;">Home</li>
<li style="color: white; text-align:right;margin-left:85%;"><?php echo $fname;?></li>
</ul>
</div>
</div>
Thanks for any help or suggestions as to why this is happening and how it can be fixed!
You have applied the Right Column as absolute position but it should be static.
Try removing position:absolute and add like belw
#right {
width: 80%;
height: auto;
padding-top:50px;
float:right;
}
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.