I have 2 blocks that are each 50% of the page width. When I hover one of these 2 blocks, it then takes up 95% of the page and must go over the second (hence the increase in the z-index on hover).
When I switch my cursor from one block directly to another, we notice that from a certain point, the animation of the width is overwritten by the change of the z-index.
I'm looking for a solution to make the animation take priority over the width, not the z-index, smoother effect and ideally without using javascript.
Here is my code:
HTML :
<div class="page-wrap">
<div class="horizontal__reveal">
<div class="horizontal__reveal__block horizontal__reveal__block-left">
</div>
<div class="horizontal__reveal__block horizontal__reveal__block-right">
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html {
background: #000;
color: #fff;
}
.page-wrap {
height: 100vh;
width: 100vw;
}
.horizontal__reveal {
position: relative;
height: 100%;
width: 100%;
background: red;
}
.horizontal__reveal__block {
cursor: pointer;
position: absolute;
top: 0;
width: 50%;
height: 100%;
z-index: 100;
transition: all 1s ease;
display: flex;
align-items: center;
justify-content: center;
}
.horizontal__reveal__block:hover {
z-index: 200;
width: 95%;
}
.horizontal__reveal__block-left {
background: blue;
left: 0;
}
.horizontal__reveal__block-right {
background: green;
right: 0;
}
You can see it live here.
You can do that with omitting z-index when hover occurs. Instead you can use Adjacent Sibling Selector (+) in your CSS as the code below:
* {
margin: 0;
padding: 0;
}
html {
background: #000;
color: #fff;
}
.page-wrap {
height: 100vh;
width: 100vw;
}
.horizontal__reveal {
position: relative;
height: 100%;
width: 100%;
background: red;
}
.horizontal__reveal__block {
cursor: pointer;
position: absolute;
top: 0;
width: 50%;
height: 100%;
z-index: 100;
transition: all 1s ease;
display: flex;
align-items: center;
justify-content: center;
}
.horizontal__reveal__block:hover {
/*z-index: 200;*/
width: 95%;
}
.horizontal__reveal__block:hover + .horizontal__reveal__block {
width: 5%;
}
.horizontal__reveal__block-left {
background: blue;
left: 0;
}
.horizontal__reveal__block-right {
background: green;
right: 0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-wrap">
<div class="horizontal__reveal">
<div class="horizontal__reveal__block horizontal__reveal__block-left">
</div>
<div class="horizontal__reveal__block horizontal__reveal__block-right">
</div>
</div>
</div>
</body>
</html>
Related
html
<!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">
<title>Document</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<header>
<div class="background">
<div class="logo"></div>
<div class="imgboxd">
<img src="../img/sec1.png" alt="">
</div>
<div class="boxss"></div>
</div>
</header>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 750px;
background-color: #0D1430;
position: absolute;
}
.logo {
width: 54px;
height: 68px;
background: url("../img/logo.png") no-repeat center/cover;
margin: 60px auto 20px;
}
header .background .imgboxd {
text-align: center;
}
header .background .imgboxd img {
width: 650px;
height: 500px;
}
#media screen and (max-width: 768px) {
header {
width: 100%;
height: 50%;
box-sizing: border-box;
border: 5px solid yellow;
}
.background {
width: 100%;
}
header .imgboxd img {
width: 100px;
height: 100px;
}
.boxss {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 30%;
border: 2px solid red;
}
}
I don't know why css-mediaquery does't working.
.imgbox tag doesn't work only in (max-width: 768px)
I know that under line code work in prority.
What should I do?
1.
I input img tag(html tag) in imgboxd(html tag)
2.
use imgboxd only,
input img link in imgboxd (css)
But, 2 kinds method does not working
Use the same selector in your media query
I noticed you didn't use the same CSS selector for the image inside your media query.
What you wrote outside the media query was this:
header .background .imgboxd img
In your media query in the question you have this:
header .imgboxd img
But you have to use the same selector both times.
Also see CSS Specificity
See working snippet below:
* {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 750px;
background-color: #0D1430;
position: absolute;
}
.logo {
width: 54px;
height: 68px;
background: url("https://picsum.photos/54/68") no-repeat center/cover;
margin: 60px auto 20px;
}
header .background .imgboxd {
text-align: center;
}
header .background .imgboxd img {
width: 650px;
height: 500px;
}
#media screen and (max-width: 768px) {
header {
width: 100%;
height: 50%;
box-sizing: border-box;
border: 5px solid yellow;
}
.background {
width: 100%;
}
header .background .imgboxd img {
width: 100px;
height: 100px;
}
.boxss {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 30%;
border: 2px solid red;
}
}
<!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">
<title>Document</title>
</head>
<body>
<header>
<div class="background">
<div class="logo"></div>
<div class="imgboxd">
<img src="https://picsum.photos/seed/so/1200/960" alt="">
</div>
<div class="boxss">Example text</div>
</div>
</header>
</body>
</html>
I am working on a school project, and i need to place 4 buttons in the 4 quadrants of the screen. However, the first button has a little gap between it and the top of the screen as well as the side.
Code:
game.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Game</title>
<link rel="stylesheet" href="css/game.css">
</head>
<body>
<div id="container">
<button class="button">A</button>
<button class="button">B</button>
<button class="button">C</button>
<button class="button">D</button>
</div>
</body>
</html>
game.css
body {
background-color: black;
overflow: hidden;
position: fixed;
}
h1, h2 {
color: white;
font-family: Ubuntu Mono;
}
#container {
width: 100%;
min-height: 100%;
height: 100%;
}
.button {
border: none;
color: white;
width: 50%;
height: 50vh;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Ubuntu Mono;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
position: fixed;
}
.button: nth-child(1) {
background-color: #bf0000;
top: 0;
left: 0;
}
.button:nth-child(2) {
background-color: #001fbf;
top: 0;
right: 0;
}
.button:nth-child(3) {
background-color: #e6c52d;
bottom: 0;
left: 0;
}
.button:nth-child(4) {
background-color: #1fbf1f;
bottom: 0;
right: 0;
}
However, i get the output shown here:
How can I remove the gap at the first button?
(and if you want, help me with the color :D)
Any help is appreciated! :D
It's a typo within CSS.
.button:nth-child(1) {
background-color: #bf0000;
top: 0;
left: 0;
}
Remove the space after .button:
I would like to frame the picture in this way, but I do not know what is wrong with the code, that the bottom part of the border is thicker than the top (red border) link to the view
[1]: https://i.stack.imgur.com/quFZn.jpg
Code:
.image {
flex: 1 1 40rem;
position: relative;
&::before,
&::after {
content: '';
position: absolute;
z-index: -1;
background: $red;
height: 25rem;
width: 25rem;
}
&::before {
top: 0;
left: 0;
}
&::after {
bottom: 0;
right: 0;
}
img {
width: 100%;
padding: .5rem;
}
}
the idea here is two create two divs and put the them behind the image (responsively using position)
just change the --outside-value var for creating bigger border or smaller
with the var in * selector is equal in all two borders :)
hope this helps, good coding!
here the code
* {
--outside-value: -0.2em;
}
html,
body {
height: 100%;
}
body,
#content {
display: flex;
justify-content: center;
align-items: center;
}
#content {
position: relative;
}
#content img {
width: 50vw;
z-index: 1;
}
.border {
width: 30vw;
height: 10vh;
position: absolute;
background-color: red;
}
.border-bottom {
top: var(--outside-value);
left: var(--outside-value);
}
.border-top {
position: absolute;
bottom: var(--outside-value);
right: var(--outside-value);
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<div class="border border-top"></div>
<img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg">
<div class="border border-bottom"></div>
</div>
</body>
</html>
I have a strange behavior when I'm using a CSS table and a black layer that is with position absolute on top of the table in HTML.
When the layer is enabled, (display: block), then it's destroying the layout. But when I disable is (display: none), everything is fine.
Here is a small example (you have to change the css through the developer tools). Is there something that I forgot to set, etc?
It's not possible to use flexbox instead of the table!
html,
body {
width: 100%;
height: 100%;
}
body {
display: table;
table-layout: fixed;
}
#menu {
display: none;
background: #28292D;
width: 200px;
position: fixed;
left: -300px;
top: 0;
height: 100%;
text-align: center;
padding-left: 15px;
padding-right: 15px;
z-index: 3;
}
#blackLayer {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
height: 1265px;
display: block;
}
#sidebar {
display: table-cell;
vertical-align: top;
width: 223px;
background: #3d464d none repeat scroll 0 0;
}
#content {
display: table-cell;
vertical-align: top;
background: #f0f0f0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="menu"></div>
<div id="blackLayer"></div>
<div id="sidebar"></div>
<div id="content"></div>
</body>
</html>
Updated:
I think your markup is wrong. Wrap the #sidebar and #content in another #container and give it a display:flex; and position:absolute; and a min-height:100%;. Flex's align-items:stretch; will make your sidebar and content stretch their height to the parent height.
Try like this:
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#container {
display: flex;
width: 100%;
min-height: 100%;
position: absolute;
flex-direction: row; /* children will fall side by side like columns */
align-items: stretch; /* children will stretch to my height */
}
#menu {
display: none;
background: #28292D;
width: 200px;
position: fixed;
left: -300px;
top: 0;
height: 100%;
text-align: center;
padding-left: 15px;
padding-right: 15px;
z-index: 3;
}
#blackLayer {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
height: 100%;
display: block;
}
#sidebar {
width: 223px;
background: #3d464d none repeat scroll 0 0;
}
#content {
flex: 1 0; /* Now I will take remaining space left by my sister Ms. #sidebar */
background: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="menu"></div>
<div id="blackLayer"></div>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
</body>
</html>
I want to divide my page into four equal parts, each of same height and width (50-50%).
I don't want to use JavaScript. I want blocks (<div>s) to be resized automatically (and relatively) if the browser window is resized.
I have not worked with CSS for a long time. I've no idea how to handle this.
Demo at http://jsfiddle.net/CRSVU/
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
div {
width: 50%;
height: 50%;
float: left;
}
#div1 {
background: #DDD;
}
#div2 {
background: #AAA;
}
#div3 {
background: #777;
}
#div4 {
background: #444;
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
If you want to have control over where they are placed separate from source code order:
html, body { height: 100%; margin: 0; padding: 0 }
div { position: fixed; width: 50%; height: 50% }
#NW { top: 0; left: 0; background: orange }
#NE { top: 0; left: 50%; background: blue }
#SW { top: 50%; left: 0; background: green }
#SE { top: 50%; left: 50%; background: red }
<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>
<div id="SW"></div>
JSFiddle demo
Note: if you want padding on your regions, you'll need to set the box-sizing to border-box:
div {
/* ... */
padding: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
…otherwise your "50%" width and height become "50% + 2em", which will lead to visual overlaps.
Some good answers here but just adding an approach that won't be affected by borders and padding:
html, body { width: 100%; height: 100%; padding: 0; margin: 0 }
div { position: absolute; padding: 1em; border: 1px solid #000 }
#nw { background: #f09; top: 0; left: 0; right: 50%; bottom: 50% }
#ne { background: #f90; top: 0; left: 50%; right: 0; bottom: 50% }
#sw { background: #009; top: 50%; left: 0; right: 50%; bottom: 0}
#se { background: #090; top: 50%; left: 50%; right: 0; bottom: 0}
<div id="nw">test</div>
<div id="ne">test</div>
<div id="sw">test</div>
<div id="se">test</div>
I did not want to add style to <body> tag and <html> tag.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 100%;
height: 50vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 50%;
height: 100%;
}
.quodrant1{
top: 0;
left: 50vh;
background-color: red;
}
.quodrant2{
top: 0;
left: 0;
background-color: yellow;
}
.quodrant3{
top: 50vw;
left: 0;
background-color: blue;
}
.quodrant4{
top: 50vw;
left: 50vh;
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Or making it looks nicer.
.quodrant{
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.qtop,
.qbottom{
width: 96%;
height: 46vh;
}
.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
display: inline;
float: left;
width: 46%;
height: 96%;
border-radius: 30px;
margin: 2%;
}
.quodrant1{
background-color: #948be5;
}
.quodrant2{
background-color: #22e235;
}
.quodrant3{
background-color: #086e75;
}
.quodrant4{
background-color: #7cf5f9;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>
<div class='quodrant'>
<div class='qtop'>
<div class='quodrant1'></div>
<div class='quodrant2'></div>
</div>
<div class='qbottom'>
<div class='quodrant3'></div>
<div class='quodrant4'></div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Similar to other posts, but with an important distinction to make this work inside a div. The simpler answers aren't very copy-paste-able because they directly modify div or draw over the entire page.
The key here is that the containing div dividedbox has relative positioning, allowing it to sit nicely in your document with the other elements, while the quarters within have absolute positioning, giving you vertical/horizontal control inside the containing div.
As a bonus, text is responsively centered in the quarters.
HTML:
<head>
<meta charset="utf-8">
<title>Box model</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">Title Bar</h1>
<div id="dividedbox">
<div class="quarter" id="NW">
<p>NW</p>
</div>
<div class="quarter" id="NE">
<p>NE</p>
</div>
<div class="quarter" id="SE">
<p>SE</p>
</div>
<div class="quarter" id="SW">
<p>SW</p>
</div>
</div>
</body>
</html>
CSS:
html, body { height:95%;} /* Important to make sure your divs have room to grow in the document */
#title { background: lightgreen}
#dividedbox { position: relative; width:100%; height:95%} /* for div growth */
.quarter {position: absolute; width:50%; height:50%; /* gives quarters their size */
display: flex; justify-content: center; align-items: center;} /* centers text */
#NW { top:0; left:0; background:orange; }
#NE { top:0; left:50%; background:lightblue; }
#SW { top:50%; left:0; background:green; }
#SE { top:50%; left:50%; background:red; }
http://jsfiddle.net/og0j2d3v/
try this... obviously you need to set each div to 25%. You then will need to add your content as needed :) Hope that helps.
body {
margin: 0;
padding: 0;
height: 100%;
}
#top_div {
height: 25%;
width: 100%;
background-color: #009900;
margin: auto;
text-align: center;
}
#mid1_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#mid2_div {
height: 25%;
width: 100%;
background-color: #000000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
#bottom_div {
height: 25%;
width: 100%;
background-color: #990000;
margin: auto;
text-align: center;
color: #FFFFFF;
}
<div id="top_div">Top- height is 25% of window height</div>
<div id="mid1_div">Middle 1 - height is 25% of window height</div>
<div id="mid2_div">Middle 2 - height is 25% of window height</div>
<div id="bottom_div">Bottom - height is 25% of window height</div>