Related
I want the text to not wrap white-space: nowrap and for overlapped content to be hidden overflow: hidden, but I DO still want there to be 20px padding on either side (eg, text in coloured boxes to be 20px away from edges).
I couldn't seem to find a good answer on SO already. Pointers would be much appreciated.
.row {
display: flex;
gap: 10px;
}
.col {
background: blue;
padding: 0 20px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
}
.col:nth-child(2) {
background: red;
}
<div class="row">
<div class="col">
<p>1a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis orci, tempor vehicula pretium vel, commodo et elit. Donec vitae lacinia turpis. Nulla scelerisque, augue a pulvinar elementum, sapien elit porta ex, et aliquet nisi felis vitae nunc. Morbi aliquam mollis arcu a ultrices. Integer accumsan sapien eros, a posuere mauris hendrerit et. Curabitur interdum scelerisque mattis. Quisque a erat metus. Donec sit amet efficitur lacus. Morbi sodales, nulla imperdiet volutpat porta, justo massa sagittis nisl, nec lacinia magna purus ac nisl. Duis ultrices, est sit amet cursus rutrum, nisl lacus consectetur lectus, at pretium nulla massa non erat</p>
<p>1b Cras commodo ultricies mi. Vivamus quis ex imperdiet, pharetra mauris vitae, mattis justo. Aenean eget ultrices magna. Suspendisse rutrum tristique dolor quis porttitor. Aliquam pulvinar vulputate lacinia. Donec dictum efficitur ipsum, quis ullamcorper dui tincidunt sollicitudin. Phasellus tristique bibendum tincidunt. Phasellus sagittis vehicula ligula, ac sollicitudin velit condimentum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus lectus nisi, non dictum sapien ullamcorper in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</p>
</div>
<div class="col">
<p>2a Cras tristique diam a aliquet sollicitudin. Donec vehicula dui ipsum, eget imperdiet neque porta nec. Donec vestibulum iaculis arcu imperdiet malesuada. Sed mattis ex eu ipsum bibendum, lobortis condimentum urna maximus. Integer vehicula ipsum lacus. Pellentesque vel lacus felis. In sed interdum eros. Fusce et scelerisque mauris. Donec vel egestas elit. Maecenas in ligula ac ipsum tempus hendrerit. Pellentesque quis lacinia augue. Integer vehicula nisi rutrum, egestas eros id, euismod nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo tortor, bibendum ornare turpis vel, fermentum tempus enim</p>
<p>2b Nulla nec tempor felis. Donec auctor, leo sed vehicula egestas, nunc dui pharetra lorem, sit amet consequat risus dolor ac velit. Aenean tempus semper sapien, sollicitudin sagittis enim tristique nec. Mauris leo lacus, maximus ut convallis quis, pretium a ipsum. Aenean vel finibus urna. Donec dolor nunc, tincidunt et turpis quis, scelerisque euismod purus. Donec eu hendrerit sem. Vestibulum sed sodales lectus, vel semper lorem. Nunc sit amet est purus</p>
</div>
</div>
The overflow should be set on the <p>:
.row {
display: flex;
gap: 10px;
}
.col {
background: blue;
padding: 0 20px;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
}
.col > p {
overflow: hidden;
}
.col:nth-child(2) {
background: red;
}
<div class="row">
<div class="col">
<p>1a Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris felis orci, tempor vehicula pretium vel, commodo et elit. Donec vitae lacinia turpis. Nulla scelerisque, augue a pulvinar elementum, sapien elit porta ex, et aliquet nisi felis vitae nunc. Morbi aliquam mollis arcu a ultrices. Integer accumsan sapien eros, a posuere mauris hendrerit et. Curabitur interdum scelerisque mattis. Quisque a erat metus. Donec sit amet efficitur lacus. Morbi sodales, nulla imperdiet volutpat porta, justo massa sagittis nisl, nec lacinia magna purus ac nisl. Duis ultrices, est sit amet cursus rutrum, nisl lacus consectetur lectus, at pretium nulla massa non erat</p>
<p>1b Cras commodo ultricies mi. Vivamus quis ex imperdiet, pharetra mauris vitae, mattis justo. Aenean eget ultrices magna. Suspendisse rutrum tristique dolor quis porttitor. Aliquam pulvinar vulputate lacinia. Donec dictum efficitur ipsum, quis ullamcorper dui tincidunt sollicitudin. Phasellus tristique bibendum tincidunt. Phasellus sagittis vehicula ligula, ac sollicitudin velit condimentum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum cursus lectus nisi, non dictum sapien ullamcorper in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</p>
</div>
<div class="col">
<p>2a Cras tristique diam a aliquet sollicitudin. Donec vehicula dui ipsum, eget imperdiet neque porta nec. Donec vestibulum iaculis arcu imperdiet malesuada. Sed mattis ex eu ipsum bibendum, lobortis condimentum urna maximus. Integer vehicula ipsum lacus. Pellentesque vel lacus felis. In sed interdum eros. Fusce et scelerisque mauris. Donec vel egestas elit. Maecenas in ligula ac ipsum tempus hendrerit. Pellentesque quis lacinia augue. Integer vehicula nisi rutrum, egestas eros id, euismod nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo tortor, bibendum ornare turpis vel, fermentum tempus enim</p>
<p>2b Nulla nec tempor felis. Donec auctor, leo sed vehicula egestas, nunc dui pharetra lorem, sit amet consequat risus dolor ac velit. Aenean tempus semper sapien, sollicitudin sagittis enim tristique nec. Mauris leo lacus, maximus ut convallis quis, pretium a ipsum. Aenean vel finibus urna. Donec dolor nunc, tincidunt et turpis quis, scelerisque euismod purus. Donec eu hendrerit sem. Vestibulum sed sodales lectus, vel semper lorem. Nunc sit amet est purus</p>
</div>
</div>
I have a grid layout with text and images which I want to print and I want only the page to break in the text row, and not break in images, my grid code has two rows, one for text and one for images, and the images inside the grid is another grid for the images, the code looks like this:
.grid{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"text"
"sub-grid";
.sub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas: "picture-one picture-two";
}
}
I've done a lot of tests with the page break inside:
#media print {
.sub-grid {
page-break-inside: avoid;
}
}
but never seems to work, it's always breaking the page on images when printing.
Here's a fiddle to reproduce:
https://jsfiddle.net/kwp59x3g/15/
Any help is welcome, thank you guys.
I think the problem is in .grid class. Remove .grid class and add these lines:
.text {
page-break-before: avoid;
page-break-after: auto;
}
.sub-grid {
page-break-inside: avoid;
}
.sub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 1fr;
gap: 0px 0px;
grid-template-areas: 'picture-one picture-two';
}
.picture-one {
grid-area: picture-one;
}
.picture-two {
grid-area: picture-two;
}
#media print {
* {
overflow: visible !important;
color-adjust: exact;
-webkit-print-color-adjust: exact;
}
.text {
page-break-before: avoid;
page-break-after: auto;
}
.sub-grid {
page-break-inside: avoid;
}
}
<button onclick="window.print()">
Print
</button>
<div class="grid">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu tortor luctus, condimentum ex id, interdum lectus. Nullam nec lectus odio. Mauris quis pharetra libero. Morbi eget elementum mi, ac auctor ex. Vivamus faucibus nec justo vel dapibus. Nulla
vitae porta orci. Fusce in ex vestibulum, dapibus lorem at, scelerisque nunc. Integer auctor gravida faucibus. Integer non magna enim. Nam nec pharetra risus. Donec sagittis consectetur urna ac dictum. Nam in tortor vel nisi porta posuere. Maecenas
fermentum ipsum in dui feugiat, vel placerat velit consectetur. In nec rutrum metus. Donec rutrum risus eget orci bibendum, vel euismod erat lacinia. Duis eleifend sollicitudin sem, mattis auctor dui porta vitae. Suspendisse vel gravida tellus, non
ultricies nunc. Suspendisse ac elit blandit, lacinia tortor sed, eleifend tellus. Duis auctor dolor dolor, id vehicula turpis commodo a. Vestibulum quis tortor volutpat, imperdiet libero non, facilisis tellus. Donec eleifend, nisl eget pulvinar congue,
ipsum mi tincidunt nisi, congue laoreet ante magna at augue. Proin eleifend mattis neque, vel maximus ex facilisis eget. Sed euismod massa orci. Suspendisse at semper sapien. Sed lobortis porttitor nisl. Ut suscipit mollis risus sit amet pharetra.
Pellentesque tempor libero ut quam faucibus egestas. Mauris mattis lectus vel augue sollicitudin, varius sollicitudin ligula tristique. Maecenas non iaculis neque. Etiam commodo purus eget tortor pharetra aliquam nec ut augue. Vivamus non risus blandit,
faucibus nunc eget, lobortis nisl. Mauris in porttitor augue, a congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis
commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor
id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus,
quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue
ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem
quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar, ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi. Curabitur fermentum odio sit amet luctus sollicitudin. Mauris in porttitor augue, a
congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel
lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis
urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus, quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor
rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar,
ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi. Curabitur fermentum odio sit amet luctus sollicitudin. Mauris in porttitor augue, a congue dolor. Maecenas nec lacinia velit. Aliquam luctus fringilla porta. Vestibulum
a libero imperdiet, pretium sapien vitae, lobortis nulla. Morbi hendrerit metus vel urna convallis commodo et eget nulla. Etiam vitae consectetur sapien. Donec vel lacus metus. Nullam congue viverra dolor, in efficitur justo malesuada at. Aenean nisl
nunc, viverra sit amet feugiat vitae, vulputate nec nunc. Etiam magna leo, porttitor ut tempor id, volutpat eget eros. Cras vel vulputate urna. Fusce venenatis urna vel dictum consectetur. Praesent non arcu orci. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam imperdiet placerat posuere. Sed blandit tortor ac turpis maximus, quis imperdiet libero imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ultricies, nibh at dignissim
elementum, elit ligula mollis mauris, ut molestie ipsum eros vitae urna. Nam ac augue ut neque consectetur sagittis eget a magna. Suspendisse id elit nec dolor rhoncus pulvinar quis vel felis. Phasellus porttitor faucibus orci id scelerisque. Etiam
consectetur molestie justo, sit amet ornare libero egestas vel. Nunc sit amet lorem quis magna molestie mattis ut sed nisl. Vivamus quis leo ipsum. Praesent pulvinar, ipsum non fermentum mattis, ante quam auctor quam, eu tincidunt arcu eros ut mi.
Curabitur fermentum odio sit amet luctus sollicitudin.
</div>
<div class="sub-grid">
<img src="https://plchldr.co/i/245x155?bg=EB6361" alt="">
<img src="https://plchldr.co/i/245x155?bg=EB6361" alt="">
</div>
</div>
You can break a page break (using a page break inside) with:
tables
floating elements
block elements with borders
display: grid and display: flex don't correctly work it look like some old bug. link
I am writing an sticky cookie bar and with a click button (a huge X).
But the X is to much to the right (almost not on the page).
How can I make sure the X is aligned the right way
Firstly I have made the sticky div for the cookie bar.
On the left I have the information about the cookie bar.
But on the right I want to make it closable
.sticky {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background-color: #242421;
padding: 10px;
width: 100%;
font-size: 20px;
position: fixed;
opacity: 0.9;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.sticky p {
font-size: 14px;
}
.sticky u {
font-weight: bold;
}
.sticky button {
float: right;
background: none;
border: 0;
box-sizing: border-box;
color: transparent;
cursor: pointer;
line-height: 40px;
outline: none;
overflow: hidden;
padding: 0;
position: relative;
text-transform: uppercase;
transition: all 0.2s ease-in;
width: 40px;
}
.sticky button::before,
.sticky button::after {
background-color: white;
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
transform-origin: center left;
transition: all 0.2s ease-in;
width: 100px;
z-index: -1;
}
.sticky button::before {
top: 0;
transform: rotate(45deg);
}
.sticky button::after {
bottom: 0;
transform: rotate(-45deg);
}
.sticky button:hover {
color: black;
}
.sticky button:hover::before,
.sticky button:hover::after {
height: 30px;
transform: rotate(0deg);
}
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="sticky">
<p>My Text <u>More
information
and cookie settings</u>
<button>
Close
</button></p>
</div>
<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu,
lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi,
sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d
</p>
</body>
</html>
You actually do not use position: sticky this property is overridden by position: fixed. Also the width: 100%of the fixed container is making the element too wide, as you want to use a padding of 10px. You may either use box-sizing: border-box; or this: where only leftand right is used.
.sticky {
bottom: 0;
background-color: #242421;
padding: 10px;
font-size: 20px;
position: fixed;
opacity: 0.9;
left: 0;
right: 0;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.sticky p {
font-size: 14px;
}
.sticky u {
font-weight: bold;
}
.sticky button {
float: right;
background: none;
border: 0;
box-sizing: border-box;
color: transparent;
cursor: pointer;
line-height: 40px;
outline: none;
overflow: hidden;
padding: 0;
position: relative;
text-transform: uppercase;
transition: all 0.2s ease-in;
width: 40px;
}
.sticky button::before,
.sticky button::after {
background-color: white;
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
transform-origin: center left;
transition: all 0.2s ease-in;
width: 100px;
z-index: -1;
}
.sticky button::before {
top: 0;
transform: rotate(45deg);
}
.sticky button::after {
bottom: 0;
transform: rotate(-45deg);
}
.sticky button:hover {
color: black;
}
.sticky button:hover::before,
.sticky button:hover::after {
height: 30px;
transform: rotate(0deg);
}
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="sticky">
<p>My Text <u>More
information
and cookie settings</u>
<button>
Close
</button></p>
</div>
<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu,
lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi,
sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
</p>
</body>
</html>
Just add
margin-top:-10px;
width: 50px;
To the sticky button.
Just clear some of the top margins, and increase the width by 10px so that when you hover over it, the text is also aligned.
Also, don't use position: sticky;, position:fixed is well suited for this purpose and also add
box-sizing: border-box;
to your whole div to include the padding and border in the element's total width and height.
.sticky {
bottom: 0;
background-color: #242421;
padding: 10px;
width: 100%;
font-size: 20px;
box-sizing: border-box;
position: fixed;
opacity: 0.9;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.sticky p {
font-size: 14px;
}
.sticky u {
font-weight: bold;
}
.sticky button {
float: right;
background: none;
border: 0;
box-sizing: border-box;
color: transparent;
cursor: pointer;
line-height: 40px;
outline: none;
overflow: hidden;
padding: 0;
position: relative;
text-transform: uppercase;
transition: all 0.2s ease-in;
margin-top: -10px;
width: 50px;
}
.sticky button::before,
.sticky button::after {
background-color: white;
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
transform-origin: center left;
transition: all 0.2s ease-in;
width: 100px;
z-index: -1;
}
.sticky button::before {
top: 0;
transform: rotate(45deg);
}
.sticky button::after {
bottom: 0;
transform: rotate(-45deg);
}
.sticky button:hover {
color: black;
}
.sticky button:hover::before,
.sticky button:hover::after {
height: 30px;
transform: rotate(0deg);
}
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="sticky">
<p>My Text <u>Meer
informatie
en cookies instellen</u>
<button>
Close
</button></p>
</div>
<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula,
facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae
dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla
et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis
in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna
a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non
fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula
venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus
congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh
tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi,
sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus.
Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.
In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum
augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet
sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis
sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus
gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque
enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit
risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar
nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas
nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum
nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim
ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum
augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet
sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis
sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus
gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque
enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit
risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar
nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas
nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum
nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
</p>
</body>
</html>
Run code snippetHide results
I have built a very basic responsive web page here:
https://codepen.io/beckytownsend/pen/wqaoRR
I want to split the main content into who sections, paragraphs on the left and the sidebar on the right when it expands past 1200px, like so..
P= paragraph, S= Sidebar
P S
P
I also want the two section to sit in the center of the page. I can't seem to figure out how to get this to work! Please could someone have a look at my code and let me know what I can do?
.main-content{
justify-content: center;
align-items: center;
display: inline-flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
/*Paragraphs within main content*/
.paragraph {
float:left;
width: 60%;
order: 1;
flex-direction: column;
}
/*Sidebar*/
.sidebar {
background: teal;
float: right;
width: 30%;
order: 2;
}
<div class="main-content">
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla. Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat.
Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla. Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat.
<br><br>
Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br><br>
Curabitur leo enim, feugiat sed ligula in, laoreet lobortis dui. In semper porta nibh ut scelerisque. Nam commodo sapien in nisi tempor, vel dignissim nisl gravida. Aliquam erat volutpat. Suspendisse mattis urna quis arcu vehicula lacinia. Fusce convallis lorem vitae scelerisque ullamcorper. Vivamus vel est nec diam iaculis cursus non in lacus. Proin eu libero sed urna vehicula.
<br><br>
Proin accumsan, velit id commodo blandit, odio felis dictum diam, ut tempor lacus metus non dolor. In hac habitasse platea dictumst. Phasellus viverra lectus rutrum tristique feugiat. Etiam sit amet mi vel neque fringilla viverra at sit amet risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In et turpis vestibulum, aliquam ex vel, imperdiet felis. Nam luctus velit nulla. Praesent tempor dignissim magna vel euismod. In auctor gravida nibh, ut facilisis dui tincidunt bibendum. Aliquam et nisi ac velit consectetur dapibus. Fusce consectetur semper mauris eu tempus. Aenean leo tortor, interdum quis pharetra at, varius vel orci. Nulla facilisi. Nulla facilisi. Sed ligula nunc, consequat nec purus non, volutpat egestas mauris.
</p>
</div>
<div class="sidebar">
<h3> Lorem ipsum </h3>
<p>Quisque hendrerit metus id justo congue hendrerit non in libero. Phasellus quis enim vel sem sagittis eleifend. Aenean gravida, metus id pharetra imperdiet, nibh risus vestibulum lacus, nec gravida felis arcu id tortor. Donec id lectus eu enim accumsan aliquam. Etiam nunc arcu, volutpat quis erat vel, rhoncus condimentum nunc. Integer pulvinar lectus non pulvinar iaculis. Maecenas lorem libero, egestas ac mi ac, hendrerit commodo sapien. Cras finibus sem neque, in mollis eros facilisis eget. Quisque id lacus aliquam, tristique est id, facilisis nulla. Donec vitae faucibus nunc.</p>
</div>
</div>
Wrap the paragraphs in a new container and give that the following:
.left {
display: flex;
flex-direction: column;
}
You can then remove all the flexbox properties from the paragraph. Note that float does not work in a flex container.
.main-content {
justify-content: center;
display: inline-flex;
display: -webkit-flex;
-webkit-justify-content: center;
justify-content: center;
}
.left {
display: flex;
flex-direction: column;
padding-right: 50px;
}
/*Sidebar*/
.sidebar {
background: teal;
min-width: 30%;
}
<div class="main-content">
<div class="left">
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla.
Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat. Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non
euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est
lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="paragraph">
<h2> Lorem ipsum dolor. </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl est, mollis at risus vel, aliquam molestie sapien. Mauris in nunc ut enim semper vestibulum ut at sapien. Integer eu commodo nunc, et porta justo. Mauris vel sapien nulla.
Maecenas ullamcorper facilisis velit ut imperdiet. Integer at elit et turpis lobortis varius. Pellentesque malesuada eros vel tempus feugiat.
<br><br> Sed ex leo, pulvinar nec elit sit amet, feugiat ullamcorper diam. Phasellus ipsum risus, malesuada non euismod et, vulputate sit amet ligula. Suspendisse sed vestibulum diam. Donec eget nulla vitae ex ultrices pulvinar. Suspendisse dui
sem, cursus sit amet aliquam eu, elementum vitae ipsum. In imperdiet, dolor non vehicula porttitor, risus est lobortis erat, at vehicula mauris sapien eget risus. Maecenas id enim volutpat, congue odio nec, ultricies mauris. Nulla ornare urna
ac eros sodales vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br><br> Curabitur leo enim, feugiat sed ligula in, laoreet lobortis dui. In semper porta nibh ut scelerisque. Nam commodo sapien in nisi tempor, vel dignissim nisl gravida. Aliquam erat volutpat. Suspendisse mattis urna quis arcu vehicula lacinia.
Fusce convallis lorem vitae scelerisque ullamcorper. Vivamus vel est nec diam iaculis cursus non in lacus. Proin eu libero sed urna vehicula.
<br><br> Proin accumsan, velit id commodo blandit, odio felis dictum diam, ut tempor lacus metus non dolor. In hac habitasse platea dictumst. Phasellus viverra lectus rutrum tristique feugiat. Etiam sit amet mi vel neque fringilla viverra at sit
amet risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In et turpis vestibulum, aliquam ex vel, imperdiet felis. Nam luctus velit nulla. Praesent tempor dignissim magna vel euismod. In auctor gravida
nibh, ut facilisis dui tincidunt bibendum. Aliquam et nisi ac velit consectetur dapibus. Fusce consectetur semper mauris eu tempus. Aenean leo tortor, interdum quis pharetra at, varius vel orci. Nulla facilisi. Nulla facilisi. Sed ligula nunc,
consequat nec purus non, volutpat egestas mauris.
</p>
</div>
</div>
<div class="sidebar">
<h3> Lorem ipsum </h3>
<p>Quisque hendrerit metus id justo congue hendrerit non in libero. Phasellus quis enim vel sem sagittis eleifend. Aenean gravida, metus id pharetra imperdiet, nibh risus vestibulum lacus, nec gravida felis arcu id tortor. Donec id lectus eu enim accumsan
aliquam. Etiam nunc arcu, volutpat quis erat vel, rhoncus condimentum nunc. Integer pulvinar lectus non pulvinar iaculis. Maecenas lorem libero, egestas ac mi ac, hendrerit commodo sapien. Cras finibus sem neque, in mollis eros facilisis eget. Quisque
id lacus aliquam, tristique est id, facilisis nulla. Donec vitae faucibus nunc.</p>
</div>
</div>
Goal:
Make the candy picture as a link that the user can press them.
Problem:
I don't know how to do it based on the code below.
Info:
*Please remember that the link is a actionlink from asp.net mvc.
*Please remember that it is the candy picture should be the link, not the text.
*Dont forget to make the page into a full screen after you have pressed the "Run the snippet"
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<div id="foo">
aaa
</div>
<div id="fooo">
bbb
</div>
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<a href="#" id="foo">
<span>aaa</span>
</a>
<a href="" id="fooo">
<span>bbb</span>
</a>
You would need to use Url.Action to get the URL corresponding to the relevant action. The following code snippet would map to the "Foo" and "Fooo" actions of your controller.
<a id="foo" href='#Url.Action("Foo", "ControllerName")'>
<span>aaa</span>
</a>
<a href='#Url.Action("Fooo","ControllerName")' id="fooo">
<span>bbb</span>
</a>
seeing the containing div is position fixed, you can make the a tag absolute and define left, right, top and bottom...
#foo a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px
}
I bet that's the shortest way. But i really don't like inline js...
Still:
<div
onclick="javascript:window.location.href='#Url.Action("Foo", "ControllerName")';
return false;"
id="foo">
</div>
Also it's better to add div { cursor: pointer; } to your css, if you want to show that's the href.