I'm trying to make 2 divs centered horizontally and one under the other. Actually i did it with some trial and error but i couldn't make it resolution independent. It's looking weird with other resolutions except 1920*1080. I tried percantage but i couldn't make it. My div jumped to the left top corner. Here how my divs look like in 1920*1080 :
I know i shouldn't use this position,width and height pixels but i couldn't get this view without them. So i made it for clarity for my problem.
Here my html codes :
<body>
<div name="video-div" id="videodiv" style="position:absolute; left:320px; top:10px;">
<video id="videoPlayer" controls>
<source src="" type="video/mp4">
</video>
</div>
<div id="info-div" style="position:absolute; left:320px; top:740px;">
</div>
<div name="test2" id="div2">
<ul id="ultimes">
<li>test</li>
</ul>
</div>
<div name='test' id="div1">
<input id="datepicker" type="text" placeholder="Tarihi Seç">
<form id="form">
<button type="submit" id="listele">Listele</button>
</form>
<ul id="list1">
<li>test</li>
</ul>
<ul id="ullogs">
<li>test</li>
</ul>
</div>
</body>
Here my css codes :
#info-div{
background-color:white;
border:1px solid black;
height:200px;
width:1280px;
}
#videodiv{
width: 1280px;
height: 720px;
background-color: red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/*margin: auto;*/
}
#videoPlayer {
object-fit: fill; /* it's not filling the div */
}
#div1 {
padding-top: 50px;
padding-left: 20px;
padding-right: 20px;
width: 25vh;
height: 100vh;
background-color: #d5f4e6;
}
#div2 {
float: right;
padding-top: 50px;
padding-left: 20px;
padding-right: 20px;
width: 25vh;
height: 100vh;
background-color: #d5f4e6;
}
body{
margin:0px;
padding:0px;
background-color: #80ced6 !important;
overflow: hidden;
}
#form {
margin-bottom: 40px;
}
If I get this correct. All you want to do is center two divs horizontally one under another (the video and the info div) with the video-div filling 100% width.
Have you tried wrapping them in another div and centering that horizontally? Doing this and giving the wrapper-div a width should work.
.wrapper-div {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 1280px
}
.video-div {
width: 100%;
}
<div class="wrapper-div">
<div name="video-div" id="videodiv">
<video id="videoPlayer" controls>
<source src="" type="video/mp4">
</video>
</div>
<div id="info-div">
</div>
</div>
Related
Researched elsewhere, can't find a solution to horizontally center a video in a Bootstrap div / header section while keeping the video vertically aligned with the top. Div / header section is 100% width with two fixed heights at certain viewport breakpoints.
I've tried removing/renaming the <header> tag in case Bootstrap's styles interfere. Tried <center> tags, specifying the video tag as display:inline and many many other attempts.
The video in this example centers at certain breakpoints but otherwise is left-aligned. I'd like it to be centered throughout all viewport widths, and top aligned as well.
Thanks very much!
HTML:
<header>
<video loop muted autoplay poster="images/3671960.jpg" class="fullscreen-video">
<source src="video/3671960.mp4" type="video/mp4">
</video>
<div class="header-content">
<div class="header-content-inner">
<h1>A bunch of header text.</h1>
</div>
</div>
<div class="launcher">
<div class="launcher-inner">
Button text
</div>
</div>
CSS :
header {
position: relative;
text-align: center;
top: 0;
left: 0;
width:100%;
height: 475px;
color: #fff;
overflow: hidden;
margin: 0 auto;
}
header .fullscreen-video {
position: absolute;
top: 0;
left: 0;
min-width:100%;
min-height:100%;
z-index: -100;
}
#media (min-width: 768px) {
header {
height: 665px;
}
}
HTML
<header>
<video loop muted autoplay poster="images/3671960.jpg" class="fullscreen-video">
<source src="video/3671960.mp4" type="video/mp4">
</video>
<div class="header-content">
<div class="header-content-inner">
<h1>A bunch of header text.</h1>
</div>
</div>
<div class="launcher">
<div class="launcher-inner">
Button text
</div>
</div>
</header>
CSS
header {
position: relative;
text-align: center;
top: 0;
left: 0;
width:100%;
height: 475px;
color: #fff;
overflow: hidden;
margin: 0 auto;
}
header .fullscreen-video {
position: absolute;
left: 50%;
top: 0;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
min-width:100%;
min-height:100%;
z-index: -100;
}
#media (min-width: 768px) {
header {
height: 665px;
}
}
Demo Link : https://jsfiddle.net/hellosrini/vwc5hek0/
I need to get the following layout on my web page:
All elements have the fixed height (images as shown on their placeholders, YouTube player -- 640x390) and all these elements should be placed in the center of the document.
The best solution I can think of is the following:
CSS
.center-both {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-webkit-filter: blur(0);
}
#logo {
display: block;
margin: auto;
}
#player {
margin-top: 30px;
width: 640px;
max-width: 640px;
height: 390px;
max-height: 390px;
}
#copy {
margin-bottom: 131px;
}
#next {
margin-bottom: 131px;
}
HTML
<div class="center-both">
<img id="logo" src="http://placehold.it/246x105">
<img id="copy" src="http://placehold.it/128x128">
<iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="390" src="https://www.youtube.com/embed/?enablejsapi=1&origin=http%3A%2F%2F127.0.0.1%3A3000"></iframe>
<img id="next" src="http://placehold.it/128x128">
</div>
(JSFiddle gives me the trash result btw -- https://jsfiddle.net/aadzfkmr/)
So:
center-both class is supposed to be used for both vertical and horizontal centering for all my elements on the document
#logo should have display: block and margin: auto styles to be placed on top of YouTube player instead of left-to.
margin-bottom: 131px is an ugly hack that I use at the moment to vertically align left and right images (390px of the player's height / 2 - 128px of the image's height / 2 = 131px)
#player should have fixed height and width because it transforms to the iframe from the div element dynamically via JS
It works but I have an ugly flickering when the page loads before all elements take their right places.
Actually it'll be a lot better to have YouTube player in the center of the document despite of the logo above (it can be placed a bit higher then).
What is the best way to achieve what I want?
If you are not worried about getting it done for Responsive design, then go for this below solution!
* {
box-sizing: border-box;
}
.w-896 {
width: 896px;
}
.text-center {
text-align: center;
}
.center-both {
display: table;
table-layout: fixed;
margin-top: 30px;
}
.child {
display: table-cell;
vertical-align: middle
}
.center-block {
display: block;
margin: 0 auto;
}
.w-128 {
width: 128px;
}
w-frame {
width: 640px
}
<div class="w-896 text-center">
<img id="logo" src="http://placehold.it/246x105" class="center-block">
</div>
<div class="center-both w-896">
<div class="child w-128">
<img id="copy" src="http://placehold.it/128x128">
</div>
<div class="child w-frame">
<iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="390" src="https://www.youtube.com/embed/?enablejsapi=1&origin=http%3A%2F%2F127.0.0.1%3A3000"></iframe>
</div>
<div class="child w-128">
<img id="next" src="http://placehold.it/128x128">
</div>
</div>
Try this :
#player {
margin-top: 30px;
width: 640px;
max-width: 640px;
height: 390px;
max-height: 390px;
}
#copy {
margin-bottom: 131px;
}
#next {
margin-bottom: 131px;
}
.center-both {
display:block;
text-align:center;
}
#logo {
display:block;
margin:0 auto;
width:246px;
height:105px;
}
Please try this.
#logo {
margin-bottom: 25px;
}
#player {
width: 640px;
height: 390px;
}
Refer this working jsfiddle
I have a container div. Inside that I have 6 things. A banner div, an upperstrip div, a video div, a counter div and a bottom div. Inside the bottom div is a lowerstrip div.
When the delayed item displays it bumps the lowerstip div down the page by the amount the the counter is located. All of these divs except for the container have z-indexes called out in my CSS.
<div id="container" style="text-align: center;">
<div id="banner">
<img src="banner.png" alt="banner" />
</div>
<div id="upperstrip">
<p><h2 style="color:white; background-color: #0f2781;">
Puzzle Registration </h2></p>
</div>
<div id="video">
<video controls autoplay>
<source src="prsm_animation.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div id="counter" data-delay="9" style="display:none; width: 100%">
</br>
<a href="http://www.xxxx.com">
<img src="bluebar.jpg" alt="bluebar" /></a>
</div>
</div>
<div id="bottom">
<div id="lowerstrip">
<p><h4 style=" color: white; vertical-align:bottom;
background-color: #0f2781; text-transform: uppercase;">
Enter your puzzle number in the blue bar above to
register for these
great prizes! </h4></p>
</div>
</div>
</div>
My CSS looks like this:
#video {
position: absolute;
z-index: -10;
}
#counter {
position: absolute;
top: 0px;
width: 803px;
margin: auto;
text-align: center;
z-index: 10;
}
#upperstrip {
position: static;
width: 850px;
text-transform: uppercase;
z-index: 40;
}
#lowerstrip {
position: static;
width: 850px;
top: 400px;
height: 19px;
z-index: 60;
}
#bottom {
position: absolute;
width:850px: height: 1300px;
z-index: 80;
background-color: #ff0000;
}
I'm struggling on a problem.
I have to put a border on element inside an image(I can't put an image due to reputation under 10) but that border should have the same width and height of that element.It should be responsive.I write the code based on bootstrap media screen resolution but when I reduced my page the wide becomes small at some specific screen resolution.That's the code.Thanks.
<div class="parent">
<img />
<span class="makeBorder"></span>
</div>
and the css:
.parent {
position: relative;
}
.makeBorder {
position: absolute;
top: 15px;
left: 23px;
border: 2px solid red;
width: 83%;
height: 83%;
}
What I finally do:
<div class="customClass"><img /></div>
.customClass{outline:1px solid red;outline-offset:-18px;}
Try this I hereby use a button on the image and it correctly work.Some of css property are no useful in this example denoted by //.
<html>
<head>
<style>
div{
background:url("1.jpg") no-repeat;
background-size:contain;//
height:500px;//height of div
width:500px;
}
button{
height:50px;
width:70px;
outline:red solid 4px;
margin:20px 20px;
}
</style>
</head>
<body>
<div>
<button >Hello</button>
</div>
</body>
</html>
<html>
<head>
<style>
div{
height:500px;
width:500px;
position:absolute;
}
button{
position:absolute;
height:50px;
width:70px;
outline:red solid 4px;
margin:20px 20px;
}
</style>
</head>
<body>
<div>
<img src="1.jpg">
</div>
<button >Hello</button>
</body>
</html>
use this code if you want to use 2 images then provide background image
z-index=-1;
use the above positioning property;
Here is the solution
HTML
<div class="parent">
<img src="/path/to/img/png" class="img-responsive" /> // Here I added a class img-responsive
<span class="makeBorder"></span>
</div>
CSS
.parent {
position: relative;
}
.makeBorder {
position: absolute;
top: 15%; // Here I use percentage instead of pixels
left: 23%; // Here I use percentage instead of pixels
border: 2px solid red;
width: 83%;
height: 83%;
}
NOTE: The point I want to make is use percentages instead of pixels so that your work/html become responsive !!
.parent {
position: relative;
}
.makeBorder {
position: absolute;
top: 81px;
left: 83px;
border: 2px solid red;
width: 55px;
height: 60px;
}
<div class="parent">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRBnmmAWOlqD-8ZjLvlkXoz0sSMOd7DiA5paUl7Ug2VBjXnnqKaHw" />
<span class="makeBorder"></span>
</div>
i suppose this is what you want to do
I have a container with 3 divs inside. I'm making use of the full page. So I'm busy, all percentage, and when I crop my screen, only the first div resizes.
Here's the code:
#topnews {
margin-left: 1%;
margin-top: 10px;
}
#topnews_bg {
background-color: #F4F4F4;
width: 30%;
height: 187px;
margin-top: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
overflow: hidden;
}
#container_djbanner {
height: 187px;
width:30%;
top:10px;
left: 31.7%;
position: absolute;
}
#container_login {
float: right;
margin-right: 1%;
height: 187px;
width: 31.7% !important;
margin-top: -187px;
background-color: green;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
<div id="topnews">
<div id="topnews_bg">
<div id="slider">
<div id="sliderContent">
<div class="sliderTopstory" style="background: url(assets/img/top3.png);height:187px;">
<div id="topnews_opacity">
<span id="topnews_info">
<b>3e bericht</b><br/>En dan hier weer iets :p
</span>
<a href="#">
<div id="topnews_button">Meer info!</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="container_djbanner">
<img src="assets/img/testdj.png" style="-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;" />
</div>
<div id="container_login">
ds
</div>
Why does only the first box resize?
The divs are resizing correctly, if the problem is that the image is not resizing you could fix it with this css:
#container_djbanner img{
max-width: 100%;
}
Check out this codepen.
*Avoid using inline css in your html (is not a good practice).