can anyone tell me why is my nav bar not following sticky position property.
HERE IS THE LINK TO MY CODE--https://codepen.io/prashant_verma/full/yLMKMQL
Use position: fixed
header {
position: fixed;
background-color: lightblue;
}
p {
width: 150px;
}
<header>
<h1>Hello World</h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, est at consequat facilisis, sapien nunc pharetra nunc, eu gravida quam massa vel sapien. Vivamus suscipit dui quis erat consectetur, a euismod enim varius. Curabitur quis dolor sed dolor aliquet pharetra. Phasellus eu malesuada turpis. Sed condimentum, augue et condimentum laoreet, leo enim ultrices justo, sit amet congue est lacus a ipsum. Ut posuere mi ac mi sagittis, ut fermentum dolor condimentum. Morbi aliquam egestas lacus et suscipit. Fusce sodales sollicitudin ex eget pulvinar. Nunc velit dui, rutrum vitae lacinia id, sodales vitae sem. Vivamus interdum nibh auctor massa tempus, non sollicitudin risus tincidunt. Donec tortor enim, volutpat a nunc non, placerat semper ex.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, est at consequat facilisis, sapien nunc pharetra nunc, eu gravida quam massa vel sapien. Vivamus suscipit dui quis erat consectetur, a euismod enim varius. Curabitur quis dolor sed dolor aliquet pharetra. Phasellus eu malesuada turpis. Sed condimentum, augue et condimentum laoreet, leo enim ultrices justo, sit amet congue est lacus a ipsum. Ut posuere mi ac mi sagittis, ut fermentum dolor condimentum. Morbi aliquam egestas lacus et suscipit. Fusce sodales sollicitudin ex eget pulvinar. Nunc velit dui, rutrum vitae lacinia id, sodales vitae sem. Vivamus interdum nibh auctor massa tempus, non sollicitudin risus tincidunt. Donec tortor enim, volutpat a nunc non, placerat semper ex.
</p>
This is because position sticky always follows its parent height and width. In your case, #sticky is inside its parent <header> and header has the least minimum height, that's why when you are passing the header, #sticky is following so. So,the solution is, you rather keep the #sticky in such a position so that <body> can be its parent. like this,
<body>
<div id="sticky">
...
</div>
<body>
then it will stick on top always across the page.
And if you want to place it under the h1 - Flexbox challenge 2,
give it top: (the height of the h1)
Though position: fixed is an easy solution for you, you must know position sticky well also
Related
I have a article next to my image, but I want my article to grow if my image grows too. So if anybody would shrink or grow his window, the image would do the same, but the article wouldn't. How can I fix that my article would shrink/grow too like my image?
Here is my HTML
<div id="begin">
<article id="inline">Hello guys</article>
<img id="an" src="/Photo/an.jpg">
</div>
Here is my CSS
#begin {
width: 100%;
height: ;
position: relative;
}
#inline {
display: inline-block;
}
Use display: grid, and add a two column page, where the first column have a fixed width (30 characters in the code below), and the second column has the width of 1fr, i.e. one fraction, to fill up the rest of the available space.
#begin {
display: grid;
grid-template-columns: 30ch 1fr;
}
#begin > img#an {
width: 100%;
}
<div id="begin">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu tortor iaculis, ullamcorper felis ut, porttitor mauris. Maecenas blandit dictum rutrum. Donec justo enim, rhoncus sagittis ipsum ut, tincidunt dignissim turpis. Donec sed aliquet velit. Sed egestas egestas risus. Ut a ullamcorper nibh. Suspendisse tincidunt gravida quam quis vehicula. Donec faucibus diam sit amet ligula condimentum eleifend. Nunc in nulla non tellus vehicula maximus vitae sed purus. Cras mollis leo ex, sit amet tempus orci luctus ac. Fusce elementum pulvinar lacus, eu luctus justo tincidunt sed. Pellentesque in feugiat dui. Suspendisse id maximus lacus.</p>
<p>Fusce tempus faucibus lacus, et aliquet metus eleifend et. Aliquam eget nulla sed ligula ornare ultricies. Proin neque purus, vehicula id ultrices sed, pharetra sed odio. Duis non odio tincidunt, euismod est eu, sollicitudin ante. Cras eu arcu dui. Donec id pulvinar dolor. Donec lobortis malesuada convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Integer et feugiat ligula. Integer fermentum consequat lorem. Etiam malesuada ut nulla vel dapibus. Vestibulum id nunc dictum, tincidunt urna at, finibus dolor. Nam tristique posuere aliquam. Nullam ut ipsum eget dolor lacinia placerat. Duis vulputate congue libero vitae sagittis.</p>
<p>Integer iaculis nisi sodales finibus consequat. Curabitur pellentesque sollicitudin hendrerit. Nulla vel ipsum fringilla dui sodales mollis eu sed urna. Donec rhoncus, lacus nec viverra dignissim, arcu mi fringilla diam, a aliquet justo enim id risus. Sed ultricies vehicula lacinia. Pellentesque vitae velit rhoncus magna volutpat vulputate sed vitae dui. Integer ultricies orci nec urna cursus, sed pretium mi euismod. Ut ultrices blandit quam at blandit. Phasellus elementum justo urna, varius finibus augue sagittis ac.</p>
</article>
<img id="an" src="https://picsum.photos/200/300">
</div>
You can use
#media screen and (max-width: /* value */px)
in css to change, hide things on smaller/larger screens. I recommend visiting this site: https://www.w3schools.com/css/css3_mediaqueries_ex.asp for more information. (if this is what you meant)
I would like to layout a webpage as sketched in the image:
The main text (a series of div elements) is supposed to go in a main column. I do have occasional images and remarks that relate to the text but with which I don't want to interrupt the actual text flow.
How can I position a given image or "remark" text box to the right of a given div element in the main column?
In the following minimal example, how would I put the img element just to the right of the second div element?
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque eu condimentum ligula. Fusce sollicitudin quam ornare,
pharetra lorem quis, luctus erat. Nulla convallis velit magna, sit
amet semper erat cursus sed. Praesent non turpis id lectus aliquet
vestibulum. Donec non leo venenatis, commodo dolor eget, facilisis
turpis. Donec dapibus scelerisque orci vel molestie. Vestibulum ut
elit a arcu interdum tempor ut scelerisque enim. Duis maximus ex sit
amet elit scelerisque, ultricies feugiat mauris feugiat. Morbi non
egestas arcu, at semper massa. Ut feugiat metus eget nulla porttitor
lobortis. Praesent lorem lacus, finibus quis blandit a, iaculis sed
mauris. Vivamus aliquam molestie ex, a lacinia erat faucibus non.
Donec scelerisque neque ac ante interdum, vel varius justo tincidunt.
Quisque ultricies nulla in nisi facilisis, et accumsan libero imperdiet.
</div>
<div>Curabitur imperdiet at diam eget rhoncus. Aenean pretium magna
quis sodales ornare. Sed vitae vehicula nisi. Nulla a tristique lectus.
Nam rutrum ut libero viverra porta. In rhoncus leo et mi luctus, at
osuere est commodo. Vestibulum fringilla luctus mi, in consectetur sem
semper non. Phasellus ac augue et purus vulputate suscipit.
Pellentesque tempus imperdiet urna non convallis. Quisque finibus elit
magna, nec finibus ipsum ornare vitae. Vestibulum id sapien est. Maecenas
in mauris sit amet orci facilisis bibendum id sed ante. Vestibulum at
egestas justo. In nibh ex, ullamcorper sit amet urna vel, molestie mattis
tortor. Ut vel felis dolor.
</div>
<img src="img.png"/>
The easy way is to add calc width (for example 100% - 100px for 100px wide column right):
.leave-space-form-right {
width: calc(100% - 100px);
float:left;
}
.put-element-on-right {
float:left;
}
Here is an example:
https://jsfiddle.net/txdue3n0/6/
Consider the following CSS / HTML :
img.text-wrap-left {
float:left;
}
<p>
<img class="text-wrap-left" src="//lh3.googleusercontent.com/ZUMt7sn_FTLfvRK-B4XHK46Zyxv4kaj4O60tVXVMAg2m8Ohj0CdfinbEUmkwzaGmUE8V0jmKXHxSOvegEk3M3urVLsEbAzzmpwj-kDs=s660" width="550">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ultrices est. Morbi semper enim sit amet feugiat fermentum. Phasellus odio lorem, finibus sit amet nibh ut, lobortis scelerisque nisl. Vestibulum mattis, ligula vitae sodales maximus, metus arcu egestas ex, non ullamcorper leo metus et mi. Integer libero justo, commodo a augue et, tempus aliquam leo. Donec ac ex aliquet, auctor erat sit amet, gravida metus. Duis vel condimentum dolor. Maecenas id consequat massa, vel dictum turpis. Cras dignissim aliquet mauris eu facilisis. Donec malesuada arcu in nulla commodo aliquam.
Nunc in est eget justo fringilla blandit. Morbi leo nisl, sagittis nec nulla ut, accumsan tristique orci. Praesent quis nisl pharetra, tempus nisi ornare, laoreet velit. Aliquam at dolor at eros elementum rutrum. Quisque tincidunt tincidunt nisi id porta. Cras hendrerit egestas leo, sed ultrices lorem dapibus et. Duis consectetur nisi eget ligula condimentum malesuada. Sed venenatis nisi id facilisis vestibulum. Nam tristique massa quis ornare blandit. Vivamus lobortis orci velit.
</p>
When the viewport is resized, the text will wrap right of the image, but will also become very narrow, to the point of even having a few letters only.
Is it possible to specify the minimum width of the text before the paragraph just goes entirely under the image, all without sacrificing paddings and margins?
In this example, an easy solution would be to add a media CSS condition, and tell the image to display:block; at a certain width. The problem is that this is only an example; my problem is that the images that are used with the text may have variable widths (i.e. they are user defined) and I am looking for a responsive solution.
Any ideas?
I think better option is to use max-width on image to keep its max-width at some % and then also add media query to break text to new line at some point. Fiddle
img.text-wrap-left {
float:left;
max-width: 50%;
}
#media(max-width: 480px) {
img.text-wrap-left {
display: block;
float: none;
max-width: 100%;
}
}
<p>
<img class="text-wrap-left" src="//lh3.googleusercontent.com/ZUMt7sn_FTLfvRK-B4XHK46Zyxv4kaj4O60tVXVMAg2m8Ohj0CdfinbEUmkwzaGmUE8V0jmKXHxSOvegEk3M3urVLsEbAzzmpwj-kDs=s660" width="550">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ultrices est. Morbi semper enim sit amet feugiat fermentum. Phasellus odio lorem, finibus sit amet nibh ut, lobortis scelerisque nisl. Vestibulum mattis, ligula vitae sodales maximus, metus arcu egestas ex, non ullamcorper leo metus et mi. Integer libero justo, commodo a augue et, tempus aliquam leo. Donec ac ex aliquet, auctor erat sit amet, gravida metus. Duis vel condimentum dolor. Maecenas id consequat massa, vel dictum turpis. Cras dignissim aliquet mauris eu facilisis. Donec malesuada arcu in nulla commodo aliquam.
Nunc in est eget justo fringilla blandit. Morbi leo nisl, sagittis nec nulla ut, accumsan tristique orci. Praesent quis nisl pharetra, tempus nisi ornare, laoreet velit. Aliquam at dolor at eros elementum rutrum. Quisque tincidunt tincidunt nisi id porta. Cras hendrerit egestas leo, sed ultrices lorem dapibus et. Duis consectetur nisi eget ligula condimentum malesuada. Sed venenatis nisi id facilisis vestibulum. Nam tristique massa quis ornare blandit. Vivamus lobortis orci velit.
</p>
I'm having quite a frustrating problem. What I'm trying to do is make a div "#generic-div" with a height of 20% of the page height, and also set a footer that always sticks to the bottom of the page*; the two seem to be mutually exclusive.
*By "page", I don't mean the currently visible rectangle that is displayed in the window - I mean everything that it is possible to view by scrolling horizontally or vertically, so #footer {position: fixed; bottom: 0;} isn't a solution. The footer must always be under my div .container.
This is my application.html.erb:
<!DOCTYPE html>
<html>
<!-- ... -->
<body>
<div class="container"><%= yield %></div>
<div id="footer"></div>
</body>
</html>
When I do this:
html {height: auto, width: 100%;}
#generic-div {height: 20%;}
#footer {top: 0;}
The HTML fills all the available space in the page, and #footer is pushed down as far as it can go. However, #generic-div has no explicit parent-element height to inherit its height from, so its height is 0.
When I do this:
html {height: 100%, width: 100%;}
#generic-div {height: 20%;}
#footer {top: 0;}
#generic-div's height is set to 20% of the page, but now html's height is just the height of the browser window, so #footer is set just below the bottom border of the browser window, and when I scroll down, more content is revealed under the footer. I would like the footer to be the bottom-most content.
How can I accomplish the height: 20% div and the footer on the bottom?
Please let me know if any part of my question was unclear, and I will try to clarify.
Ok. I understand what you are trying to do. This is what you are looking for. Answer has been tested on fiddle and code is below for your convenience. The issue you are having is that the body html element is everything. The HTML element is just the visible space. So the solution. Just don't apply 100% to the HTML tag, just the BODY tag.
http://jsfiddle.net/qs3ydnyv/5/
CSS
body{
margin:0px;
padding:0px;
clear:both;
color:#000;
height:100%;
display:block;
}
.container{
height:80%;
width:100%;
background-color:#A00002;
display:block;
}
#footer{
width:100%;
height:20%;
background-color:#005C97;
display:block;
}
HTML
<body>
<div class="container">Here is some Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, imperdiet vitae vehicula quis, cursus ac risus. Nullam nibh ligula, rhoncus ut velit id, dignissim posuere diam. Donec ante justo, gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed matda vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quamm ligula, suscipit quis aliquet eu, eleifend at neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, imperdiet vitae vehicula quis, cursus ac risus. Nullam nibh ligula, rhoncus ut velit id, dignissim posuere diam. Donec ante justo, gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quam id arcu consequat, nec porttitor nisl molestie. Ut quam ligula, suscipit quis aliquet eu, eleifend at neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, imperdiet vitae vehicula quis, cursus ac risus. Nullam nibh ligula, rhoncus ut velit id, dignissim posuere diam. Donec ante justo, gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quam id arcu consequat, nec porttitor nisl molestie. Ut quam ligula, suscipit quis aliquet eu, eleifend at neque.
</div>
<div id="footer">gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quam id arcu consequat, nec porttitor nisl molestie. Ut quam ligula, suscipit quis aliquet eu, eleifend at neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, </div>
</body>
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.