I've looked through a dozen other similar questions as this one, but I don't think any of them are similar enough to my scenario. This isn't my exact setup, but I've simplified it to hopefully make it easier to explain and also answer.
I have 3 divs. If the window is wider than 600px, div1 and div2 should flow normally, floated left, and div3 should float to the right. Using a #media query, if the window is narrower than 600px, div 3 should appear above div1 and div2, pushing them down so they're stacked on top of each other.
I've tried experiementing with display and position properties on all 3 divs, and I can't figure out how to make this work. I'm working with a templated system, so I can't add a container. I can only work with these 3 divs.
#id1 {
background: red;
width: 100px;
height: 100px;
}
#id2 {
background: yellow;
width: 100px;
height: 100px;
}
#id3 {
background: blue;
width: 100px;
height: 100px;
float: right;
position: fixed;
top: 50px;
right: 20px;
}
#media only screen and (max-width: 600px) {
#id3 {
float: left;
position: absolute;
top: 0px;
left: 0px;
}
}
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>
Set position: relative and correct top/left/right values:
#id1 {
background: red;
width: 100px;
height: 100px;
}
#id2 {
background: yellow;
width: 100px;
height: 100px;
}
#id3 {
background: blue;
width: 100px;
height: 100px;
float: right;
position: fixed;
top: 50px;
right: 20px;
}
#media only screen and (max-width: 600px) {
#id3 {
float: left;
position: relative;
top: 0;
left: 0;
right: unset;
}
}
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>
To stack the div#id3 on top, you'll need to use position: absolute and set custom top position for all 3 divs:
#id1 {
background: red;
width: 100px;
height: 100px;
}
#id2 {
background: yellow;
width: 100px;
height: 100px;
}
#id3 {
background: blue;
width: 100px;
height: 100px;
float: right;
position: fixed;
top: 50px;
right: 20px;
}
#media only screen and (max-width: 600px) {
#id1,
#id2,
#id3 {
position: absolute;
top: 10px;
float: none;
}
#id1{ top: 110px; }
#id2{ top: 210px; }
#id3{ right: unset; }
}
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>
Please read https://developer.mozilla.org/en-US/docs/Web/CSS/order.
I hope this helps. If you need me to explain it to you, please let me know. I will be glad to.
body {
display: flex;
/* Optional, if you want the DIVs 100% width: */
flex-direction: column;
}
#id1 {
background: red;
width: 100px;
height: 100px;
}
#id2 {
background: yellow;
width: 100px;
height: 100px;
}
#id3 {
background: blue;
width: 100px;
height: 100px;
float: right;
position: fixed;
top: 50px;
right: 20px;
}
#media only screen and (max-width: 600px) {
body > #id3 { order: 1; }
body > #id1 { order: 2; }
body > #id2 { order: 3; }
#id3 {
float: left;
position: relative;
top: 0px;
left: 0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="id1">DIV 1</div>
<div id="id2">DIV 2</div>
<div id="id3">DIV 3</div>
</body>
</html>
This is the best solution according to me
I just came up with a perfect solution for my needs. Adding a margin-top to div1 in the #media query will bump it and div2 down:
#media only screen and (max-width: 600px) {
#id3 {
float: left;
position: absolute;
top: 0px;
left: 0px;
}
#id1 {
margin-top: 100px;
}
}
Related
So what Im trying to achieve is to make a div element stick onscroll to nav header element bottom but they are not in the same parent, also the header dissappear onscroll down and re-appear onscroll up
this is the link to codepen
https://codepen.io/snake220/pen/VwdwpwJ
.red-div {
background-color: red;
width: 100%;
height: 50px;
position: sticky;
top: 0;
}
.green-div {
background-color: green;
width: 100%;
height: 400px;
}
.test2 {
width: 100%;
height: 100px;
}
.blue-div {
background-color: blue;
width: 100%;
height: 30px;
}
<nav class="red-div"></nav>
<div class="green-div">
<div class="test2"></div>
<div class="blue-div"></div>
</div>
so like showin in the code I want the blue div to stick under the red div onscroll.
So, you need to set position: sticky and top equal to the red nav height which equal to 50px like top: 50px;
.red-div {
background-color: red;
width: 100%;
height: 50px;
position:sticky;
top:0;
}
.green-div {
background-color: green;
width: 100%;
height: 400px;
}
.test2 {
width: 100%;
height: 100px;
}
.blue-div {
background-color:blue;
width: 100%;
height: 30px;
position: sticky;
top: 50px;
}
<nav class="red-div"></nav>
<div class="green-div">
<div class="test2"></div>
<div class="blue-div"></div>
</div>
So i need change blue square element width when my screen size below 520px evry time i am resising the window.
The blue square should get green square width, but green square width style should be in percents.
Nothing works the way i am doing it :(
window.addEventListener('resize', ()=> {
if (screen.width < 520) {
const boxElement = document.getElementsByClassName('box')[0].clientWidth,
changingElement = document.getElementsByClassName('changing__width__element')[0];
changingElement.style.width = `${boxElement}px`;
}
}, true);
body,html{
width: 100%;
height: 100%;
}
.box{
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background: lime;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.changing__width__element{
width: 50px;
height: 50px;
background: blue;
position: relative;
}
<body>
<div class="box">
<div class="changing__width__element"></div>
</div>
</body>
If you don't want to go the CSS route, which is probably the easiest solution, don't use screen.width, use window.innerWidth, you can read more about the difference here: what-is-the-difference-between-window-innerwidth-and-screen-width
window.addEventListener('resize', ()=> {
const boxElement = document.getElementsByClassName('box')[0].clientWidth,
changingElement = document.getElementsByClassName('changing__width__element')[0];
if (window.innerWidth < 520) {
changingElement.style.width = `${boxElement}px`;
} else {
changingElement.style.width = "50px";
}
}, true);
body,html{
width: 100%;
height: 100%;
}
.box{
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background: lime;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.changing__width__element{
width: 50px;
height: 50px;
background: blue;
position: relative;
}
<body>
<div class="box">
<div class="changing__width__element"></div>
</div>
</body>
There is no need to use JavaScript for it. Just use a media query and change the width to 100% if the size of the window is smaller than 520px.
Changing something based on the screen size is normally not that useful.
body,
html {
width: 100%;
height: 100%;
}
.box {
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background: lime;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.changing__width__element {
width: 50px;
height: 50px;
background: blue;
position: relative;
}
#media (max-width: 520px) {
.changing__width__element {
width: 100%;
}
}
<body>
<div class="box">
<div class="changing__width__element"></div>
</div>
</body>
Generally, if you design something it is recommended to use "mobile-first" (or better small window first), and add complexity with larger window sizes:
body,
html {
width: 100%;
height: 100%;
}
.box {
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background: lime;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.changing__width__element {
width: 100%;
height: 50px;
background: blue;
position: relative;
}
#media (min-width: 520px) {
.changing__width__element {
width: 50px;
}
}
<body>
<div class="box">
<div class="changing__width__element"></div>
</div>
</body>
I have a container div with a button and a car img inside of it. The car moves when the page is scrolled.
When the mouse is hovering over top of the button or img, the scroll wheel no longer works.
I tried adding a gray overlay div to block the hover on the button and car. But this prevents the button from being clicked.
Is there a way to make scrolling work even when the button or image is hovered?
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$('#cars').css('left', dist / 2);
});
body {
position : absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255,255,255,0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: fixed;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top:0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: fixed;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
<div id="overlay">
</div>
</div>
</section>
<div id="bar">
</div>
I think I realize now that your issue is that when the mouse is over top of the button or car image, mousewheel scrolling does not work. This is because the position of those elements is "fixed". I'm not sure if this is a bug or not. Anyways, you can simulate the fixed position with javascript to get around this issue.
$('#home').on('scroll', function() {
var dist = $(this).scrollTop();
$("#buttons").css("top", dist);
$("#cars").css("top", dist + 100);
$('#cars').css('left', dist / 2);
});
body {
position: absolute;
height: 90%;
width: 90%;
background: #fff;
}
#overlay {
height: 1200px;
background-color: rgba(255, 255, 255, 0.7);
z-index: 999;
position: relative;
pointer-events: none;
}
#buttons {
width: 150px;
height: 40px;
background-color: yellow;
position: absolute;
text-align: center;
z-index: 5;
cursor: pointer;
}
#home {
position: relative;
top: 0px;
width: calc(100% + 25px);
overflow-y: scroll;
background-image: url('images/movie_6.jpg');
height: 400px;
background-color: #000000;
margin-top: 40px;
}
#homeinner {
height: 1800px;
overflow: hidden;
}
#cars {
height: 50px;
position: absolute;
top: 100px;
left: 0;
}
#bar {
height: 80px;
width: calc(100% + 25px);
position: absolute;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home">
<div id="homeinner">
<button id="buttons" onclick="alert('Log in page!')">
button
</button>
<img id="cars" src="http://www.kindaholidays.com/hotel/img/travel_icon/512x512/car.png" />
</div>
</section>
<div id="bar">
</div>
I am trying to center these boxes in the middle of the screen both horizontally and vertically. Another question is how can I make it where it re-sizes automatically when I scale my page?
/*-------------------------
Simple reset
--------------------------*/
*{
margin:0;
padding:0;
}
/*-------------------------
General Styles
--------------------------*/
/*----------------------------
Color Themes
-----------------------------*/
.nav-colors{
position: relative;
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
overflow: auto;
}
.home-link{
background-color:#00c08b;
width: 15%;
height: 80px;
display: inline-block;
margin-left: 10%;
}
.portfolio-link{
background-color:#ea5080;
width: 15%;
height: 80px;
display: inline-block;
}
.social-link{
background-color:#53bfe2;
width: 15%;
height: 80px;
display: inline-block;
}
.contact-link{
background-color:#f8c54d;
width: 15%;
height: 80px;
display: inline-block;
}
.blog-link{
background-color:#df6dc2;
width: 15%;
height: 80px;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Neiko Anglin | Front-End Develper </title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Font Awesome Stylesheet -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
</head>
<body>
<div class="nav-colors">
<div class="home-link">
</div>
<div class="portfolio-link">
</div>
<div class="social-link">
</div>
<div class="contact-link">
</div>
<div class="blog-link">
</div>
</div>
</body>
</html>
You can use absolute positioning on the container to center vertically and horizontally:
/*-------------------------
Simple reset
--------------------------*/
* {
margin:0;
padding:0;
}
/*-------------------------
General Styles
--------------------------*/
/*----------------------------
Color Themes
-----------------------------*/
.nav-colors {
position: absolute;
background: white;
height: 84px;
width: 60%;
margin: auto;
padding: 20px;
overflow: auto;
top:0;
right:0;
bottom:0;
left:0;
}
.home-link {
background-color:#00c08b;
width: 15%;
height: 80px;
display: inline-block;
margin-left: 10%;
}
.portfolio-link {
background-color:#ea5080;
width: 15%;
height: 80px;
display: inline-block;
}
.social-link {
background-color:#53bfe2;
width: 15%;
height: 80px;
display: inline-block;
}
.contact-link {
background-color:#f8c54d;
width: 15%;
height: 80px;
display: inline-block;
}
.blog-link {
background-color:#df6dc2;
width: 15%;
height: 80px;
display: inline-block;
}
<div class="nav-colors">
<div class="home-link"></div>
<div class="portfolio-link"></div>
<div class="social-link"></div>
<div class="contact-link"></div>
<div class="blog-link"></div>
</div>
To align vertically you need a wrapper class with position absolute in CSS. Search for vertical center which will fetch you lots of results.
To resize boxes along with screen resize - is responsive template. I could suggest you to use Twitter Bootstrap which takes care of your dimensions.
Change your .nav-color class to
.nav-colors{
position: fixed;
background: white;
height: 80px;
width:60%;
margin: -60px 0 0 0;
padding: 20px;
overflow: auto;
top:50%;
left:20%;
}
/*-------------------------
Simple reset
--------------------------*/
* {
margin: 0;
padding: 0;
}
/*-------------------------
General Styles
--------------------------*/
/*----------------------------
Color Themes
-----------------------------*/
.nav-colors {
position: fixed;
background: white;
height: 80px;
width: 60%;
margin: -60px 0 0 0;
padding: 20px;
overflow: auto;
top: 50%;
left: 20%;
}
.home-link {
background-color: #00c08b;
width: 15%;
height: 80px;
display: inline-block;
margin-left: 10%;
}
.portfolio-link {
background-color: #ea5080;
width: 15%;
height: 80px;
display: inline-block;
}
.social-link {
background-color: #53bfe2;
width: 15%;
height: 80px;
display: inline-block;
}
.contact-link {
background-color: #f8c54d;
width: 15%;
height: 80px;
display: inline-block;
}
.blog-link {
background-color: #df6dc2;
width: 15%;
height: 80px;
display: inline-block;
}
<div class="nav-colors">
<div class="home-link">
</div>
<div class="portfolio-link">
</div>
<div class="social-link">
</div>
<div class="contact-link">
</div>
<div class="blog-link">
</div>
</div>
You just have to add some properties to your .nav-colors:
.nav-colors{
position: relative;
background: white;
height: 200px;
width: 60%;
margin: 0 auto;
padding: 20px;
overflow: auto;
line-height: 200px;
text-align: center;
}
And add vertical-align: middle; to elements you want to center vertically.
First the explanation, then some code.
Vertical centering is a classic css issue. The vh unit has come in very handy for this recently. Coupled with margin (and maybe calc) its now a solvable thing.
Centering it horizontally is simple enough, and you have that figured out. Just have a width and set margin: 0 auto and you are good to go.
With Vertical Centering the key thing to remember is you are centering your element, so half is over the middle, half is under the middle. With that we can make margin: calc(50vh-40px) auto 0 for your 80px high element and presto, it's in the middle vertically.
One step further:
Like horizontal centering, you seem to already have the dynamic width down by using %.
For a dynamic vertical size we can again turn to vh. The nice thing is this saves us the css calc function. Just subtract half the height from the 50vh margin and you'll get your margin. So for height: 20vh the margin is margin: 40vh auto 0
Here is a JsFiddle
and here is some code:
CSS:
*{
margin: 0;
padding: 0;
}
html, body{
width: 100vw;
height: 100vh;
}
.nav-colors{
width: 80%;
height: 20vh;
margin: calc(40vh) auto 0;
}
.nav-colors div{
width: 18%;
margin: 0 0 0 1%;
height: 100%;
display: inline-block;
}
.home-link{background-color:#00c08b;}
.portfolio-link{background-color:#ea5080;}
.social-link{background-color:#53bfe2;}
.contact-link{background-color:#f8c54d;}
.blog-link{background-color:#df6dc2;}
HTML:
<div class="nav-colors">
<div class="home-link"></div>
<div class="portfolio-link"></div>
<div class="social-link"></div>
<div class="contact-link"></div>
<div class="blog-link"></div>
</div>
enjoy.
I cannot position info-pop-title on top of bar-header as you can see from my current code the text "TEST----" is visible but under the bar-header element.
http://jsfiddle.net/uvh4ymh9/
Could you point me out what am I doing wrong and how to fix it
PS: I cannot change structure for the HTML, only CSS solution
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.bar-header, .bar-footer {
position: fixed;
left: 0px;
width: 1280px;
z-index: 1;
background-color: rgba(50,50,50,0.5);
text-align: center;
}
.bar-header {
top: 0px;
height: 60px; /* safearea top 25 + content 20 + space bottom 15*/
}
.bar-header h1 {
position: fixed;
top: 25px; /* safearea top 25 */
left: 25px; /* safearea left */
font-size: 20px; /* content */
}
.bar-footer {
top: 670px;
height: 50px; /* safearea bottom 20 + content 20 + space top 10 */
font-size: 20px; /* content */
}
.bar-footer > ul {
position: fixed;
top: 680px; /* footer top 670 + space top 10*/
left: 1150px;
}
.bar-footer > ul li {
float: left;
}
.bar-footer li:nth-child(1) span {
color: blue;
}
#scene-main {
position: fixed;
top: 0px;
left: 0px;
width: 1280px;
height: 720px;
/*background: #ffffff url("/auth/assets/tv-safearea-transparent.png") no-repeat left;*/
background-color: darkgrey;
}
#btn-up, #btn-down {
position: fixed;
left: 1230px;
width: 50px;
height: 50px;
background-color: yellow;
outline: 1px solid black;
z-index: 200;
}
#btn-up {
top: 0px;
}
#btn-down {
top: 50px;
}
#content {
position: fixed;
top: 0px; /* header */
}
.content-section:first-child {
margin-top: 60px; /* header height content does not go under header */
}
.content-section {
background-color: lightgray;
outline: 1px solid black;
width: 1280px;
}
/* Content sizes */
.content-snippet {
height: 360px; /* 1 slots */
width: 1280px;
background-color: lightblue;
outline: 1px solid green;
}
.content-snippet:nth-child(even) {
background-color: lightcoral;
}
.content-section h2 {
position: relative;
top: 30px; /**avoid to go under the header bar*/
}
.active {
background-color: violet !important;
}
.snippet-pop-info {
position: fixed;
top: 640px; /*430 = final position as visible / 670 = final position as not visible */
width: 1280px;
height: 240px;
background-color: darkblue;
opacity: 1;
color: white;
}
.snippet-pop-info ul {
position: absolute;
top: 0px;
left: 1155px;
width: 100px;
}
.snippet-pop-info ul li {
width: 100px;
}
.snippet-pop-info .rating {
position: absolute;
top: 65px;
left: 25px;
unicode-bidi: bidi-override;
direction: rtl;
}
.snippet-pop-info .rating > span {
display: inline-block;
position: relative;
width: 20px;
}
.snippet-pop-info .rating > span:hover:before,
.snippet-pop-info .rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}
#info-pop-title {
position: fixed;
top: 0px;
left: 250px;
z-index: 1;
font-size: 30px;
color: white;
font-weight: bold;
}
#info-pop-description {
position: absolute;
overflow: hidden; /* hide content that does not fit in the columns*/
top: 25px;
left: 300px; /* TEST */
height: 80px;
width: 800px;
font-size: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
</style>
</head>
<body>
<div id="viewport">
<div id="scene-main" class="scene" style="">
<div class="bar-header"><h1>ChannelLive logo</h1></div>
<div id="page">
<div id="content">
<div id="snippet-cnt-0" class="content-snippet">
0
<div class="snippet-pop-info" style="top: 720px;">
<h1 id="info-pop-title" style="word-wrap: break-word;">TEST-----------------</h1>
<div class="rating"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
<div id="info-pop-description" style="word-wrap: break-word;">null</div>
<ul>
<li class="focusable" data-href="movie-play">Play</li>
<li class="focusable" data-href="movie-details">Details</li>
</ul>
</div>
</div>
</div>
</body>
</html>
It's not clear what you're trying to accomplish, but I can make Chrome work like Firefox by getting rid of the
position: fixed;
style from #content. Whether that will work in the larger context of your layout, I don't know, but the problem is that the way z-index works is weird and complicated, and involves not just individual fixed elements but also any fixed parents they might have.
edit — oh also, set the z-index of .snippet-pop-info to 2. Here is an updated version of your fiddle.
Make your
.bar-header, .bar-footer{
z-index:0;
}
This will do the trick. Since your z-index for .bar-header and .info-pop-title are the same.
Add z-index in your content div
#content
{
position:fixed;
top:0;
z-index:1;
}
I'm afraid you can't make it work with the way your html is nested.
The element you want to pull on top to cover the rest is located in the main container while your second element is isolated in the header. If you want to bring your info-pop-title there you'll have to change the z-index of your #page element, which will cover everything.
The only thing I see you can achieve with this structure would be to position your diverse containers relatively and change the css of your info-pop-title with a negative margin, position absolutely this time.