I have centered my image using CSS
.center-block{
margin-left:auto;
margin-right:auto;
}
when using this code it makes them very weirdly centered. Here is all my code HTML & CSS https://hastebin.com/uzavakecic.xml. Here is the image showing what it does.
To put in basic words I want these two images to be the exact middle of the screen.
NOTE: I use bootstrap V4 so I cant use the bootstrap class center-block its my own.
https://gyazo.com/6b0846f84f5fb064ca4dce5ed701e470
Thank you for reading this, James.
body {
margin: 0;
background: #000;
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('../images/backgroundimage.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
.fourms {
padding-right: 0px;
margin-left: 0px;
}
.center-block {
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portal</title>
<!--Bootstrap4 JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!--Bootstrap4-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--Styles-->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--FontAwesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!--Font-->
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />
<!--Animate.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- FullScreen Video Using HTML5-->
<div class="fullscreen-bg">
<video loop muted autoplay poster="images/backgroundimage.jpg" class="backgroundvideo">
<source src="images/backgroundvideo.webm" type="video/webm">
<source src="images/backgroundvideo.mp4" type="video/mp4">
<source src="images/backgroundvideo.ogv" type="video/ogg">
</video>
</div>
<!--Epic Audio Background Using HTML5-->
<audio autoplay loop id="myaudio">
<source src="audio/epicaudio.mp3" type="audio/mpeg">
</audio>
<div class="row icons">
<!--Fourms Icon-->
<div class="center-block">
<div class="col-xs-4">
<img src="images/Forums-1.png" alt="Fourms" style="width:142px;height:142px;border:0;">
</div>
</div>
<div class="center-block">
<div class="col-xs-4">
<img src="images/Forums-1.png" alt="Fourms" style="width:142px;height:142px;border:0;">
</div>
</div>
</div>
</div>
<!--JavaScript for lowering Volume in EpicAudio-->
<script>
var audio = document.getElementById("myaudio");
audio.volume = 0.1;
</script>
</body>
</html>
You can just use the .justify-content-center helper class on the .row to center the children.
body {
margin: 0;
background: #000;
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('../images/backgroundimage.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
.fourms {
padding-right: 0px;
margin-left: 0px;
}
.center-block {
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portal</title>
<!--Bootstrap4 JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!--Bootstrap4-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--Styles-->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--FontAwesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<!--Font-->
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />
<!--Animate.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<!--Jquery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- FullScreen Video Using HTML5-->
<div class="fullscreen-bg">
<video loop muted autoplay poster="images/backgroundimage.jpg" class="backgroundvideo">
<source src="images/backgroundvideo.webm" type="video/webm">
<source src="images/backgroundvideo.mp4" type="video/mp4">
<source src="images/backgroundvideo.ogv" type="video/ogg">
</video>
</div>
<!--Epic Audio Background Using HTML5-->
<audio autoplay loop id="myaudio">
<source src="audio/epicaudio.mp3" type="audio/mpeg">
</audio>
<div class="row icons justify-content-center">
<!--Fourms Icon-->
<img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" alt="Fourms" style="width:142px;height:142px;border:0;">
<img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" alt="Fourms" style="width:142px;height:142px;border:0;">
</div>
</div>
<!--JavaScript for lowering Volume in EpicAudio-->
<script>
var audio = document.getElementById("myaudio");
audio.volume = 0.1;
</script>
</body>
</html>
Related
I was creating a website based on a video as a background for the homepage I came across a problem, I don't know what the problem is but I followed an online tutorial and it seems that the video that I was willing to put in my website has shown up but does not play and is way too big even when viewed at full screen.
here's the code:
<html>
<head>
<!-- settings -->
<title> Prestige</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.png"
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
<meta name="viewport" conetent="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<header class="v-header container">
<div class="fullscreen-video-wrap">
<video src="Intro.mp4" autoplay="true" loop="true"></video>
</div>
</header>
</body>
If you mean the video is too big for your page->
You can resize the video by using width and height attribute.
for example:
<video src="Sample.mp4" width="320" height="240">
If you mean the video is too big in terms of memory->
try to compress the video or embed using embed tag. You can also try to update to the latest version of your browser.
You can try to upload your code in a code snippet to replicate it and see if there's a problem with your code.
You can try this code:
HTML
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum...</p>
<!-- Use a button to pause/play the video with JavaScript -->
<button id="myBtn" onclick="myFunction()">Pause</button>
</div>
CSS:
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
/* Add some content at the bottom of the video/page */
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
/* Style the button used to pause/play the video */
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
JS
<script>
// Get the video
var video = document.getElementById("myVideo");
// Get the button
var btn = document.getElementById("myBtn");
// Pause and play the video, and change the button text
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>
Also you can check this here.
I am trying to create a nice fixed bootstrap 4 alert.
My problem is that the alert has unwanted bottom padding when it is not placed inside a container. Since this is fixed and is being auto-centered I do not want it inside a container.
Heres my CSS:
#alert {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
JSfiddle example: https://jsfiddle.net/81vhy56o/
How to fix?
If you inspect the element you can see that there is a margin on it not padding. To fix it just add the class mb-0 to the <div class="alert"></div> which will make margin-bottom: 0 !important; and if you don't want any padding then you can add pb-0 to it as well.
#alert {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div id="alert" class="alert alert-warning alert-dismissible mb-0 pb-0">
<button type="button" class="close" data-dismiss="alert">×</button>
Hi! I'm a test alert!
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
add your own class named .alert-dismissible .close class and add
padding-bottom:0 to it
.alert-dismissible .close{
padding-bottom: 0;
}
and in #alert id add padding-bottom:0
#alert {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
padding-bottom: 0;
}
I'm making bootstrap skeleton for a WordPress site on top most header section I had video background which is working fine when I added another section content from that section overlapping to header section
my site looks like
my code looks like
* {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
body {
font-family: 'Roboto', sans-serif;
}
/* ======================= Header ======================== */
#background {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
opacity: 0.78;
}
.header .text-contant {
margin-top: 40%;
}
.header .text-contant h1,
.header .text-contant p{
color: #fff;
}
.header .text-contant h1 {
text-transform: uppercase;
font-family: 'Sansita', sans-serif;
font-weight: bold;
}
.header .text-contant p {
letter-spacing: 1px;
}
.header .text-contant i {
padding-top: 33px;
color: #fff;
}
#media(max-width:992px) {
.header .text-contant {
margin-top: 50%;
}
}
#media(max-width:768px) {
.header .text-contant {
text-align: center;
}
}
#media(max-width:480px) {
.header .text-contant {
margin-top: 80%;
}
}
#media(max-width:320px) {
.header .text-contant {
margin-top: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap Boilerplate</title>
<!-- Bootstrap -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto|Sansita:400,700" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ===================== HEADER ============================= -->
<section class="header">
<video autoplay loop muted poster="/img/pexels-photo-27884.jpg" id="background">
<source src="/vdo/River%20-%206815.mp4" type="video/mp4">
</video>
<div class="container text-contant">
<div class="row">
<div class="col-sm-8">
<h1>My WordPress</h1>
<p>Just Another WordPress Theme</p>
</div>
<div class="col-sm-3 col-sm-offset-1">
<i class="fa fa-chevron-circle-down fa-4x" aria-hidden="true"></i>
</div>
</div>
</div>
</section>
<!-- ===================== MAIN ============================= -->
<section id="article">
<div class="container">
<div class="row">
<div class="col-md-8">
<article class="blog">
<div class="blog-meta-detail">
<i class="fa fa-clock-o" aria-hidden="true"> February 17 2017 </i>
<i class="fa fa-user" aria-hidden="true"> cannelflow</i>
<i class="fa fa-folder" aria-hidden="true"> Music,Tech</i>
<i class="fa fa-tags" aria-hidden="true"> Tag 1,Tag 2</i>
</div>
<div class="blog-title">
<h2>Sample Blog Post 1</h2>
</div>
</article>
</div>
<div class="col-md-4">
<aside class="sidebar"></aside>
</div>
</div>
</div>
</section>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/js/jquery-3.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
thanks in advance
I would suggest to use a fixed height for the video, using media queries to change the video height as you reduce the windows width (for mobile and tablets websites). Then the best way to position the html over the video is using flexbox. For cropping the video you can user margin-top : <0px;
You code is too complicated and I can not fix it, you should have posted an example of your problem and then we could help.
Can anyone check the code above
I don't know why I can't put boxes in the middle with the directive layout-align="center center"? Thanks.
Code snippet:
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<style type="text/css">
.wrapper {
width: 100%;
height: 100%;
}
.one {
background: tomato;
width: 50px;
height: 50px;
}
.two {
background: green;
width: 50px;
height: 50px;
}
</style>
</head>
<body ng-app="testApp">
<div class="wrapper" layout-align="center center">
<div class="container" layout-gt-xs="row" layout-xs="columnn" flex="none">
<div class="one" flex="initial"></div>
<div class="two" flex="initial"></div>
</div>
</div>
<script type="text/javascript">
var app = angular.module("testApp", ["ngMaterial"]);
</script>
</body>
</html>
Thanks for #ManojKumar's answer, layout-align directive only affects immediate children.
Hey guys I want my two #previews to float side by side. I have tried adding float:left but it doesn't work. At the moment they are just sitting on top of each other. All my code is below, thank you for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
background: #F4F4F4;
font-family: 'Lobster', cursive;
}
#logo {
background: url(logo.png);
width: 300px;
height: 75px;
margin: 70px 200px;
}
#container {
width: 1300px;
}
h2 {
text-align: center;
font-size: 29px;
color: #444;
}
p {
text-align: center;
font-size: 22px;
color: #444;
}
.line {
background: url(line.png);
width: 972px;
height: 1px;
margin: 0 auto;
}
#previews {
border: 5px solid #FFF;
width: 300px;
margin: 50px 200px;
}
</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg" /></div>
<div id="previews"><img src="preview.jpg" /></div>
</div>
</body>
</html>
Float them both to the left and it will work. You'll also need to clear them then.
A few things:
a) DIVs are block-level. You would need to define them as display:inline; for float to work.
b) You should be using class instead of ID. An ID is supposed to appear once on a page only. Classes can appear as many times as you wish.
That's all:
<div id="previews">
<img src="preview.jpg" style="float:left;" />
<img src="preview.jpg" style="float:left;" />
</div>
You can also use this:
#previews img {
float:left;
}
<div id="previews">
<img src="preview.jpg" />
<img src="preview.jpg" />
</div>
<html lang="en"><head>
<meta charset="utf-8">
<title>Juicy Designs</title>
<meta name="description" content="Juicy Designs">
<meta name="author" content="Juicy Designs">
<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>body {background: #F4F4F4;font-family: 'Lobster', cursive;}#logo {background: url(logo.png);width: 300px;height: 75px;margin: 70px 200px;}#container {width: 1300px;}h2 {text-align: center;font-size: 29px;color: #444;}p {text-align: center;font-size: 22px;color: #444;}.line {background: url(line.png);width: 972px;height: 1px;margin: 0 auto;}#previews {border: 5px solid #FFF;width: 300px;display:inline-block; vertical-align:top; margin:50px 100px;}</style>
</head>
<body>
<div id="logo"></div>
<div id="container">
<div class="line"></div>
<h2>Simple, clean & modern designs</h2>
<p>We create simple, clean and modern designs!</p>
<div class="line"></div>
<div id="previews"><img src="preview.jpg"></div>
<div id="previews"><img src="preview.jpg"></div>
</div>
</body></html>
You simply add display:inline-block; vertical-align:top; under the CSS for #previews. You will also need to reduce the amount of horizontal margin used for #previews because the width of the container is only 1300px.