I'm trying to do a video layout like the following:
The video embed will be with an iframe. I'd like to keep the height of lesson items on the left to be same height as the video and to have different container on the bottom that comes after the video and lesson container.
html
<div>
<div class='container'>
<div class='video-container'>
<iframe class='iframe' src="https://www.youtube.com/embed/I2UBjN5ER4s" width="640" height="360" frameBorder="0"
allow="autoplay; fullscreen" allowFullScreen title="https://player.vimeo.com/video/459785420">
</iframe>
</div>
<div class='menu-items'>
<div class='lesson'>
lesson menu
</div>
...
</div>
</div>
</div>
css:
.container {
display: flex;
height: 100px;
}
.video-container {
overflow: hidden;
padding-bottom: 56.25%;
height: 0;
position: relative;
outline: 1px solid black;
flex: 0 0 75%;
}
.iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
.menu-items {
padding: 10px;
flex: 0 0 25;
}
.lesson {
padding-bottom: 20px;
}
I've created a codepen: https://codepen.io/cagaroos/pen/XWdoROw?editors=1100
try this
.video-container {
height: auto;
}
instead of
.video-container {
padding-bottom: 56.25%;
height: 0;
}
add bottom and right
.iframe {
bottom:0;
right:0;
}
remove padding-bottom of last lesson div
.lesson:last-child {
padding-bottom:0;
}
also remove width and height <iframe> tag in html
Codepen demo
Related
I'd like to place three DIV boxes horizontally and centered. If i resize (narrower) the browser boxes should take place vertically and centered.
----BrowserWide-----
______X X X______
----BrowserWide-----
----BrowserNarrow-----
________X_________
________X_________
________X_________
----BrowserNarrow-----
This is my html:
<div class="premium_features">
<div class="premium1">
<h2>Some Heading</h2>
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
<div class="premium2">
<h2>Some Heading</h2>
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
<div class="premium3">
<h2>Some Heading</h2>
<p>Some paragraph, Some paragraph, Some paragraph, Some paragraph, Some paragraph,
</p>
</div>
</div>
This is my css:
.premium1 {
background: url("4.png") no-repeat top center;
padding-top: 95px;
float:left;
width: 33%;
min-width: 300px;
max-width: 320px;
text-align:center;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.premium2 {
background: url("5.png") no-repeat top center;
padding-top: 95px;
float:left;
padding-top: 95px;
float:left;
width: 33%;
min-width: 300px;
max-width: 320px;
text-align:center;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.premium3 {
background: url("6.png") no-repeat top center;
padding-top: 95px;
float:left;
width: 33%;
height: 100px;
min-width: 300px;
max-width: 320px;
text-align:center;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.premium_features {
width: 75%;
margin-left: auto;
margin-right: auto;
}
With this code: It is OK when it is wide and when it is narrow.
But during resize 2 of 3 boxes are staying at the same block for a while. I need to sort them vertically when resizig starts.
Thanks for help.
There are many ways to centre elements:
Margin way:
With a set width or display: inline-block; you can use:
margin-left: auto;
margin-right: auto;
text-align way:
With a set width or display: inline-block; you can add this to the parent:
text-align: center;
Absolute way:
position: absolute;
left: 50%;
margin-left: width/2;
or
position: absolute;
left: 50%;
transform: translate(0, -50%);
Also don't worry too much about ie7 and below as the the majority of people use higher versions of ie or a different browser though this should work up until ie6
Place your three divs within one large div and style that div
#largeDiv{ margin : 0 auto 0;}
I'm assuming this is what you meant:
HTML:
<div id="longone">long one</div>
<center>
<div id="box"><img src="http://placehold.it/100x100"></div>
<div id="box"><img src="http://placehold.it/100x100"></div>
<div id="box"><img src="http://placehold.it/100x100"></div>
</center>
CSS:
#longone
{
display: block;
width: 100%;
border-bottom: 1px solid black;
}
#box
{
display: inline-block;
width: 100px;
}
http://jsfiddle.net/R9ENg/
Although, personally, I'd use <ul>s and <li>s.
Are you looking for something like this?
http://jsfiddle.net/a2cPu/
HTML
<div class="container-wrapper">
<div class="container-1"></div>
<div class="container-2"></div>
<div class="container-3"></div>
</div>
CSS
.container-wrapper {
text-align:center;
}
.container-1, .container-2, .container-3 {
width:200px;
height:200px;
display:inline-block;
margin-left:-4px;
}
.container-1 {
background:red;
margin-left:0;
}
.container-2 {
background:green;
}
.container-3 {
background:blue;
}
#media all and (max-width: 650px) {
.container-1, .container-2, .container-3 {
width:100%;
display:block;
margin:0;
}
}
you can use mediaqueries and test screenwidth to apply different style :
example mediaquerie + display:flex;
demo: http://codepen.io/anon/pen/qmFlt/
#container {
display:flex;
flex-direction:row;
justify-content:center;
}
#container div {
width:200px;
height:100px;
background:gray;
margin:auto 1em;
}
/* next block, #media, can be clone to set other media queries */
#media only screen
and (max-width : 800px) {/* under 800px width , this CSS is overriding precedent rules */
#container {
flex-direction:column;
}
#container div {
margin:1em auto;
}
<div id = "container">
<div>box
</div>
<div>box
</div>
<div>box
</div>
</div>
You can do it setting display:inline-block / block the #container div and drop the display flex rules for #container, keep margins for the 3 div .
demo: http://codepen.io/anon/pen/utflx/
I attached a drawing of what my page looks like. The page has a width of 980px and the image has a width of almost 1200px. What I want to achieve is to have the page centered and to show as much of the image as possible while also keeping the image centered. I tried to absolutely position the image but then on mobile devices the browser page is set to the width of the image and the content does not stay centered.
Basically, there could be screens where not the entire image is shown to the user but only as much as fits the screen.
CSS:
.page_container {
width: 980px;
margin: 0 auto;
}
.image {
position: absolute;
left: 0;
right: 0;
}
HTML:
<body>
<div class="page_container">...</div>
<div class="image"><img .../></div>
<div class="page_container">...</div>
</body>
pls use the position: relative for the image.like this:
<div class="page_container">...</div>
<div class="image"><img src="http://g.hiphotos.baidu.com/album/w%3D210%3Bq%3D75/sign=3584477cf636afc30e0c386483229af9/caef76094b36acaf18169c407dd98d1000e99c93.jpg" width=1200 height=200 /></div>
<div class="page_container">...</div>
css code:
.page_container {
width: 980px;
margin: 0 auto;
background: orange;
}
.image {
position: relative;
left: 50%;
margin-left: -600px;
}
the margin-left is equal to thećimg's width/2. pls view the demo.
You Can Try This
<div class="popup">
<div class="wrapper">
<img src="http://farm4.staticflickr.com/3721/8826906676_501192b1c4.jpg">
</div>
</div>
CSS:
.popup{
position:fixed;
left:50%;
}
.popup .wrapper{
position:relative;
left:-50%;
/*popup-styles*/
background-color:#fff;
padding:10px;
border:solid 2px #444;
border-radius:10px;
}
html{background-color:#aaa;}
Example : jsfiddle
by Elad Shechter
.image {
position:absolute;
left:50%;
margin-left:-600px; // half of image width
}
You can try this way:
HTML:
<div class="wrapper">
<div class="image">
<img src="img/img.jpg">
</div>
</div>
JS:
<script>
$(document).ready(function() {
$('div.image').each(function() {
var imageSrc = $(this).find('img').attr('src');
$(this).css('background', 'url(' + imageSrc + ') center top no-repeat');
});
});
</script>
CSS:
.wrapper {
float: left;
width: 100%;
overflow: hidden;
}
.wrapper .image img {
visibility: hidden;
}
Easy way to center <img /> tag.
body {
margin: 0;
}
.warpper img {
display: block;
width: 100vw;
height: 100vh;
object-fit: cover
}
<div class="warpper">
<img src="https://i.stack.imgur.com/gkOwi.jpg" />
</div>
How about this: https://jsfiddle.net/squadjot/hva34oju/
HTML:
<div id="imgwrap">
<img src="https://i.stack.imgur.com/gkOwi.jpg">
</div>
CSS:
#imgwrap {
text-align:center;
}
#imgwrap img {
margin:0 -1000%; /* don't ask :P */
}
Works in every browser i've tried. IE, Chrome, Opera, FF
background-size:auto;
set this property for your image
Try this:-
.image {
position: absolute;
left: -50%;
}
I think it will work for bigger images...
.image {
position: absolute;
left: -50%; }
I'm trying to have a clickable image centered in a footer area. I've tested on Chrome and Firefox and the entire footer is clickable. Chrome inspector shows the element as 0 pixels tall and 0 pixels wide. What am I doing wrong?
PS: I'm using Twitter Bootstrap
Here's the CSS:
body {
margin:0;
padding-top: 0px;
margin-bottom: 20px;
}
#footerLogo {
display:block;
margin-left: auto;
margin-right: auto;
width: 73px;
}
#footer {
position: fixed;
bottom: 0px;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
background-color:red;
}
Here's the HTML:
<div id="footer">
<img id="footerLogo" src="/images/footer.gif">
</div>
Add to #footer a text-align: center to mark centering of elements within it, and margin: 0 auto to the #footerLogo and remove the display:block - since the block sets the <a> tag to box and occupies the whole parent container.
http://jsfiddle.net/T4PSS/
<div id="footer">
<img id="footerLogo" src="/images/footer.gif" />
</div>
notice how I closed the img element />
The problem with the whole footer clickable is the display: block , also take out the margins for the img
#footerLogo {
display:block; //this line - take it out
width: 73px;
}
if you want to center it , then center <a>
#footer a {
position: relative;
margin: auto;
width: 74px; //this may be necessary for IE7
}
this is because you are using
margin-left:auto;
margin-right: auto;
without a specified width, apply id="footerLogo" to the <a> instead:
<style>
body {
margin:0;
padding-top: 0px;
margin-bottom: 20px;
}
#footerLogo {
display:block;
margin:0 auto;
width: 200px;
}
#footer {
position: fixed;
bottom: 0px;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
background-color:red;
}
</style>
HTML:
<div id="footer">
<a id="footerLogo" href="#"><img src="/images/footer.gif" /></a>
</div>
I am a novice in web developing. My container div is set to margin: 0 auto; position: relative; and it is displayed in the middle of the screen. I have a banner div within the container which has some background color which I want to extend the whole width of the screen. I decided to use another div outside the containerdiv with same background color and height of my banner div and named it header. But how can I put them one over another, more precisely, the container div over the header div?
EDIT:
Some of the html:
<body>
<div id="header"></div>
<div id="container">
<div id="banner">
<img src="images/banner.gif" width="450" height="80" alt="parul library" />
</div>
</div>
</body>
The CSS:
#container{
position:relative;
top:0;
width: 968px;
background:#FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
#header {
position:absolute;
top:0;
height: 80px;
background: rgb(222,239,255); /* Old browsers */
}
Try using this CSS for the header div:
.header {
background: #bada55;
height: 90px;
width: 100%;
position: absolute;
}
And make sure container has position: relative; in its style definition.
Here's a working demo:
http://jsfiddle.net/rkJMJ/
Update for the HTML and CSS posted in the question:
(Added width: 100; to the #header style def)
#container{
position:relative;
top:0;
width: 968px;
background:#FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
#header {
position:absolute;
top:0;
height: 80px;
width: 100%;
background: rgb(222,239,255); /* Old browsers */
}
HTML
<body onload="MM_preloadImages('images/enterroll.gif')">
<div id="wrapper">
<div id="enterlogo"><img src="images/entrylogo.gif" width="600" height="600" alt="enterlogo" /></div>
<div id="enter"><img src="images/enter.gif" alt="enter" name="enter" width="300" height="300" border="0" id="enter2" /></div>
</div>
</body>
CSS
body {
background-color: #CCC;
}
#wrapper {
height: 750px;
width: 750px;
}
#enterlogo {
height: 600px;
width: 600px;
margin-top: 10%;
margin-left: auto;
margin-right: auto;
}
#enter {
height: 300px;
width: 300px;
}
So what I actually need this all to do is have the enter div sit in the bottom right hand corner of the wrapper div.
For this to happen I need it to overlay the enterlogo div! I've looked up many posts on z-index and positioning methods with float right, but all of them seem to fall short.
Any help at all would be appreciated, I called a friend and he said that making the image in the enterlogo div a background and putting the other image in that div could help.. I can't see how it'll work though!
P.S the rollover image is going to be a link, that is going to eb the only div piece on the page.
Use position: absolute, like this:
#wrapper {
position: relative;
}
#enter {
position: absolute;
right: 0;
bottom: 0;
}
Here's a demo: http://jsfiddle.net/thirtydot/Nd2jQ/
Here's some more information about how this works: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I believe you are overusing javascript.. You should just use CSS for all your requirements (and in the process simplify your html)..
<body>
<div id="wrapper">
<div id="enterlogo"></div>
</div>
</body>
and
body {
background-color: #CCC;
}
#wrapper {
height: 750px;
width: 750px;
position:relative;
}
#enterlogo {
height: 600px;
width: 600px;
margin-top: 10%;
margin-left: auto;
margin-right: auto;
background: url('images/entrylogo.gif') top left no-repeat;
}
#enter {
display:block;
height: 300px;
width: 300px;
background: url('images/enter.gif') top left no-repeat;
position:absolute;
bottom:0;
right:0;
}
#enter:hover {
background-image: url('images/enterroll.gif');
}
demo at http://jsfiddle.net/gaby/WL96s/