I am trying to have the image to scroll up and down within div.
Position sticky works when using chrome but not on IE, Edge, or firefox.
html
<section class="container">
<div class="row">
<div id="stamp-img" class="col-md-6">
<img src="">
</div>
<div class="col-md-6">
</div>
</div>
</section>
css
#stamp-img {
position: sticky;
top: 35%;
img {
margin: 50px 0px;
}
}
Why not use fixed? Sticky has cross browser compatibility issues as stated in the other answer.
#stamp-img {
/* changed to fixed */
position: fixed;
top: 35%;
/* new */
height: 100px;
overflow: auto;
/* end new */
img {
margin: 50px 0px;
}
}
<section class="container">
<div class="row">
<div id="stamp-img" class="col-md-6">
<img src="https://placehold.it/500x500">
</div>
<div class="col-md-6">
</div>
</div>
</section>
"the sticky property is an experimental API that should not be used in production code"
=> https://developer.mozilla.org/en-US/docs/Web/CSS/position
Related
In col-2, I am trying to center the "WHAT" text over the image.
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="img/base.png">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
As we resize the browser, the row height will change so that everything in col-10 fits. I am using object-fit:contain to keep the image proportions correct. I need the "stack-Txt" div to resize with the image so that the text will stay centered over the image
Or maybe you know of a better way to achieve this?
Current Idea:
Put WHAT in another child div, make flex, center text with justify-content/align-items
&
JS addEventListener to window resize, get the img div and set nextSibling size equal to this.
These were the css classes at some point... but the only important thing is that the img doesn't overflow the col-2 or the height (which is variable based on the length of col-10)
.stackParent {
position: relative;
object-fit: contain;
max-width: inherit;
height: 20vh;
}
.stack-Txt {
position: absolute;
text-align: center;
width: 100%;
max-height: 15vh;
min-height: 15vh;
z-index: 4;
}
.stack-Txt-child {
}
.stack-Img {
position: absolute;
object-fit: contain;
max-width: inherit;
min-height: 15vh;
max-height: 15vh;
top: 0%;
left: 0%;
z-index: 3;
}
*Note: I also have media queries to resize text, but this shouldn't make a difference.
If you are using Bootstrap 5 you can just use the built-in classes to achieve so.
Apply .position-relative to the main div parent
Apply .img-fluid to <img /> to make image responsive
Apply .position-absolute, .top-50, .start-50, translate-middle to stack-Txt to center it vertically and horizontally over the image.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-2">
<div class="stackParent position-relative">
<img class="stack-Img img-fluid" src="https://source.unsplash.com/random">
<div class="stack-Txt position-absolute top-50 start-50 translate-middle">
<div class="fourWsText stack-Txt-child text-white">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
If you don't, just edit your CSS as follow:
.stackParent {
position: relative
}
/* make image responsive */
.stack-Img {
max-width: 100%;
height: auto;
}
.stack-Txt {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="https://source.unsplash.com/random">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
The text "what" is in center over the image in any screen resolution.
.stackParent{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.stack-Img{
position: absolute;
margin: 0;
min-height: 15vh;
max-height: 15vh;
}
.stack-Txt{
z-index: 99;
}
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="img/base.png">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
I want to create a web site that contains a network graph. I used vis.js for this. If you hover over an image of a person the image should flip and show some information on the background. I created a JavaScript file that creates a tree out of a json file dynamically. Here is a picture of the result:
As you can see the images are visible outside the box which should not be the case. They should not be displayed outside of the borders.
Here is my html-code:
<div id="fullpage">
<div class="section " id="section0">
...
</div>
<div class="section" id="section1">
...
</div>
<div class="section" id="section2">
<div class="intro">
...
</div>
<div id="media">
...
</div>
</div>
<div class="section active" id="section3">
<div class="slide" id="slide1">
<div id="network_container_1">
<div id="network"></div>
</div>
</div>
<div class="slide active" id="slide2">
<div id="network_container_2">
</div>
</div>
</div>
Here is the CSS:
#network{
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#network_container_bewohner{
width: 100%;
height: 100%;
left: 0;
top: 0;
border:1px black solid;
}
#network_container_freunde{
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.overlay {
position: absolute;
padding: 4px;
z-index: 0;
}
#slide1{
z-index:0;
}
#slide2{
z-index:1;
}
The images are located as #block1, #block2, #block3, etc. as class overlay inside of #network_container_1.
As you can see I tried to mess around with the z-index but it doesn't work.
Okay I found the solution. The problem was the absolute position.
See here: Position absolute and overflow hidden
I am trying to make just the pages on my website that have the main body content class of ".interior-health-main" have a footer that is static at the bottom of the page. I want it at the absolute bottom, currently if you view some of my pages on a large screen, you will see a bunch of white space after the footer. I want to get rid of this.
I have been looking into this for hours now and tried many things, at first I was going to make the footer on the entire website static at the bottom of the page, but setting the footer's css to position: absolute conflicted with other elements on my home page, which is why I just want it on the ".interior-health-main." If it is possible to change it just for the footers on these pages please let me know, I do not really want examples of fixing this by setting the entire body to position:relative. It just messes up my homepage.
Here is an example of what it looks like with the white space after the footer http://codepen.io/aahmed2/full/KgWNYL/
<p class="nav">This is a Navigation Bar</p>
<div class="interior-health-main">
<div class="container">
<ol class="breadcrumb">
<li>Home</li>
<li>Health Resources</li>
<li class="active">Sample Short Page</li>
</ol>
<h2>Sample Short Page</h2>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Contact Us</h4>
<p>414 Hardin Hall<br> 3310 Holdredge St<br> Lincoln, NE 68583<br> (402) 472-7363</p>
<div class="affiliates">
<img class="wordmark" src="../_logos/wordmark.svg" alt="University of Nebraska-Lincoln Wordmark">
<img class="extension" src="../_logos/n-extension-rev.svg" alt="Nebraska Extension Logo">
</div>
</div>
<div class="col-sm-4">
<h4>Quick Links</h4>
<p>Human Health</p>
<div class="line"></div>
<p>Pet Diseases</p>
<div class="line"></div>
<p>Livestock Diseases</p>
<div class="line"></div>
<p>Events</p>
<div class="line"></div>
</div>
<div class="col-sm-4">
<h4>Attention</h4>
<p>All information on this site is intended for informational use only. Contact your doctor or veterinarian for health concerns.</p><br>
<h5><a class="partner" href="#">Partners & Stakeholders</a></h5>
</div>
</div>
<div class="copyright">
<div class="col-xs-9">
<h6>© 2016 Nebraska One Health. Site Map.</h6>
</div>
<div class="col-xs-3">
<img class="social pull-right" src="../_logos/twitter-logo-button.svg" alt="twitter icon">
<img class="social pull-right" src="../_logos/facebook-logo-button.svg" alt="facebook icon">
</div>
</div>
</div>
</div>
Here is my css
.nav {
text-align: center;
padding: 25px 0;
background-color: #c1c0be;
color: #fff;
position: fixed;
width: 100%;
z-index: 2;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 20px;
}
#media (max-width: 479px) {
.interior-health-main {
padding-top: 50px;
}
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
}
You can position the footer absolute like they did here
https://getbootstrap.com/examples/sticky-footer/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* background-color: #f5f5f5; */
}
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
How did it conflict when you tried your way? update your post with what you did?
Please reference this question to find your solution.
I applied one of the solutions from the above link to your code.
Wrap your code in a #holder div.
Add the following CSS:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
height: 300px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 300px; /* height of footer */
}
Here is the working fiddle:
https://jsfiddle.net/DTcHh/25475/
I wrapped your page (not containing footer) into .page-wrap div, and edit you codePen code and just add this piece of code to your css
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height (with margin and border) */
margin-bottom: -299px ;
}
.page-wrap:after {
content: "";
display: block;
}
.footer, .page-wrap:after {
/* page-wrap after content must be the same height as footer */
height: 299px;
}
Demo
I'm building a site using fullpage.js and Foundation. I'm trying to vertically center an image inside of a section and I'm having no luck.
I've tried this:
https://css-tricks.com/centering-in-the-unknown/
I think that the issue has something to do with the fp-tableCell div that fullpage.js creates.
<div id="first-section" class="section sTop active">
<div id="first-section-row" class="row inner">
<div id="slide_1_wrapper" class="small-12 medium-6 columns">
<h1 class="title">Hello!</h1>
<h2 class="subtitle">My name is Whatever</h2>
</div>
<div id="main-picture-wrapper" class="small-12 medium-6 columns">
<img id="main-picture" src="img/headshot.jpg" alt="my_picture">
</div>
</div>
</div>
I tried the CSS from the article above with no luck:
#main-picture {
max-height: 400px;
}
#main-picture-wrapper {
display: inline-block;
vertical-align: middle;
}
#slide-1-wrapper {
position: relative;
}
#first-section:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
Screenshot of the rendered html, showing the fp-tableCell
try to add this in html
<div id="page">
<div id="content_container" class="small-12 medium-6 columns">
<div id="main-picture-wrapper">
<img id="main-picture" src="keyboard_search.png" alt="my_picture">
</div>
</div>
</div>
in css
*{ margin:0; padding:0;}
#page{display:table;overflow:hidden;margin:0px auto;}
#content_container{display:table-cell;vertical-align: middle;}
#main-picture-wrapper p{text-align:center;}
html,body{height:100%;}
#page{height:100%;width:100%; max-width:600px; text-align:center;}
.bannerimg{width:100%;max-width:600px;margin:0px auto;}
may help you
By default fullpage.js uses the option verticalCentered:true, so any image you add will be automatically centered unless you change it by using CSS.
You can easily see this in any demo online or in any of the provided examples.
From Michael in the comments:
Try giving the wrapper ID or class position: relative and then the image class or ID position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; - Rough Demo: jsfiddle.net/rrh5c04a
So i've been trying to replicate the functionality of the How it works button of airbnb. I'm new to stackoverflow, so I don't know the policies to link the website.
What I have tried:
My HTML mockup
<div class="how-it-works">
<div class="container">
<div class="row">
<div class="col-lg-12">
<span class="pull-right">
<span class="glyphicon glyphicon-remove" ng-click="hideHowItWorks()"></span>
</span>
</div>
<div class="col-lg-12">
<div class="row">
<div class="col-lg-3">
<div class="hiw-container hiw-step-one"></div>
</div>
<div class="col-lg-3">
<div class="hiw-container hiw-step-two"></div>
</div>
<div class="col-lg-3">
<div class="hiw-container hiw-step-three"></div>
</div>
<div class="col-lg-3">
<div class="hiw-container hiw-step-four"></div>
</div>
</div>
</div>
</div>
</div>
<div class="main-class">
...some content....
</div>
My CSS:
.how-it-works{
position: absolute
width: 100%
top: -663px
padding-top: 40px
min-height: 663px
}
I'm using JQuery to slide the entire div down instead of using the standard slideDown procedure.
$('.btn').on('click', function(){
$('.how-it-works').css('height', $(window).height());
$('.how-it-works').animate({top: '0px'});
$('.main-class').animate({marginTop: '663px'});
})
If I use this method or the method of slideDown, the frame while sliding, stutters and gives an effect thats far from pleasing. How do I make the effect that's similar to the above mentioned website?
Slide an overlay on canvas from the top. This uses vanilla javascript and css animations. jQuery animations always seems jerky in my opinion.
var overlay = document.getElementById('overlay');
document.getElementById('open').onclick = function() {
overlay.style.top = 0;
}
document.getElementById('close').onclick = function() {
overlay.style.top = '-100%';
}
html, body {
height: 100%;
margin: 0;
}
#overlay {
background: red;
height: 100%;
width: 100%;
position: absolute;
top: -100%;
transition: top 1s ease-in-out;
}
<div id="overlay">
close
</div>
Open