I want to add the quote box below (created in Photoshop) on my website but would love for it to be created "dynamically" with preferably HTML5/CSS3 (+ jQuery if not possible with HTML/CSS alone). Using images for the quotes is also possible, but would prefer none for the best responsive solution. Width can be fixed but height should adjust to contents within the box.
Googled and searched SO for a solution but couldn't find one.
But! .. found some html blockquote element CSS (see below and [jsbin here][1]) that does everything but the lines, but don't have the skills to get them "drawn" myself, so will appreciate if someone will help. Thanks!
Update
Getting close now!
See here: http://jsbin.com/giwafo/1/ (locked, clone to make changes)
The idea is to position a box that has the background color on top of the border on the <blockquote> element, but I can't seem to figure out how to do this so it adapts to the size of the quote/blockquote and is position correctly no matter what size the blockquote is.
Any ideas?
.container {
z-index: 1;
background: white;
padding: 2em;
}
blockquote {
padding: 2em 1.5em 2em 2em;
position: relative;
color: #999;
}
blockquote p {
color: #555;
}
#media screen and (min-width: 300px) {
blockquote {
border: 1px solid gray;
}
blockquote:before, blockquote:after {
background-color:white;
font-size: 3em;
font-weight: 800;
position: absolute;
z-index: 20;
}
blockquote:before {
content:url('http://download.easyicon.net/png/534874/32/');
width: 34px;
height: 31px;
left: 2px;
top: 2px;
-ms-transform: rotate(178deg); /* IE 9 */
-webkit-transform: rotate(178deg); /* Chrome, Safari, Opera */
transform: rotate(178deg);
}
blockquote:after {
content:url('http://download.easyicon.net/png/534874/32/');
width: 31px;
height: 37px;
right: 3px;
bottom: 0px;
}
}
blockquote cite {
font-size: 14px;
margin-top: 5px;
margin-bottom: -7px;
}
blockquote cite:before {
content:"\2014 \2009";
}
<div class="container">
<blockquote>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<footer> <cite>Somebody famous</cite> </footer>
</blockquote>
</div>
hope it can help you
Thanks to #Jasper (see comments under my question above), I resolved it. Solution can be found here: jsbin.com/ziquzi/2.
CSS:
.container {
z-index: 1;
background: white;
padding: 2em;
}
blockquote {
padding: 2em 1.5em 2em 2em;
position: relative;
color: #999;
}
blockquote p {
color: #555;
}
#media screen and (min-width: 300px) {
blockquote {
border: 1px solid gray;
}
blockquote:before, blockquote:after {
background-color: white;
font-size: 3em;
font-weight: 800;
position: absolute;
height: 20px;
z-index: 10;
}
blockquote:before {
content:"\201D";
padding: 0 12px 11px 0;
left: -8px;
top: -8px;
}
blockquote:after {
content:"\201C";
padding: 9px 0 0 11px;
right: -8px;
bottom: -7px;
}
}
blockquote cite {
font-size: 14px;
margin-top: 5px;
}
blockquote cite:before {
content:"\2014 \2009";
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div class="container">
<blockquote>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<footer>
<cite>Somebody famous</cite>
</footer>
</blockquote>
</div>
</body>
</html>
Related
I have an aside section that I'd like to have centered using a media query, so that once it's viewed on a mobile, it'll be at the bottom of the page aligned horizontally. Just like this:
This is what it's currently doing:
I have some images and text I don't want to share so I'll change them for this question...
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: white;
}
/*GLOBAL*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header ul {
padding: 0;
margin: 0;
}
.page-title {
font-size: 20px;
}
.page-title-center {
font-size: 20px;
text-align: center;
}
.subheading-center {
font-size: 15px;
text-align: center;
margin-top: 50px;
}
.dark {
padding: 15px;
background: #1CAC4B;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
.dark-center {
padding: 15px;
text-align: center;
background: #1CAC4B;
color: white;
margin: 10px;
}
#hyperlink {
color: #FFEE00;
}
#hyperlinkg {
color: #1CAC4B;
}
/*HEADER*/
header {
background: #1CAC4B;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #FFEE00 3px solid;
display: flex;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0 10px 0 10px;
}
header #branding {
float: left;
}
header #branding-img img {
float: left;
width: 60px;
height: 60px;
padding: 0 20px 20px 0;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 14px;
}
header .highlight, header .current a {
color: #FFEE00 /*YELLOW*/;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/*SHOWCASE*/
#showcase {
background:url("../img/grass.jpg") no-repeat;
background-size: cover;
min-height: 450px;
text-align: center;
color: white;
}
#showcase h1 { /**/
margin-top: 150px;
font-size: 60px;
margin-bottom: 10px;
}
#showcase p {
font-size: 30px;
}
/* CONTACT INFO */
#contact {
color: white;
background: #1CAC4B;
padding: 25px;
border-bottom: #FFEE00 3px solid;
border-top: #FFEE00 3px solid;
}
#contact h1 {
float: left;
}
#contact p {
font-size: 20px;
margin-top: 22px;
font-weight: bold;
float: right;
}
/*BOXES*/
.boxes {
background: white; /*Background behind 3 circular images are white */
display: flex; /*Makes circles drop if page is squished */
flex-wrap: wrap; /*Makes circles in a horizontal row */
justify-content: center;
}
.boxes figure {
margin: 3.5%; /*makes it line up better */
text-align: center; /*Puts text in center*/
font-size: 20px;
}
.boxes figure img {
border-radius: 25px; /*Makes images circular */
width: 310px; /*Sets image width*/
height: 220px; /*Sets image height - heigh and width must be same to make it a circular */
box-shadow: gray 0 0 15px; /*Adds gray shadow to bottom of images */
}
/*MAIN-COL*/
article#main-col {
float: left;
width: 70%;
}
/*ABOUT PAGE SIDEBAR*/
aside#about-sidebar {
float: right;
margin-top: 50px;
}
aside#about-sidebar img {
width: 230px;
height: 184px;
/*257px*/
}
/*SERVICES*/
ul#services li {
list-style: none;
padding: 20px;
border: green solid 1px;
margin-bottom: 10px;
background: #e6e6e6;
}
/*SERVICES PAGE SIDEBAR*/
aside#service-sidebar {
float: right;
margin-top: 50px;
}
/*GALLERY SLIDESHOW*/
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
padding: 10px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
/*FOOTER*/
footer {
padding: 20px;
margin-top: 20px;
color: white;
background-color: #1CAC4B;
text-align: center;
}
/*MEDIA QUERIES*/
#media(max-width: 768px){
header #branding,
header nav,
header nav li,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
align-content: center;
text-align: center;
width: 100%;
}
header {
padding-bottom: 20px;
}
#showcase h1 {
margin-top: 40px;
}
}
<body>
<main>
<header>
<div class="container">
<div id="branding-img">
<a href="index.html"><img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
</div>
<div id="branding">
<h1><span class="highlight">NAME SHORT</span>NAME</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li class="current">About</li>
<li>Services</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">About The Company</h1>
<p class="dark">
Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
</p>
<h1 class="page-title">About Me</h1>
<p class="dark">
Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet sapien quis felis imperdiet scelerisque. Maecenas vulputate, nisl quis laoreet efficitur, urna nunc viverra massa, placerat commodo ligula tellus vel lacus. Ut molestie, purus id gravida sollicitudin, ipsum ipsum scelerisque diam, quis hendrerit mauris massa vitae quam. Donec maximus, felis sit amet tincidunt pretium, justo tellus cursus ex, quis vestibulum felis risus sed velit. Vivamus varius sapien sit amet nisl iaculis, et aliquet risus lobortis. In eget ullamcorper augue. If you are interested you can call me using my email or phone number displayed on the <a id="hyperlink" href="index.html">Home</a> page.
</p>
</article>
<aside id="about-sidebar">
<div class="dark">
<img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
<p>
PERSON NAME
</p>
</div>
</aside>
</div>
</section>
<footer>
<p>COMPANY</p>
</footer>
</main>
</body>
Of course, as soon as I spent 10 minutes making this question I figured out my problem within literally 10 seconds lol.
I doubt anyone else would have this problem but you never know, so I'll answer it and leave it here for anyone who needs it.
In the CSS file in the media queries section, I removed '#sidebar' from 'aside#sidebar {'
I'm struggling to get my head around what is causing the "tabbed" div to be hidden from view. I can't work out whether it is the content or container div causing this issue.
If you change the ".tabs > div" position from absolute to relative then div class="tabbed" appears as I would like but it causes the content of the tabs stack on top of one another.
Is this a position/z-index or overflow issue?
Any help would be appreciated.
Here is the code:
* {
box-sizing: border-box;
}
body {
background: #fff;
color: #262626;
font: 1em 'PT Sans', sans-serif;
}
::selection {
background-color: #4EC6DE;
}
#content {
padding: 5px 0 5px 0;
position: relative;
overflow: hidden;
}
.container {
position: relative;
clear: both;
width: 100%;
min-height: 350px;
max-width: 1200px;
padding: 5px 0px 5px 0px;
overflow: hidden;
background-color: #ffffff;
}
.pCV {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
line-height: 1.6;
padding: 0;
}
.cvheader {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
font-weight: bold;
}
#textbox {
width: 100%;
border: 1px solid #ccc
}
/* Style buttons */
#downloadbtn {
background-color: #ffffff;
border: 2px solid #262626;
color: #262626;
padding: 12px 12px;
cursor: pointer;
font-size: 20px;
float: right;
margin-top: -50px;
}
/* Darker background on mouse-over */
#downloadbtn:hover {
background-color: #888888;
color: #ffffff;
border: 2px solid #888;
transition: all .8s ease-in-out;
}
.tabbed {
width: 1000px;
margin: 50px auto;
}
.tabbed>input {
display: none;
}
.tabbed>label {
display: block;
float: left;
padding: 12px 20px;
margin-right: 10px;
cursor: pointer;
transition: background-color .3s;
}
.tabbed>label:hover,
.tabbed>input:checked+label {
background: #4EC6DE;
}
.tabs {
clear: both;
perspective: 600px;
}
.tabs>div {
width: 1000px;
position: absolute;
border: 2px solid #4EC6DE;
padding: 10px 30px 40px;
line-height: 1.4em;
opacity: 0;
transform: rotateX(-20deg);
transform-origin: top center;
transition: opacity .3s, transform 1s;
z-index: 0;
}
#tab-nav-1:checked~.tabs>div:nth-of-type(1),
#tab-nav-2:checked~.tabs>div:nth-of-type(2) {
transform: rotateX(0);
opacity: 1;
z-index: 1;
}
#media screen and (max-width: 700px) {
.tabbed {
width: 400px
}
.tabbed>label {
display: none
}
.tabs>div {
width: 400px;
border: none;
padding: 0;
opacity: 1;
position: relative;
transform: none;
margin-bottom: 60px;
}
.tabs>div h2 {
border-bottom: 2px solid #4EC6DE;
padding-bottom: .5em;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>
<div id="content">
<div class="container">
<div class="tabbed">
<input type="radio" name="tabs" id="tab-nav-1" checked>
<label for="tab-nav-1">CV 1</label>
<input type="radio" name="tabs" id="tab-nav-2">
<label for="tab-nav-2">CV 2</label>
<div class="tabs">
<div>
<div id="textbox">
<h2 class="cvheader">EDUCATION</h2>
<a href="ArtistCV.pdf" download>
<button id="downloadbtn"><i class="fa fa-download fa-fw"></i> Download</button></a>
<div style="clear: both;"></div>
</div>
<p class="pCV">Maecenas dictum, urna ut consequat condimentum, est dui commodo diam, ac pretium dui ante eu quam. </p>
</div>
<div><h2>CSS</h2><p>Maecenas dictum, urna ut consequat condimentum, est dui commodo diam, ac pretium dui ante eu quam. Curabitur posuere metus nec tellus venenatis placerat. Ut egestas neque in odio vulputate gravida. In at justo ac est laoreet eleifend vel quis arcu. Aliquam erat volutpat. Proin vitae vehicula neque. Nam tempus erat ac ante tincidunt tincidunt. Pellentesque eu nibh sapien. Nunc augue magna, lacinia eget congue eget, mattis id tortor. Fusce id vestibulum neque. Proin tincidunt tellus ut risus lobortis cursus. Duis sit amet urna vel sapien ullamcorper varius.</p></div>
</div>
</div>
</div>
</div>
I'm struggling to get my head around what is causing the "tabbed" div to be hidden from view.
You have mistake in your HTML markup. Change this:
Download</button</a>
To this:
Download</button></a>
And add this to your CSS:
.container {
min-height: 350px;
}
If you don't want to set min-height manually, then you'll need to use JS to calculate it dynamically. Hardly imagine doing this with pure CSS.
I'm trying to make an overlapping effect when the user scrolls using the sticky position and giving each div (section) a new background colour. However, even after setting top to 0 for the sticky position, the divs scroll out of the viewport. Any help would be great!
$(document).ready(function(){
$('#about').click(function(){
$('#aboutcontainer').slideToggle('slow');
});
});
html, body {
margin: 0 auto;
font-size: 22px;
width: 100%;
height: 100%;
}
h3 {
margin: 0;
}
ul, li {
margin: 0 auto;
}
span {
font-weight: 400;
}
.container {
height:102vh;
}
.contentcontainer {
display: flex;
justify-content: center;
align-items: center;
height: auto;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#navbar {
width: 100%;
position: sticky;
top: 0px;
background-color: #ffffff;
font-family: Abel;
height: 100px;
}
#desktop-nav-wrapper {
padding: 0 45px;
height: inherit;
position: relative;
}
#logo {
font-size: 200%;
width: auto;
float: left;
letter-spacing: 3px;
}
#desktop-nav-wrapper ul {
margin-top: 6.5vh;
float: right;
}
#desktop-nav-wrapper li {
position: relative;
display: inline-block;
padding-left: 25px;
font-weight: 300;
color: #000000;
font-family: Abel;
}
#desktop-nav-wrapper li:nth-child(even):hover {
cursor: default;
}
#desktop-nav-wrapper li:nth-child(odd):hover {
cursor: pointer;
}
#aboutcontainer {
display: none;
background-color: #ffffff;
}
#aboutcontainer p {
margin-bottom: 0;
padding-left: 45px;
text-align: left;
width: 80%;
font-family: Lato;
font-weight: 300;
font-size: 92%;
}
#one {
background-color: #ffd700;
position: sticky;
top: 0;
}
#two {
background-color: #468499;
position: sticky;
top: 0;
}
#three {
background-color: #468499;
position: sticky;
top: 0;
}
#media only screen and (max-width: 768px) {
#logo {
margin-top: -1vh;
}
#desktop-nav-wrapper {
padding: 0 15px;
height: inherit;
}
#desktop-nav-wrapper ul {
float: left;
padding-left: 0;
width: 100%;
margin-top: 11vh;
}
#desktop-nav-wrapper li {
position: relative;
display: inline-block;
padding-left: 0;
margin-right: 2%;
font-weight: 300;
color: #000000;
font-family: Abel;
}
#aboutcontainer p {
margin-bottom: 0;
padding-left: 15px;
text-align: left;
width: 90%;
font-family: Lato;
font-weight: 300;
font-size: 80%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar">
<div id="desktop-nav-wrapper">
<h3 id="logo" class="vertical-center">Test Header</h3>
<ul>
<li id="about" class="desktop-items">about</li>
</ul>
</div>
</div>
<div id="aboutcontainer" style="display: none;">
<p>
Phasellus vitae semper risus. Quisque in finibus nisi. Sed non rhoncus purus, eu luctus orci. Vestibulum massa nisi, bibendum eget libero ut, tempor mattis metus. Maecenas placerat nisl non mauris fringilla ultricies. Phasellus dignissim velit vitae tellus sodales luctus. Nullam tempus turpis vitae nunc lacinia faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget volutpat nunc. Cras et libero et ligula suscipit finibus et id dui. Duis odio enim, interdum vitae ullamcorper ut, sagittis vitae metus. Phasellus feugiat libero metus, sed tempor erat porttitor ut. Integer vel libero eu ante sollicitudin fermentum non quis nisl. Aliquam blandit dignissim sem, et malesuada risus venenatis eget. Nulla pretium ornare dui fermentum cursus.
</p>
</div>
<div class="container" id="one">
<div class="contentcontainer">
<h3>One</h3>
</div>
</div>
<div class="container" id="two">
<div class="contentcontainer">
<h3>Two</h3>
</div>
</div>
<div class="container" id="three">
<div class="contentcontainer">
<h3>Three</h3>
</div>
</div>
Figured it out... Turns out position: sticky isn't a fan of HTML and body having their height set to 100%. I removed it and it now works fine.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
How can I make a border style like my added image?
Look at the left bottom border, the border has some gaps.
How can I make that by CSS?
This is the image
Place your border on the main container and then absolutely position the "Anna Jessica" container with a white background to cover the border. Here is a general example based on your image:
h2,
p {
margin: 0px;
}
#test {
border: solid 1px red;
padding: 15px 15px 75px 15px;
position: relative;
}
#bump-out {
display: flex;
position: absolute;
bottom: -38px;
left: 70px;
}
#bump-out-img {
padding: 0px 25px;
background: #FFF;
position: relative;
}
#bump-out-img:before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
top: -10px;
left: 12px;
width: 75px;
height: 75px;
border: solid 1px red;
}
#bump-out-img img {
display: block;
position: relative;
}
#bump-out-title p {
background: #FFF;
padding: 0px 20px 0px 0px;
display: inline-block;
}
<div id="test">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
<div id="bump-out">
<div id="bump-out-img">
<img src="http://via.placeholder.com/75x75" />
</div>
<div id="bump-out-title">
<h2>
Some Name
</h2>
<p>
Some Position
</p>
</div>
</div>
</div>
This question already has answers here:
CSS Sticky Footers with Unknown Height
(7 answers)
Closed 7 years ago.
i would like to make my footer always show at the bottom of the pages and not move up when there is little page content. I tried
body, html {
height: 100%}
html body.wide #wrapper.container {
min-height: 100%;
position: relative;
padding-bottom: 226px!important;/*Footer height*/
}
#containerfooter {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
but since my site is responsive, the footer height varies and this code will hide content on some pages. Is there any way to make this work?
If the footer height varies based on the width of the screen, fixing it to the bottom of the viewport or screen won't be the solution.
I get the impression that content in the footer will wrap or collapse below each other as the screen size decreases, so rather set a minimum height on whichever element wraps the page content.
A Code Pen Example
$("#addBodyContent").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".page-wrap .content");
});
$("#addFooterContent").on("click", function() {
$("<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>").appendTo(".site-footer .content");
});
* {
margin: 0;
}
html,
body {
height: 92%;
font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
}
.page-wrap {
min-height: 100%;
box-sizing: border-box;
padding: 10px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer {
background: black;
position: relative;
left: 0;
right: 0;
bottom: 0;
min-height: 100px;
text-align: center;
padding: 10px;
color: white;
box-sizing: border-box;
}
button.dark:hover {
background-color: rgba(0, 0, 0, 0.7);
}
button.dark {
background-color: black;
border: 3px solid black;
padding: 10px 30px;
color: white;
cursor: pointer;
transition: .7s;
}
button.light:hover {
background-color: #CCCCCC;
}
button.light {
background-color: white;
border: 3px solid white;
padding: 10px 30px;
color: black;
cursor: pointer;
transition: .7s;
}
.content p {
margin-bottom: 10px;
}
.content {
border-top: 1px solid black;
padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-wrap">
<h1>Header</h1>
<br>
<button id="addBodyContent" class="dark">Add Content</button>
<br>
<br>
<div class="content"></div>
</div>
<footer class="site-footer">
<h2>Footer</h2>
<br>
<button id="addFooterContent" class="light">Add Content</button>
<br>
<br>
<div class="content"></div>
</footer>
Use position: fixed. In #containerfooter
#containerfooter {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
for "sticky footer" see this tutorial