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.
Related
Body properties such as different font works but div tag properties like in #mainpic or #header just don't work
body {
font-family: Callibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
#mainpic {
<img src="../image/cutmypic.png";
alt="image not found";
/>background-position: "centre";
position: absolute;
bottom: 0;
center: 0;
}
}
#header {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/newcss.css" />
</head>
<body background="image/bg.jpg">
<div id=“ container”>
<div id=“ header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"></div>
<div id=“ content”>/div>
<div id=“ navigation”> a link to the other web page</div>
<div id=“ footer”> contains your name and student number</div>
</div>
</body>
</html>
Okay first up: use classes not IDs. Good css never has any ids in it (except for some very very specific cases)
Secondly, you got html in your css, so that does not work.
Thirdly, you cannot nest css selectors. Instead of
.wrapper {
/* some css */
.element {
/* some css */
}
}
you have to write
.wrapper {
/* wrapper css */
}
.wrapper .element {
/* element css */
}
Close all brackets properly in the CSS code, move the img tag from the CSS to the HTML code and don't use invalid properties or values ("centre", "center") in your CSS.
Also, you are using lots of typographical quotes in your codes. You have to replace all these with regular quotes - it won't work otherwise.
body {
font-family: Calibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
#mainpic {
background-position: center;
position: absolute;
bottom: 0;
}
#header {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>My Introduction</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/newcss.css" />
</head>
<body background="image/bg.jpg">
<div id=“ container”>
<div id=“ header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"><img src="../image/cutmypic.png" ; alt="image not found" ; /></div>
<div id=“ content”></div>
<div id=“ navigation”> a link to the other web page</div>
<div id=“ footer”> contains your name and student number</div>
</div>
</body>
</html>
body {
font-family: Callibri, sans-serif;
line-height: 1.5;
padding: 0;
margin: 0;
}
#mainpic {
background-position: center;
position: absolute;
bottom: 0;
/*center:0;*/
}
#header {
color: white;
}
<body background="image/bg.jpg">
<div id=“container”>
<div id=“header”>
<h1>Welcome</h1>
</div>
<div id="mainpic"></div>
<div id=“content”></div>
<div id=“navigation”> a link to the other web page</div>
<div id=“footer”> contains your name and student number</div>
</div>
</body>
The 1st your problem is that you have several typos.
For example, <div id = “content”>/div>.
The 2nd problem is that you can not use HTML tag in CSS.
The 3rd problem is that there is no syntax center in CSS.
And when you use background-position, you don't need to use " " , and you should write center NOT centre.
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 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>
I'm attempting to create a grid using PureCSS and have discovered a behavior I don't understand. I want the left part of the grid to take up 1/3 of the page and the right the remaining 2/3:
# index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test PureCSS</title>
<link rel="stylesheet" href="http://yui-s.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://yui-s.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="header">
<div class="home-menu pure-menu pure-menu-horizontal">
<a class="pure-menu-heading" href="#">Test Page</a>
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected">Home</li>
<li class="pure-menu-item">Tour</li>
<li class="pure-menu-item">Sign Up</li>
</ul>
</div>
</div>
<div class="pure-g">
<div class="l-box-lrg pure-u-1 pure-u-md-1-3">
<div class="content-wrapper">
<div class="content">
1-3
</div>
</div>
</div>
<div class="l-box-lrg pure-u-1 pure-u-md-2-3">
<div class="content-wrapper">
<div class="content">
2-3
</div>
</div>
</div>
</div>
</body>
</html>
Here's the CSS:
# base.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.home-menu {
padding: 0.5em;
text-align: center;
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.l-box-lrg {
padding: 2em;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.content-wrapper {
/* These styles are required for the "scroll-over" effect */
position: absolute;
top: 87%;
width: 100%;
min-height: 12%;
z-index: 2;
background: white;
}
#media (min-width: 48em) {
.content {
padding: 1em;
}
}
In Chrome, which uses Blink, this page renders as expected. But in Firefox, which is Gecko-based, the left 1-3 div gets stacked on top of the right 2-3 div. In the past, problems like this were caused by having a space at the end of a div. However, I've checked my code and it doesn't have any extra spaces. I read somewhere about how these rendering engines handle display:block versus display:inline-block differently so maybe that has something to do with it. But I would think that if PureCSS was developed by Yahoo, they would have factored any rendering engine differences into their framework so that this wouldn't happen.
Most probably its because of the user agent stylesheet try and check if the body doesnt have padding or margin applied to it
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.