If you look at this page: http://www.groenesmoothiehandboek.nl/sp/ you will see that the video is slightly offcenter.
You will also see there is a counter (flipclock.js) above. To call the counter we use this code:
<div style="width:100%; background:url(img/bg-countdown.png) center top no-repeat; height:140px; margin:0 auto; z-index:9999;">
If i delete this part, the video centers perfectly.
I am already trying to fix this little bug for over an hour without success.
Does anyone know how i can maybe fix this?
Thanks in advance!
If you wrap this div:
<!-- notice no height attribute here -->
<div style="width:100%; background:url(img/bg-countdown.png) center top no-repeat; margin:0 auto; z-index:9999;">
<!-- stuff from inside this div -->
</div>
inside of this div:
<div style="height: 140px;">
<!-- Place the entire div from above here -->
</div>
Your problem is fixed.
Picture: http://i.imgur.com/HBiLUOz.png
I think ive fixed this one for you:
Add float: left to the wrapper of the counter. (the one with these properties
{
width: 100%;
background: url(img/bg-countdown.png) center top no-repeat;
height: 140px;
margin: 0 auto;
z-index: 9999;
}
Add these to the div underneath it
width: 100%;
float:left;
(the div with these properties):
background:url(img/bg-vid.jpg) center top no-repeat;
height:878px;
max-width:1920px;
margin:0 auto;
should be fixed. I strongly suggest you work with classes and id's to add CSS :). It's more readable that way. Good Luck with the smoothies ;)
Related
I'm stuck at some point. I'm trying to do a three-column page layout. The Middle section is for posts, the right section is for some other links and references and so (A bit long). Left is fixed.
My question is;
How can I stop the right div from moving when it reaches its bottom? And if the middle div's content is shorter then the right also has a scrollbar for the page for the right div. Just like Twitter does.
I tried to do some brainstorming. And thought maybe Twitter makes double divs for those sections. One is normal, the other is the fixed bottom it. So normal one stretches the page for scrolling, and the other one sticks on top of it. But I'm not sure if I'm right.
Or is it possible with pure CSS? (Also I'm using TailwindCSS)
Anyway; here is a presentation of my thought. (Or you can simply look at twitter homepage feed)
Also here is a gif;
click
You can use the following CSS code in the element which needs to stop
position: sticky;
bottom: 0
Refer to the following post on Stackoverflow for more information How does the "position: sticky;" property work?
Hope this answers your question!
Edit: [Try this out]
.main {
width: 100%;
height: 1000px;
display: flex;
}
.first {
width: 30%;
background-color: red;
}
.second {
width: 40%;
background-color: green;
}
.third {
width: 30%;
background-color: blue;
height: 500px;
position: sticky;
top: 0px;
}
p {
margin-left: 20px;
}
<div class="main">
<div class="first">
<p>
Left content.
</p>
</div>
<div class="second">
<p>
Main content.
</p>
</div>
<div class="third">
<p>
Right content.
</p>
</div>
</div>
I'm trying to replicate the effect of the footer from this website:
http://www.terradatbroker.com
In essence what it does is like the image at the top, the image stays fixed while the viewport of the div or section scrolls. I'd like the same with a div or footer block filled with content so that when reaching the footer, the lower part of the footer is revealed first, letting the content div slide upward while scrolling down. I hope this describes it clearly.
Here's what I've got so far:
HTML snippet:
<div class="row content-filler">
Content 1
</div>
<footer>
<div class="footer">
<h1 class="">Footer</h1>
</div>
</footer>
CSS snippet:
footer {
background-color: #444;
min-height: 350px;
color: #fff;
margin: 0px;
padding: 0px;
z-index: 1;
}
.footer {
margin: 0px;
padding: 0px;
background-color: #444;
position:fixed;
top: 800px;
z-index: 1;
}
Here's a jsfiddle with the full source code:
https://jsfiddle.net/DTcHh/39204/
I've searched many bootstrap themes but I couldn't find one that does this effect. I've also looked at the css but I suspect it may be done using javascript, which is minified and unreadable. Can anyone shed some light on how this is done?
Check this https://jsfiddle.net/DTcHh/39205/
Footer is fixed with bottom:0
The last div.row has a margin-bottom, for give space to the footer.
Hope it helps, cheers.
I'm working on a little CSS/HTML project and I'm running into a wall. Hoping I can get some help here. Here is a link to the UI I'm working on: http://imgur.com/a/yKXk9
What I'm trying to do is have that Projects header sticky to the top of that container div, and have all the items scroll beneath it without overlapping with the header.
This is the CSS I have for my container:
.projectContainer {
background-color: rgba(0, 0, 0, 0.15);
width: 30%;
height: 50%;
border-radius: 2em !important;
margin: 1em;
overflow-y: auto;
position: relative;
}
And this is the CSS I have for the header.
.projectHeader {
position: absolute;
padding-left: 35%;
top: 0;
height: 1.5em;
}
EDIT: I also added a bit of the HTML I'm using:
<div class = "projectContainer">
<div class="name projectHeader">Projects</div>
<div class="projectThumbnail">
<a href="http://lunchline.herokuapp.com" target="_blank">
<i class="fa fa-cutlery fa-3x"></i>
<p>LunchLine</p>
</a>
</div>
MORE PROJECT THUMBNAILS HERE
</div>
This obviously doesn't work as the header scrolls just like everything else. I tried using position: sticky on the header, and the problem with that was that all the content scrolled BENEATH the header text instead of neatly ending at the bottom of the header div. If anyone can guide me in the right direction I'd be very grateful.
Also, as a sidenote: is there a way to get rid of that gotdawful scrollbar and just have the thumb appear (and only appear when I'm actually scrolling)?
Thanks everyone.
EDIT:
Here is a JS Fiddle. https://jsfiddle.net/ksy6ahL0/
I tried stripping it down to just the container and stuff so it looks messy but I think it basically shows what I'm trying to do.
I think your biggest problem is that you put the overflow on the main div, not on the content div.
.container{
background:gray;
color:white;
width:400px;
height:400px;
display:flex;
flex-direction:column;
}
.content{
flex:1;
overflow:auto;
}
<div class="container">
<h1 class="header">header</h1>
<div class="content">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div>
</div>
On my website i have a gray test image and i need to position it next to my image slider. I have tried putting them in the same div but it hasnt worked out as well as i though it would. Could someone show me how to do this within my code. I am new so i am confused with this more than others would be.
Thanks!
My website: http://rootforsite.azurewebsites.net/
Press f12 for code. The image slider and the image are near the bottom.
You can change the div css to include (in this case it should be the div with the id "containers" I think)
display: inline-block;
or since you're using lovely bootstrap you can add classes to both the divs to keep them lovely and gridified! :)
E.g.
<div id="container" class="col-xs-6">...</div>
<div id="containers" class="col-xs-6">...</div>
HTML
<div id="container">
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS
#container
{
width: 300px;
height: 300px;
background-color: yellow;
}
.inner
{
width: 100px;
height: 100px
float: left;
background-color: blue;
}
As the title suggests, I'm using Stellar.js. I only have one parallax element, and it's very simple. It's a section with a background image. The background image is set to fixed (like the documentation says to do to avoid jitter), but the image is still jittery--somewhat in Chrome, really bad in other browsers. It doesn't change when I remove the fixed CSS either.
Here is the element:
<!--Testimonial Section-->
<section id="testimonial" data-stellar-background-ratio="0.5" data-stellar-vertical-offset="-900">
<div class="container">
<div class="row">
<div class="span3 margin-30">
<img src="img/testimonial-img.png" alt="Title">
</div>
<div class="span9">
<h2>“Lava has been an asset to our company by providing us with a cutting edge look and a web presence that shows off our work and skills.”</h2>
<div class="testimonial-source pull-right">Jeff | Ceo - Creative Company</div>
</div>
</div>
</div>
</section>
And here is the CSS:
#testimonial {
background: url(../img/studio-10.jpg) no-repeat center;
background-size: 2000px 2000px;
background-attachment: fixed;
padding-top: 120px;
padding-bottom: 120px;
}
Pretty straightforward. Any advice?
The problem wound up being an image tag that was in the same div as the background image that was involved in the parallax scrolling. Upon removing this image, jitter stopped.
Have you tried using smaller images? Those used in stellar's demo are smaller (1280x640px) and do not have the background-size property. Try with smaller image and/or without the background-size property - that may cause those performance problems.
try this
#testimonial {
background: url(../img/studio-10.jpg) no-repeat 50% 0 fixed;
width: 2000px;
height: 2000px;
padding-top: 120px;
padding-bottom: 120px;
}
I know this is an old question but changing $.stellar() or $(window).stellar(); to :
$.stellar({
hideDistantElements: false
});
solved the flickering issue for me.