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>
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'm developing a mobile HTML web page. One of the first tags on the HTML is:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
When I examine this page on Chrome developer tools it looks just right, as I'm using mostly relative dimensions, however on the mobile device itself it looks like the UI is as twice larger then the emulation.
This is a simplified version of the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script src="./js/jquery.js"></script>
<script src="./js/utils.js"></script>
<title>Manager View</title>
</head>
<body>
<header>
<div id="burger"><img src="img/burger.png"></div>
<div id="title">Page Title</div>
<div id="logo"><img src="img/logo.jpg"></div>
</header>
<div id="main">
<table>
<tr>
<td><img src="img/icon1.png"></td>
<td><img src="img/icon2.png"></td>
</tr>
<tr>
<td><img src="img/icon3.png"></td>
<td><img src="img/icon4.png"></td>
</tr>
</table>
</div>
</body>
</html>
That's my CSS:
body{
display: flex;
flex-flow: column;
height: 100%;
overflow: hidden;
}
header {
background-color: #3465A9;
height: 7vh;
min-height: 100px;
display: flex;
flex-direction: row-reverse;
width: 100%;
color: white;
font-family: Arial;
font-size: 50pt;
min-width: 800px;
padding-bottom: 10px;
}
header #title{
line-height: 7vh;
padding-right: 50px;
}
header #burger{
height: 7vh;
min-height: 100px;
width: 7vh;
min-width: 100px;
position: relative;
}
header #burger img{
height: 80%;
min-height: 80px;
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
header #logo{
height: 7vh;
min-height: 100px;
width: 7vh;
min-width: 200px;
position: absolute;
left: 0px;
}
header #logo img{
height: 80%;
min-height: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#main{
background: url("../img/bg.jpg");
}
#main table{
width: 80%;
table-layout:fixed;
min-width: 800px;
margin: auto;
margin-top: 20%;
}
table td{
width: 50%;
}
td img{
transform: translate(-10%, 0%);
}
Is there any way to see the actual size on Chrome Dev Tools? And how can I make sure it displays on the right size on the mobile device?
Thanks
Hi there I'm having some trouble with some code for school. I need to get my webpage to adjust as I adjust the internet explorer window, any help is very appreciated and all of my code is posted below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cycling Tours</title>
<link rel="stylesheet" type="text/css" href="Cstyles.css">
</head>
<body>
<article id="HeadContent>
<header id="Head">
<h1 id="CycleTours">Cycle Tours</h1>
<figure>
<img id="BikeAxle" src="images/bicycle_axle.jpg" alt="bikeaxle"/>
<img id="BikeBanner" src="images/bicycle_banner.jpg" alt="bikebanner"/>
</figure>
</header>
</article>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#Head {
background-color: #C0C0C0;
height: 600px;
width: 80%;
margin-left: 10.5%;
}
#BikeBanner {
position: absolute;
width: 70%;
margin-top: -4%;
height: 300px;
margin-left: 2.2%;
}
#CycleTours {
position: fixed;
margin-top: 7%;
color: white;
margin-left: 50%;
z-index: 1;
}
#HeadContent {
margin-left: 12%;
margin-right: 12%;
}
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>