First of all, excuse me for my level of English, I'm French and you know our reputation :)
So here is my problem:
I'm trying to customize my scrollbar but with an image I've tried many things to do it but I don't really know java and the only guide I've seen was only in java...
I don't know how to do it so if you have any advice don't hesitate to send it.
thanks
For this issue, you'd want to use the webkit scrollbar css api. Please keep note that this api isn't available for both Microsoft Edge and Firefox. For more information, please visit this url. Below is an example for your case:
.main {
width: 250px;
height: 300px;
padding: 2px;
overflow-y: scroll;
border: 2.5px solid black;
}
p {
margin: 0;
}
.main::-webkit-scrollbar {
/* this sets the width of the bar, in the div.main (::-webkit-scrollbar is fro the body/html)*/
width: 20px; /* change for scrollbar width */
}
.main::-webkit-scrollbar-track {
/* scrollbar background */
background-color: lightgray;
}
.main::-webkit-scrollbar-thumb {
background-color: red; /* will leave after image loads */
background-image: url("https://picsum.photos/100/400");
background-size: cover;
}
.main::-webkit-scrollbar-thumb:hover {
/* feel free to set this for when the mouse is over the bar */
}
<div class="main">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non asperiores
quos, suscipit officiis, impedit sapiente unde modi quia voluptatibus, id
cupiditate nesciunt. Officia, in animi distinctio commodi perspiciatis ad
eligendi! Earum ab porro perferendis inventore, asperiores quaerat quis
voluptate ducimus odio officia numquam nobis ipsum consectetur deleniti
natus aspernatur, a temporibus illo culpa quia, similique iste quas sunt.
Architecto, rerum. Qui, nostrum. Molestias, placeat maiores dignissimos id
laboriosam eos error possimus voluptas ipsum aut rerum culpa nesciunt
quaerat ipsam sapiente veniam exercitationem dolorum esse illo explicabo
similique? Labore, ab aperiam. Blanditiis animi qui velit nobis fugit! Eius
laborum necessitatibus aperiam sequi explicabo! Alias, neque. Ad veniam
dolor, doloribus assumenda laboriosam vel necessitatibus minima dolorum fuga
ipsa beatae quos, distinctio debitis? Voluptate, neque. Fugiat accusamus,
excepturi, quam aliquid beatae consectetur laboriosam commodi nesciunt et
dolor delectus illo perferendis sapiente ab voluptatem dicta quod! Laborum
possimus sapiente repellat itaque ex facere recusandae?
</p>
</div>
Related
So all I'm trying to do here is add a simple footer to my site which works perfectly when open on desktop but when on tablet or mobile whenever the keyboard is open such as they login the footer moves up the page to just above the keyboard. Is there a method of fixing this, any ideas?
CSS
#footer {
width: 100%;
background-color: #4c66a4;
color: #fff;
position: absolute;
left: 0px;
bottom: 0px;
text-align: center;
}
<div id="footer">
<p>© 2018 SulmaxCP. All Rights Reserved.</p>
</div>
Try using a wrapper inside the body tag.
html,body{
height:100%;
}
.wrapper {
min-height: 100%;
position: relative;
padding-bottom:90px; /* footer's height */
}
#footer {
width: 100%;
background-color: #4c66a4;
color: #fff;
position: absolute;
left: 0px;
bottom: 0px;
text-align: center;
}
<div class="wrapper">
<main>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis necessitatibus earum tenetur itaque ducimus atque nam vitae ab non quasi natus quam, cum hic quod possimus quibusdam inventore minima temporibus.</div>
<div>Optio inventore delectus quas rerum mollitia eum, repellendus voluptatum! Quos, quas nobis delectus, ipsa tempore reiciendis dolore numquam sequi tempora, nostrum in mollitia laboriosam odio labore voluptatem sint. Similique, aliquam.</div>
<div>Sapiente quisquam vitae alias in nesciunt numquam id, distinctio! Doloribus error mollitia, optio debitis ratione quaerat maiores odio nostrum autem commodi tempora magnam, quos necessitatibus nobis aperiam consequuntur perspiciatis deserunt.</div>
<div>Hic facere nam aliquam tenetur officiis, ratione, sunt aliquid perspiciatis distinctio laborum perferendis nisi ullam omnis incidunt, quasi illo corrupti, dolores eius vero ipsum tempore. Tempora consequatur necessitatibus, saepe assumenda.</div>
<div>Eveniet, odit deleniti neque voluptates soluta architecto, quae aspernatur aut minima rerum itaque nobis distinctio ex culpa! Dolore sit vel mollitia aspernatur distinctio voluptatibus! Iste perspiciatis, aliquid a doloribus et.</div>
<div>Molestias, ducimus! Magni doloribus fugiat praesentium dolore minus perferendis, reprehenderit voluptatibus fuga, rerum quam eveniet, odit ut eaque, repellat provident aperiam repudiandae. Quos porro eveniet, dignissimos non quibusdam provident eligendi!</div>
<div>Ducimus unde ea iste alias fugiat debitis natus illo eligendi! Nisi dolor esse totam optio, tenetur distinctio, sequi inventore eaque iure earum suscipit quam ipsam qui quae molestias id expedita!</div>
<div>Veritatis delectus, in laudantium. Excepturi, deserunt! Ullam voluptatem aliquid doloribus ab, officia veniam maiores magnam maxime. Vero esse non dicta autem, aliquam eos dolore harum sed incidunt architecto placeat eaque!</div>
<div>Hic veniam porro autem quia, commodi provident sunt, at tempore libero, consequuntur, accusamus. Vero illo molestias nam, velit hic iure, a sequi, explicabo ipsum voluptates numquam modi dolorum rem culpa!</div>
<div>Iusto a cum nihil eos atque, impedit, debitis quis dolor consectetur ratione ipsam nisi recusandae temporibus possimus. Non, natus a, consequuntur provident facilis nemo assumenda dolorum vitae, eligendi et harum.</div>
</main>
<div id="footer">
<p>© 2018 SulmaxCP. All Rights Reserved.</p>
</div>
</div>
The thing is that footer relating his position from body tag and when keyboard appears body's height changes and footer get on keyboard.
In this type of situation, unfortunately, CSS seems to not have a fix. So you must use javascript to first calculate the height of the window in pixels and then set the css property. You could do it in one line! But I did it in two here:
// PUSH FOOTER TO BOTTOM
var innerScreenHeight = window.innerHeight;
document.querySelector("#footer").style.top = innerScreenHeight + "px";
This is a cheap hacky fix, but:
CSS:
#media screen and (max-width: 800px) {
.hide-footer {
display: none;
}
}
jQuery
$('input').focus(function() {
$('footer').addClass('hide-footer');
});
$('input').focusout(function() {
$('footer').removeClass('hide-footer');
});
This adds the class .hide-footer to your footer as soon as you focus on an input tag. In addition, the footer is only hidden when the screen width is less than 800px (you should customize, but this should cover mobile devices).
You can hide the footer when you focus on input filed and show again footer on focus out of input filed using jquery.
$( "#inputID" ).focus(function() {
$("#footer").hide();
});
$( "#inputID" ).focusOut(function() {
$("#footer").show();
});
You can't fix it because there's nothing wrong, your footer is doing exactly what you've told it to do.
Your CSS rule for the footer is telling it to always 'attach' to the bottom of the window, even when the keyboard on a mobile device is visible, the top of the keyboard is now the bottom of the window.
If you want, you can either remove the position:absolute value or just change it to position:fixed
Another solution might be to add event listeners for focusin and focusout events of the input-element. The respective listener callbacks can then implement some logic to show or not to show the footer.
Is there any way to stick a footer to the bottom of the browser screen or right after the content (depending on which is longer) using CSS without knowing the size of the footer in advance?
Right now I am using the absolute positioning in a container that holds the footer and the content with container's min-height as 100%, but if I change the footer I find I must change the padding at the bottom of the container to match its height.
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
Summary:
For a site with a header, content area, and footer:
Set html, body {height: 100%;}
Set your body (or a wrapper div) to display: table; width: 100%; height: 100%;
Set your header, footer, and content area to display: table-row;. Give your header and footer height: 1px;, and give your content area height: auto;
The header and footer will both expand to fit their content. The content area will expand to fit the larger of its content, or the available space.
https://jsfiddle.net/0cx30dqf/
If you're willing to jump into the HTML5 future, you can use flexbox...
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
My more detailed answer to the same question: How to make a fluid sticky footer (full example: http://jsfiddle.net/n5BaR/)
Solved by flexbox: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
What is Flexbox from MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Try this!
Uses Flex!
NO FIXED HEIGHT, JAVASCRIPT OR TABLES
Expands when more content, and when there isn't it sticks to bottom
Note: Does not work with IE 9 & Below
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
min-height: 100%;
display: flex;
flex-direction: column;
}
.content{
flex: 1;
background: #ddd;
}
<body>
<header>
Header
</header>
<div class='content'>
This is the page content
<br>
PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the body css)
</div>
<footer>
Footer
</footer>
</body>
For an app with a responsive footer (i.e. changes height on resize), you can use jquery to dynamically adjust the padding of the bottom for the parent element. Adding onto this post: Keep Footer at Bottom
HTML:
<div class=”main-container”>
<header>
this is a header
</header>
<section>
this is content
</section>
<footer>
this is a footer
</footer>
</div>
CSS:
html,
body {
height: 100%;
position: relative;
}
.main-container {
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
CoffeeScript:
footerEventListener = ->
$(window).on "resize", ->
setFooterHeight()
setFooterHeight = ->
// get footer height in px
bottomPadding = $("footer").css("height")
$(".main-wrapper").css("padding-bottom", "#{bottomPadding}")
// init footer events
setFooterHeight()
footerEventListener()
Check out the CodePen here.
since no one knows the answer for sticky footer w/o knowing the height of it, using css (crosbrowser solution), i was forced to calculate it
jquery:
if( $(document).height() < $(window).height() )
{
$('#content').height
(
$(window).height - $('#footer').height()
);
}
html structure:
<div id="content"></div>
<div id="footer"></div>
I think the best way is just add a class to your footer. Javascript will do the rest.
//This Pen is By Mohammad Abdus Salam
//portfolio.codeexposer.com
var footerHeight = $('footer.fixed_footer').height();
if($('footer').hasClass('fixed_footer')){
$( "section" ).last().css({
"margin-bottom": footerHeight + 'px'
});
}
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700,800');
body{
margin: 0;
padding: 0;
text-align:center;
font-family: 'Raleway', sans-serif;
line-height: 30px;
}
section{
padding-top: 80px;
padding-bottom: 80px;
border-bottom:1px solid #ddd;
background: #ffffff;
z-index: 9;
}
h1{
font-size: 48px;
font-weight: 800;
text-transform: capitalize;
}
a{
text-decoration: none;
}
.container{
width: 700px;
display: inline-block;
box-sizing:border-box;
padding-left: 30px;
padding-right: 30px;
}
.logo{
height: 80px;
width: 80px;
display: inline-block;
}
.footer_top{
border-bottom: 1px solid #777;
padding-bottom: 60px;
}
.logo img{
width: 100%;
height: 100%;
}
.footer_bottom {}
.footer_bottom p{
color:#aaa;
}
.footer_top{
padding-top: 100px;
}
.footer_bottom p a{
color:#158;
}
footer{
width: 100%;
left: 0;
bottom:0px;
z-index: -1;
background: #222222;
}
.fixed_footer{
width: 100%;
position:fixed;
left: 0;
bottom:0;
z-index: -99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is About</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Service</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Portfolio</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<footer class="fixed_footer">
<div class="container">
<div class="footer_top">
<a class="logo" href="portfolio.codeexposer.com">
<img src="https://lh3.googleusercontent.com/-a700z77yIxk/AAAAAAAAAAI/AAAAAAAAABM/RzvY_qm9KQY/s512-p/photo.jpg" alt="">
</a>
</div>
<div class="footer_bottom">
<p>
All Rights Reserved By Mohammad Abdus Salam
</p>
</div>
</div>
</footer>
Take a look at this, cssstickyfooter, it works great in any browser.
Update: This is from 2010, might not be relevant with current standards
I created a container inside another container that has position:absolute and top:100%. This container is used to be some kind of fade-out-container, so it actually has no real content.
Now when this containers height exceeds the browser windows height, a scrollbar appears. And this is exactly what should not happen.
Instead I thought I could apply overflow:hidden on body or the parent container, but either too much gets cut off or the fade-out-container itself becomes invisible.
Please have a look at my fiddle and tell me what I'm missing. Thanks!
HTML
<header>
<h1>Demo</h1>
</header>
<footer>
<p>
The orange container wraps the blue one.<br/>The blue containers' height is meant to be cut off of the browser window meaning it's overflow should get hidden if the browser windows' height is insufficient.
</p>
<p>position: relative;<p>
<div class="append gradient">
<p>position: absolute;<br/>
top: 100%;<br/>
left: 0;<br/>
width: 100%;<br/>
height: 100%;</p>
</div>
</footer>
...
CSS
body {background: 333;}
header, footer, .append {
font-family: consolas, console, courier, arial, helvetica;
margin: 0 auto;
color: #FFF;
padding: 15px 30px;
}
header {
background: #666;
}
footer {
background: #F86;
position: relative;
height: 300px;
/*overflow: hidden;*/
}
.append {
background: #66F;
position: absolute;
top: 100%;
width: 100%;
height: 500px;
left: 0;
}
EDIT: updated fiddle, added inline code, added images
When you give top: 100% with a position: absolute, then you are actually sending it fully to the next page. I guess you are trying to make a modal-window, then you need to set it as:
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
The above code will over everything. The overflow: hidden is not applicable here, but when you are planning to show the modal window, or the overlay, it is best to use overflow: hidden to the <body>, so that the users will not be able to scroll and you can find the modal window.
Explaining the whole concept I said using a snippet here. Click the links to invoke the modal window. Click the opened modal window to hide it back. Scroll and see. Play around with it:
$(function () {
$("body > p").append(' Open Modal');
$("p a").click(function () {
$("body").addClass("modal-open");
return false;
});
$(".mask").click(function () {
$("body").removeClass("modal-open");
});
});
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
background: rgba(0,0,0,0.5);
z-index: 999;
color: #fff;
font-size: 1.5em;
text-align: center;
}
.mask p:first-child {
padding-top: 5em;
}
.modal-open {
overflow: hidden;
}
.modal-open .mask {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="mask">
<p>Click the links to invoke the modal window.</p>
<p>Click the opened modal window to hide it back.</p>
<p>Scroll and see. Play around with it</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda vitae temporibus corporis, quisquam, doloremque excepturi itaque laborum ratione sequi aliquid atque rerum rem minima, aperiam laboriosam blanditiis alias ex quas?</p>
<p>Quam dolor, perspiciatis! Perspiciatis voluptatibus magnam ad hic sint, officia voluptates aut labore, excepturi quasi sed sit modi amet temporibus exercitationem laudantium veniam cumque omnis quo! Esse, quas! Harum, iure!</p>
<p>Illo optio alias amet ex consequuntur est autem itaque reprehenderit odit, laboriosam saepe ipsa harum eligendi sit cumque modi cum perspiciatis! Dolorum, alias nostrum asperiores velit atque perferendis voluptatibus. Maiores!</p>
<p>Cumque perspiciatis laudantium sequi itaque eos facilis illum repellat necessitatibus sunt recusandae rem, tempore blanditiis consectetur distinctio nostrum enim sit corporis non odio deleniti architecto. Corporis, nam assumenda. Quibusdam, perspiciatis!</p>
<p>Illum, quasi nisi animi. Expedita recusandae nam maxime architecto, illo a? Aspernatur numquam eveniet quisquam, inventore fugit amet voluptatem porro odio corporis obcaecati nostrum earum aliquam recusandae, sint necessitatibus rem.</p>
<p>Id praesentium vitae tenetur harum voluptate error adipisci dignissimos vero voluptatibus numquam quibusdam, nemo molestias alias aliquam, est, esse at fugiat quasi ducimus ratione! Inventore, eaque repudiandae sed magnam incidunt!</p>
<p>Aliquid in, veritatis ut! Veritatis, voluptatibus? Fugiat iusto officia repellat quasi dolore eum odio vitae inventore error debitis, doloribus facilis, itaque! Perspiciatis iste, incidunt hic non qui voluptate rem quidem?</p>
<p>Explicabo laudantium quidem, ab aperiam autem tenetur quae voluptatem quam, mollitia recusandae sapiente id, praesentium quasi soluta tempora dolorum, maiores velit. Porro unde doloribus iste, nihil ipsa, pariatur molestias aliquam.</p>
<p>Aut excepturi vitae dicta, quos distinctio, nulla, nostrum architecto, atque veritatis perspiciatis voluptates odio. Similique nobis sed natus illo esse, quod quas ex tenetur dolore deserunt optio voluptate numquam quo.</p>
<p>Repudiandae inventore consequatur nisi ad ut voluptas pariatur ducimus consequuntur, exercitationem tenetur ipsam nesciunt beatae nostrum soluta similique excepturi perspiciatis consectetur illum veniam aut hic, neque eveniet. Nesciunt quas, placeat?</p>
<p>Unde nam, aut placeat. Voluptas, consequatur, quis. Perferendis illum ratione in voluptate consectetur molestias nam hic, reprehenderit similique distinctio. Repellendus veritatis excepturi hic dicta fuga mollitia! Culpa dolores doloribus, ratione.</p>
<p>Vero cupiditate quaerat sit non veritatis harum nesciunt eos suscipit tempore dolorem porro saepe a, iusto vitae, voluptatum debitis consectetur voluptas, corporis. Sequi, sint odio eligendi delectus culpa dignissimos, obcaecati?</p>
<p>Ipsam sequi facilis magnam ad officiis quae, nobis iusto, commodi culpa optio a facere numquam placeat perspiciatis saepe maxime mollitia voluptatem sunt ipsa? Sequi ipsam, nostrum blanditiis dicta repudiandae iste!</p>
<p>Facilis tenetur officia quo delectus eius quam vel minus quas nesciunt ipsa perferendis, explicabo quasi itaque, rem vero accusamus debitis quis pariatur blanditiis illo nostrum eum! Molestiae fuga eius, illum.</p>
<p>Accusantium, repellendus soluta modi animi cumque error, nemo doloremque. Commodi voluptates distinctio nesciunt animi a, odio assumenda exercitationem amet reprehenderit libero expedita fugit. Id minus, corporis quibusdam cupiditate aut harum!</p>
I want to create a div(located at the top) which has its own space and also its position is fixed. The requirement is when it is scrolled down, it has to move and on scrolling up it should go back to its own space.
When position is fixed it is moving up and down. But it loses the space for it. How to achieve the space for it?
Thanks in advance.
Is this what you're after?
http://jsfiddle.net/danhaswings/a1zb6ye9/
HTML
<div class="container">
<div class="navbar"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore itaque doloremque delectus incidunt deleniti, excepturi, saepe nesciunt asperiores quae repellendus quisquam consequatur. Vero tenetur saepe eos ipsum harum culpa velit alias blanditiis maiores libero voluptates autem nostrum dolorem dolorum, beatae ullam. Explicabo tenetur necessitatibus modi illum alias! Eius enim accusantium, totam quibusdam fuga aliquam quod numquam. Consequuntur et ipsum earum voluptatum iure soluta necessitatibus minima unde nesciunt repellendus excepturi quod, exercitationem voluptates. Veniam temporibus aliquam amet maxime ex, voluptatibus ipsum consequatur quibusdam laborum, itaque reprehenderit. Optio dignissimos, maiores, debitis accusamus itaque corporis laboriosam nisi fuga! Quas porro eos qui, numquam.</p>
</div>
CSS
.container {
min-height: 2000px;
padding-top: 100px;
}
.navbar {
height: 100px;
width: 100%;
background-color: #999;
position: fixed;
top: 0;
}
I am trying to create the following text box design on a website. I could use images for the white boxes, but the issue is that I am not sure how to create an L shaped text area where the words wrap and fit nicely into those white boxes.
Does anyone know how to achieve this, or point me to the right direction to investigate?
Try CSS Exclusions.
CSS Exclusions define arbitrary areas around which inline content
can flow. CSS Exclusions can be defined on any CSS
block-level elements. CSS Exclusions extend the notion of content
wrapping previously limited to floats.
They are specifically related to word-wrap.
This is what you need
<style type="text/css">
#grid {
width: 30em;
height: 30em;
display: grid;
grid-columns: 25% 25% 25% 25%;
grid-rows: 25% 25% 25% 25%;
#top-right {
grid-column: 3;
grid-row: 2;
}
#bottom-left {
grid-column: 2;
grid-row: 3;
}
.lshapify {
wrap-flow: both;
}
#content {
grid-row: 1;
grid-row-span: 4;
grid-column: 1;
grid-column-span: 4;
}
</style>
I can't give you an exact solution to your problem but you could investigate and leverage from CSS shape-outside techniques to solve this problem. Unfortunately there is limited support for this at the moment so it depends on the browsers you wish to target. A nice tool exists to check at http://caniuse.com/
You may encounter some issues with overlaying the content as you might not know the amount of text that needs to be catered for. Perhaps some JavaScript could solve that problem.
The below example shows how you can add a block using a CSS inset but I think you can use a polygon and position another block over it.
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
max-width: 750px;
font-size: 10px;
}
div {
shape-outside: inset(50px 50px 50px 0px);
width: 200px;
height: 200px;
float: left;
}
<p>Sample used from CodePen at http://codepen.io/team/css-tricks/pen/b2da5018d8f20ac3a2ccc26edb724db6</p>
<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis impedit libero esse odio excepturi fuga est ut itaque a quod suscipit, rerum asperiores. Consequuntur voluptates illo rerum recusandae pariatur asperiores, aspernatur, saepe ipsum error dolorem, quod inventore possimus modi deleniti tenetur et officiis.</p>
<p>Nemo ab in totam ratione sequi error, ea dolorum repudiandae omnis, eaque facere impedit fugiat. Dolorum distinctio autem sequi enim quidem esse accusamus repudiandae voluptatum nobis, velit, molestiae. Eaque maiores, harum. Saepe esse repellendus sint.</p>
<p>Labore provident optio quis commodi quod quaerat quo similique perspiciatis libero facere. Suscipit odit quas nemo, enim laudantium, provident repellendus natus nostrum facilis expedita adipisci qui, harum minus quidem officia cupiditate repellat ut praesentium. Possimus corporis, error atque ex adipisci, illum suscipit pariatur saepe impedit aliquam amet eos reiciendis quidem hic, nisi. Sint nobis modi, nesciunt quasi placeat quia.</p>
<p>Veniam inventore corrupti quisquam illum debitis vitae accusamus nobis alias cum iste error magnam, cupiditate earum! Incidunt at consequuntur, rem ipsa odio ipsum deleniti repudiandae blanditiis harum ut in, fugit officia rerum ad, corporis dolore!</p>
<p>Commodi repellendus esse quibusdam enim qui totam ipsum, consequuntur officia vel dolores, quod corrupti eveniet maiores minus explicabo, sapiente ratione doloribus laboriosam impedit nesciunt a obcaecati quam veritatis! Placeat, velit possimus delectus, atque voluptate iste alias illo, dolor odit ipsa facere quibusdam? Non omnis aliq.</p>