I pretty much see to have all the bugs figured out so far, besides one... the footer, again, isn't attached to the bottom. I had to remove the relative and absolute method because the content would stretch under the footer. So I need some sort of way to expand the area between the content and footer dynamically to keep the footer on the bottom. Is there a way this can be done? I have a "box-divider" set to 100% height, but it doesn't seem to do anything.
Live code here http://jordan.rave5.com/tmp/
CSS
#body {
transition: height 2s;
-webkit-transition: height 2s;
width: 74%;
min-width: 1024px;
height: auto !important;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
background-color: #080908;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
}
#body-content {
display: none;
height: 100%;
}
#box-divider {
width: 75%;
min-width: 1024px;
height: 100%;
margin: 20px auto 20px;
}
#footer {
width: 100%;
height: 150px;
background-image: url(images/black-trans.png);
background-repeat: repeat;
padding: 0 0 20px;
}
HTML
<div id="background-overlay">
<div id="background-gradient">
<div id="header-image-grad">
<div id="header-container">
<div id="header">
<div id="navigation-container">
<div id="navigation">
<span id="nav">Navigation Area...</span>
</div>
</div>
</div>
</div>
<div id="header-image-border">
<img class="header-img" src="slides/fields.jpg" alt="Panoramic Fields" />
<div class="image-grad"></div>
</div>
</div>
<div id="body">
<div id="body-content"></div>
<div class="loading"><img src="images/loading.gif" alt="Loading Content" /></div>
</div>
<div id="box-divider">
</div>
<div id="footer">
<br />
<div id="footer-content">
Footer Area...
</div>
</div>
</div>
</div>
One of the many versions out there... i use one in my designs
Sticky footer
This is what i do with my sites
html, body {height: 100%}
#wrap
{
min-height: 100%;
}
#footer
{
position: relative;
margin-top: -58px;
clear: both;
color: #333;
font-size: 10px;
text-align: center;
height: 85px;
background-image: url(../images/footerBG.jpg);
background-repeat: repeat-x;
}
the negative top margin is what does the trick...
HTML
<body>
<div id="wrap"><!--for sticky footer-->
<div id="headerWrapper"></div>
<div id="navWrapper"></div>
<div id="main">
<p>this is where your content fun crazy shenanigans will go</p>
</div><!--main or content-->
</div><!-- STICKY FOOTER -->
<div id="footer"></div>
</body>
Related
attached a js fiddle to show my issue. I want the orange image to take all the top area of the card and not have padding on the top and sides. the image should show from the very top and takes all the sides with no space
link to fiddle
.pricing-card {
color: black;
width: 100%;
max-width: 330px;
max-height: 463px;
flex-flow: column;
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 10px 70px #2e231d1a;
border-radius: 50px;
opacity: 1;
min-height: 550px;
margin: auto;
}
#logo {
top: 50px;
position: absolute;
left: 50px;
}
#rectangle {
max-width: 330px;
}
<div class="price-container">
<div v-if="checkDomainTrial" class="price-text">
Get your entire first month free on us!
</div>
<div class="header">
<div id="wait">Wait! Don't go yet!</div>
</div>
<div class="pricing-card">
<div class="pricing-card-header">
<img id="rectangle" src="https://i.ibb.co/FVkvCv5/Rectangle-cancellation.png" alt="" />
Okay, so I thought that the grid was perfectly aligned to the center, only to realise that it was a few pixels out. I completely stripped all of my attempts at centering and looked online but couldn't find anything.
I know I can use CSS Grids, Flexbox etc. but I am trying to learn how to create websites without using any aid. So I can learn the reasoning behind things.
Fiddle:
https://jsfiddle.net/8L9ye7nj/5/
Grid HTML:
<div class="box-wrapper">
<div class="box-container">
<div class="box" id="stethoscope">
<div class="box-label">
<p>Book an appointment</p>
</div>
</div>
<div class="box" id="prescription">
<div class="box-label">
<p>Request a repeat prescription</p>
</div>
</div>
<div class="box" id="group">
<div class="box-label">
<p>Join the Patient Group</p>
</div>
</div>
</div>
</div>
Grid CSS:
.box {
float: left;
width: 25%;
height: 300px;
background-color: #252625;
color: #FFF;
position: relative;
padding: 15px;
margin: 0.5%;
}
.box-label {
position: absolute;
bottom: 0;
text-align: center;
background-color: rgba(0,0,0,0.5);
width: 100%;
padding: 7px 0;
left: 0;
}
.box-label:hover {
animation: box-stretch 1s forwards ease-in-out;
cursor: pointer;
}
.box-container {
width: 90%;
}
.box-container::after {
content: "";
clear: both;
display: table;
}
.box-wrapper {
background-color: #B21645;
padding: 30px;
}
How can you divide the box and center them?
You can use calc to use mathematical expressions to calculate height, widths etc in css. You can divide the width by three here for the box.
.box {
display: inline-block;
width: calc(100% / 3);
}
Things to consider
Mind the space between inline-block elements. You can read more about
that here.
Avoid using floats as much as possible. Most layouts done with float can be achieved with inline-block. Floats are simply meant to take an element, put it to one side, and let other content flow around it. That’s all.
box-wrapper and box-container either one is only needed to wrap the contents inside.
Code Snippet
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.box-wrapper {
background-color: #b21645;
padding: 20px;
}
.box {
position: relative;
display: inline-block;
width: calc(100% / 3);
padding: 0 10px;
height: 300px;
overflow: hidden;
}
.box img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: left top;
}
.box-label {
position: absolute;
bottom: 0;
width: calc(100% - 20px);
text-align: center;
background-color: rgba(0, 0, 0, .6);
padding: 10px 0;
transition: padding 0.3s;
}
.box-label:hover {
padding: 25px 0;
}
.box-label p {
font-family: Helvetica;
color: white;
font-size: 20px;
}
<div class="box-wrapper">
<div class="box">
<img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="" />
<div class="box-label">
<p>Some Title Here</p>
</div>
</div><div class="box">
<img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="">
<div class="box-label">
<p>Some Title Here</p>
</div>
</div><div class="box">
<img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="">
<div class="box-label">
<p>Some Title Here</p>
</div>
</div>
</div>
I need some help, I need to code this image:
This is what I have so far:
I tried adding a margin-top, padding-top, tried all combinations of position relative and absolute, I just need some ideias on how to do it.
This is how my code is structured:
<div class="background-oficina">
<div class="container">
<div class="col-xs-12 text-center">
<img class="logo" src="logo.png" alt="Oficina de Redação">
</div>
</div>
</div>
This is the css for the two classes that I'm using:
.background-oficina {
background: #fff url("bg-texture.png");
}
.logo {
padding-top: 50px;
margin: 0 auto;
}
You could use an additional absolutely positioned element to which you assign the repeated background pattern and which you put behind the original element by using z-index: -1:
html, body {
margin: 0;
}
.background-oficina {
position: relative;
border: 1px solid #333;
border-bottom: none;
}
.bg-container {
position: absolute;
z-index: -1;
left: 0;
top;
width: 100%;
height: 120px; /* or whatever height is desired */
background: url("http://placehold.it/20x15/cff");
}
.text-center {
text-align: center;
}
.logo {
padding-top: 50px;
margin: 0 auto;
}
<div class="background-oficina">
<div class="bg-container"></div>
<div class="container">
<div class="col-xs-12 text-center">
<img class="logo" src="http://placehold.it/200x150/fb7" alt="Oficina de Redação">
</div>
</div>
</div>
Your trying this, you can set default height and width to parent div that consist of that logo then using position:absolute you can push that out of parent div, but don't add overflow:hidden to parent div or else it hides your image or element that you are trying to push outside parent div as hidden.
.background-oficina {
background: #fff url("https://via.placeholder.com/800x100/000") no-repeat;
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.2);
background-size: 100% 100%;
width: 100%;
height: 100px;
position: relative; /*Add this*/
}
.logo {
padding-top: 50px;
margin: 0px auto;
position: absolute; /*Add this*/
bottom: -20px; /*Add this*/
}
<div class="background-oficina padding margin-bottom">
<div class="container">
<div class="col-xs-12 text-center margin-bottom">
<img class="logo" src="https://via.placeholder.com/50/ff2" alt="Oficina de Redação">
</div>
</div>
</div>
I'm trying to create a responsiveness sticky footer but without any success. I have followed every guide and every common best practices. Here it is my example: example
In the example I would put the footer at the bottom of the page.In addition I would use an image as background of the entire page
.blur {
height: 100%;
background: url('image.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
Do you have any idea?
keep your HTML just as is, and change your CSS to this (obviously you'll change it later to your needs, I just added styling for visualization purposes):
html, body {
background-color: #FFF;
font-family:'Raleway', 'Open Sans', sans-serif;
font-weight: 400;
}
body {
color: #333;
background:url('http://2.bp.blogspot.com/-OSVC5PTEAKU/TZNnUHaoJZI/AAAAAAAAApo/WcP3qSUPAoo/s1600/monta%2525C3%2525B1as%252520verdes%255B1%255D.jpg') no-repeat 50%;
background-size:cover;
min-height: 100vh;
padding-bottom:80px /* footer height + 20 px for spacing, but adjust as you like */;
}
a {
color: #eee;
}
a:hover, a:focus {
text-decoration: none;
color: #dedede;
}
/* Langind Page */
.inner {
margin-top: 20px;
}
.btn-facebook-inner {
margin-top: 80px;
padding: 30px;
}
.btn-facebook {
width: 300px;
border-radius: 4px;
background-color: #3B5998;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
font-family:'Lucida Grande', sans-serif;
}
.btn-facebook:hover, .btn-facebook:focus {
color: #dfe3ee;
text-decoration: none;
}
footer {
position:fixed;
bottom:0;
left:0;
width:100%;
height:60px;
background:#fc0;
}
footer .social-icons > ul > li {
padding-right: 12px;
}
See fiddle here
This will make the bottom to be fixed, so if you have a lot of content, the footer will overlap the content. If you don't want this behavior, change fixed to absolute
Just a comment I have seen on your code and see as a recurrent error around here: while it's common to target html and body together, they're NOT the same thing and not all styles applies to both
I looked at this and went a different way. If you are inherently setting a "height" value for the footer, while your footer will still "respond", the background follows the styling and will only display at "n px" leaving you with the body color below.
Use the following code
HTML:
<body>
<div id="wrap">
</div>
<div id="footer">
</div>
CSS:
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
Edit
HTML
<!-- Wrap all page content here -->
<div id="blur">
<!-- Begin page content -->
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 inner">
<h1 class="text-center">Title</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4 btn-facebook-inner">
Login with Facebook
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-3 col-md-push-9 social-icons">
<ul class="list-inline">
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
</div>
<div class="col-md-9 col-md-pull-3">
<ul class="list-inline">
<li>Privacy Policy</li>
<li>Terms of Use</li>
</ul>
</div>
</div>
</div>
</div>
CSS
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
#blur {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
}
I'll apologize first because I understand that this has been asked a zillion times, but I've tried everything I've found to no avail. :(
FYI: I am attempting to create an ASP.NET web app using Master Page. All HTML code below is from my MP.
I have 3 questions:
How the heck do I make my footer stick (my failed code will be below)?
In the setup below, I have nested divs inside the Header/Content, etc. I am assuming that doesn't affect my epic journey toward sticking the footer to the bottom?
Lastly, I have the (form) tag immediately after my (body) tags. I know other folks have mentioned that they felt as though there was an issue. I, too, feel like it messes with my ability to sticky my footer... but maybe this is an irrational fear emerging from my Noob instincts... lol.
Thank you in advance for taking the time to help me!!
CSS
* {
margin: 0;
}
html,
body {
font-family: Arial;
font-size: 10pt;
background-color: #F2FDFF;
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: center;
padding: 0;
height: 100%;
}
a {
outline: none;
}
#wholePg {
min-height: 100%;
position: relative;
}
#divNav-cont {
width: 100%;
position: fixed;
top: 0px;
}
#divNav {
background-color: #DBDBDB;
margin-bottom: 5px;
margin-top: 0;
height: 100px;
width: 800px;
text-align: center;
font: 0/0a;
vertical-align: middle;
display: table;
border-radius: 0px 0px 25px 25px;
}
#divBody {
width: 98%;
overflow: hidden;
white-space: nowrap;
margin-top: 110px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding-bottom: 40px;
}
#divFooter {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
border-radius: 25px 25px 0px 0px;
background-color: #DBDBDB;
}
HTML
<body>
<form runat="server">
<div id="wholePg">
<%--Navigation--%>
<div id="divNav-cont">
<div id="divNav">
<div id="imgNav">
</div>
</div>
</div>
<%--Body: Left and Right--%>
<div id="divBody">
<div id="leftContainer" class="bodyWidth196px">
<div class="mainHeader">
<p>Left</p>
</div>
<div class="mainBody overflowYhidden
overflowXhidden bodyWidth196px
borderBottomCurved height85percent">
<p>
Blah blah etc.
</p>
<asp:ContentPlaceHolder ID="LeftContentPlaceHolder" runat="server" />
<br />
<br />
</div>
</div>
<div id="rightContainer" class="bodyWidth580px">
<div class="mainHeader">RIGHT</div>
<div class="mainBody bodyWidth580px borderBottomCurved">
<asp:ContentPlaceHolder ID="BodyContentPlaceHolder" runat="server" />
<br />
<br />
</div>
</div>
</div>
<%--Footer--%>
<div id="divFooter" class="center">
<br />Blabbity boo dee dah.
</div>
</div>
</form>
</body>
Here's the usual HTML solution to implement a sticky footer:
http://www.cssstickyfooter.com/html-code.html
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 180px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear:both;}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
It took me a long time to figure out how to make this work with ASPNET and master pages. The trick is to add the form tag to the html, body {...} rule as follows:
html, body, form {height: 100%;}
So, your main layout divs should have the following pattern:
<body>
<form runat="server">
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
</form>
</body>