I've just added a background image to a div on my homepage which sits in between my header and footer, and it is causing my sticky footer to sit at the bottom of the window instead of below the background image - so the background image sticks out below the footer... How can I get my sticky footer to sit below the div with the background image?
This is my HTML:
<body>
<header style="position: static;">
<div class="wrapper">
<div class="search" style="float: left; width: 20%; position: absolute; left: 0;">
<input type="text" class="st-default-search-input" contenteditable="true" style="background-color: #fff; border: 1px solid #EEE1DC; color: #000; font-weight: 400; float: left;">
</div>
<div class="social" style="right: 0; position: absolute;">
<img src="images/insta-ico.png" />
<img src="images/fb-ico.png" />
<img src="images/email-ico.png"/>
</div>
<div data-embed_type="cart" data-shop="summerheart.myshopify.com" data-checkout_button_text="Checkout" data-cart_button_text="" data-button_text_color="000" data-button_background_color="FAEDE8" data-background_color="transparent" data-text_color="757575" data-accent_color="FAEDE8" data-cart_title="Your cart" style="float: right; right: 0; margin-right: 20px; padding-top: 3px; padding-right: 0px; position: absolute; z-index: 9999;"></div>
<div class="logo"><img src="images/sh_logo3.png" /></div>
<nav id="nav" role="navigation">
Show navigation
Hide navigation
<ul>
<li>HOME</li>
<li>SHOP</li>
<li>ABOUT
<li>SIZING</li>
<li>VIDEO</li>
<li>PRESS</li>
<li>SOCIAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
<div id="hero"></div>
<!--<div style="background-color: #FAEDE8; z-index: 0; position: inherit;">
<p style="text-align: center; font-size: 0.9em; font-weight: 400; color: #000; letter-spacing: 1px; padding: 2px;">FREE SHIPPPING ON ALL ORDERS</p>
</div>-->
<footer>
<div class="foot-wrap">
<div class="foot-list-left">
<ul>
<li>PRIVACY POLICY</li>
<li>TERMS OF USE</li>
<li>CUSTOMER SERVICE</li>
<li>ORDERS</li>
<li>RETURN POLICY</li>
</ul>
</div>
<div class="foot-list-right">
<ul>
<li>© 2015 SUMMERHEART</li>
</ul>
</div>
</div>
</footer>
</body>
And my CSS:
body {
background-color: #FAEDE8;
font-family: 'Open Sans', sans-serif;
margin: 0 0 50px;
overflow: auto;
overflow-x: hidden;
}
footer {
position: absolute;
left: 0;
bottom: 0;
margin: 0;
height: 50px;
width: 100%;
background-color: #FAEDE8;
color: #000;
overflow: hidden;
}
#hero {
position: absolute;
min-height: 100%;
background-size: cover;
width: 100%;
background-repeat: no-repeat;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
overflow-y: auto;
}
And lastly the JavaScript
$(function() {
var images = ['hero1.jpg', 'hero2.jpg', 'hero3.jpg', 'hero4.jpg', 'hero5.jpg', 'hero6.jpg', 'hero7.jpg', 'hero8.jpg', 'hero9.jpg'];
$('#hero').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
});
Any thoughts as to what is causing the jump?
here is the page in question - http://japesfawcett.com/testsh/hometest.html
After looking at your code, (and as MinusFour) pointed out. You're issue is the min-width:100% on your #hero div.
Remove this and you will be back in business!
Min-height 100% means that the smallest that div could ever be is, well, 100% of the window. This was causing your footer to sit at the bottom of your window instead of the page.
Here is a JSFiddle showing you the change.
Solution 2:
Alright, try this out:
Here is your new HTML structure. I kept all of your original class names so you shouldn't have to rename everything...
<div data-embed_type="cart" data-shop="summerheart.myshopify.com" data-checkout_button_text="Checkout" data-cart_button_text="" data-button_text_color="000" data-button_background_color="FAEDE8" data-background_color="transparent" data-text_color="757575" data-accent_color="FAEDE8" data-cart_title="Your cart" style="float: right; right: 0; margin-right: 20px; padding-top: 3px; padding-right: 0px; position: absolute; z-index: 9999;"></div>
<div class="logo"><img src="images/sh_logo3.png" /></div>
<nav id="nav" role="navigation">
Show navigation
Hide navigation
<ul>
<li>HOME</li>
<li>SHOP</li>
<li>ABOUT
<li>SIZING</li>
<li>VIDEO</li>
<li>PRESS</li>
<li>SOCIAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<div id="hero"></div>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="foot-wrap">
<div class="foot-list-left">
<ul>
<li>PRIVACY POLICY</li>
<li>TERMS OF USE</li>
<li>CUSTOMER SERVICE</li>
<li>ORDERS</li>
<li>RETURN POLICY</li>
</ul>
</div>
<div class="foot-list-right">
<ul>
<li>© 2015 SUMMERHEART</li>
</ul>
</div>
</div>
</footer>
</body>
Here is the main part I added to your CSS, but I did create the JSFiddle with your entire main.css file, so it should just be a copy/paste solution. Apologies for the CSS being a little messy in the fiddle.
* {
margin: 0;
}
html, body {
height: 100%;
}
.site-wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#content{
position: absolute;
z-index: -94;
display: block;
top: 0;
height: 100%;
width: 100%;
}
.footer, .push {
height: 4em;
z-index:12;
position:absolute;
}
.footer, .push {
clear: both;
}
Here is the Full Screen JSFiddle
Here is the Code View JSFiddle
Hopefully this solves your problem! Let me know!
*You may need to mess with some z-index on your header, but that's a small change.
Related
How can I make half of the screen partially black when I click on button, like on the picture :
I made mobile navigation like that and specified that background color should be white:
.nav-links-row-mobile{
display: none;
top:0;
position: absolute;
left:0;
list-style: none;
background-color: #ffffff;
margin: 0;
padding: 50px;
height: 100%;
}
<div class="nav-links ">
<ul class="nav-links-row-mobile">
<div class="nav-logo nav-logo-mobile">
<a href="index.html">
<h1>Brit</h1><span class="grey">lex</span>
</a>
</div>
<li>Home</li>
<li>Skills</li>
<li>About Us</li>
<li>Pricing</li>
<li>Contacts</li>
</ul>
</div>
But how can I make 2nd half of the screen half black or partially visible?
Thank you in advance!
Try giving it a box-shadow with a zero blur, a very large spread and use rgba() to make the shadow color transparent.
body {
width: 100%;
height: 100%;
background: url(https://www.fillmurray.com/800/600) no-repeat center center fixed;
background-size: cover;
}
.nav-links-row-mobile{
top:0;
position: absolute;
left:0;
list-style: none;
background: #ffffff;
margin: 0;
padding: 50px;
height: 100%;
box-shadow: 0 0 0px 5000px rgba(0,0,0,0.5);
}
<body>
<div class="nav-links">
<ul class="nav-links-row-mobile">
<div class="nav-logo nav-logo-mobile">
<a href="index.html">
<h1>Brit</h1><span class="grey">lex</span>
</a>
</div>
<li>Home</li>
<li>Skills</li>
<li>About Us</li>
<li>Pricing</li>
<li>Contacts</li>
</ul>
</div>
</body>
I'm trying to make a navigation for my portfolio and I can't get rid of that weird jump when I hover from one link to another. I know it's because of the bottom-border but i need that for design reasons.
I've been trying to find a solution forever and I can't find it anywhere. I've also tried outline instead of border bottom and ::after, and I've tried javascript/jquery.
.navi--link:link,
.navi--link:visited {
font-size: 7.2rem;
background: -webkit-linear-gradient(#d6d6d6, #5BC0EB);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
overflow: hidden; }
.navi {
position: relative; }
.navi__center {
position: absolute;
right: 2rem;
top: 2rem;
transition: all 2s;
display: block; }
.topDiv .navi--link {
z-index: 1;
position: relative;
font-size: 4rem;
letter-spacing: 6px;
display: block; }
.topDiv {
height: 2.25rem;
width: 100%;
overflow: hidden;
display: block;
border-bottom: 1px solid #d6d6d6; }
.topDiv:hover,
.topDiv:active {
height: 100%;
width: 100%;
overflow: hidden;
backface-visibility: hidden; }
<nav class="navi clearfix">
<ul class="navi__center">
<div class="topDiv">
<li><a class="navi--link" href="index.html">Home</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="about.html">About</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="skills.html">Skills</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="resources.html">Resources</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="portfolio.html">Portfolio</a></li>
</div>
<div class="topDiv">
<li><a class="navi--link" href="#">Contact</a></li>
</div>
</ul>
</nav>
I'm not getting any errors I'm just getting a weird jump when I move from one link to another, and I know it's from the border.
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 4 years ago.
Problem: I am trying to make an overlay appear when a list item is hovered upon.
I am new to html and I am trying to get a division overlay on a list item hover. However the overlay appears in the full width of the screen when I want it only on the list item as class header which is in gray color.
I only want the red overlay division to appear on the gray list item.
Here's my code:
.* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #F9423A;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.price:hover {
/*box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)*/
background-color: #002A3A;
}
.price:hover .overlay {
height: 20%;
}
.price .header {
background-color: #ccd4d7;
color: #002A3A;
align-content: center;
font-size: 25px;
height: 100%;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
<div class="columns">
<ul class="price">
<li class="header"> li One
</br>
<img src="../images/closeicon.png" height="50%" width="50%"/>
<div class="overlay">
<span class="closebutton">
<img src="../images/closeicon.png" height="10px" width="10px"/> </span>
<div class="text">li One description
</div>
</div>
</li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header"> li One
</br>
<img src="../images/closeicon.png" height="50%" width="50%"/>
<div class="overlay">
<span class="closebutton">
<img src="../images/closeicon.png" height="10px" width="10px"/> </span>
<div class="text">li two description
</div>
</div>
</li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header"> li three
</br>
<img src="../images/closeicon.png" height="50%" width="50%"/>
<div class="overlay">
<span class="closebutton">
<img src="../images/closeicon.png" height="10px" width="10px"/> </span>
<div class="text">li three description
</div>
</div>
</li>
</ul>
</div>
Would anybody know how to do this?
Thanks,
Add position: relative to .price .header. Adding position: relative makes children with position: absolute position themselves relative to the parent. Otherwise any element with position: absolute positions itself relative to the window object.
My website
I use the section page.
My site's menu operates throughout the site and does not depend on any section.
I read most of the scrolls and section,css/javascript/jquery, but unfortunately I could not solve this problem
I do not know how to connect menu on sections pages.
CSS code:
div#maximenuck87 ul.maximenuck li.maximenuck.level1 > a, div#maximenuck87 ul.maximenuck li.maximenuck.level1 > span.separator {
display: block;
float: none !important;
float: right;
position: relative;
white-space: nowrap;
}
.dot {
position: absolute;
top: 50%;
right: 45px !important;
text-align: center;
background-color: transparent;
opacity: 1;
width: auto;
height: auto;
}
.dot>li.active {
fill: transparent;
}
.dot>li {
top: 50%;
right: 70px;
width: 30px !important;
height: 30px !important;
fill: transparent;
background: transparent;
}
.section-1 {
height: 100% !important;
width: 100% !important;
}
.section-2 {
background-color: transparent;
height: 100% !important;
width: 100% !important;
}
HTML code :
<ul class=" maximenuck">
<li data-level="1" class="maximenuck item388 first level1 menudr1" style="z-index : 12000;"><a class="maximenuck " href="menuone.html"><span class="titreck">menu one</span></a>
<div class="container-fluid section1_slider current" data-wall-animate-duration="1.5" data-wall-section-index="1" class="container"> <div class="row">
<div class="custom">
<section class="section section-1">
<h1 class="s1h" style="text-align: center;"><span style="color: #d4af73;">section1</span></h1>
</section></div>
</div> </div></div>
<div class="container-fluid section2_slider " data-wall-animate-duration="1.5" data-wall-section-index="1" class="container"> <div class="row">
<div class="custom">
<section class="section section-2">
<h1 class="s1h" style="text-align: center;"><span style="color: #d4af73;">section2</span></h1>
</section></div>
</div> </div></div>
<ul class="dot" data-wall-section-nav="" style="z-index: 2;">
<li data-wall-section-nav-index="1" class="active"></li>
<li data-wall-section-nav-index="2"></li>
</ul>
There may be already a jQuery plugin which can achieve this, but I can't find one to do exactly what I'm after. If there is, just point me to the tutorial, thanks.
My problem I have is that I have very long page content, and my sidebar is not visible when you are scrolled near the bottom of the page.
So I would like to make my #sidebar div to stick to the top and bottom of my browser window as you scroll up and down the page.
My sidebar height is longer than your typical screen resolution, so I need the bottom of sidebar to sticky to the bottom of the browser window as well as the top of the browser.
So as you begin to scroll down, the side bar will scroll like normal, but when you reach the end the sidebar, it sticks and will not scroll, and as you begin to scroll up, the sidebar will follow until the top of sidebar reaches the browser, then it sticks. Vice Versa.
Is this possible?
I have created a jsfiddle of simple design layout which is central. I have added a dotted border to the sidebar so you now where the sidebar should stick.
http://jsfiddle.net/motocomdigital/7ey9g/5/
Any advice, or you know a online tutorial or demo, would most awesome!
UPDATE
Please see this attempt by #Darek Rossman
http://jsfiddle.net/dKDJz/4/
He's got the basic idea working. But the scrolling up, causes it to snap to the top. I need the sidebar to be fluid with the scrolling up/down motion. But sticking to the either the top or bottom of the window. It should also not be fixed positioned when the header/footer are in viewport, so it does not overlay.
Thanks
I have updated the jsfiddle with my solution.
var $sidebar = $("#sidebar"),
$window = $(window),
sidebartop = $("#sidebar").position().top;
$window.scroll(function() {
if ($window.height() > $sidebar.height()) {
$sidebar.removeClass('fixedBtm');
if($sidebar.offset().top <= $window.scrollTop() && sidebartop <= $window.scrollTop()) {
$sidebar.addClass('fixedTop');
} else {
$sidebar.removeClass('fixedTop');
}
} else {
$sidebar.removeClass('fixedTop');
if ($window.height() + $window.scrollTop() > $sidebar.offset().top + $sidebar.height()+20) {
$sidebar.addClass('fixedBtm');
}
if ($sidebar.offset().top < 0) {
$sidebar.removeClass('fixedBtm');
}
}
});
h1, h2 {
display: block;
font-weight: bold;
}
#horizon {
width: 100%;
height: 100%;
min-height: 100%;
background: #cccccc;
overflow: hidden;
}
#header, #footer {
width: 480px;
height: auto;
overflow: hidden;
background: teal;
padding: 10px;
color: #ffffff;
}
#wrapper {
width: 500px;
height: auto;
overflow: hidden;
background: #ffffff;
margin: 0 auto;
}
#content-wrapper {
width: 100%;
height: auto;
overflow: hidden:
}
#content {
width: 330px;
height: auto;
overflow: hidden;
background: #ffffff;
margin: 0 auto;
float: left;
padding: 10px;
}
#sidebar {
width: 130px;
height: auto;
overflow: hidden;
background: #ffffff;
margin: 0 auto;
float: left;
clear: right;
padding: 8px;
background: #e5e5e5;
border: 2px dashed red;
}
.fixedBtm {
margin-left: 350px !important;
position: fixed;
bottom: 0;
}
.fixedTop {
margin-left: 350px !important;
position: fixed;
top: 0;
}
.post {
margin: 5px;
width: 320px;
background: red;
float: none;
overflow: hidden;
min-height: 175px
}
.buttons li {
margin: 5px;
width: 120px;
background: blue;
float: none;
overflow: hidden;
min-height: 20px;
text-align: center;
color: #ffffff;
cursor: pointer;
}
.buttons li:hover {
background: lightblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="horizon">
<div id="wrapper">
<div id="header">header</div>
<div id="content-wrapper">
<div id="content">
<h1>Latest Posts</h1>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
<div class="post">This is a post</div>
</div>
<div id="sidebar">
<h2>Sidebar</h2>
<ul class="buttons">
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
<li>Button 4</li>
<li>Button 5</li>
<li>Button 6</li>
<li>Button 7</li>
<li>Button 8</li>
<li>Button 9</li>
<li>Button 10</li>
<li>Button 11</li>
<li>Button 12</li>
<li>Button 13</li>
<li>Button 14</li>
<li>Button 15</li>
<li>Button 16</li>
<li>Button 17</li>
<li>Button 18</li>
</ul>
</div>
</div>
<div id="footer">footer</div>
</div>
</div>
The sidebar should remain in place at the top when the window is larger than the sidebar and fix to the bottom when the sidebar is larger.
You don't need any jQuery or javascript for this. All of this can be achieved in CSS with position: fixed.
Change your sidebar selector to the following
#sidebar {
width: 130px;
height: auto;
overflow: hidden;
background: #ffffff;
margin: 0 auto;
clear: right;
padding: 8px;
background: #e5e5e5;
border: 2px dashed red;
position: fixed;
right: 35px;
}