I have an html5 video tag with a div that has a text caption overlayed and when you scroll in chrome, the text div disappears as it gets near the top or bottom of the screen fold. Sometimes it's as its nearing the top of the screen, sometimes the bottom. I think it depends where the video is on the screen when it's refreshed.
Anyone know what is causing this? I think this is pretty barebones markup.
codepen: https://codepen.io/sharpdesigner/pen/KRgQZZ
screen capture of the issue: https://imgur.com/a/Hn8DWkP
html
<section id="video-landing" class="hide-mobile">
<div class="container">
<div class="row">
<div class="col-md-6 video-caption">
<h1>Lorem ipsum dolor sit</h1>
<p class="big">Quisque varius erat et</p>
<p>Vivamus aliquam lectus est. Nulla vitae fringilla felis. Aenean id elit sit amet sem mattis bibendum eu a felis. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
</div>
</div> <!-- /container -->
<video muted autoplay="autoplay" loop="loop" id="bgvid">
<source src="http://www.mysportresume.com/phone.mp4" type="video/mp4" />
</video>
</section><!-- #section -->
css
body {
height: 2000px;
margin-top: 500px;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
section#video-landing, section#video-landing-mobile {
background: url('../images/video-bg.jpg') no-repeat 0 -175px;
background-size: cover;
}
section#video-landing .row, section#video-landing-mobile .row {
margin: 0;
position: relative;
}
.video-caption {
position: absolute;
max-width: 550px;
top: 165px;
top: 8.5vw;
left: 0;
z-index: 99;
}
.video-caption h1, .video-caption p {
color: #000;
text-align: left;
}
.video-caption h1 {
font-size: 53px;
font-weight: 600;
}
.video-caption p.big {
margin: 0 0 30px;
max-width: 400px;
}
.video-caption p {
font-size: 17px;
}
p.big {
color: #000;
font-size: 27px !important;
font-weight: 300;
line-height: 1.5;
max-width: 850px;
margin: 0 auto;
}
video {
padding-top: 50%;
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-55%);
width: 100%;
}
#video-landing, #video-landing-mobile {
width: 100%;
padding-bottom: 30%;
position: relative;
overflow: hidden;
color: white;
}
#video-landing .container, #video-landing-mobile .container {
max-width: 1140px;
}
#video-landing video, #video-landing-mobile video {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
I need to delete space between the line and the picture. At screenshot it is seen that at the bottom of the line everything is ok, but on top, there is a space. It is set in .about_img:after (css file)
What have I done wrong?
Here's the code:
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
h5.title {
margin-bottom: 10px;
font: 18px/18px Arial, sans-serif;
font-weight: bold;
color: #222222;
}
#about{
text-align: center;
}
.about-wrap{
margin-left: 16%;
margin-top: 70px;
}
.about_text{
width: 30%;
text-align: right;
}
.about_right{
text-align: left;
float: right;
}
.about_img{
width: 20%;
}
.about_img:after{
content: '';
display: block;
margin: 0 auto;
height: 94px;
width: 3px;
background: #f1f1f1;
}
.about_img img{
display: inline-block;
width: 170px;
height: 170px;
border: 7px solid #f1f1f1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.move_left_p{
margin-right: 20%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PSD to HTML</title>
<link type="text/css" rel="stylesheet" href="css/reset.css"/>
<link type="text/css" rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div id="wrapper">
<div id="about" name="about" class="box">
<div class="about-wrap">
<div class="about_item clearfix">
<div class="about_text left">
<h5 class="title"><span>July 2010</span> <br/>Our Humble Beginnings</h5>
<p>Proin iaculis purus consequat sem cure
digni ssim.
</p>
</div>
<div class="about_img left">
<img src="img/about_item1.png" alt=""/>
</div>
</div>
<div class="about_item clearfix move_left">
<div class="about_text right about_right move_left_p">
<h5 class="title"><span>January 2011</span><br/>
Facing Startup Battles</h5>
<p>Proin iaculis purus consequat sem cure
digni ssim.</p>
</div>
<div class="about_img right">
<img src="img/about_item2.png" alt=""/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
try the following:
.about_img:after{
margin: -5px auto 0 auto;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
h5.title {
margin-bottom: 10px;
font: 18px/18px Arial, sans-serif;
font-weight: bold;
color: #222222;
}
#about{
text-align: center;
}
.about-wrap{
margin-left: 16%;
margin-top: 70px;
}
.about_text{
width: 30%;
text-align: right;
}
.about_right{
text-align: left;
float: right;
}
.about_img{
width: 20%;
}
.about_img:after{
position: relative;
top:-1px;
right:-50px;
content: '';
display: block;
margin: 0 auto;
height: 94px;
width: 3px;
background:black;
}
.about_img img{
display: inline-block;
width: 170px;
height: 170px;
border: 7px solid #f1f1f1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.move_left_p{
margin-right: 20%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="wrapper">
<div id="about" name="about" class="box">
<div class="about-wrap">
<div class="about_item clearfix">
<div class="about_text left">
<h5 class="title"><span>July 2010</span> <br/>Our Humble Beginnings</h5>
<p>Proin iaculis purus consequat sem cure
digni ssim.
</p>
</div>
<div class="about_img left">
<img src="img/about_item1.png" alt=""/>
</div>
</div>
<div class="about_item clearfix move_left">
<div class="about_text right about_right move_left_p">
<h5 class="title"><span>January 2011</span><br/>
Facing Startup Battles</h5>
<p>Proin iaculis purus consequat sem cure
digni ssim.</p>
</div>
<div class="about_img right">
<img src="img/about_item2.png" alt=""/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.about_img:after{
position: relative;<!----------solution-------->
top:-1px;<!----------solution-------->
right:-50px;<!----------solution-------->
content: '';
display: block;
margin: 0 auto;
height: 94px;
width: 3px;
background:black;
}
Modify your code as above
This is caused by carriage returns or simply spaces in the code when formatting inline-block elements.
In order to fix this I would adjust .about_img img display property to block, and then set the side margins to auto like this:
.about_img img{
display: block;
width: 170px;
height: 170px;
border: 7px solid #f1f1f1;
border-radius: 50%;
margin-right: auto;
margin-left: auto;
}
Also you can try to remove white spaces between those elements or convert them to html comments (<!-- -->) if you need to keep the inline-block and the spaces.
I'm currently trying to add some simple padding to the bottom of my testimonial element, so that it doesn't end right after the text.
It seems that no matter what value I enter in padding or padding-bottom, the bottom padding expands a set amount. I'm wondering how to fix this so it displays padding that is specific to the value I set.
/****
GENERAL
****/
* {
margin: 0;
padding: 0;
font-family: sans-serif;
color: black;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 120px;
}
li {
list-style: none;
}
a, a:visited {
text-decoration: none;
color: black;
cursor: pointer;
}
a:hover {
color: #009999;
}
.divide {
width: 75%;
border: 1px solid grey;
margin: 20px auto;
}
/****
NAVIGATION
****/
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1000;
}
.navigation li {
display: inline-block;
padding: 5px;
}
.navigation li a {
padding: 8px 10px;
display: block;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
width: 106.42px;
display: none;
}
.sub-hover a {
font-size: 1em;
}
.submenu:hover ~ .sub-hover,
.sub-hover:hover {
display: block;
background-color: rgba(38, 12, 12, 0.04);
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
}
/****
LOGO
****/
.circle {
border: 1px solid gray;
border-radius: 100%;
height: 90px;
width: 90px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
clear: both;
}
/****
IMAGE SLIDER
****/
.main-gallery {
background-color: rgba(38, 12, 12, 0.03);
border-radius: 5px;
height: 450px;
clear: both;
margin-bottom: 25px;
}
/****
TESTIMONIAL
****/
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 0 5%;
background-color: rgba(50, 173, 140, 0.82);
}
/****
SOCIAL
****/
.insta {
height: 50px;
width: 90%;
background-color: blue;
margin: 10px auto;
}
/****
FOOTER
****/
.footer {
background-color: grey;
height: 100px;
clear: both;
bottom: 0;
position: absolute;
}
.footer p {
text-align: center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/skeleton.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<div id="logo">
<div class="circle">
</div>
</div>
<div class="main-gallery eleven columns offset-by-half">
<div id="main-images">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
</div>
<div class="testimonial">
<div class="test-text">
<p><b>Joe Blogs</b></p>
<p>Distinguished Person</p>
<p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."</i></p>
</div>
</div>
<div class="divide"></div>
<div class="insta">
</div>
<div class="footer twelve columns">
<p>Jacob Riman Design</p>
</div>
</body>
</html>
How padding shorthand works....
default declaration of padding looks like this:
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
You can abbreviate that and apply padding to all sides equally:
padding: 10px;
You can abbreviate a little less and apply different values to top and bottom, and right and left.
This equates to padding: top/bottom right/left;
padding: 10px 20px;
You can use full abbreviations to apply different values to each of the 4 sides independently:
This equates to padding: top right bottom left; or:
padding: 10px 20px 5px 20px;
In your CSS you have no top or bottom padding applied to the testimonial class, you only have right/left padding applied:
.testimonial {
padding: 0 5%;
}
You basically have (pseudo code as example):
.testimonial {
padding: top=0 right=5% bottom=0 left=5%;
}
If you want a the same padding all the way around, remove the first 0 in the property:
.testimonial {
padding: 5%;
}
If you want a similar top/bottom padding, then merely adjust the padding property to add top/bottom values:
.testimonial {
padding: 10% 5%;
}
If you want different padding on the top and bottom, then adjust the padding property to add all the values:
.testimonial {
padding: 0 5% 10% 5%;
}
You don't have any bottom padding. Changing to padding: 10px 5% adds 10px padding to the top and bottom, 5% to the left and right.
/****
GENERAL
****/
* {
margin: 0;
padding: 0;
font-family: sans-serif;
color: black;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 120px;
}
li {
list-style: none;
}
a, a:visited {
text-decoration: none;
color: black;
cursor: pointer;
}
a:hover {
color: #009999;
}
.divide {
width: 75%;
border: 1px solid grey;
margin: 20px auto;
}
/****
NAVIGATION
****/
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
z-index: 1000;
}
.navigation li {
display: inline-block;
padding: 5px;
}
.navigation li a {
padding: 8px 10px;
display: block;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
width: 106.42px;
display: none;
}
.sub-hover a {
font-size: 1em;
}
.submenu:hover ~ .sub-hover,
.sub-hover:hover {
display: block;
background-color: rgba(38, 12, 12, 0.04);
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
}
/****
LOGO
****/
.circle {
border: 1px solid gray;
border-radius: 100%;
height: 90px;
width: 90px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
clear: both;
}
/****
IMAGE SLIDER
****/
.main-gallery {
background-color: rgba(38, 12, 12, 0.03);
border-radius: 5px;
height: 450px;
clear: both;
margin-bottom: 25px;
}
/****
TESTIMONIAL
****/
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 10px 5%;
background-color: rgba(50, 173, 140, 0.82);
}
/****
SOCIAL
****/
.insta {
height: 50px;
width: 90%;
background-color: blue;
margin: 10px auto;
}
/****
FOOTER
****/
.footer {
background-color: grey;
height: 100px;
clear: both;
bottom: 0;
position: absolute;
}
.footer p {
text-align: center;
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<link type="text/css" rel="stylesheet" href="css/skeleton.css">
<link type="text/css" rel="stylesheet" href="css/main.css">
</head>
<body>
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<div id="logo">
<div class="circle">
</div>
</div>
<div class="main-gallery eleven columns offset-by-half">
<div id="main-images">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
</div>
<div class="testimonial">
<div class="test-text">
<p><b>Joe Blogs</b></p>
<p>Distinguished Person</p>
<p><i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."</i></p>
</div>
</div>
<div class="divide"></div>
<div class="insta">
</div>
<div class="footer twelve columns">
<p>Jacob Riman Design</p>
</div>
</body>
</html>
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 0 5% 5% 0;
background-color: rgba(50, 173, 140, 0.82);
}
Adding all of the values ( even if 0 ) solved the problem right away.
Also, I am aware that if only two values are given the 1st represents top and bottom.
You don't currently have padding on the bottom of the testimonial div.
.testimonial {
clear: both;
display: block;
margin: 10px 0;
padding: 1% 5%;
background-color: rgba(50, 173, 140, 0.82);
}
Change the padding to the above ... padding: 1% 5%; or to target specifically the bottom ... padding 0 5% 1%; ... do that and you should be good to go, unless I'm misunderstanding your question. Good luck!
Found that having the last set of text in .testimonial in a paragraph tag, it was inserting a line break. So simply took that away and now it seems to be working fine.
Another vertical alignment question...
Given the following,
HTML:
<div class="thing">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempus mauris. Vivamus imperdiet congue iaculis.</h2>
</div>
<div class="thing">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et tempus mauris.</h2>
</div>
CSS:
.thing{
background: #eee;
margin: 0 auto 10px;
width: 625px
}
h2{
display: inline-block;
font-size: 15px;
line-height: 20px;
margin: 0 0 0 40px;
vertical-align: middle;
}
.thing:before{
background: red;
content: '';
display: inline-block;
height: 40px;
position: absolute;
vertical-align: middle;
width: 40px;
}
What do I need to do in order to have the text and the red box vertically centered? This should work for headings of any height.
Fiddle
You just need to remove the position:Absolute that breaks the inline-block behavior. Instead use some trick to fight the space between inline-block elements and be sure the two elements can be aside on the containers width. Try this:
.thing{
font-size:0; /*ADD*/
}
h2{
/*margin: 0 0 0 40px; REMOVE*/
width:585px; /*ADD*/
}
.thing:before{
/*position: absolute; REMOVE*/
}
Check this Demo Fiddle
I guess your question has two answers.
Here's solution one: (Make the red box equal the height of the .thing content.
.thing{
background: #eee;
margin: 0 auto 10px;
position: relative; // Make .thing:before relate it's position to this
width: 625px
}
h2{
font-size: 15px;
line-height: 20px;
margin: 0 0 0 40px;
}
.thing:before{
background: red;
content: '';
height: 100%; // Height will equal .thing height
position: absolute;
width: 40px;
}
Demo 1
Second solution: (Make text center vertically)
.thing{
background: #eee;
margin: 0 auto 10px;
min-height: 40px;
position: relative;
width: 625px
}
h2{
font-size: 15px;
line-height: 20px;
margin: 0 0 0 40px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.thing:before{
background: red;
content: '';
height: 40px;
left: 0;
position: absolute;
top: 0;
width: 40px;
}
Demo 2
I am trying to create a custom list using pseudo elements in CSS.
When I add this "position: absolute; top: 6px; left: 0px;", my images for my arrows disappear altogether. When I remove the above line of code, my arrow images appear above the text each list item.
I want my custom arrows to appear next to the next of each list item. How can I fix this?
Here is my code.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Web Page</title>
<style type="text/css">
body { font-family: Arial; font-size: 16px; background-color: #f8e6ae; color: #888; }
.page { background-color: #fff; padding: 20px 30px 30px 50px; margin: 100px; }
.page h1 {
color: #fff;
font-size: 1.3em; font-weight: normal;
text-transform: uppercase;
background-color: #d60000;
position: relative;
margin: 0px -70px 20px -50px;
padding: 18px 0px 16px 50px;
}
.page h1:after {
content: '';
display: block; height: 40px; width: 40px;
background: url(images/fold.gif) no-repeat 0 0;
position: absolute; right: 0px; bottom: -40px;
}
.page p { line-height: 1.2em; }
.page a { color: #1badd2; text-decoration: none; }
.page ul { margin: 0; padding:0; }
.page li { display: block; position: relative;
padding: 2px 0px 8px 35px;
}
.page li:before {
content: '';
display: block;
background: url(images/arrow.png) no-repeat 0 0;
height: 12px; width 30px;
position: absolute; top: 6px; left: 0px;
background-size: 20px 8px;
}
</style>
</head>
<body>
<div class="page">
<h1>My Web Page</h1>
<p>Lorem ipsum dolor sit amet consectetur adi pisicing elit sed do eiusmod tempor incid idunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exer citation ull amco laboris nisi ut aliquip ex ea commodo consequat elit sed do.</p>
<ul>
<li>Automating Web Graphics</li>
<li>Slice Tool</li>
<li>Smart Objects</li>
<li>Layer Comps</li>
</ul>
</div>
</body>
</html>
.
I was missing a colon for the width property in the preceding line of code.