My images don't collapse even I set position property.
I'm watching a "card game" video (linked with time) and trying to copy it to follow the same code.
Even though I follow step by step, I have a problem with "positions". I've set position: absolute; on my second image but it does not work.
:root {
--card-width: 157px;
--card-height: 220px;
}
.card-container {
margin-top: 30px;
position: relative;
}
.card {
position: absolute;
height: var(--card-height);
width: var(--card-width);
perspective: 1000px;
cursor: pointer;
background: red;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* .img {
height: 100%;
width: 100%;
position: relative; ( AFTER I WROTE THIS PART THEY COLLAPSED)
top: -230px;
transform: rotateY("180deg");
} */
.card-img {
height: 100%;
}
.card-back {
transform: rotateY("180deg");
}
<!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.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<script src="cardGame.js"></script>
<header>
<div class="header-title-container">
<h1>Hunt the Ace of Spades</h1>
</div>
</header>
<main>
<div class="card-container">
<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="./images/card-JackClubs.png" alt="" class="card-img" />
<div class="card-back">
<img class="img" src="./images/card-back-Blue.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>
:root {
--card-width: 157px;
--card-height: 220px;
}
.card-container {
margin-top: 30px;
position: relative;
}
.card {
position: absolute;
height: var(--card-height);
width: var(--card-width);
perspective: 1000px;
cursor: pointer;
background: red;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* .img {
height: 100%;
width: 100%;
position: relative; ( AFTER I WRITE THIS PART THEY COLLAPSED)
top: -230px;
transform: rotateY("180deg");
} */
.card-img {
height: 100%;
}
.card-back {
transform: rotateY("180deg");
}
<!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.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<script src="cardGame.js"></script>
<header>
<div class="header-title-container">
<h1>Hunt the Ace of Spades</h1>
</div>
</header>
<main>
<div class="card-container">
<div class="card">
<div class="card-inner">
<div class="card-front">
<img src="./images/card-JackClubs.png" alt="" class="card-img" />
</div>
<div class="card-back">
<img class="img" src="./images/card-back-Blue.png" alt="" />
</div>
</div>
</div>
</div>
</main>
</body>
</html>
Related
In my app I have image and text under the pic - in media queries. I want to display the text after the pic, but somehow it overlaps:
jsFiddle: https://jsfiddle.net/orbwthma/
#media only screen and (max-width: 614px) {
#page-content {
position: absolute;
top: 0;
right: 0;
margin-top: 0 !important;
padding: 0 !important;
}
#main-pic {
position: absolute;
top: 0;
background-size: contain;
background-image: url('../assets/feev-cropped.png');
background-repeat: no-repeat;
margin-bottom: 0 !important;
}
#info {
position: relative;
font-weight: 500;
line-height: 1.29;
}
#lower-text {
font-size: 21px;
width: 305px;
height: 178px;
margin-top: 0 !important;
line-height: 1.29;
margin-bottom: 10px;
}
#page-start {
height: 60vh;
}
}
body {
background-color: #ff0000 !important;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
#page-start {
height: 100vh;
}
#page-content {
padding-top: 68px !important;
}
#lower-text {
color: #fff;
font-size: 68px;
font-weight: 500;
float: right;
margin: 20px 0px 120px 0;
}
#main-pic {
background-image: url('https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
width: 100%;
height: 920px;
background-size: cover;
background-repeat: no-repeat;
margin-right: auto;
margin-bottom: 50px;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>FEEV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/queries.css">
</head>
<body>
<div class="container-fluid" style="margin: 0">
<div id="lower-text">
<div class="row" style='float:right;'>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-10 col-md-10" id="page-content" style="margin: 0px; padding: 0px">
<span id="info">
some text1 some text2 some text3 some text4 some text5 some tex6 some text7 some text8 some text9 some text10 some text11 some text12 some text13
</span>
<div id="main-pic"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried many things but nothing helped. I think this might have some connections to the position: abolute of the image, but after a while I can't see anything that could help this and prevent overlaping.
EDIT: Try to resize window of the snipped to see overlapping
Please do not use float for layout purposes. There are other solutions for that ( grid or flexbox )
Use flexbox by adding display:flex on #page-content and make use of the flex-direction property. On > 414px use flex-direction: column and then in the media query reverse the order of the text/image by adding flex-direction: column-reverse .
Check below or jsFiddle
body {
background-color: #ff0000 !important;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
#page-start {
height: 100vh;
}
#page-content {
padding-top: 68px !important;
}
#lower-text {
color: #fff;
font-size: 68px;
font-weight: 500;
margin: 20px 0px 120px 0;
}
#page-content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#main-pic {
background-image: url('https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
width: 100%;
height: 920px;
background-size: cover;
background-repeat: no-repeat;
margin-right: auto;
margin-bottom: 50px;
}
#media only screen and (max-width: 414px) {
#info {
position: relative;
font-weight: 500;
line-height: 1.29;
}
#lower-text {
font-size: 21px;
width: 305px;
height: 178px;
margin-top: 0 !important;
line-height: 1.29;
margin-bottom: 10px;
}
#page-start {
height: 60vh;
}
#page-content {
flex-direction: column-reverse;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>FEEV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/queries.css">
</head>
<body>
<div class="container-fluid" style="margin: 0">
<div id="lower-text">
<div class="row">
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-10 col-md-10" id="page-content" style="margin: 0px; padding: 0px">
<span id="info">
some text1 some text2 some text3 some text4 some text5 some tex6 some text7 some text8 some text9 some text10 some text11 some text12 some text13
</span>
<div id="main-pic"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I have code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
min-height: 200px;
max-height: 500px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
max-width: 1440px;
margin: auto;
height: 100%;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
How I Can vertically align center this container, considering header height and footer (position: absolute and height). I think, what this we can do with display: flex, are how?
I use Bootstrap 3 grid
Example jsbin: http://jsbin.com/timatozuco/edit?html,output
Here try.. Just configure updated code based on your adjustment..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
display: -ms-flexbox;
display: flex;
top: 10%;
left: 50%;
position: absolute;
box-sizing: border-box;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
If I understand your question correctly, then I guess you want to make the whole container in the center of the page on the basis of header and footer size.
So below code is the solution
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
font-size: 14px;
color: #000;
line-height: 22px;
text-decoration: none;
}
.wrapper {
width: 100%;
background: #fff;
margin: -128px auto 0;
height: 100%;
text-align: left;
clear: both;
display: table;
position: relative;
z-index: 1;
}
header {
width: 100%;
margin: auto;
background: #ccc;
height: 66px;
position: relative;
z-index: 2;
border-bottom: 20px solid #fff;
}
footer {
background: #ccc;
width: 100%;
margin: auto;
height: 22px;
clear: both;
border-top: 20px solid #fff;
position: relative;
z-index: 2;
}
.container {
vertical-align: middle;
display: table-cell;
padding: 128px 0 0;
}
.container .content {
text-align: center;
background: yellow;
padding: 0 10px;
width: 300px;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<header>
Header content
</header>
<div class="wrapper">
<div class="container">
<div class="content">
Container content
</div>
</div>
</div>
<footer>
Footer content
</footer>
</body>
</html>
or you can also visit this link : Codepen - centered container based on header & footer
I'm currently creating a single page video playing for store advertisement.
My problem is how can i set the video tag to full height relative to its parent div? I used vh dimension but still no luck to solve that.
As you can see on the image the video portion has gaps on both its top and bottom. already set the padding and margin to 0.
Code:
<!DOCTYPE html>
<!-- http://www.101computing.net/html-website-layout/ -->
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
BODY {
background-color: #FFF;
overflow: hidden;
width: 100%;
margin: 0px;
}
.page {
display: block;
width: 100%;
min-height: 800px;
overflow: auto;
margin: 0px auto 0px auto;
box-sizing: border-box;
}
.pageClockPanel {
background-color: #333;
position: fixed;
top: 0px;
left: 0px;
clear: none;
width: 60%;
height: 10%;
padding: 10px;
}
.pageRightPanel {
background-color: #1A237E;
position: fixed;
top: 0px;
right: 0px;
clear: none;
width: 40%;
height: 87%;
box-sizing: border-box;
padding: 10px;
}
.pageLeftPanel {
background-color: #E64A19;
position: fixed;
top: 10%;
left: 0px;
clear: none;
width: 60%;
height: 77%;
box-sizing: border-box;
padding: 0px;
}
.pageBottomPanel {
background-color: #333;
position: fixed;
bottom: 0px;
right: 0px;
clear: none;
height: 13%;
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.item img {
width: 100%;
min-height: 77vh
}
.item video,
source {
width: 100%;
min-height: 77vh;
}
</style>
<title>Page Title</title>
<!-- https://www.bootply.com/59900 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page">
<div class="pageClockPanel">
</div>
<div class="pageRightPanel">
</div>
<div class="pageLeftPanel">
<div class="row">
<div class="col-md-12">
<div class="item">
<video video autobuffer autoplay>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
</video>
</div>
</div>
</div>
</div>
<div class="pageBottomPanel">
</div>
</div>
</body>
</html>
I solved my problem by adding this css
.item{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
.item video {
min-width: 100%;
min-height: 100%;
height:auto;
}
css explanation here
The video tag get always the same ratios (width/height) as the video file.
It would looks like stretched if you want to fit the width and the height - if this is just possible.You can try to set the height attribute of the video tag
Ok, so i'm working on my website, I am trying to make it responsive but without the use of any frameworks or #media queries in the css. I have used relative lengths such as %, vw, and vh on widths, heights, and fonts in the CSS. I thought this was working ok when i uploaded my website. When i re-size the browser window it does kind of work (minus the padding and margin issues). I thought my idea had worked until i checked my site on a iphone 6s and tablet. iPhone and tablet seem ok when in portrait but when in landscape its really bad! The idea i am going for, is that all content to resize/scaled down and remain within the yellow border that is attached around the body. Is it possible for me to do this without using media queries? How do i make my content properly scale down with the Viewport?
HTML & CSS
html{
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
body {
height: 100vh;
width: auto;
margin: 0;
padding: 0;
position: relative;
text-align: center;
font-family: 'PT Sans', sans-serif;
color: #ffff00;
}
body::before {
content: '';
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
border: 3px solid yellow;
}
p a {
color: #ffff00;
letter-spacing: 5px;
}
video{
position: fixed;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
.screen {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: grey;
opacity: 0.4;
}
.container{
display: block;
text-align: center;
padding-top: 50px;
margin: 0px auto;
min-width: 60%;
}
.menu{
height: 50%;
width:50%;
left: 50%;
top: 50%;
display: inline-block;
text-align: center;
}
.logo{
display: inline-block;
max-height: 25vh;
max-width: 25vw;
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}
.logo h1{
font-size: 3vw;
letter-spacing: 4px;
}
.nav-menu{
margin: 20px auto;
font-size: 2vw;
display: inline-block;
padding: 13px 2px 1px 2px;
border: 3px solid #ffff00;
line-height: 0px;
}
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- SEO META -->
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="WEBSITE">
<meta name="author" content="SitePoint">
<title>| Louis Lombardi |</title>
<!-- Custom CSS -->
<link href="css/styles.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- video -->
<video id='video' preload>
<source src="vid/vt1.mp4" type="video/mp4" >
<p>Your browser does not support HTML5 video.</p>
</video>
<!-- MENU SECTION -->
<div class="container">
<div class="menu col-12">
<div class="logo"> <img src="img/louis-media-logo.png" class="img-responsive" alt="media and design logo"> <h1>MEDIA</h1> </div>
<div class="clear-fix"></div>
<div class="nav-menu"> <p> ABOUT </p> </div>
<div class="clear-fix"></div>
<div class="nav-menu"> <p> PORJECTS </p> </div>
<div class="clear-fix"></div>
<div class="nav-menu"> <p> CONTACT </p> </div>
</div>
</div> <!-- Container -->
</body>
</html>
I have to do a project in school using HTML and CSS and so far all am trying to do is the page layout and for whatever reason when I put the footer for my webpage it pops up on the top of the page instead of the bottom and I'm also having a bit of trouble trying to resize it to fix the whole page.
#wrapper {
width: 1024px;
height: 768px;
background-color: #E1E0E0;
}
#banner {
width: 1024px;
height: 220px;
background-color: #6E6A6A;
}
#menuTop {
width: 1024px;
height: 35px;
background-color: #ACAAAA;
}
#columnLeft {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: left;
}
#columnRight {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: right;
}
#content {
width: 584;
height: 438;
background-color: #E1E0E0;
margin-left: 220px;
}
#footer {
width: 1024px;
height: 75px;
background-color: #6E6A6A;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FinalHTML.css">
<title></title>
</head>
<body>
<div id="wrapper">
<div id="banner">
</div>
<div id="menuTop">
</div>
<div id="columnLeft">
</div>
<div id="columnRight">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
The height and width must have a unit, like px, dpi, etc.
#wrapper {
width: 1024px;
height: 768px;
background-color: #E1E0E0;
}
#banner {
width: 1024px;
height: 220px;
background-color: #6E6A6A;
}
#menuTop {
width: 1024px;
height: 35px;
background-color: #ACAAAA;
}
#columnLeft {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: left;
}
#columnRight {
width: 220px;
height: 438px;
background-color: #CBCACA;
float: right;
}
#content {
width: 584px; // here you frogot the unit (px in this case)
height: 438px;
background-color: #E1E0E0;
margin-left: 220px;
}
#footer {
width: 1024px;
height: 75px;
background-color: #6E6A6A;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="FinalHTML.css">
<title></title>
</head>
<body>
<div id="wrapper">
<div id="banner">
</div>
<div id="menuTop">
</div>
<div id="columnLeft">
</div>
<div id="columnRight">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You forgot to type px after your height and width on the content div.
width: 584;
height: 438;
should be
width: 584px;
height: 438px;
#content {
width: 584;
height: 438;
background-color: #E1E0E0;
margin-left: 220px;
}
You forgot the "px"