I have 3 divs. The first is called "container" and the other one is called "video1". "Video1" contains the video. Here is the code.
.video1 {
position: relative;
bottom: 4rem;
left: 15rem;
height: auto;
overflow: hidden;
}
.video1 video {
width: 40rem;
}
<div class='container'>
<div class="video1">
<video src="myvideo.mp4" type="video/mp4"></video>
</div>
</div>
But when I resize the screen the video doesn't get hidden. displays outside of the div.
What should I do? Thanks.
Related
I read the post here on sticky headers and have the following Angular layout
<div fxLayout="column">
<div class="sticky">
<app-header></app-header>
<app-navbar></app-navbar>
</div>
<div fxLayout="row" fxFlex="100">
<div class="my-content">
<router-outlet></router-outlet>
</div>
</div>
</div>
I added the sticky css to have the header and navbar stay at the top even when scrolling and that works
.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
overflow: hidden;
}
But when I scroll and the main content is moving up. The content does not disappear into the header, I can still see the labels, textboxes, and grid.
I added my-content and added the overflow but it still not working.
.my-content {
padding: 0 15px;
width: 100%;
overflow: hidden !important;
}
I been go over this post many times and don't see how the content hides under the banner
https://stackblitz.com/edit/angular-9-0-0-rc-1-ccgxry?file=src%2Fstyles.scss
Any help is appreciated. Thanks
finally figure out the answer, add z-index
.header-sticky {
width: 100%;
position: fixed;
top: 0;
z-index: 10;
background:inherit;
}
.my-content {
padding: 0 15px;
width: 100%;
z-index:5;
overflow: hidden !important;
}
Is it possible to make an element with position: absolute; have the full height of its parent, including overflowed content?
In the following code snippet the .line element gets cut off when scrolling the .container:
.container {
position: relative;
height: 150px;
width: 300px;
overflow-y: scroll;
}
.line {
position: absolute;
background: #000;
width: 2px;
left: 50%;
height: 100%;
}
<div class="container">
<div class="line"></div>
<div style="height: 500px;"></div>
</div>
Adding another wrapper can solve the issue:
.container {
height: 150px;
width: 300px;
overflow-y: scroll;
}
.container > div {
position: relative;
}
.line {
position: absolute;
background: #000;
width: 2px;
left: 50%;
height: 100%;
}
<div class="container">
<div>
<div class="line"></div>
<div style="height: 500px;"></div>
</div>
</div>
The height: 100%; of the absolutely positioned element refers to the given CSS heigth (i.e. the height defined in the CSS rule) of the relative parent, not to its stretched "real height" when it overflows. So it will always have the initial parent height which is defined via CSS.
To achieve what you want, you'd have to get the parent height via javascript and apply it to the child.
so I'm trying to tame the Footer so that it stays below the dynamic content container, but whatever way I try it (Pos: Abs, Bottom: 0; etc etc) it either appears halfway up the content or fixed at the bottom. Either I don't want. It would be appreciated if someone could shine a light on my problem.
HTML:
<div id="Content">
<div id="G6"></div>
<div id="Post-Block">
<div id="block">
<div id="feat-img"></div>
<div id="date"></div>
</div>
</div>
<div id="Footer">
<div id="G7"></div>
<div id="FooterBreak"></div>
<div id="FooterBG"></div>
<div id="FooterLinks">
</div>
<div id="Copyright">
</div>
<div id="Copyright2">
</div>
<div id="FooterBreak2"></div>
</div>
</div>
CSS:
#Footer {
width: 100%;
height: 230px;
position: absolute;
left: 0;
bottom: 0;
}
#Content {
z-index: 7;
background: url(/images/content%20bg.jpg) repeat left top;
position: absolute;
top: 336px;
width: 999px;
height: auto;
color: #fff;
min-height: 950px;
margin: 0 0 230px;
}
html {
position: relative;
height: auto !important;
}
body {
z-index: 0;
background: url(/images/background-texture%20d.jpg);
left: 0;
}
#page {
z-index: 1;
width: 1000px;
height: 1000px;
margin-left: auto;
margin-right: auto;
}
EDIT: When I used the Chrome dev tools to inspect the Crow's Perch website, it looks like your problem is that the height of your HTML is smaller than your content (ie, you use negative bottom values in your absolute positioning for some of your content). Given this, you could add bottom: -865 to #footer, but given that you said your content is dynamic, that's an EXTREMELY brittle solution. Unfortunately, since you're pixel-pushing all of your elements, I don't think there's a way to have your footer respond dynamically to your changing content. More comprehensive refactoring of your code is likely necessary.
Good luck!
Here is my test site http://mint.sbdigi.com/, notice the carousel that it has a white space in between when transitioning. I am not sure why that is happening. Any help please.
Here is a short code that I have:
HTML
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item text-medium active" style="height: 100%;">
<h2>Your Fresh New Family Dentist</h2>
<div class="carousel-overlay"></div><!-- carousel-overlay -->
<div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/Mint_Dental_sliderimg_02.jpg');" class="fill"></div>
</div>
<div class="item text-medium" style="height: 100%;">
<h2>Bright Smile Package</h2>
<div class="carousel-overlay"></div><!-- carousel-overlay -->
<div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/Mint_Dental_sliderimg_03.jpg');" class="fill"></div>
</div>
<div class="item text-medium" style="height: 100%;">
<h2>Refresh Package</h2>
<div class="carousel-overlay"></div><!-- carousel-overlay -->
<div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/Mint_Dental_sliderimg_04.jpg');" class="fill"></div>
</div>
<div class="item text-medium" style="height: 100%;">
<h2>New Patient Combo</h2>
<div class="carousel-overlay"></div><!-- carousel-overlay -->
<div style="background-image:url('http://mint.dev/wp-content/uploads/2015/06/Mint_Dental_sliderimg_05.jpg');" class="fill"></div>
</div>
</div></header>
CSS
header.carousel {
height: 550px;
}
#mint-landingcarousel .carousel-indicators {
z-index: 2;
}
.carousel-indicators {
bottom: 20px;
}
.carousel-inner {
overflow: hidden;
position: relative;
width: 100%;
}
header.carousel {
height: 550px;
}
header.carousel .item {
height: 100%;
}
header.carousel .item.active {
height: 100%;
}
header.carousel .item h2 {
font-size: 90px;
left: 25%;
position: absolute;
text-align: center;
top: 35%;
width: 50%;
z-index: 9999999;
}
header.carousel .carousel-inner {
height: 100%;
}
header.carousel .fill {
background-position: center center;
background-size: cover;
height: 100%;
position: relative;
width: 100%;
z-index: -9999;
}
.carousel-overlay {
background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
height: 100%;
position: absolute;
width: 100%;
z-index: 9999;
}
I am not sure if this code is enough. let me know though if you still want of my code. Some of these codes are default in the twitter bootstrap css.
At a first look it seems that:
an .active class is being added on the active image in your carousel.
.active class defines the height for a visible/active item in your carousel.
When .active is not present height is not set so image is not visible.
You should change the behavior of your script, keeping height for visibility of you hidden images otherwise you get the white color your page background.
I hope it helps.
I think you have custom CSS .left{float:left;} and .right{float:right;}
When the carousel slides it adds classes of left and right to the containing div. Remove the left and right floats in CSS.
OR
Add a inline property
<div class="item text-medium" style="height: 100%; float:none;">
It seems there is a "left" class being added to the "active" class through every iteration. I'm not sure if that is the solution but you could research that a bit.
Being that you are only using three images, if you want you could set the background of those images to the same exact image so that through each iteration (when they disappear), there is the same image still in the background. This is not efficient nor is it good for page speed/load, however, but it is a solution nonetheless.
I'm working on a site that has a fixed width div that is centered and I wanted to have two designs on either side of the div which I was able to get using two divs. The issue is the way I did it, those images add to the site width, causing a horizontal scroll bar to appear if the window is too small. Even though the whole content div fits with in the screen.
CSS
.container {
margin: 0 auto;
width: 500px;
}
.span {
margin-right: 0;
width: 500px;
}
.logo {
margin-top: 25px;
}
.logo-img {
height: 60px;
left: -21px;
position: relative;
}
.swirls {
height: 0px;
}
.left-swirls {
position: relative;
top: -50px;
right: 100px;
width: 188px;
z-index: -1;
}
.right-swirls {
position: relative;
top: -50px;
left: 215px;
width: 200px;
z-index: -1;
}
.nav {
background-color: #0ff;
}
.content {
background-color: #00f;
height: 200px;
}
HTML
<div class="container">
<div class="span logo">
<img src="http://imageshack.us/a/img839/2507/logongv.png" class="logo-img"/>
</div>
<div class="span swirls">
<img src="http://imageshack.us/a/img831/3254/leftswirls.png" class="left-swirls" />
<img src="http://imageshack.us/a/img600/7424/rightswirls.png" class="right-swirls" />
</div>
<div class="span last nav">
Nav Bar
</div>
<div class="span content">
Body content
</div>
</div>
An example of the issue can be viewed here: http://jsfiddle.net/e4j6b/8/
I'm trying to get the background image(s) centered relative to the div instead of the sides of the browser.
Is there a way to center a background image just like a div with margin: 0 auto?
If you want .left-swirls and .right-swirls to not add to the width of the document, then they should be background images. (For modern browsers, multiple background images work fine.)
Example: http://jsfiddle.net/MbGSP/1/
body {
background: url(http://imageshack.us/a/img831/3254/leftswirls.png) center center no-repeat,
url(http://imageshack.us/a/img600/7424/rightswirls.png) center center no-repeat;
}
You can center background images, both horizontally and vertically, with center center for the positions.