I have a div and i want to show the scroll cue only on hover. I achieved the same but it's adjusting the content on hover. How can i make avoiding the jerk. I want to achieve using overflow:auto property alone not scroll property. Any ideas. Also please suggest only with pure CSS with cross browser compatibility.
body{
margin:0;
height:100%;
width:100%;
overflow:hidden
}
.outer{
position:relative;
height:100%;
width:100%;
float:left
}
.inner{
height:600px;
width:100%;
overflow-y:hidden;
float:left;
position:relative;
padding:0 10px;
box-sizing:border-box
}
.inner:hover{
overflow-y:auto
}
<div class="outer">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
This is because of the scrollbar width. It adds up to the width of your div. One work around is to override the right-padding value in the .inner:hover selector to offset the added scrollbar width.
body{
margin:0;
height:100%;
width:100%;
overflow:hidden
}
.outer{
position:relative;
height:100%;
width:100%;
float:left
}
.inner{
height:600px;
width:100%;
overflow-y:hidden;
float:left;
position:relative;
padding:0 16px;
box-sizing:border-box
}
.inner:hover{
overflow-y:auto;
padding-right:0px;
}
<div class="outer">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
</div>
Another alternative would be to hide/show the scrollbar element itself instead of replying on over-flow-y. Check out this answer.
Related
I have a header and a block of text under it. I want the header and the first three sentences to avoid a page break, using the css property page-break-inner: avoid. Then I want the rest of the sentences to continue as usual.
I've written the following code but the sentences after the first 3 are starting on a new line, because I've set the span containing the header and the first three sentences as display: inline-block. I would set that span as display: inline but I read somewhere that page-break-inside won't work on inline elements.
.avoid-break {
page-break-inside: avoid;
}
span.avoid-break {
display: inline-block;
}
<span class="avoid-break">
<div>Subtite</div>
<span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
</span>
</span>
<span>
This should continue on the line above! It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>
A css solution:
remove span.avaoid-break
This is very specific to the code displayed, I would not use this in a production environment.
var spans = document.getElementsByTagName('span');
spans[1].innerHTML += spans[2].innerHTML
spans[2].remove()
IDs will make this much more usable:
<span class="avoid-break">
<div>Subtite</div>
<span id="text-box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
</span>
</span>
<span id="extra-text">
This should continue on the line above! It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>
Javascript:
var textbox = document.getElementById('text-box');
var extratext = document.getElementById('extra-text');
textbox.innerHTML += extratext.innerHTML;
extratext.remove()
I have a blockquote and a paragraph that i'm trying o have the text align left of the blockquote like an img like here
http://www.ironspider.ca/graphics/alignment.htm
how would i do that?
<p>
skcaskckascksakcosaocksocksoososkososooososocsosokoskcoskosopapckpefjwjfoejfiewfoiewjfjwefjewfowefwefowefjwejfoewfowejfjewfoewfoewofejwofjejfiejiejfej
<blockquote>
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
okfoefjpowejfoewjfjewfjeiowfjoewjfowejfoewofewofjewjfoiewjfoiewfoiewiofjewo
</p>
like this
You should use CSS rather than the HTML align attributes, that are in your example.
Use float: right and give the block quote a width to suit your needs.
More about floats:
https://css-tricks.com/all-about-floats/
.float-right {
width: 50%;
float: right;
}
<p>
<blockquote class="float-right">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
skcaskcka scksakc osaocksocks oososk osos ooo so socsosokosk coskos opapc kpe fjwjfoejfie wfoi ewjfj wefjewfo wefwefowef jwejfoewfo wejfjew foew foewofej wofjejfie jiejfej okfoef jpowejfoewjfjewfjeio wfjo ewjfowej foe wofe wofjew jfoiew jfoiew foiewiofjewo
</p>
Here you go buddy. Check out the following codepen link.
You basically need to use a css property called float. It specifies whether an element should float or not. Here you need float:right; to move it to the right. Give the amount of width you want to give and bingo. Its done !
Note:- You cannot use this property if your element is absolute positioned.
You can get more information on float here.
.blockquote-text{
float: right;
width: 30%;
background-color: #ddd;
}
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
<blockquote class="blockquote-text">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem IpsumLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
I want to know if is it possible to create a theme with css where we can fixed the top and the left, and in the same time the theme must be responsive.
Thank you
I have created my own code just check out below Code snippet:-
.main-container{position:absolute; top:0; left:0;width:100%;height:100%;background:#eee}
header{background:#aaa;height:100px;}
.second-row{width:100%;background:#999; height:calc(100% - 100px); height:-moz-calc(100% - 100px); height:-webkit-calc(100% - 100px); }
aside{width:200px;height:100%; background:#666;float:left;}
.right-blk{width:clac(100% - 200px); width:-moz-clac(100% - 200px); width:-webkit-clac(100% - 200px); height:100%; background:#ddd;overflow:auto;}
<div class="main-container">
<header>
this is fixed header
</header>
<div class="second-row">
<aside>
this is fixed left block
</aside>
<div class="right-blk">
<div><div class="lc"><h2 class="what"><span>What is Lorem Ipsum?</span></h2><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div><div class="rc"><h2 class="why"><span>Why do we use it?</span></h2><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div>
<div><div class="lc"><h2 class="what"><span>What is Lorem Ipsum?</span></h2><p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div><div class="rc"><h2 class="why"><span>Why do we use it?</span></h2><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p></div></div>
</div>
</div>
</div>
I was experiencing an issue in IE11, where if a bulleted list was next to a floated images, the bullets were staying to the left, whereas the text was wrapping around (as expected) the the right.
div {
padding: 20px;
}
img {
float: left;
margin-right: 20px;
}
<div>
<img src="http://placebear.com/300/300" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<ul>
<li>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</li>
<li>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</li>
<li>'Content here, content here', making it look like readable English.</li>
<li>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</li>
<li>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</li>
</ul>
</div>
I managed to solve the issue by pulling the bullets inside the li but now, I'd like to align the bullets with the p tags (aka respect the image's margin). This is what I have so far:
div {
padding: 20px;
}
img {
float: left;
margin-right: 20px;
}
ul {
list-style-position: inside;
padding: 0;
}
li {
text-indent: -1em;
padding-left: 1em;
}
<div>
<img src="http://placebear.com/300/300" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<ul>
<li>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</li>
<li>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</li>
<li>'Content here, content here', making it look like readable English.</li>
<li>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</li>
<li>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</li>
<li>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</li>
<li>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</li>
<li>'Content here, content here', making it look like readable English.</li>
<li>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</li>
<li>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</li>
</ul><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
Would this work? (adding overflow: hidden to the <li>)
div {
padding: 20px;
}
img {
float: left;
margin-right: 20px;
}
ul {
list-style-position: inside;
padding: 0;
}
li {
text-indent: -1em;
padding-left: 1em;
overflow: hidden;
}
<div>
<img src="http://placebear.com/300/300" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<ul>
<li>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</li>
<li>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</li>
<li>'Content here, content here', making it look like readable English.</li>
<li>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</li>
<li>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</li>
<li>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</li>
<li>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</li>
<li>'Content here, content here', making it look like readable English.</li>
<li>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.</li>
<li>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</li>
</ul><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
I have implemented a section with scroll bar which will display the description. its working fine now. but its having the default style now. i want to custom style the scroll bar so that it will look good.
HTML CODE
<div class="desc" style="width:100px; height:300px; overflow: auto; background:#CCC;" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
You can use slim scroll plugin for this http://rocha.la/jQuery-slimScroll.
CSS scrollbar properties are available to customize it. E.g.:
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color
scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
Detailed answers is available at:
CSS customized scroll bar in div