Hey i have wrapper and container which i divide on 2 sides, left and right. I can't add any colors, backgrounds, fonts or anything to right side. Is this good way to solve this problem or should i be doing something else? And if you know how to fix let me know, i tried using !important but it's not working. Adding jsfiddle and code:
home {} #wrapper {
background-color: #FFFFFF;
padding: 15px;
overflow: auto;
}
#wrapper .leftbox {
float: left;
width: 63%;
padding: 12px;
}
#wrapper .rightbox {
float: right;
padding: 12px;
padding-right: 120px;
}
.rightbox.color-box {
height: 200px;
background-color: #2C2C2C;
font-size: 30px!important;
}
<home>
<div class="container">
<!-- wrapper-->
<div id="wrapper">
<div class="leftbox">
<h3>Welcome page</h3>
<p style="padding-top: 30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit posuere lobortis. Ut placerat vitae dolor vitae ultrices. Fusce tristique enim at lacus porta, sed dictum massa fermentum. Etiam a ullamcorper mi, vitae tristique lectus.
Sed ut finibus lectus, vel rutrum dui. Nullam vestibulum non tellus sit amet interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec aliquet, ex ut faucibus tempor, nulla tortor sollicitudin nunc, at feugiat nulla erat
nec magna. Nullam venenatis maximus nulla, eget blandit libero dignissim a. Maecenas et lorem sagittis, hendrerit metus ut, aliquet purus. Nunc tempor ultrices velit sit amet feugiat. Curabitur velit eros, bibendum in fermentum sed, mattis sit
amet sem. Maecenas sodales vehicula egestas.</p>
<p>Donec placerat molestie nunc quis malesuada. Vivamus sed ligula at dui blandit hendrerit et non sem. Ut mollis varius nisi, et pellentesque massa condimentum quis. Nulla at facilisis sem. Etiam mauris lorem, suscipit eget vulputate eu, cursus
ornare eros. Donec sit amet nibh id lectus feugiat egestas sed ut ligula. Fusce cursus ligula lectus, nec eleifend augue egestas sit amet.</p>
<p>
Proin arcu mauris, cursus vel est nec, condimentum mattis nunc. Curabitur in massa a dui vestibulum imperdiet non eu justo. Suspendisse porta, lectus ut porta vulputate, libero massa euismod massa, quis scelerisque dolor massa ut eros. In id dolor vitae
felis gravida lacinia. Cras vulputate turpis at elit placerat, ut aliquam elit mattis. Fusce ante est, volutpat sollicitudin eleifend ac, lobortis eu mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras sed maximus orci. Etiam pulvinar est metus, eget dapibus justo vehicula nec. Phasellus lectus magna, eleifend finibus nisi a, faucibus accumsan arcu. Nam sed ante pellentesque, sollicitudin quam eu, aliquet eros. Ut vehicula vestibulum
dui id sagittis. Suspendisse pharetra id dui nec egestas. Aliquam scelerisque pulvinar metus. In sagittis ornare commodo.
</p>
<p>
Curabitur in ipsum congue, ultricies nunc id, euismod eros. Vestibulum hendrerit augue libero, quis fermentum dui blandit vestibulum. Nulla pharetra volutpat dapibus. Ut tincidunt quam vel nunc iaculis rhoncus. Ut et egestas enim. Etiam a hendrerit neque.
Donec iaculis et sapien nec placerat. Phasellus lobortis, justo ac tempus posuere, nulla libero condimentum odio, fringilla vehicula metus ligula vel metus. Nunc vel quam quis turpis ultricies tempor. Nulla ac nibh massa. Aenean porta auctor
metus, vitae rhoncus mi iaculis sed. Vivamus pulvinar finibus urna, semper bibendum sem accumsan a. Etiam ac auctor elit, sit amet hendrerit velit. Sed volutpat ante neque, quis molestie purus pellentesque ut.</p>
<p>Integer ornare convallis nisl viverra mollis. Nullam ac massa a quam blandit ullamcorper. Nunc venenatis in dui eget faucibus. Fusce dapibus mauris sit amet magna gravida maximus. Duis condimentum, arcu non blandit placerat, nibh lorem fermentum
dui, et maximus enim enim at sem. Donec tempor lobortis justo vel sagittis. Donec auctor bibendum dignissim. Aenean id fringilla lorem. Etiam varius felis sed ligula tempus, vel sodales quam dignissim. Sed et posuere quam. Sed id libero et tellus
ultrices congue. Aenean commodo commodo consectetur. Curabitur ultricies non sem vitae hendrerit.</p>
<p>Aliquam erat volutpat. Sed tristique, est eget interdum scelerisque, tortor nibh vulputate lacus, in vehicula felis felis ut ligula. Phasellus sit amet finibus mauris. Cras gravida tincidunt finibus. Vivamus venenatis eros non felis rhoncus, vel
tempus nisl faucibus. Integer ac vulputate risus. Maecenas eget imperdiet lacus. Suspendisse bibendum, justo vel elementum accumsan, lorem magna tincidunt lorem, sit amet rutrum neque eros at nunc. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aliquam condimentum congue ante non commodo. Morbi a urna vitae magna sodales scelerisque. Fusce quam arcu, bibendum in erat vitae, pretium lacinia magna. Aliquam iaculis fermentum ultricies.</p>
<p>
Praesent sed felis at ligula euismod elementum sed a lectus. Curabitur scelerisque augue est. Suspendisse suscipit non turpis ut venenatis. Aliquam id interdum risus. Sed laoreet lorem tincidunt, sollicitudin elit elementum, fringilla leo. Fusce volutpat
nulla sed mauris interdum, eget lobortis magna congue. Vivamus condimentum neque quis commodo laoreet.</p>
</div>
<div class="rightbox">
<div class="color-box">
lol
</div>
</div>
</div>
</div>
</home>
Change your selector from .rightbox.color-box to .rightbox .color-box
CSS Selectors
You need to follow css standards. If you write .rightbox.color-box this means both the classes are there in same div but here you are trying to target .color-box which is children of .rightbox so you need to give space between both classes
home {} #wrapper {
background-color: #FFFFFF;
padding: 15px;
overflow: auto;
}
#wrapper .leftbox {
float: left;
width: 63%;
padding: 12px;
}
#wrapper .rightbox {
float: right;
padding: 12px;
padding-right: 120px;
background: #ccc;
color: red;
}
.rightbox .color-box {
height: 200px;
background-color: #2C2C2C;
font-size: 30px!important;
}
<home>
<div class="container">
<!-- wrapper-->
<div id="wrapper">
<div class="leftbox">
<h3>Welcome page</h3>
<p style="padding-top: 30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit posuere lobortis. Ut placerat vitae dolor vitae ultrices. Fusce tristique enim at lacus porta, sed dictum massa fermentum. Etiam a ullamcorper mi, vitae tristique lectus.
Sed ut finibus lectus, vel rutrum dui. Nullam vestibulum non tellus sit amet interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec aliquet, ex ut faucibus tempor, nulla tortor sollicitudin nunc, at feugiat nulla erat
nec magna. Nullam venenatis maximus nulla, eget blandit libero dignissim a. Maecenas et lorem sagittis, hendrerit metus ut, aliquet purus. Nunc tempor ultrices velit sit amet feugiat. Curabitur velit eros, bibendum in fermentum sed, mattis sit
amet sem. Maecenas sodales vehicula egestas.</p>
<p>Donec placerat molestie nunc quis malesuada. Vivamus sed ligula at dui blandit hendrerit et non sem. Ut mollis varius nisi, et pellentesque massa condimentum quis. Nulla at facilisis sem. Etiam mauris lorem, suscipit eget vulputate eu, cursus
ornare eros. Donec sit amet nibh id lectus feugiat egestas sed ut ligula. Fusce cursus ligula lectus, nec eleifend augue egestas sit amet.</p>
<p>
Proin arcu mauris, cursus vel est nec, condimentum mattis nunc. Curabitur in massa a dui vestibulum imperdiet non eu justo. Suspendisse porta, lectus ut porta vulputate, libero massa euismod massa, quis scelerisque dolor massa ut eros. In id dolor vitae
felis gravida lacinia. Cras vulputate turpis at elit placerat, ut aliquam elit mattis. Fusce ante est, volutpat sollicitudin eleifend ac, lobortis eu mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras sed maximus orci. Etiam pulvinar est metus, eget dapibus justo vehicula nec. Phasellus lectus magna, eleifend finibus nisi a, faucibus accumsan arcu. Nam sed ante pellentesque, sollicitudin quam eu, aliquet eros. Ut vehicula vestibulum
dui id sagittis. Suspendisse pharetra id dui nec egestas. Aliquam scelerisque pulvinar metus. In sagittis ornare commodo.
</p>
<p>
Curabitur in ipsum congue, ultricies nunc id, euismod eros. Vestibulum hendrerit augue libero, quis fermentum dui blandit vestibulum. Nulla pharetra volutpat dapibus. Ut tincidunt quam vel nunc iaculis rhoncus. Ut et egestas enim. Etiam a hendrerit neque.
Donec iaculis et sapien nec placerat. Phasellus lobortis, justo ac tempus posuere, nulla libero condimentum odio, fringilla vehicula metus ligula vel metus. Nunc vel quam quis turpis ultricies tempor. Nulla ac nibh massa. Aenean porta auctor
metus, vitae rhoncus mi iaculis sed. Vivamus pulvinar finibus urna, semper bibendum sem accumsan a. Etiam ac auctor elit, sit amet hendrerit velit. Sed volutpat ante neque, quis molestie purus pellentesque ut.</p>
<p>Integer ornare convallis nisl viverra mollis. Nullam ac massa a quam blandit ullamcorper. Nunc venenatis in dui eget faucibus. Fusce dapibus mauris sit amet magna gravida maximus. Duis condimentum, arcu non blandit placerat, nibh lorem fermentum
dui, et maximus enim enim at sem. Donec tempor lobortis justo vel sagittis. Donec auctor bibendum dignissim. Aenean id fringilla lorem. Etiam varius felis sed ligula tempus, vel sodales quam dignissim. Sed et posuere quam. Sed id libero et tellus
ultrices congue. Aenean commodo commodo consectetur. Curabitur ultricies non sem vitae hendrerit.</p>
<p>Aliquam erat volutpat. Sed tristique, est eget interdum scelerisque, tortor nibh vulputate lacus, in vehicula felis felis ut ligula. Phasellus sit amet finibus mauris. Cras gravida tincidunt finibus. Vivamus venenatis eros non felis rhoncus, vel
tempus nisl faucibus. Integer ac vulputate risus. Maecenas eget imperdiet lacus. Suspendisse bibendum, justo vel elementum accumsan, lorem magna tincidunt lorem, sit amet rutrum neque eros at nunc. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Aliquam condimentum congue ante non commodo. Morbi a urna vitae magna sodales scelerisque. Fusce quam arcu, bibendum in erat vitae, pretium lacinia magna. Aliquam iaculis fermentum ultricies.</p>
<p>
Praesent sed felis at ligula euismod elementum sed a lectus. Curabitur scelerisque augue est. Suspendisse suscipit non turpis ut venenatis. Aliquam id interdum risus. Sed laoreet lorem tincidunt, sollicitudin elit elementum, fringilla leo. Fusce volutpat
nulla sed mauris interdum, eget lobortis magna congue. Vivamus condimentum neque quis commodo laoreet.</p>
</div>
<div class="rightbox">
<div class="color-box">
lol
</div>
</div>
</div>
</div>
</home>
Read brief about css selectors here
Please add this code
#wrapper .leftbox {
float: left;
width: 50%;
padding: 0;
}
#wrapper .rightbox {
float: left;
padding: 0;
padding-right: 0;
background: #000;
width: 50%;
}
Related
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 10 months ago.
My aim is to have the height of the container limited to that of the image, with the overflow becoming scrollable on the y-axis.
I have tried grid-template-columns: repeat(2, minmax(0, min-content)) but to no avail.
Can some help me out? Such a small styling bug has been bugging me all day ;)
What i'm currently dealing with:
What i'm aiming for:
So, you want the height of the grid to be determined by the height of the image in the right column, not the height of the text in the left column? In that case, you need to remove the text from the flow by wrapping it in an element with position: absolute;. That way, its characteristics don’t affect the rest of the layout.
When you run this snippet, make sure you then click Full Page to see the effect properly.
body {
margin: 1em;
}
.g1 {
margin: 1em 0;
display: grid;
grid-template-columns: 1fr auto;
gap: 1em;
}
.w1 {
position: relative;
}
.w2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
}
.w2 p:first-child {
margin-top: 0;
}
.w2 p:last-child {
margin-bottom: 0;
}
header, footer {
background-color: cyan;
padding: 1px 1em;
}
<header>
<p>Before</p>
</header>
<div class="g1">
<div class="w1">
<div class="w2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus velit ut metus pellentesque, non tincidunt erat sagittis. Donec mi justo, venenatis sed urna quis, consectetur vulputate lorem. Cras id ipsum at tellus porttitor egestas sit amet id eros. Phasellus aliquet nunc vel consectetur iaculis. Etiam dapibus, tellus sit amet consequat ultricies, sapien ante molestie tellus, nec tincidunt arcu ante vitae diam. Nam sed eros eu tellus gravida ultrices. Pellentesque vestibulum mauris ante, in vehicula massa lobortis sit amet. Nunc vitae mattis dui, quis porttitor justo. Phasellus sed suscipit sapien, ut tincidunt nibh. Phasellus rhoncus, magna quis faucibus malesuada, ipsum augue convallis diam, eu aliquam metus dolor non ante. Mauris accumsan dolor eu magna venenatis, et rhoncus orci varius. Sed eu urna eu tellus elementum mollis ac sit amet felis. Nam ultricies mi mattis nisi interdum lobortis. Nam tincidunt vehicula pretium.</p>
<p>Suspendisse eget aliquet ligula, at molestie dolor. Etiam scelerisque ac orci at scelerisque. Etiam arcu nisi, condimentum id erat viverra, mollis rutrum arcu. Proin ut mi aliquam, dictum nibh ac, varius massa. Aenean vitae ultrices purus. Phasellus eu tellus pretium, fringilla nunc eget, porttitor massa. Nulla pretium commodo velit id scelerisque. Vivamus faucibus volutpat purus id accumsan. In venenatis viverra vehicula. Phasellus quam leo, luctus nec consectetur vel, tincidunt ultrices urna. Integer tristique rutrum arcu, non placerat sapien luctus ut. Proin scelerisque dui ligula, vehicula maximus dolor scelerisque vitae. Curabitur ornare, lectus non ornare venenatis, odio sapien pulvinar erat, a luctus mi lacus vel ante. Sed eu porttitor erat.</p>
<p>Integer gravida maximus magna non finibus. Etiam mollis, nisl in dignissim interdum, nibh purus fringilla diam, sit amet luctus tortor arcu quis nibh. Maecenas consequat massa et libero luctus, nec gravida erat tincidunt. Praesent sed porttitor turpis. Morbi imperdiet finibus tellus, et dignissim neque vulputate in. Mauris vel vulputate sapien. Duis maximus velit at porta varius. Sed vitae gravida arcu, a condimentum leo. Maecenas elementum enim nibh, sed blandit urna pulvinar sit amet. Pellentesque vel efficitur dolor. Etiam at mollis nibh, ac rutrum nunc. Pellentesque auctor eget lorem ac suscipit. Quisque enim tellus, iaculis sit amet enim in, aliquet malesuada erat. Nullam venenatis at ligula sodales rhoncus. Nulla non velit quis tellus finibus pellentesque scelerisque sed ante.</p>
<p>In rutrum, felis vel fermentum malesuada, turpis ex semper nunc, eu tincidunt mauris nulla vel leo. Ut bibendum arcu urna, nec hendrerit nulla finibus ac. Proin ultrices tortor ac dolor consequat interdum. Curabitur at egestas lorem. In risus massa, faucibus at est sit amet, interdum convallis nulla. Sed ultricies leo lacus, sed pharetra risus porttitor vitae. Nunc tempus urna in dui egestas, eget eleifend lorem finibus. Pellentesque auctor nec est et rutrum. Fusce quis tincidunt lacus. Proin efficitur augue sed eleifend venenatis. Aenean mattis sed odio sit amet lobortis. Vivamus nibh arcu, scelerisque ac purus in, fringilla scelerisque orci.</p>
<p>Praesent volutpat ac justo a luctus. Sed eget orci risus. Sed faucibus turpis id ligula congue facilisis. Nulla facilisi. Aliquam egestas rutrum risus id varius. Etiam ac lacinia mi. Mauris sit amet facilisis arcu. Pellentesque metus nibh, vulputate vel dui fringilla, pellentesque dictum sapien. Praesent interdum nisl at sollicitudin maximus. Morbi ligula odio, hendrerit at risus condimentum, dictum mollis lectus. Sed lacinia rutrum maximus.</p>
<p>Sed orci nisl, cursus lobortis condimentum aliquet, rutrum et metus. Vestibulum sit amet dui mi. Mauris eleifend nisi nec elit euismod tristique. Sed feugiat, quam ac finibus pellentesque, orci dolor auctor nibh, vel pharetra odio mi at magna. Proin sed sapien a sapien consequat dapibus ut quis nulla. Maecenas sit amet feugiat metus, in dictum dolor. Ut sed condimentum dolor, nec congue sapien. Etiam aliquet tellus vitae nibh iaculis consectetur. Curabitur quis fermentum urna. Fusce varius ut erat et cursus. Donec nisl quam, placerat in porta id, ultrices ut diam. Aliquam nec lectus hendrerit arcu maximus egestas nec eu nisl. In id ex in risus vulputate aliquam eu sed ligula. Morbi vel blandit leo, commodo vulputate urna.</p>
<p>Donec facilisis vel lectus vel dapibus. Sed cursus felis vitae porttitor commodo. Quisque et nisi nec metus iaculis facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius elit ut tellus pulvinar elementum in ac nisl. Vivamus sagittis ligula ac egestas semper. Integer at gravida ipsum, et molestie ipsum. Etiam vitae metus ut felis vehicula gravida eget vel turpis. Quisque luctus, nibh a lacinia luctus, augue mauris suscipit ex, pulvinar ornare eros nisi ut urna. Phasellus vitae volutpat justo. Nullam ac elit dolor.</p>
<p>Etiam congue odio nunc, a mattis enim ornare eget. Quisque et sodales quam. Aliquam sollicitudin enim non enim interdum consectetur. Nullam bibendum mi sed massa euismod, pulvinar auctor magna dictum. Donec et lorem finibus, vehicula urna eget, ullamcorper massa. Mauris sem orci, dapibus sed consequat sit amet, malesuada et elit. Integer sit amet massa quam. Cras semper pellentesque urna, eget efficitur odio vestibulum vitae. Maecenas semper, sapien sit amet lobortis venenatis, ligula mauris placerat purus, at congue augue sem id mauris. Etiam gravida elit ut rhoncus varius. Ut nec est metus. Maecenas quis posuere diam. Pellentesque quis nulla interdum, consectetur ipsum eleifend, ultrices libero. Morbi tincidunt mauris at lorem egestas imperdiet quis ut est.</p>
</div>
</div>
<div>
<img src="https://onlinepngtools.com/images/examples-onlinepngtools/body-builder.png">
</div>
</div>
<footer>
<p>After</p>
</footer>
I have a simple set up, with a sticky footer. It works fine in a jsbin sandbox, but in the template I am using one of the parent (inner-wrapper in the example) has overflow: hidden css property, what messes up the sticky footer. Is it a way to wrap the main-container with a div and override the inner-wrapper's overflow property? I have tried to add overflow: visible to the div undo-overflow.
Here is the desired result: https://jsbin.com/merikujosa/4/edit?html,css,output or just simple remove the .inner-wrapper's overflow property.
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.inner-wrapper{
overflow: hidden;
}
.undo-overflow {
overflow: visible;
}
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa;
}
.main-content{
}
.main-footer{position:-webkit-sticky; position:sticky; bottom:0; border-color:red;}
<div class="inner-wrapper">
<div class="undo-overflow">
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel condimentum nisl, vel rutrum arcu. Aliquam venenatis nulla ac mi ornare fermentum. Nunc sagittis lobortis turpis, elementum maximus libero pharetra in. Etiam quis nisi vel nisi gravida suscipit sed id eros. Sed nec metus eget arcu dictum interdum. Praesent quis sollicitudin nisl. Maecenas ex sapien, feugiat vitae lectus a, faucibus dignissim lectus. Curabitur eros erat, convallis et lorem vel, faucibus elementum mi. Fusce porttitor ligula id erat mattis gravida. Aenean pharetra a lacus eget volutpat. Proin scelerisque sagittis condimentum. Donec vitae ex nunc. Aliquam dignissim tempor mollis.
Aliquam nec pulvinar arcu, sed sollicitudin nibh. Suspendisse gravida porta elit, id commodo nulla aliquam at. Duis in est consequat, finibus diam vitae, vulputate mauris. Sed blandit tortor ipsum, sed luctus lectus elementum eget. Quisque vel placerat mi, vel lobortis libero. Duis malesuada fermentum dolor, id vehicula ligula imperdiet quis. Quisque ipsum odio, ornare quis tempus in, varius eget nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras egestas fringilla efficitur. Vestibulum vitae vestibulum sem. Nunc vel libero vel nunc vestibulum scelerisque at interdum metus. Aliquam leo nulla, varius in urna non, pellentesque blandit nisl. Nulla laoreet leo justo, nec scelerisque leo tempus id.
Nulla quis fringilla turpis. Nunc vitae justo est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc et justo vel erat porta gravida. Integer rutrum malesuada nulla, sit amet ultricies velit fermentum vel. Nulla at sapien in purus facilisis maximus. Quisque ultrices, elit in elementum iaculis, tellus diam tincidunt est, sed auctor magna ante et nulla. Praesent eu leo consectetur, blandit justo rhoncus, venenatis tellus. Vivamus viverra neque hendrerit ipsum interdum iaculis. Aenean vulputate nunc vel justo congue, et lacinia sapien tempor. Suspendisse non magna velit. Morbi tempus mi id ex varius placerat. Pellentesque eleifend venenatis ante non aliquam. Quisque vel aliquet eros. Curabitur sodales, tellus sit amet placerat dapibus, ligula felis facilisis est, eu scelerisque augue leo in massa.
Duis scelerisque imperdiet sem nec ornare. Maecenas varius, lorem non iaculis suscipit, lacus neque cursus lacus, vitae pretium dolor lectus eget nisl. Quisque finibus porta nibh in accumsan. Donec semper ante nec massa convallis vulputate. Sed blandit vel libero rutrum vestibulum. Aenean eget lacus nec arcu consequat hendrerit nec id velit. Aenean maximus ipsum vel euismod auctor. Aliquam enim libero, lobortis at convallis quis, malesuada eu dui. Nunc eget volutpat odio, sed hendrerit felis.
Quisque convallis aliquet bibendum. Mauris malesuada urna a interdum venenatis. Nunc auctor varius luctus. Vivamus ac ultricies sapien, in suscipit dui. Duis tristique velit ut posuere tincidunt. Cras non laoreet augue, eu bibendum elit. Quisque sed scelerisque lorem, at fringilla orci.
</div>
<footer class="main-footer">FOOTER</footer>
</main>
<br><br><br><br>
</div>
</div>
CSS error here
Image here
Does anyone know why it says this, when I have referred to many documents?
I have a pop-up image that I want to appear from the bottom of the page and stops at the center.
HTML:
<div class="image-wrapper">
<div id="circle-parent" class="circle-parent" style="display: none">
<img id="circle" class="circle" src="assets/images/thanks_for_visiting_img.png">
<img id="close-button" class="close-button" src="assets/images/close_green.png" onclick="handleButtonClick()">
<img id="quotes-button" class="quotes-button" src="assets/images/btn.png" onclick="handleButtonClick()">
<div class="background">
</div>
</div>
</div>
CSS:
.circle-parent {
position: fixed;
top: 0;
left: 0;
width: 550px;
height: 550px;
z-index: 1;
right: 0px;
margin: auto;
bottom: 0px;
display: block;
outline: none;
max-width: none;
max-height: none;
cursor: default;
}
JS:
// window.addEventListener("load", function() {
// const popUp = document.getElementById("circle-parent")
// popUp.style.top = "20vh";
// })
Edithed according to your new (Edith).
function handleButtonClick() {
const popUp = document.getElementById("circle-parent");
console.log("onclick buttons work!");
if (popUp.style.display === "none") {
popUp.style.display = "block"; // elements visible
} else {
popUp.style.display = "none"; // elements hidden
}
}
window.addEventListener("load", function() {
const popUp = document.getElementById("circle-parent");
popUp.style.top = "10vh";
// handleClose for close/get quotes button
document.addEventListener("visibilitychange", () => {
// if (!cookieExists()) {
if (document.visibilityState === "hidden") {
popUp.style.display = "none";
} else if (document.visibilityState === "visible") {
popUp.style.display = "block";
// setCookie(cookieName);
}
// }
// else {
// setCookie(uklFocusCookie)
// }
});
});
.circle-parent {
position: fixed;
left: calc(50% - 225px);
width: 550px;
height: 550px;
z-index: 1;
right: 0px;
outline: none;
top: 140vh;
transition: all 1s ease;
}
.close-button {
position: absolute;
left: 80%;
top: 5%;
z-index: 1;
cursor: pointer;
}
.quotes-button {
position: absolute;
top: 67%;
left: 22%;
z-index: 1;
cursor: pointer;
}
.background {
display: block;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
overflow: auto;
background-color: rgb(0, 0, 0);
opacity: 0.83;
}
<div class="image-wrapper">
<div id="circle-parent" class="circle-parent">
<img id="circle" class="circle" src="assets/images/thanks_for_visiting_img.png">
<img id="close-button" class="close-button" src="assets/images/close_green.png" onclick="handleButtonClick()">
<img id="quotes-button" class="quotes-button" src="assets/images/btn.png" onclick="handleButtonClick()">
<div class="background">
</div>
</div>
</div>
<div class="other-stuff-behind">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sapien dolor, consequat a ipsum id, pharetra mattis felis. Cras blandit urna tellus, et facilisis ante auctor vel. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Integer sollicitudin erat ac lacus luctus consectetur. Donec ac lectus nulla. Aenean maximus rhoncus justo, ut dictum justo finibus eu. Donec dignissim erat at odio facilisis, sed placerat odio accumsan. Nulla vehicula arcu id semper
fermentum. Nulla vel tempus nisl. Fusce efficitur viverra blandit. Nunc condimentum sodales convallis. Aliquam malesuada enim nec vestibulum vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Phasellus consectetur tristique justo, quis dignissim felis dapibus id. Curabitur eu orci a odio egestas sodales. Morbi luctus metus quis ipsum pharetra gravida. Vivamus nec condimentum elit. Vivamus rutrum imperdiet nisi, pulvinar condimentum
leo consequat nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ac felis et nibh mollis porta non in augue. Phasellus sollicitudin erat ac orci auctor, eget efficitur diam pulvinar. Etiam
eu elit ac purus interdum laoreet. Vivamus rutrum, urna sed ultrices sagittis, libero urna aliquam justo, vel tincidunt lorem quam vel est. Maecenas ut tortor nec leo vestibulum ullamcorper at vitae sem. Quisque libero nulla, vulputate in
mauris et, tempor cursus nisi. In sed metus pulvinar tortor varius dapibus. In quis diam sagittis, dictum arcu in, congue nibh. Suspendisse interdum nisl ac risus elementum, sit amet accumsan lorem semper. Curabitur laoreet a dolor at dictum.
Ut ac facilisis quam. Mauris ut ultricies enim, ultrices auctor lorem. Proin fermentum nisl felis, aliquet maximus urna eleifend tincidunt. Nulla quam arcu, porttitor suscipit turpis eu, dignissim varius ipsum. Nulla non urna nunc. Phasellus
egestas laoreet leo in ultricies. Donec gravida fermentum nunc at ultrices. Integer quis lacus id enim lacinia convallis lacinia non neque. Integer molestie tempus fringilla. Suspendisse non leo pulvinar odio placerat aliquam eget sit amet
sem. Aenean pulvinar porta diam at finibus. Aenean pellentesque orci sit amet augue imperdiet, ut sollicitudin leo accumsan. Ut aliquam tortor quis quam volutpat, pulvinar semper augue egestas. Nullam dapibus accumsan gravida. Integer euismod
justo a elit dictum, eget pulvinar elit sagittis. Pellentesque et felis lacus. Curabitur scelerisque, mi vitae sollicitudin placerat, risus odio eleifend mi, non tincidunt nisi odio at orci. Etiam sit amet ex lacinia, molestie ligula sed,
luctus justo. Fusce eget aliquam mi, non lobortis ex. Ut bibendum sem sapien, sed placerat justo hendrerit in. Etiam mi nisi, interdum ut malesuada vitae, tempus at ipsum. Praesent quis turpis pharetra, tincidunt magna id, aliquet leo. Nullam
mollis mi at interdum lacinia. Maecenas ut magna feugiat, euismod augue eget, posuere diam. In hac habitasse platea dictumst. Duis fringilla interdum cursus. Sed nisi massa, ultricies vitae blandit et, sodales ut mauris. Sed sed metus diam.
Nullam vestibulum consectetur facilisis. Morbi in purus commodo, congue urna eu, interdum metus. Duis dolor dui, elementum id rhoncus ac, ultrices ac libero. Vivamus vestibulum blandit consequat. In at turpis ut augue efficitur tristique nec
sed erat. Sed fermentum augue eget ipsum convallis ornare. Nullam ut tortor risus. Maecenas consequat pharetra porttitor. Proin nec odio rhoncus, aliquam metus id, laoreet arcu. Nullam ullamcorper magna sit amet metus consectetur, at mollis
ex tincidunt. Donec consequat purus dui, in laoreet libero cursus quis. Fusce ut felis sit amet velit tempus lobortis. Vestibulum sed eleifend urna, quis vestibulum nulla. Sed at scelerisque risus. Maecenas molestie massa eget felis vehicula
accumsan. Sed feugiat in dolor sit amet placerat. Morbi lacinia ante ac lacus pretium consectetur et eu odio. Pellentesque tempus pretium rhoncus. Praesent at faucibus neque. Nulla sed est sit amet ex feugiat iaculis vel vitae lectus. Donec
tempus elit eu turpis porta viverra. Suspendisse commodo nisl purus, nec ultricies lorem commodo et. Vivamus lacinia porttitor enim a efficitur. Cras porttitor justo id sem auctor dignissim. Morbi ut ante et augue convallis pellentesque viverra
ac felis. Morbi non bibendum nunc. Vivamus nec vehicula ipsum. Sed dictum felis eget est condimentum, at sodales eros aliquet. Proin maximus ut sem at iaculis. Nulla ex purus, viverra posuere arcu non, bibendum condimentum arcu. In tortor
felis, molestie non pharetra at, malesuada vitae ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere, urna a rutrum efficitur, ante eros maximus dolor, ac consequat quam ante ut est. Ut aliquam, nulla fringilla
convallis consectetur, nisi dolor semper risus, quis vestibulum elit felis eget metus. Quisque egestas ultricies tempor. Phasellus sodales sem vitae justo facilisis, sit amet commodo diam gravida. Aenean cursus mi mauris, quis accumsan leo
sodales blandit. Cras sed sollicitudin velit. Donec eleifend mauris id eros fermentum porta. Integer luctus dolor nunc, sit amet semper nisi convallis vitae. Vivamus in sem ex. Fusce eu efficitur mauris, at pretium ligula. Sed dignissim, dolor
quis iaculis sagittis, nibh ex scelerisque mauris, sed faucibus nibh augue at mi. Aenean ultricies ac tortor eu sagittis. Sed facilisis sodales eros, et commodo ante vestibulum nec. Sed posuere condimentum pellentesque. Nulla vehicula tincidunt
nisl vitae finibus. Nunc erat dolor, pretium dictum commodo ultricies, aliquam a mauris. Fusce eget aliquam mi, non lobortis ex. Ut bibendum sem sapien, sed placerat justo hendrerit in. Etiam mi nisi, interdum ut malesuada vitae, tempus at
ipsum. Praesent quis turpis pharetra, tincidunt magna id, aliquet leo. Nullam mollis mi at interdum lacinia. Maecenas ut magna feugiat, euismod augue eget, posuere diam. In hac habitasse platea dictumst. Duis fringilla interdum cursus. Sed
nisi massa, ultricies vitae blandit et, sodales ut mauris. Sed sed metus diam. Nullam vestibulum consectetur facilisis. Morbi in purus commodo, congue urna eu, interdum metus. Duis dolor dui, elementum id rhoncus ac, ultrices ac libero. Vivamus
vestibulum blandit consequat. In at turpis ut augue efficitur tristique nec sed erat. Sed fermentum augue eget ipsum convallis ornare. Nullam ut tortor risus. Maecenas consequat pharetra porttitor. Proin nec odio rhoncus, aliquam metus id,
laoreet arcu. Nullam ullamcorper magna sit amet metus consectetur, at mollis ex tincidunt. Donec consequat purus dui, in laoreet libero cursus quis. Fusce ut felis sit amet velit tempus lobortis. Vestibulum sed eleifend urna, quis vestibulum
nulla. Sed at scelerisque risus. Maecenas molestie massa eget felis vehicula accumsan. Sed feugiat in dolor sit amet placerat. Morbi lacinia ante ac lacus pretium consectetur et eu odio. Pellentesque tempus pretium rhoncus. Praesent at faucibus
neque. Nulla sed est sit amet ex feugiat iaculis vel vitae lectus. Donec tempus elit eu turpis porta viverra. Suspendisse commodo nisl purus, nec ultricies lorem commodo et. Vivamus lacinia porttitor enim a efficitur. Cras porttitor justo
id sem auctor dignissim. Morbi ut ante et augue convallis pellentesque viverra ac felis. Morbi non bibendum nunc. Vivamus nec vehicula ipsum. Sed dictum felis eget est condimentum, at sodales eros aliquet. Proin maximus ut sem at iaculis.
Nulla ex purus, viverra posuere arcu non, bibendum condimentum arcu. In tortor felis, molestie non pharetra at, malesuada vitae ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere, urna a rutrum efficitur, ante
eros maximus dolor, ac consequat quam ante ut est. Ut aliquam, nulla fringilla convallis consectetur, nisi dolor semper risus, quis vestibulum elit felis eget metus. Quisque egestas ultricies tempor. Phasellus sodales sem vitae justo facilisis,
sit amet commodo diam gravida. Aenean cursus mi mauris, quis accumsan leo sodales blandit. Cras sed sollicitudin velit. Donec eleifend mauris id eros fermentum porta. Integer luctus dolor nunc, sit amet semper nisi convallis vitae. Vivamus
in sem ex. Fusce eu efficitur mauris, at pretium ligula. Sed dignissim, dolor quis iaculis sagittis, nibh ex scelerisque mauris, sed faucibus nibh augue at mi. Aenean ultricies ac tortor eu sagittis. Sed facilisis sodales eros, et commodo
ante vestibulum nec. Sed posuere condimentum pellentesque. Nulla vehicula tincidunt nisl vitae finibus. Nunc erat dolor, pretium dictum commodo ultricies, aliquam a mauris.
</div>
I'm learning CSS and HTML as I go along, so excuse my ignorance.
I've been trying to create an about me page for the past few hours trying various combinations of CSS and HTML to get this to work but I'm having some trouble. Essentially, I'm trying to have a body of text next to a vertical image. Im trying to get the image on the right to scale so that it is the same height as the body of text and so that the image is slightly seperated from the div.I'd also like it to fill up the division; the images show what I'm trying to achieve.
This is what I've accomplished:
Progress:
What I'm trying to achieve:
Here's the relevant code:
.Row {
display: table;
table-layout: fixed;
/*this was fixed*/
margin-bottom: 5px;
}
.Column {
display: table-cell;
}
.Column #aboutMe {
background-color: rgba(50, 74, 17, 1.00);
margin-right: 20%;
float: left;
}
.Column #aboutMe h1 {
color: white;
padding-left: 10px;
}
.Column #aboutMe p {
color: white;
padding-left: 10px;
padding-right: 10px;
}
.Column #test {
max-height: 100%;
max-width: 100%;
}
<!--About me start-->
<div class="Row">
<div class="Column">
<div id="aboutMe">
<h1 id="blogTitle">What it's all about</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor eros justo, ut facilisis nisi faucibus id. Sed venenatis aliquam rutrum. Maecenas id elementum quam, eget molestie sapien. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Suspendisse eu tristique ligula. Mauris a mollis felis. Vivamus finibus mi quam, ac varius quam pretium in. Etiam fermentum dolor commodo massa fermentum, egestas porta ex bibendum. Vestibulum ac erat sem. Nam
interdum risus et tortor efficitur pretium. Curabitur lobortis massa lectus, non efficitur nisi ornare vel. Proin porttitor commodo libero, quis accumsan dui hendrerit at. Aliquam eget dui placerat, luctus nisi et, auctor mi. Aliquam a convallis
enim. Donec at nisl nec massa mollis convallis.
</p>
<p>
Curabitur tristique lacus non leo dapibus, at mattis est rutrum. Duis vel porttitor neque, nec aliquam nulla. Donec pulvinar, dui sed blandit ultrices, justo leo cursus turpis, vitae vehicula massa nisl nec erat. Vestibulum tincidunt urna non lorem consequat
pulvinar. Curabitur dignissim varius odio, eget dignissim lectus feugiat et. Praesent sit amet euismod purus. Sed lobortis bibendum risus, quis iaculis justo fermentum quis. Integer consectetur pellentesque nibh, eu dignissim odio facilisis sodales.
</p>
<p>
Nullam a felis euismod, sollicitudin enim eget, laoreet sapien. Nullam non nulla aliquet, gravida arcu sed, laoreet libero. Quisque hendrerit lobortis hendrerit. Etiam condimentum urna elit, ac tincidunt erat facilisis ut. Nullam semper leo felis, vitae
dictum dui placerat a. Maecenas ornare, lacus id vestibulum euismod, libero turpis efficitur lectus, ac vehicula odio magna sit amet lacus. Quisque id scelerisque erat. Cras placerat pulvinar libero quis lobortis. Morbi nec sem id risus scelerisque
molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum ex ac lectus porttitor, a varius elit semper. Curabitur laoreet sit amet nisl in varius. Duis eu ipsum ac risus consectetur
porta vitae eget dolor. Sed blandit, leo vitae efficitur auctor, est mi dapibus dui, et iaculis dui odio et neque.
</p>
<p>
Cras libero nibh, ullamcorper sed aliquet euismod, posuere ac erat. Nam eget tincidunt odio. Nam sed justo iaculis, blandit ui non, luctus quam. Fusce nibh ligula, laoreet laoreet eleifend a, convallis ac ex. Aenean interdum elit at erat cursus tincidunt.
Ut a placerat enim. Sed gravida fermentum varius
</p>
<p>
Curabitur vestibulum feugiat gravida. Phasellus aliquet auctor dictum. Sed sed tristique justo, id facilisis quam. Suspendisse mattis erat dolor, ac convallis sem dapibus eget. Aenean tempus posuere nibh, at molestie ante gravida vel. Praesent at accumsan
augue. Fusce volutpat et sem nec ullamcorper. Nam massa urna, sodales ac quam vitae, feugiat vulputate metus. Praesent commodo sit amet nibh in rutrum. Aliquam augue nunc, molestie eget consequat et, pretium nec risus. Sed aliquam massa sapien,
eu suscipit tortor vehicula suscipit. Maecenas et ligula vel metus dignissim vestibulum ac in nulla. Cras id ornare ligula.
</p>
</div>
</div>
<div class="Column">
<img id="test" src="images/about.jpg">
</div>
</div>
<!--About me end-->
I'd really appreciate help on getting this fixed.
Given the problem you describe, I think I would try to go with the grid approach. Making use of this rather recent CSS feature would make it easier for you to have a responsive page while having rather small boilerplate CSS to start with.
You can read more there https://www.w3schools.com/css/css_grid.asp or probably easily find tutorials about the CSS grid.
For your specific problem, here is a small snippet I came up with:
.Row {
display: grid;
grid-template-columns: 8fr 2fr;
grid-template-areas: "content picture";
grid-column-gap: 10px;
}
.Column {
grid-area: content;
}
.Column #aboutMe {
background-color: rgba(50, 74, 17, 1.00);
float: left;
}
.Column #aboutMe h1 {
color: white;
padding-left: 10px;
}
.Column #aboutMe p {
color: white;
padding-left: 10px;
padding-right: 10px;
}
.Picture-Container {
grid-area: picture;
}
.Picture {
width: 100%;
height: 100%;
}
<div class="Row">
<div class="Column">
<div id="aboutMe">
<h1 id="blogTitle">What it's all about</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor eros justo, ut facilisis nisi faucibus id. Sed venenatis aliquam rutrum. Maecenas id elementum quam, eget molestie sapien. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Suspendisse eu tristique ligula. Mauris a mollis felis. Vivamus finibus mi quam, ac varius quam pretium in. Etiam fermentum dolor commodo massa fermentum, egestas porta ex bibendum. Vestibulum ac erat sem. Nam
interdum risus et tortor efficitur pretium. Curabitur lobortis massa lectus, non efficitur nisi ornare vel. Proin porttitor commodo libero, quis accumsan dui hendrerit at. Aliquam eget dui placerat, luctus nisi et, auctor mi. Aliquam a convallis
enim. Donec at nisl nec massa mollis convallis.
</p>
<p>
Curabitur tristique lacus non leo dapibus, at mattis est rutrum. Duis vel porttitor neque, nec aliquam nulla. Donec pulvinar, dui sed blandit ultrices, justo leo cursus turpis, vitae vehicula massa nisl nec erat. Vestibulum tincidunt urna non lorem consequat
pulvinar. Curabitur dignissim varius odio, eget dignissim lectus feugiat et. Praesent sit amet euismod purus. Sed lobortis bibendum risus, quis iaculis justo fermentum quis. Integer consectetur pellentesque nibh, eu dignissim odio facilisis sodales.
</p>
<p>
Nullam a felis euismod, sollicitudin enim eget, laoreet sapien. Nullam non nulla aliquet, gravida arcu sed, laoreet libero. Quisque hendrerit lobortis hendrerit. Etiam condimentum urna elit, ac tincidunt erat facilisis ut. Nullam semper leo felis, vitae
dictum dui placerat a. Maecenas ornare, lacus id vestibulum euismod, libero turpis efficitur lectus, ac vehicula odio magna sit amet lacus. Quisque id scelerisque erat. Cras placerat pulvinar libero quis lobortis. Morbi nec sem id risus scelerisque
molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum ex ac lectus porttitor, a varius elit semper. Curabitur laoreet sit amet nisl in varius. Duis eu ipsum ac risus consectetur
porta vitae eget dolor. Sed blandit, leo vitae efficitur auctor, est mi dapibus dui, et iaculis dui odio et neque.
</p>
<p>
Cras libero nibh, ullamcorper sed aliquet euismod, posuere ac erat. Nam eget tincidunt odio. Nam sed justo iaculis, blandit ui non, luctus quam. Fusce nibh ligula, laoreet laoreet eleifend a, convallis ac ex. Aenean interdum elit at erat cursus tincidunt.
Ut a placerat enim. Sed gravida fermentum varius
</p>
<p>
Curabitur vestibulum feugiat gravida. Phasellus aliquet auctor dictum. Sed sed tristique justo, id facilisis quam. Suspendisse mattis erat dolor, ac convallis sem dapibus eget. Aenean tempus posuere nibh, at molestie ante gravida vel. Praesent at accumsan
augue. Fusce volutpat et sem nec ullamcorper. Nam massa urna, sodales ac quam vitae, feugiat vulputate metus. Praesent commodo sit amet nibh in rutrum. Aliquam augue nunc, molestie eget consequat et, pretium nec risus. Sed aliquam massa sapien,
eu suscipit tortor vehicula suscipit. Maecenas et ligula vel metus dignissim vestibulum ac in nulla. Cras id ornare ligula.
</p>
</div>
</div>
<div class="Picture-Container">
<img class="Picture" src="images/about.jpg">
</div>
</div>
One potential issue though with this approach overall (yours or mine) is that it seems unlikely your picture will look nice given the width or height of it will depend on the screen where the page is displayed.
On OS X scrollbars in the browser have native platform styling. I'd actually like to have this style also on other platforms. I know it's possible on Chrome to customize the look of the scrollbars. Is there any way I can achieve the "OS X look" using CSS on other platforms in Chrome?
since you are working on an app in a webkit based device it's worth taking a look at https://css-tricks.com/custom-scrollbars-in-webkit/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
<html>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis magna eget efficitur viverra. Vestibulum feugiat felis maximus condimentum blandit. Etiam fringilla urna non libero malesuada pretium. Nulla facilisi. Nam finibus lacinia dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam eros a tellus rhoncus, sit amet efficitur est sollicitudin. Donec id felis nec sem tempus tempus. Vestibulum convallis elit non rutrum commodo.
Nullam viverra consequat est eu fringilla. Nunc ut turpis vulputate, scelerisque sem sed, mattis ligula. Nullam eu arcu ultrices, sagittis urna in, gravida velit. Nullam porta tempor mauris ac molestie. Nunc et orci interdum erat efficitur condimentum quis ut nulla. Donec accumsan tincidunt congue. Cras sollicitudin sit amet metus rhoncus convallis. Vestibulum scelerisque augue sit amet sapien varius venenatis. Sed non orci in dui varius tincidunt nec ac lectus. Suspendisse blandit, neque in efficitur posuere, augue risus aliquet sem, id sagittis turpis nisi non erat. Duis est lectus, egestas sit amet suscipit eu, ultricies non nisi. Phasellus dui lacus, iaculis eget condimentum vel, pulvinar placerat tortor. Etiam pellentesque leo nec egestas dictum.
Quisque euismod sodales est ac aliquet. Pellentesque porttitor mi aliquet cursus maximus. Nullam tincidunt non diam interdum laoreet. Aenean vel cursus odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque cursus, nibh quis semper tempor, felis justo dignissim turpis, eget accumsan leo nisl viverra sapien. Vestibulum quis vestibulum turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur mauris ante, mollis eget iaculis ut, feugiat non dui. Nullam quis mi ornare, porta metus quis, accumsan augue. Curabitur accumsan tempus aliquam. Vestibulum elementum at lectus in auctor. Donec consectetur eleifend purus consectetur pellentesque.
Ut porttitor est at magna laoreet, sit amet vestibulum sem suscipit. Vivamus eget erat congue, tincidunt tellus et, elementum augue. Nulla sit amet est iaculis, elementum massa sit amet, bibendum enim. Duis mollis, velit et hendrerit dictum, ligula tortor laoreet dui, eget aliquet felis dolor sed massa. Suspendisse potenti. Fusce iaculis nisl non velit bibendum, quis placerat nisi interdum. Maecenas faucibus ligula non pulvinar laoreet. Fusce sagittis massa ut lorem facilisis, in ullamcorper velit tristique. Morbi a facilisis elit. Sed blandit nulla at scelerisque scelerisque.
Praesent rhoncus tincidunt diam quis auctor. Maecenas blandit commodo commodo. Pellentesque quis dolor id urna maximus tristique vitae id lectus. Phasellus convallis accumsan nibh ac ornare. Pellentesque hendrerit ex in rutrum ultrices. Aenean nisi eros, bibendum non metus ac, tincidunt hendrerit lorem. Cras feugiat, augue et auctor auctor, felis libero sagittis justo, ac pulvinar quam arcu eu dolor. Praesent lectus mauris, molestie in elit quis, scelerisque consectetur lectus. Phasellus ac scelerisque leo. Nullam eget interdum sapien. Suspendisse et urna sodales, venenatis augue ac, volutpat nisi. Mauris non fermentum nibh.
Proin nec augue et lectus congue pretium. Nullam orci nibh, sagittis vitae ex in, iaculis viverra erat. Praesent vitae lorem urna. Sed mi nibh, accumsan eget fringilla vitae, gravida non orci. Aenean justo massa, finibus non aliquet quis, fermentum et odio. Donec scelerisque est nunc, sit amet vulputate libero sodales a. Integer placerat felis eu enim porttitor tristique. Phasellus vestibulum tempus magna. Quisque commodo sodales dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt nisi eget purus dapibus, quis pharetra magna bibendum. Sed id gravida lorem. Quisque dui quam, imperdiet id ultricies nec, ultrices non lacus. In blandit, sapien non laoreet volutpat, elit orci pharetra magna, in volutpat lacus elit nec metus. Ut eu vulputate sapien. Aliquam dictum, orci nec lacinia vestibulum, massa elit sollicitudin nisl, faucibus facilisis massa neque vestibulum eros.
Cras sed aliquam leo. Proin porttitor tincidunt enim, eget luctus justo. Aenean ultricies non urna quis interdum. In elit purus, ultrices et mollis sed, ullamcorper finibus ante. Vestibulum fringilla erat at orci ornare, eu vestibulum risus tincidunt. Proin a mauris quam. Ut dignissim ullamcorper volutpat. Sed tincidunt porta ornare. Donec sed ullamcorper mauris. Nulla mauris leo, egestas a eleifend ac, convallis a augue. Phasellus sollicitudin lorem ac sapien luctus finibus. Proin nec nisl dictum, consequat metus lacinia, pellentesque magna. Nam posuere hendrerit turpis, sit amet venenatis nisi congue sed. Suspendisse dui sem, placerat non felis sit amet, scelerisque cursus risus.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla cursus pharetra felis, a porta nunc convallis ac. Nullam laoreet lorem ultrices nisl gravida, at rutrum nisl condimentum. Curabitur ac faucibus dolor. Nullam hendrerit maximus mi, pulvinar venenatis ex tincidunt nec. Sed ullamcorper sit amet dolor eu venenatis. Ut sodales in orci sed tempor. Nullam nisl quam, convallis sit amet nulla id, vulputate sagittis est. Suspendisse egestas viverra quam, eget gravida massa luctus rhoncus. Nulla leo magna, commodo non maximus venenatis, ultricies eget mi. Quisque arcu magna, vehicula ac leo vel, gravida feugiat leo. Praesent at accumsan urna. Sed semper, nunc sed aliquam euismod, metus ex dignissim nisl, et dictum leo nibh quis dolor. Duis et purus quis augue aliquam lobortis ut eget ipsum.
Vestibulum pretium dignissim dolor, vel efficitur nisl vestibulum et. In aliquet ultricies eleifend. Donec tempor diam at pellentesque pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum imperdiet eu urna sit amet vestibulum. Ut sagittis odio nec sapien dapibus porttitor. Mauris lorem nibh, tempor non mi vel, vulputate fringilla libero. Sed varius massa eu metus elementum rhoncus. Phasellus vel interdum felis. Sed nec vulputate diam.
Integer tempus mattis aliquet. Nulla fermentum ex nec vestibulum bibendum. Aliquam in metus quis velit sollicitudin ornare quis et arcu. Fusce vitae ligula at libero pretium tincidunt. Praesent finibus metus nec posuere viverra. Nullam ac mattis mauris, ut vehicula enim. Proin efficitur fringilla mi sed maximus. Donec vel tempor nibh. Duis malesuada mauris et eros ultricies sollicitudin. Sed eget elementum libero. In vulputate lectus a ipsum eleifend, vel feugiat ex ornare.
</body>
</html>
Here is some code that I made a while back. You can take it and customize the scroll bar any way you want.
Try it in this jsfiddle: http://jsfiddle.net/wLD49/
HTML:
<div class="container">
<div class="scrollable">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis blandit lectus tempus aliquam. Aenean tempor libero odio, in gravida dui laoreet vitae. Duis porttitor, sem id convallis rhoncus, enim dolor volutpat nibh, vel sollicitudin arcu tortor eget elit. Vestibulum eu eros in ante rutrum porttitor. Quisque volutpat faucibus est, cursus suscipit nisi tincidunt sit amet. Proin leo odio, aliquam ac rutrum eget, rutrum quis dui. Nam tincidunt, diam at fringilla rhoncus, mi lacus faucibus sem, eu dapibus nunc felis ac nisl.
</div>
<div class="scrollbar"></div>
</div>
</div>
CSS:
.container {
width: 200px;
height: 100px;
overflow: hidden;
border: 1px solid blue;
position: relative;
}
.scrollable {
overflow-x: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
padding-right: 30px;
}
.content {
/* 10px for the scroll bar plus some extra spacing */
padding-right: 12px;
}
.scrollbar {
width: 8px;
height: 25px;
background-color: lightblue;
border-radius: 4px;
position: absolute;
right:0;
top: 0;
}
.scrollable:hover .scrollbar {
background: blue;
}
JavaScript:
var scrollables = document.getElementsByClassName('scrollable');
scrollables[0].addEventListener('scroll', scrolled);
function scrolled(e) {
var content = this.getElementsByClassName('content')[0];
var scrollingRange = content.offsetHeight - this.offsetHeight;
var scrollingRatio = this.scrollTop / scrollingRange;
var scrollbar = this.getElementsByClassName('scrollbar')[0];
var scrollbarRange = this.offsetHeight - scrollbar.offsetHeight;
scrollbar.style.top = String(scrollingRatio * scrollbarRange) + 'px';
console.log(scrollingRatio, scrollbarRange);
}