I have a html5's video tag, it seems that there is a 5px space between video and its container div element.
If I put font-size: 0 in the container element (#video-container), the space disappears.
I know this is a problem of display: inline-block, but I have no elements with that.
Also, trying the solutions of opening tags next the previous closing, didn't delete the space.
http://jsfiddle.net/g9t71mg6/
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
}
#video-container {
overflow: hidden;
width: 100%;
background: #2c5894;
}
#video-container video {
width: 100%;
}
#turnera-container {
float: right;
width: 250px;
vertical-align: top;
height: 100%;
}
.turno-wrapper {
height: 25%;
display: table;
width: 100%;
}
.turno-wrapper {
background: #727867;
}
.turno {
border: dashed 1px #FFFFFF;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.turno .numero {
font-size: 50px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFF;
}
.turno .box {
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFF;
}
#contenido-principal {
overflow: hidden;
height: 100%;
/*margin-right: 250px;*/
}
#footer {
background-color: #dc001e;
height: 100%;
width: auto;
border: dashed 1px #FFFFFF;
}
#rss-container {
height: 240px;
font-size: 12px;
}
.turno-asignado-historia0 {
background: #00bc24;
}
.turno-asignado-historia0 .numero {
font-size: 65px;
}
.turno-asignado-historia0 .box {
font-size: 40px;
}
.turno-asignado-historia1 {
background: #739461;
}
.turno-asignado-historia2 {
background: #546947;
}
.turno-asignado-historia3 {
background: #34422e;
}
<div id="wrapper">
<div id="turnera-container">
<div class="turno-wrapper turno-asignado-historia0">
<div class="turno">
</div>
</div>
<div class="turno-wrapper turno-asignado-historia1">
<div class="turno">
</div>
</div>
<div class="turno-wrapper turno-asignado-historia2">
<div class="turno">
</div>
</div>
<div class="turno-wrapper turno-asignado-historia3">
<div class="turno">
</div>
</div>
</div>
<div id="contenido-principal">
<div id="video-container">
<video autoplay loop="loop">
<source src="http://awakenvideo.org/video/UFOs/NVofu001.mp4" type="video/mp4">
</video>
</div>
<div id="footer">
<div id="rss-container">
</div>
</div>
</div>
</div>
Just add display: block to the video element. video elements default to display: inline, causing the whitespace.
Updated fiddle: http://jsfiddle.net/g9t71mg6/1/
It is also worth noting that the reason for the so called "space" below or above in some inline video is because of the line-height that is defined on the container. So setting line-height: 0 on the container of the video tag would also remove the space
for your video is fullscreen (height and width 100%), use propertie css:
object-fit: cover;
Related
I found code online that I copied to get my website's title over a looped background video. However my efforts to add links on the left hand side of the screen are not working. Since I want each one stacked on top of the other I assumed that flexbox would be the best way to handle but I can't even get the links to show without it. What am I doing wrong, and what is the best way to achieve my goal?
body {
width: 100%;
margin: 0 auto 0;
}
.video_main {
margin: 0 auto 0;
width: 100%;
height: auto;
overflow: hidden;
}
.video_main video {
/*width: 100%;*/
width: 100%px;
height: auto;
min-width: 720px;
margin: 0 auto;
z-index: -1500;
}
.content h1 {
font-family: "jaf-domus-titling-web", sans-serif;
color: white;
text-align: center;
font-size: 48px;
letter-spacing: 4px;
z-index: 100;
position: absolute;
top: 75px;
}
.content h2 {
font-family: "europa", sans-serif;
color: white;
text-align: center;
font-size: 30px;
letter-spacing: 6px;
z-index: 100;
position: absolute;
top: 175px;
}
.content p {
display: block;
font-family: "europa", sans-serif;
color: white;
text-align: center;
font-size: 16px;
z-index: 100;
position: absolute;
}
h1 {
width: 100%;
}
h2 {
width: 100%;
}
<div class="video_main">
<video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload>
<source src="http://bartonlewisfilm.com/red hook, rush hour (excerpt).mp4" type="video/mp4">
</video>
<div class="content">
<h1>Barton Lewis</h1>
<h2>films about light and the urban landscape</h2>
<p>home</p>
<p>works</p>
<p>bio</p>
<p>CV</p>
<p>contact</p>
</div>
</div>
The problem isn't the z-index, its that you are not positioning the links over the video in the first place.
You have made the position for the <p> elements absolute, but you haven't told it where to position them. You need to use top, bottom, left and/or right to place the elements.
Instead of doing this for each individual <p> element, its easier to add them all to a div and then just position that one div.
1: Group the links into a div for easier positioning, e.g.:
<div class="content">
<h1>Barton Lewis</h1>
<h2>films about light and the urban landscape</h2>
<div class="videolinks">
<p>home</p>
[etc...]
</div>
</div>
2: Remove the positioning from .content p, because we're going to use the div to place them
.content p {
[...]
position:absolute; /* <- REMOVE */
}
3: Create your CSS rules to position the div, e.g.
.content .videolinks{
position:absolute;
top:20px;
left:20px;
z-index:100;
}
Working Snippet:
body {
width: 100%;
margin: 0 auto 0;
}
.video_main {
margin:0 auto 0;
width:100%;
height:auto;
overflow: hidden;
}
.video_main video {
/*width: 100%;*/
width: 100%px;
height: auto;
min-width: 720px;
margin: 0 auto;
z-index:-1500;
}
.content h1 {
font-family: "jaf-domus-titling-web",sans-serif;
color: white;
text-align: center;
font-size: 48px;
letter-spacing: 4px;
z-index:100;
position:absolute;
top:75px;
}
.content h2 {
font-family: "europa",sans-serif;
color: white;
text-align: center;
font-size: 30px;
letter-spacing: 6px;
z-index:100;
position:absolute;
top:175px;
}
.content p {
font-family: "europa",sans-serif;
color: white;
font-size: 16px;
}
.content .videolinks{
position:absolute;
top:20px;
left:20px;
z-index:100;
}
h1 {
width: 100%;
}
h2 {
width: 100%;
}
<div class="video_main">
<video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload>
<source src="http://bartonlewisfilm.com/red hook, rush hour (excerpt).mp4" type="video/mp4">
</video>
<div class="content">
<h1>Barton Lewis</h1>
<h2>films about light and the urban landscape</h2>
<div class="videolinks">
<p>home</p>
<p>works</p>
<p>bio</p>
<p>CV</p>
<p>contact</p>
</div>
</div>
</div>
Don't forget that you might need to adjust the placement of the video heading etc to make room for the links, especially on smaller screens.
I have floated the image left with a class of logo. I apply a background color for h1 and the image but it does not appear for some reason. Why is this happening? I have floated the image because the text appears below the image not top of the image. Is there a way to deal with it?
JS Fiddle - https://jsfiddle.net/z8cw31j9/
#import url(http://fonts.googleapis.com/css?family=Niconne);
body {
background: #e6e3d7;
font-size: 16px;
}
header {
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo {
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font: 300% 'Niconne', cursive;
line-height: 200%;
height: 0;
color: white;
margin-left: 2%;
background: blue;
}
.clear {
clear: both;
}
.search {
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300">
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
Actually background color was set successfully, but you can't see because of zero height:
header h1 {
height: 0;
}
#import url(http://fonts.googleapis.com/css?family=Niconne);
body{
background: #e6e3d7;
font-size: 16px;
}
header{
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo{
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font:300% 'Niconne', cursive ;
line-height: 200%;
color: white;
margin-left: 2%;
background: blue;
}
.clear{
clear: both;
}
.search{
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300" >
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
header h1{...enter code here...}
remove height:0;
The color you applied to the img tag is actually there. It's just directly behind the image, so you can't see it. If you apply padding: 25px to the .logo class you'll see what I mean.
In terms of the h1, you've given it a height: 0, so there's no space to show the background color.
for your h1, the background is not working because you set the height of the element to 0, so there wouldn't be any color that will show up.
and as for your img, the background is not working because you have a image in front of it.
If you want to see the background for the img, you can add a padding for it
How can I get that yellow box aligned like on the picture? I tried some stuff with table cells but it kinda destroyed everything. I also played a bit with the float conditions but the results were horrible too. Can you help me?
Here's my code:
HTML
<div class="job_board">
<div class="job_box">
<span class="job_title_working_field"> <!-- Just made that span for grouping but it's unnecessary. -->
<div class="job_title"><h1>Product Development <span class="light">(m/w)</span></h1></div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</span>
<div class="slide_button"></div>
</div>
</div>
CSS
.light {
font-weight: normal;
}
.job_box {
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
span.job_title_working_field {
table-cell;
}
.slide_button {
position: absolute;
width: 50px;
height: 100%;
background: yellow;
display: table-cell;
}
JSFiddle
Since .slide_button is within an element, you would simply relatively position the parent element:
.job_box {
position: relative;
width: 100%;
padding: 30px 50px;
background-color: #082730;
color: white;
text-align: center;
display: table;
font-family: "Helvetica", sans-serif;
}
And then absolutely position the yellow .slide_button element at the top/right - relative to the parent.
UPDATED EXAMPLE HERE
.slide_button {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
background: yellow;
}
If you look at the above example, you will notice that a horizontal scrollbar is present. If you want to remove this, use box-sizing:border-box in order to include the padding within the .job_box element's dimension calculations.
UPDATED EXAMPLE HERE
.job_box {
box-sizing:border-box;
-moz-box-sizing:border-box;
}
It's also worth noting that I removed the default 8px margin on the body element.. body{margin:0}
I changed the markup order a little and updated the css
you are combining too many styles: table-cell + absolute + float don't mix well
http://jsfiddle.net/pixelass/3Qqz4/2/
HTML:
<div class="job_board">
<div class="job_box">
<div class="slide_button"></div>
<div class="job_title_working_field">
<div class="job_title">
<h1>Product Development <span class="light">(m/w)</span></h1>
</div>
<div class="working_field">Fahrzeugtechnik · Mechatronik · Maschinenbau</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.light {
font-weight: normal;
}
.job_box {
width: 100%;
background-color: #082730;
color: white;
text-align: center;
display: block;
font-family:"Helvetica", sans-serif;
position: relative;
height: 120px;
vertical-align: top;
}
.job_title h1 {
margin: 0;
}
.working_field {
font-weight: bold;
margin: 0;
font-size: 0.8em;
}
.job_title_working_field {
padding: 30px 50px;
}
.slide_button {
width: 50px;
height: 100%;
background: yellow;
float: right;
}
I have a div #login_container and within that I have another div #login, and they both are within another div #block_2. With the border around the #login_container everything works as I wanted, but, when I removed its border, its child div (i.e. #login) lose its margin and all its text and other contents touch the #login_container. I am just learning html and css, please correct me if I am wrong and please help me how to let the #login div retain its margin. Thank you.
Without border around #login_container div:
With border around #login_container div:
Snippet of .html:
<div id="block_2">
<div id="login_container" class="div">
<div id="login">
<p>Email Address</p>
<input type="text">
<p>Password</p>
<input type="password">
<p>Password</p>
<input type="password">
<p><input type="checkbox" name="agreement">I have read and agree to the terms of service</input></p>
</div>
</div>
</div>
Snippet of .css:
#block_2 {
width: 1120px;
margin: 0px auto;
}
#login_container {
width: 400px;
height: 400px;
margin: 0px 600px;
border-radius: 30px;
}
.div {
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c00 0000);
zoom: 1;
}
.div:nth-child(n) {
filter: none;
}
#login {
width: 350px;
margin: 20px auto;
}
#login_container p, input{
font-weight: bold;
font-style: italic;
margin: 10px;
color: white;
font-size: 20px;
}
http://jsbin.com/azudAzO/1/edit
#block_2 {
width: 1120px;
margin: 0px auto;
}
#login_container {
position:relative;
left:600px;
width: 400px;
height: 400px;
border-radius: 30px;
padding:20px 35px;
}
.div {
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c00 0000);
zoom: 1;
}
.div:nth-child(n) {
filter: none;
}
#login {
width: 350px;
}
#login_container p, input{
font-weight: bold;
font-style: italic;
color: white;
font-size: 20px;
}
There is div container and 2 divs inside. It should be image(first div) and text near it with chosen distance between them.
alt text http://img24.imageshack.us/img24/1160/2delcontact.png
The code below works fine in Firefox/Chrome/Safari, but it works incorrect in IE7/Opera.
alt text http://img710.imageshack.us/img710/5675/2delcontactie7opera.png
xhtml:
<div id="mainContact">
<div id="contactIcon">
<img id="phoneImg" alt="phone" src="img/cellPhone.png" />
</div>
<div id="contactField">
<span id="topMailAddress">07897 255 664</span>
</div>
</div>
css:
html, body{ font-family: Tahoma; }
img{ border: 0px; }
#mainContact{
width: 135px;
float: right;
overflow: hidden;
font-family: Trebuchet MS;
}
#contactIcon{
width: 19px;
margin-right: 7px;
float: left;
text-align: right;
}
#phoneImg{
position: relative;
bottom: 14px;
}
#contactField{
float: right;
width: 109px;
text-align: right;
font-size: 1.12em;
color: #454545;
}
#topMailAddress{
position: relative;
width: 109px;
top: 13px;
}
here is this example on server: link text
What can be the reason of this problem?
Try this
HTML
<div id="mainContact">
<img id="phoneImg" alt="phone" src="img/cellPhone.png" />
<span id="topMailAddress">07897 255 664</span>
</div>
<br class="clear" />
CSS
#mainContact {
width: 200px; // Width of whole element - adjust to always fit number
}
#mainContact #phoneImg,
#mainContact #topMailAddress {
display: block;
float: left;
}
#mainContact #phoneImg {
margin-right: 10px; // Adjust gap between image and text
}
br.clear {
clear: both;
height: 1px;
overflow:hidden;
font-size: 1px; // For IE and the like
}
Have fun ;)