Related
First question here; so i hope you can help me! I am sorry in advance if i forgot any info!;)
I have a div with a background in it. The background needs to be scaled to fit the whole width of the screen; this works and the background image does remain its aspect ratio. But the problem is that the screen cuts of the height, i expect a scrollbar to scroll down to see the whole background image.
Can somebody help me with this problem?
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
.banner {
background-color: transparent;
position: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
color: #333955;
font-size: 23px;
font-family: "Garisman Studio FreudianTwo";
text-align: center;
}
.firstdiv {
text-align: center;
/*background-image: url("Afbeelding Landingspagina.png");*/
background-image: url("https://dummyimage.com/600x400/000/fff");
background-repeat: no-repeat;
background-size: cover;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}
.body {
padding: 0px;
margin: 0px;
height: 100%;
}
.abouttellus {
text-align: center;
margin-top: 0px;
background-image: url("Images/About Tellus.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}
<html>
<head>
<title>XXXX</title>
<link rel="stylesheet" type="text/css" href="tellus.css">
</head>
<body class="body">
<div class= "banner">
<p>ONS VErhaal im<strong>p</strong>act CHoco contact </p>
</div>
<div class="firstdiv">Hier wordt de inhoud voor class "firstdiv" weergegeven
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit ligula id lectus faucibus pretium. Vestibulum eget magna tellus. Vestibulum urna tellus, condimentum in ante vitae, viverra volutpat quam. Pellentesque facilisis congue ex, dapibus mattis mi dapibus placerat. Quisque faucibus arcu magna, et laoreet augue ornare sed. Etiam ac molestie augue. Morbi varius scelerisque mauris, a faucibus ligula mattis nec.
Pellentesque imperdiet lobortis vestibulum. Aenean in fringilla lorem, mollis pretium arcu. Ut pulvinar odio euismod, vehicula lectus ut, dictum leo. Cras lacinia metus vitae tellus efficitur vulputate. Donec justo dui, hendrerit a condimentum non, cursus ac lectus. Donec ullamcorper dignissim mi congue eleifend. Donec semper imperdiet turpis. Morbi nec nisi ornare, vulputate diam sit amet, viverra massa. Etiam nec dapibus libero. Cras id diam justo. Vestibulum ac sem egestas dolor viverra condimentum. Integer nunc elit, iaculis ac ultrices ac, euismod ut est. Nunc pellentesque varius velit, vel rutrum justo luctus et. Aliquam hendrerit elit eget tellus vulputate, eget faucibus dolor sodales. Aliquam eros ligula, vulputate eu cursus eget, accumsan nec massa. Sed quis justo congue, malesuada nisi non, sodales lacus.
Pellentesque porta, orci sed dignissim euismod, neque dolor sagittis est, eu vulputate quam odio non ligula. Maecenas id nibh eros. Suspendisse potenti. Fusce eget risus ultricies, elementum leo eu, lobortis sapien. Morbi ut est sed lectus cursus convallis. Suspendisse potenti. Donec et nisl quis erat facilisis dictum et id augue. Sed vel enim lorem. Cras placerat neque arcu, at lacinia mauris lobortis sagittis. Fusce nec suscipit eros. Maecenas quis lectus vel leo tempus suscipit. Pellentesque sit amet mattis dolor, a hendrerit lectus. In eget dapibus orci, eget consequat metus. Suspendisse dapibus euismod ligula tempus congue. Pellentesque convallis, lectus quis tincidunt facilisis, sapien purus mollis libero, non facilisis tortor mi non erat.
Donec nunc eros, ultrices sit amet pulvinar venenatis, semper quis metus. Fusce sed sagittis erat, et euismod nisi. In ac diam sed dui scelerisque dignissim a ut ligula. Maecenas luctus lacus ut tempor semper. Integer semper scelerisque euismod. Integer vel massa non velit commodo placerat. Donec nec nibh imperdiet, ultricies elit vel, interdum mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Suspendisse nibh mauris, pretium ac faucibus sed, tempor ut nunc. Nullam gravida aliquam justo, at tristique ante dictum sed. Vivamus lacinia dui sit amet vehicula ultricies. Nunc volutpat mollis mi vel euismod. Sed quis molestie sapien, sed tincidunt ante. Aliquam nulla risus, sagittis in mi semper, lacinia tincidunt odio. In ut nisl porta, sodales mauris eget, commodo nisi.
Morbi sit amet mattis lacus. Pellentesque non facilisis sapien. Proin quis massa rhoncus, auctor augue in, blandit velit. Mauris pharetra, risus vel tempor convallis, turpis dolor porta elit, sit amet rhoncus eros felis a turpis. Nunc ultrices at nisi sed viverra. Nullam laoreet elementum lectus. Nunc vel lacinia massa, et euismod sem. Quisque sed scelerisque enim, non viverra eros. Maecenas hendrerit egestas elit non congue. Curabitur dictum lobortis ligula, sed facilisis lacus aliquam id. Etiam porttitor, nunc sit amet lacinia blandit, lectus sem efficitur magna, vel dapibus orci ex non arcu. Aenean enim eros, malesuada a bibendum eget, luctus eget lectus. Donec auctor massa eget mauris aliquam vulputate. Maecenas ultricies enim ipsum, ac viverra nisl rhoncus a. Nam molestie eget ex vel faucibus.
Nullam et ultrices elit, vitae elementum turpis. Vestibulum justo nibh, semper sed diam et, malesuada blandit mauris. Suspendisse est massa, tempus vitae rhoncus sit amet, condimentum vitae nisl. Praesent porta malesuada orci ac mattis. Quisque viverra est rhoncus, pretium orci vitae, blandit orci. Donec ut tellus libero. Quisque facilisis tincidunt suscipit. In pharetra augue eu massa scelerisque euismod id ut justo.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sollicitudin feugiat est. Fusce et dui augue. Praesent iaculis, nunc non dictum luctus, risus metus malesuada metus, eu sollicitudin leo odio nec augue. Pellentesque vehicula iaculis lorem a porta. Proin vulputate, sapien sit amet porta dapibus, risus lacus elementum lorem, porta sodales tellus orci ac libero. In egestas sem ac metus faucibus aliquet.
Curabitur auctor quam in metus sollicitudin consequat. Nunc ut magna purus. Nunc bibendum, lorem non hendrerit laoreet, lectus arcu ultrices metus, at elementum quam purus ut eros. Fusce vitae porttitor velit. Etiam consectetur accumsan suscipit. Morbi vitae est tincidunt, ornare purus sit amet, elementum mi. Aenean maximus eros quis lorem ultricies bibendum. Etiam aliquam rhoncus tincidunt. Donec posuere libero magna, nec volutpat lectus rutrum non. Pellentesque venenatis magna a nulla iaculis, a rutrum erat dignissim. Donec eleifend, dolor vel ullamcorper mollis, lorem ipsum interdum lacus, id ornare ligula nisi a turpis. Etiam sit amet augue in mi finibus dapibus. Aliquam sit amet vulputate elit. Nulla convallis rutrum nisi, quis pulvinar ante congue eget.
Cras ut fermentum est. Curabitur placerat dolor in dolor facilisis, bibendum scelerisque mauris efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis ornare arcu. Sed hendrerit ex nibh, quis pretium nisl fringilla id. Cras id massa lectus. Nulla pharetra odio et aliquam posuere. Vivamus a eros pharetra, accumsan augue id, dictum ante. Nam eu venenatis justo. Nulla auctor sed quam vel elementum. Nullam et interdum enim, sit amet accumsan justo. Vestibulum nunc eros, placerat id convallis quis, convallis at nisi. Ut ultrices vel justo eget dignissim. Morbi augue magna, malesuada nec magna eu, malesuada gravida neque.</div>
</body>
</html>
Use an image tag
<div class="firstdiv"><img src="./Afbeelding_Landingspagina.png"/></div>
remove overflow hidden, add width and height to image
.firstdiv {
overflow: visible;
}
.firstdiv > img {
widht: 100%;
height: 100%;
}
If you want to display text on top of the image without messing up you can use z-index and position: abosolute. For example
.firstdiv > p {
z-index: 999;
position: absolute;
top: 10px;
}
Set your body with height: auto;
Set in your .firstDiv the background-position:center; min-height:100vh; this will make it the whole div height and keeps the image aspect ratio.
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
.banner {
background-color: transparent;
position: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
color: #333955;
font-size: 23px;
font-family: "Garisman Studio FreudianTwo";
text-align: center;
}
.firstdiv {
text-align: center;
/*background-image: url("Afbeelding Landingspagina.png");*/
background-image: url("https://dummyimage.com/600x600/0011ff/f50e0e");
background-repeat: no-repeat;
background-size: cover;
background-position:center;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
min-height:100vh;
}
.body {
padding: 0px;
margin: 0px;
height: auto;
}
.abouttellus {
text-align: center;
margin-top: 0px;
background-image: url("Images/About Tellus.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-color: #F7F3DE;
color: #2C324D;
font-family: "Garisman Studio FreudianTwo";
}
<html>
<head>
<title>XXXX</title>
<link rel="stylesheet" type="text/css" href="tellus.css">
</head>
<body class="body">
<div class= "banner">
<p>ONS VErhaal im<strong>p</strong>act CHoco contact </p>
</div>
<div class="firstdiv">Hier wordt de inhoud voor class "firstdiv" weergegeven
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent suscipit ligula id lectus faucibus pretium. Vestibulum eget magna tellus. Vestibulum urna tellus, condimentum in ante vitae, viverra volutpat quam. Pellentesque facilisis congue ex, dapibus mattis mi dapibus placerat. Quisque faucibus arcu magna, et laoreet augue ornare sed. Etiam ac molestie augue. Morbi varius scelerisque mauris, a faucibus ligula mattis nec.
Pellentesque imperdiet lobortis vestibulum. Aenean in fringilla lorem, mollis pretium arcu. Ut pulvinar odio euismod, vehicula lectus ut, dictum leo. Cras lacinia metus vitae tellus efficitur vulputate. Donec justo dui, hendrerit a condimentum non, cursus ac lectus. Donec ullamcorper dignissim mi congue eleifend. Donec semper imperdiet turpis. Morbi nec nisi ornare, vulputate diam sit amet, viverra massa. Etiam nec dapibus libero. Cras id diam justo. Vestibulum ac sem egestas dolor viverra condimentum. Integer nunc elit, iaculis ac ultrices ac, euismod ut est. Nunc pellentesque varius velit, vel rutrum justo luctus et. Aliquam hendrerit elit eget tellus vulputate, eget faucibus dolor sodales. Aliquam eros ligula, vulputate eu cursus eget, accumsan nec massa. Sed quis justo congue, malesuada nisi non, sodales lacus.
Pellentesque porta, orci sed dignissim euismod, neque dolor sagittis est, eu vulputate quam odio non ligula. Maecenas id nibh eros. Suspendisse potenti. Fusce eget risus ultricies, elementum leo eu, lobortis sapien. Morbi ut est sed lectus cursus convallis. Suspendisse potenti. Donec et nisl quis erat facilisis dictum et id augue. Sed vel enim lorem. Cras placerat neque arcu, at lacinia mauris lobortis sagittis. Fusce nec suscipit eros. Maecenas quis lectus vel leo tempus suscipit. Pellentesque sit amet mattis dolor, a hendrerit lectus. In eget dapibus orci, eget consequat metus. Suspendisse dapibus euismod ligula tempus congue. Pellentesque convallis, lectus quis tincidunt facilisis, sapien purus mollis libero, non facilisis tortor mi non erat.
Donec nunc eros, ultrices sit amet pulvinar venenatis, semper quis metus. Fusce sed sagittis erat, et euismod nisi. In ac diam sed dui scelerisque dignissim a ut ligula. Maecenas luctus lacus ut tempor semper. Integer semper scelerisque euismod. Integer vel massa non velit commodo placerat. Donec nec nibh imperdiet, ultricies elit vel, interdum mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Suspendisse nibh mauris, pretium ac faucibus sed, tempor ut nunc. Nullam gravida aliquam justo, at tristique ante dictum sed. Vivamus lacinia dui sit amet vehicula ultricies. Nunc volutpat mollis mi vel euismod. Sed quis molestie sapien, sed tincidunt ante. Aliquam nulla risus, sagittis in mi semper, lacinia tincidunt odio. In ut nisl porta, sodales mauris eget, commodo nisi.
Morbi sit amet mattis lacus. Pellentesque non facilisis sapien. Proin quis massa rhoncus, auctor augue in, blandit velit. Mauris pharetra, risus vel tempor convallis, turpis dolor porta elit, sit amet rhoncus eros felis a turpis. Nunc ultrices at nisi sed viverra. Nullam laoreet elementum lectus. Nunc vel lacinia massa, et euismod sem. Quisque sed scelerisque enim, non viverra eros. Maecenas hendrerit egestas elit non congue. Curabitur dictum lobortis ligula, sed facilisis lacus aliquam id. Etiam porttitor, nunc sit amet lacinia blandit, lectus sem efficitur magna, vel dapibus orci ex non arcu. Aenean enim eros, malesuada a bibendum eget, luctus eget lectus. Donec auctor massa eget mauris aliquam vulputate. Maecenas ultricies enim ipsum, ac viverra nisl rhoncus a. Nam molestie eget ex vel faucibus.
Nullam et ultrices elit, vitae elementum turpis. Vestibulum justo nibh, semper sed diam et, malesuada blandit mauris. Suspendisse est massa, tempus vitae rhoncus sit amet, condimentum vitae nisl. Praesent porta malesuada orci ac mattis. Quisque viverra est rhoncus, pretium orci vitae, blandit orci. Donec ut tellus libero. Quisque facilisis tincidunt suscipit. In pharetra augue eu massa scelerisque euismod id ut justo.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque sollicitudin feugiat est. Fusce et dui augue. Praesent iaculis, nunc non dictum luctus, risus metus malesuada metus, eu sollicitudin leo odio nec augue. Pellentesque vehicula iaculis lorem a porta. Proin vulputate, sapien sit amet porta dapibus, risus lacus elementum lorem, porta sodales tellus orci ac libero. In egestas sem ac metus faucibus aliquet.
Curabitur auctor quam in metus sollicitudin consequat. Nunc ut magna purus. Nunc bibendum, lorem non hendrerit laoreet, lectus arcu ultrices metus, at elementum quam purus ut eros. Fusce vitae porttitor velit. Etiam consectetur accumsan suscipit. Morbi vitae est tincidunt, ornare purus sit amet, elementum mi. Aenean maximus eros quis lorem ultricies bibendum. Etiam aliquam rhoncus tincidunt. Donec posuere libero magna, nec volutpat lectus rutrum non. Pellentesque venenatis magna a nulla iaculis, a rutrum erat dignissim. Donec eleifend, dolor vel ullamcorper mollis, lorem ipsum interdum lacus, id ornare ligula nisi a turpis. Etiam sit amet augue in mi finibus dapibus. Aliquam sit amet vulputate elit. Nulla convallis rutrum nisi, quis pulvinar ante congue eget.
Cras ut fermentum est. Curabitur placerat dolor in dolor facilisis, bibendum scelerisque mauris efficitur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis ornare arcu. Sed hendrerit ex nibh, quis pretium nisl fringilla id. Cras id massa lectus. Nulla pharetra odio et aliquam posuere. Vivamus a eros pharetra, accumsan augue id, dictum ante. Nam eu venenatis justo. Nulla auctor sed quam vel elementum. Nullam et interdum enim, sit amet accumsan justo. Vestibulum nunc eros, placerat id convallis quis, convallis at nisi. Ut ultrices vel justo eget dignissim. Morbi augue magna, malesuada nec magna eu, malesuada gravida neque.</div>
</body>
</html>
I changed everything to the IMG solution, as i want the background-image larger then screen this seems to be the better solution.
THis solutions works on most devices; but i still have one problem:
It looks like the second div overflows the first div.
This is how it should be
This is how it looks on bigger screen
<html>
<head>
<link rel="stylesheet" href="tellus.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<div class= "firstdiv"><img src="Afbeelding Landingspagina.png" width="1601" height="1130" alt=""/></div>
<div class= "firstdiv"><img src="Images/About Tellus.png" width="1601" height="1215" alt=""/></div>
</body>
</html>
#import url("webfonts/Garisman_Studio_FreudianTwo/stylesheet.css");
* {
margin:0;
padding:0;
width: 100%;
}
.banner {
background-color: transparent;
position: fixed;
background-repeat: no-repeat;;
color: #333955;
font-size: 23px;
font-family: "Garisman Studio FreudianTwo";
text-align: center;
}
.firstdiv > img {
object-fit: cover;
width: 100%;
max-height; 100%;
}
Here's the fiddle: https://jsfiddle.net/Asatani/Lheu70jn/
I have recently decided to delve into the world of RWD and I am having trouble getting some things to work as expected. This particular issue is related to parallaxing a hero image at the top of my page. I understand how to make the image scale and it works exactly how I need it to, but the rest of the page will not shift up to fill the gap when I shrink the viewport. The hero image's position is relative with a width of 100vw and a height of 50vh. Immediately below that is a spacer div (with just a flat background color) to kind of frame the hero image. When viewed on my computer, it looks perfect. When viewed from my phone, the image is sized correctly, but the spacer is way down the page and will not adjust when the viewport adjusts.
HTML:
<body>
<div id="topbar">
<nav>
<ul>
<li>Home</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
</div>
<div class="background1"></div>
<div class="spacer"></div>
<article>
<p><span class="auto-style1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.</span><br></p>
<p><span class="auto-style2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.</span><br></p>
<p><span class="auto-style3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.</span><br></p>
</article>
<article>
<p><span class="auto-style4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.</span><br></p>
<p><span class="auto-style5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.</span><br></p>
<p><span class="auto-style6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.</span><br></p>
</article>
<article>
<p><span class="auto-style7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.</span><br></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.<br></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
porttitor nisl lectus, ac posuere purus faucibus eu. Maecenas a
ultricies risus. Ut id vulputate leo, sed fermentum velit. Duis id
tortor ac felis tincidunt varius. Duis non nulla erat. Vestibulum
dapibus, libero sit amet porttitor aliquam, dolor orci mollis augue,
id euismod nunc ipsum vitae libero. Phasellus ultricies eros in
finibus lobortis. Nunc interdum elit in sagittis pulvinar. Aliquam a
libero sit amet nisl lobortis ullamcorper. Vivamus elementum urna a
ullamcorper accumsan.<br>
Quisque neque arcu, gravida id luctus quis, tempor at quam. Etiam id
cursus risus. Mauris eu turpis in erat dignissim porta at ac tortor.
Curabitur quis auctor ipsum. Nulla neque diam, congue vel fringilla
at, vehicula vitae diam. Proin ut volutpat odio. Aliquam erat
volutpat.<br>
Donec in tempor dui. Nullam iaculis tempus porttitor. Phasellus vel
lectus auctor, mollis elit vel, sagittis nibh. Etiam ut sem id erat
sodales placerat. Etiam viverra tellus at nunc aliquam, ullamcorper
malesuada felis pharetra. Morbi gravida enim ut lectus bibendum
molestie. Pellentesque eget quam vulputate nibh maximus
pellentesque. Curabitur sed bibendum neque, et gravida est. Sed
pellentesque est nec eros cursus mollis. Phasellus vitae diam a mi
viverra finibus a nec orci.<br>
Quisque eu nisi vel urna finibus porta. Integer volutpat, enim non
hendrerit dignissim, ligula tortor maximus dolor, vel fermentum mi
metus nec enim. Nunc dictum sed urna sit amet luctus. Nulla suscipit
rhoncus erat, vel semper sem ultrices vitae. Nulla blandit odio at
justo interdum placerat. Maecenas eros tellus, molestie et metus
non, pulvinar bibendum elit. Donec dignissim est pharetra, auctor mi
ac, eleifend nulla. Nam non vestibulum nunc. Donec at massa metus.
Donec a facilisis nulla, tincidunt faucibus nunc. Maecenas velit
urna, hendrerit non orci in, euismod venenatis enim. Mauris
scelerisque venenatis nisl, ut lobortis nunc pretium sit amet. Sed
ac blandit nulla. Integer mattis rutrum mi et venenatis.<br>
Donec id fermentum nisi. Quisque vitae libero vestibulum, rutrum
nibh nec, finibus diam. Cras malesuada rhoncus dui, in vulputate
tellus tristique in. Integer vestibulum porta porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Donec placerat pulvinar cursus. Sed
ullamcorper sapien quis fringilla rutrum. Fusce et lacinia turpis,
vitae dapibus tellus. Quisque luctus ac erat vitae tempor.<br></p>
</article>
</body>
CSS:
html {
margin: 90px 0 0 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #fff;
color: #000;
}
#topbar {
top: 0;
height: 100px;
width: 100%;
position: fixed;
background:url(../images/header_logo.png) left 25px top 10px no-repeat, url(../images/header_bg.png) center bottom repeat-x;
z-index: 50;
}
nav {
}
nav ul {
padding-top: 15px;
padding-left: 200px;
list-style:none;
}
nav ul li{
display:block;
float:left;
padding:3px 15px;
}
nav ul li a {
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
transition: all .25s ease;
color: #fff;
}
nav ul li a:hover {
color: #00f;
}
article {
background: #fff;
}
aside {
}
feed {
}
footer {
}
a {
color: #00f;
}
a:active {
}
.spacer {
width: 100%;
height: 70px;
background-color: #1588cc;
}
.background1 {
background-image: url("https://bhope.caria.com/images/bridges_hero.jpg");
background-repeat: no-repeat;
background-position: center -200px;
background-size: cover;
position: relative;
width: 100vw;
height: 50vh;
clear: both;
z-index: -1;
}
.background2 {
background-image: url("1");
background-repeat: no-repeat;
background-position: 97% top;
background-size: 10%;
position: fixed;
top: 0;
width: 100vw;
height: 100vw;
z-index: -1;
}
.background3 {
background-image: url("2");
background-repeat: no-repeat;
background-position: 5% top;
background-size: 50%;
position: fixed;
top: 0;
width: 100vw;
height: 100vw;
z-index: -1;
}
.auto-style1 {
color: #FF0000;
}
.auto-style2 {
color: #00FF00;
}
.auto-style3 {
color: #0000FF;
}
.auto-style4 {
color: #FFFF00;
}
.auto-style5 {
color: #FF00FF;
}
.auto-style6 {
color: #00FFFF;
}
.auto-style7 {
color: #008080;
}
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);
}
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%;
}
I wish I were a CSS smarty ....
How can you place a div container in the lower left-hand corner of the web page; taking into account the users scroll-position?
To position an element relative to the "viewport" (the window or frame it's in), and have it ignore how that viewport is scrolled, you can use the position: fixed; property value (MDN documentation). This has been supported by every browser since Internet Explorer 7.
To position the element at the bottom-left of the window, we need to also specify that it should be positioned at 0 distance from the bottom and left:
position: fixed;
bottom: 0;
left: 0;
Full Example
.bottom-left {
position: fixed;
bottom: 0;
left: 0;
}
.alert {
border: 2px solid red;
background: white;
font-weight: bold;
padding: 1em;
}
<div class="bottom-left alert">
Look at me!
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dignissim diam arcu, a gravida justo malesuada et. Fusce iaculis, dui laoreet ultricies congue, arcu lectus rhoncus neque, ut molestie magna augue ut neque. Duis in feugiat ipsum, et imperdiet nunc. Cras convallis lorem eu diam malesuada malesuada. Nunc dapibus suscipit ligula, vel mattis eros blandit id. In placerat justo vitae pretium fermentum. Proin ac erat commodo nibh ullamcorper feugiat. Nulla ultricies maximus massa, non semper dolor malesuada vel. Nullam sem justo, bibendum vel tempus pharetra, gravida vel sapien. Morbi facilisis tristique mauris vel elementum. Ut porttitor egestas metus eget auctor. Phasellus efficitur rutrum massa nec fringilla. Aliquam et imperdiet leo. Sed tincidunt hendrerit tortor eget tempor.</p>
<p>Sed vel dolor lectus. Nulla sed blandit lacus. Mauris ac magna nec libero vehicula aliquet id a libero. Vivamus sed lobortis velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed at feugiat sapien, ut commodo mi. Quisque scelerisque maximus efficitur. In ultrices, magna eu semper pellentesque, tellus odio hendrerit augue, ut porta sapien lacus quis odio.</p>
<p>Duis sodales, dui a condimentum imperdiet, tellus est laoreet velit, a viverra risus libero sed urna. Phasellus sollicitudin tincidunt viverra. Proin vulputate leo at justo auctor feugiat. Nam auctor, mauris at commodo tempus, eros diam varius ligula, vitae efficitur massa lectus et enim. Integer tristique nibh in lacus condimentum, et interdum urna mollis. Aenean id risus tristique, volutpat dolor sed, fermentum ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam velit nibh, elementum at orci quis, tempor fermentum tellus. Nunc facilisis nisi at leo auctor aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam tempor ipsum vel scelerisque tincidunt. Etiam vulputate auctor ante, in tristique est congue ut. Vestibulum maximus nibh vestibulum tristique ullamcorper. Phasellus eu eleifend ante, nec efficitur nulla.</p>
<p>Nunc pulvinar purus id arcu egestas, sed iaculis nisl finibus. Sed cursus bibendum tortor, id cursus lacus euismod in. Nam lacinia, sapien faucibus dapibus varius, neque velit fringilla est, in porta quam sem sit amet ligula. Aliquam ornare est ac pellentesque suscipit. Curabitur eleifend convallis sem, volutpat efficitur erat laoreet id. Maecenas interdum ante in lectus varius, lobortis auctor quam rutrum. Nullam tristique felis quis lectus luctus gravida. Cras porttitor pellentesque nibh. Fusce placerat vehicula commodo. Mauris vel lectus viverra sem consectetur sagittis quis vel lectus. Quisque vel dapibus augue. Sed lacinia massa quis dui sodales faucibus.</p>
<p>Donec sagittis, dolor sed fermentum dapibus, justo ipsum porttitor purus, sed fermentum mi nulla non lorem. Praesent aliquet iaculis molestie. Phasellus enim nunc, vestibulum non odio vel, porta imperdiet lorem. Morbi laoreet felis a ipsum elementum sollicitudin. Morbi varius mollis ex, a posuere lorem fringilla ac. Curabitur metus ligula, mollis quis diam eu, pulvinar placerat libero. Aenean vestibulum lacinia diam in facilisis. Praesent egestas sapien a est consequat facilisis. Nulla id mauris a metus venenatis pellentesque. Praesent justo augue, efficitur ac vulputate et, luctus at elit. Proin quis urna quam. Pellentesque iaculis, felis sed hendrerit venenatis, purus augue venenatis tellus, a posuere justo tellus at ex. Donec et arcu non arcu scelerisque efficitur nec sed dolor. Sed eget lacus enim. Donec sodales mollis condimentum.</p>