I want to add a z-index of 1 on individual divs, buttons, and h1 that are underneath an overlay. I'm trying to make it similar to the chrome developer tools :hover feature. In Dev Tools, when you hover over an individual element, it highlights, however in my case, I'd like it to come above the overlay. In dev tools, you can highlight a child div without it's parent highlighting, and that's what I'm looking to do too.
I've tried messing with opacity, but when it has a nested div, the nested div gets double the opacity and I don't want that. Here's the codepen and the code...
http://codepen.io/jareko999/pen/wWGpwz
HTML
<div class="cover">
</div>
<h1 class="title">Here's your website</h1>
<div class="container">
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
<div class="box">
<button>The Button</button>
</div>
</div>
CSS
body {
margin: 0;
width: 100%;
height: 100%;
}
.cover {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: rgba(0,0,0,.4);
z-index: 1;
}
.title {
text-align: center;
width: 60%;
margin: 40px auto;
}
.container {
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
width: 300px;
height: 200px;
margin: 10px;
background: url("https://static.pexels.com/photos/38155/pexels-photo-38155.jpeg") center center no-repeat;
background-size: cover;
display: flex;
}
button {
-webkit-appearance: none;
border: none;
box-shadow: none;
background: #276cd6;
color: white;
font-weight: 600;
font-size: .8em;
padding: 16px 24px;
border-radius: 10px;
margin: auto;
}
Related
I'm trying to create a design using multiple divs using CSS.
I'm already written code for it but don't know what is the problem with my code as my left and right side div not aligning at vertically center and all the divs are not overlapped with main yellow centered div which is I'm unable to achieve.
Note: I tried this with z-index but did not get what I want.
Output I'm getting:
Output I want to achieve:
My code :
<!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></title>
</head>
<style>
.maind {
margin: 0px auto;
width: 90%;
padding: 10px;
height: 900px;
background-color: rgb(9, 252, 9);
position: relative;
}
.fdiv {
margin: auto;
width: 25%;
padding: 10px;
height: 100px;
background-color: rgb(10, 233, 222);
margin-top: 30px;
border: 2px solid red;
}
.sdiv {
width: 55%;
height: 600px;
background-color: #ffff00ec;
}
.tdiv {
margin: auto;
width: 25%;
padding: 10px;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
}
p {
text-align: center;
}
.wrap {
display: flex;
flex-direction: row;
}
.wr1 {
width: 25%;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
}
</style>
<body>
<div class="maind">
<div class="fdiv">
<p>Some content here...</p>
</div>
<div class="wrap">
<div class="wr1">
<p>Some content here..</p>
</div>
<div class="sdiv">
<p>Some content here..</p>
</div>
<div class="wr1">
Some content here...
</div>
</div>
<div class="tdiv">
<p>Some content here..</p>
</div>
</div>
</body>
</html>
Please somebody help me with the Source Code I tried almost all the related answer.
You can use Flexbox or Positioning.
Using Positioning makes it more flexible to add content to the holder element.
While Flexbox is more flexible when it's about adding and aligning boxes.
# Positioning
Description:
Create 4 elements to be the boxes.
Each .box has it's direction.
Example: <div class="box top"></div>.
Wrap all of them in div.boxes. This way you can separate the .boxes from the content (if there) in the holder,
<div class="boxes">
<div class="box top"></div>
<div class="box right"></div>
<div class="box left"></div>
<div class="box bottom"></div>
</div>
Style the the position of .wrapper so all the positioned absolute elements stays in the .wrapper.
.wrapper {position: relative;}
Finally, set the position of each box:
Example:
.box.top {
top: 0;
left: 50%;
transform: translateX(-50%);
margin-top: -40px;
}
Notes:
Don't use:
left property on .box.right.
top property on .box.bottom.
It won't set the negative margin which pushes them to edges.
In case content added to the holder (.wrapper), wrap the content in div.content and add inner space using padding. The value of padding in the code example is 40px, which it's related to the .boxes dimenstions.
The space (padding) is added to prevent overflow between content and .boxeses. And we can go further with styling the .boxes with overflow and z-index property.
For more about using negative maring and the boxes dimenstions:
Check for Notes in Flexbox
The Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
width: 600px;
height: 600px;
border: 1px solid;
margin: 50px auto;
}
.box {
position: absolute;
border: 1px solid;
background-color: red;
}
.box.top, .box.bottom {
width: 200px;
height: 80px;
}
.box.left, .box.right {
width: 80px;
height: 200px;
}
.box.top {
top: 0;
left: 50%;
transform: translateX(-50%);
margin-top: -40px;
}
.box.bottom {
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin-bottom: -40px;
}
.box.left {
top: 50%;
left: 0;
transform: translateY(-50%);
margin-left: -40px;
}
.box.right {
right: 0;
top: 50%;
transform: translateY(-50%);
margin-right: -40px;
}
.content {
padding: 40px; /* check notes */
}
<div class="wrapper">
<div class="boxes">
<div class="box top"></div>
<div class="box right"></div>
<div class="box left"></div>
<div class="box bottom"></div>
</div>
<div class="content">
<h1>Hello World!</h1>
</div>
</div>
# Flexbox
Description:
Create 3 elements to hold the .boxes.
top: holding top box
center: holding left and right boxes
bottom: holding bottom box
In other words:
Each .box is nested (a child) in a div that has the class of the direction.
Example: <div class="top">BOX</div>.
Left and right are nested in center.
HTML:
<!-- top box -->
<div class="top">
<div class="box"></div>
</div>
<!-- left, right boxes -->
<div class="center">
<div class="left">
<div class="box"></div>
</div>
<div class="right">
<div class="box"></div>
</div>
</div>
<!-- bottom box -->
<div class="bottom">
<div class="box"></div>
</div>
Wrap all of them in a div.wrapper:
<div class="wrapper">
<!-- top box -->
<div class="top"></div>
<!-- left, right boxes -->
<div class="center"></div>
<!-- bottom box -->
<div class="bottom"></div>
</div>
The lines below will style the 3 elements and set them to their positions, .top will be centered (left right) and on top, .center will be centered from all the directions, .bottom is centered (left right) and at the bottom, by displaying the .wrapper children horizontally (flex-direction: column;) and centered (align-items: center;) with (space-between) them, using flex.
Check: A Complete Guide to Flexbox
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
Then we do something similar with the .center element, by displaying both of left and right next to each other, centered and space-between them.
(No flex-direction property in the declaration, since the default is in a row (vertically))
.wrapper .center {
width: 100%; /* Don't delete, check notes */
display: flex;
justify-content: space-between;
align-items: center;
}
And finally, with negative margin we move the boxes to the edges.
.top .box {
margin-top: -40px;
}
.bottom .box {
margin-bottom: -40px;
}
.center .left .box {
margin-left: -40px;
}
.center .right .box {
margin-right: -40px;
}
Notes:
The left and right boxes are (width: 80px), each, which means the margin should be -40px (80 / 2 = 40) to set on center.
left: margin-left: -40px
right: margin-right: -40px
Same for top and bottom, since the dimensions are flipped.
top: margin-top: -40px
bottom: margin-bottom: -40px
This way, all the boxes are gonna be centered at the edges.
By default, when displaying with flexbox, the parent(.center) will take the width of it's content/children (fitted)! which means, width: 40px * 2, since we have 2 boxes in there. Now to make sure that the space-between value works, we should "stretch" the .center element (parent) by styling it's width to 100% which allows to the boxes to have as much as space-between, then every box is gonna be on it's position.
.wrapper .center {
width: 100%; /* Don't delete, check notes */
}
The Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
border: 1px solid;
max-width: 600px;
min-height: 600px;
margin: 60px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.box {
border: 1px solid;
background-color: red;
}
.wrapper .top .box,
.wrapper .bottom .box {
width: 200px;
height: 80px;
}
.wrapper .center .box {
width: 80px;
height: 200px;
}
.top .box {
margin-top: -40px;
}
.bottom .box {
margin-bottom:-40px;
}
.wrapper .center {
width: 100%; /* Don't delete, check notes */
display: flex;
justify-content: space-between;
align-items: center;
}
.center .left .box {
margin-left: -40px;
}
.center .right .box {
margin-right: -40px;
}
<div class="wrapper">
<div class="top">
<div class="box"></div>
</div>
<div class="center">
<div class="left">
<div class="box"></div>
</div>
<div class="right">
<div class="box"></div>
</div>
</div>
<div class="bottom">
<div class="box"></div>
</div>
</div>
EDIT:
As #anatolhiman mentioned in the comments:
but negative margins will create a problem by having the elements
overflowing right and left (especially on narrow screens).
A simple solution:
(same works for both examples)
wrap the HTML that we added before in another div, .container for example, and add spacing with CSS, either padding or margin works, depends on your situation.
So the question is...
Is it a space within the .container? --> padding.
Or outside of it? --> margin.
Give the .container a background-color, resize the window, and check both margin and padding to see the differences.
HTML - Update:
<div class="container">
<div class="wrapper">
</div>
</div>
CSS - Add:
/* outside space */
.container {margin: 50px;}
/* Or */
/* inside space */
.container {padding: 50px;}
You may have to edit the margin property in .wrapper for top bottom.
Extra space added (50px) to include spaces for the .boxes as well.
Remember: .wrapper{max-width: VALUE} is taking a place in this functionality, since it's max-width is X but it could be smaller. So if the property is width: and not max-width then it'll behave differently, and won't work as expected (fully responsive), unless we use #media query or JavaScript.
Maybe something like following snippet, with absolute positioning:
.maind {
margin: 0px auto;
width: 90%;
padding: 10px;
height: 900px;
background-color: rgb(9, 252, 9);
position: relative;
}
.fdiv {
margin: auto;
width: 25%;
padding: 10px;
height: 100px;
background-color: rgb(10, 233, 222);
margin-top: 30px;
border: 2px solid red;
position: absolute;
top: 0;
left: 35%;
z-index: 22;
}
.sdiv {
width: 80%;
position: absolute;
top: 10%;
left: 10%;
height: 600px;
background-color: #ffff00ec;
z-index: 12;
margin: 0 auto;
}
.tdiv {
margin: auto;
width: 25%;
padding: 10px;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
position: absolute;
bottom: 20%;
left: 35%;
z-index: 22;
}
p {
text-align: center;
}
.wrap {
display: flex;
flex-direction: row;
}
.wr1 {
width: 25%;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
position: absolute;
top: 35%;
left: 0;
z-index: 22;
}
.wr2 {
width: 25%;
height: 100px;
background-color: rgb(10, 233, 222);
border: 2px solid red;
position: absolute;
top: 35%;
right: 0;
z-index: 22;
}
<div class="maind">
<div class="fdiv">
<p>Top...</p>
</div>
<div class="wrap">
<div class="wr1">
<p>Left..</p>
</div>
<div class="sdiv">
<p>Somessss content here..</p>
</div>
<div class="wr2">
<p>Right...</p>
</div>
</div>
<div class="tdiv">
<p>Bottom..</p>
</div>
</div>
How can I hide a <div> section with JS and
<div class="alertB1">
<div class="sticky">
<h1> This site is still being built</h1>
<p> Please remember this site is still being built. Click here to report a bug
</div>
</div>
<style>
.sticky {
position: -webkit-sticky;
position: sticky;
}
.alertB1 {
width: 100%;
height: 125px;
background: lightgreen;
}
</style>
So I am looking to include a button with:
<span id="a33"><button>×</button></span>
</div>
</div>
How can I get the <span> to hide the <div> tag?
Thanks,
Ring Games
Use onclick attribute;
More info: DOM onevent handlers
.sticky {
position: -webkit-sticky;
position: sticky;
}
.alertB1 {
width: 100%;
height: 125px;
background: lightgreen;
}
<div class="alertB1">
<div class="sticky">
<h1> This site is still being built</h1>
<p> Please remember this site is still being built. Click here to report a bug </p>
<span onclick="document.getElementsByClassName('alertB1')[0].style.display = 'none'" id="a33"><button>×</button></span>
</div>
</div>
function onToggle() {
const ele = document.querySelector(".toggle-div");
ele.classList.toggle("toggle");
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.button {
position: relative;
background-color: #4caf50;
border: none;
font-size: 28px;
color: #ffffff;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.toggle-div.toggle {
visibility: hidden;
}
<body>
<button onclick="onToggle()" class="button">Click here to toggle</button>
<div class="toggle-div">
<h1>Toggle Div on click</h1>
</div>
</body>
I want 3 section one cover half part of the screen to show image slider and in half part, there is two section right now that part I'm done but now I want to add half part of the screen on top but it does not show image slider section, please help me.
right now my code:
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #ff6a00;
}
.right {
right: 0;
background-color: #ffd800;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="split left">
<div class="centered">
<h2>Blood Donor</h2>
<p>Go To Registration</p>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>Blood Seeker</h2>
<p>Go To Registration</p>
</div>
</div>
</form>
</body>
please help me,
Thank You for your time.
He's a simple layout using CSS Grid (the 2D version of Flexbox):
.main {
display: inline-grid;
height: 200px;
width: 400px;
grid-template-rows: 50% 50%;
border: green solid 2px;
}
.main .level1 {
border: blue solid 2px;
display: flex;
}
.main .level1 .level2 {
border: red solid 2px;
flex-basis: 50%;
}
<div class="main">
<div class="level1"></div>
<div class="level1">
<div class="level2"></div>
<div class="level2"></div>
</div>
</div>
If you are happy using grid then is quite easy. You just need to setup a grid which with two columns and two rows.
Here is a link to a codepen, there are some other styles to make it a little easier to see what is going on but you only need to pay attention to the grid css attributes.
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
height: 50vh;
}
.container>div {
display: flex;
justify-content: center;
align-items: center;
}
.image-slider {
background: magenta;
grid-column: span 2;
}
.page-link-1 {
background: red;
}
.page-link-2 {
background: green
}
<div class="container">
<div class="image-slider">Image Slider</div>
<div class="page-link-1">Page Link 1</div>
<div class="page-link-2">Page Link 2</div>
</div>
https://codepen.io/tmcnicol/pen/PdoLpm/
My implementation with flex:
body,
html {
height: 100%;
}
.wrap {
display: flex;
height: 100%;
flex-direction: column;
}
.slider {
border: 2px solid red;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.bottom-wrap {
display: flex;
flex: 1;
}
.link {
border: 2px solid red;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrap">
<div class="slider">Image slider</div>
<div class="bottom-wrap">
<div class="link">Page Link</div>
<div class="link">Page Link</div>
</div>
</div>
Working codepen
I'm trying to mimic the following site: http://weareundefined.be/ and once you get passed the first page by clicking it on it, there is a computer and a short paragraph below it.
After analyzing the site using dev webtool, I still am not able to center the elements properly. I attempted the top: 50% with position: relative, yet it is not centered correctly.
I tried to break down to the necessary CSS, but still not able to recreate it.
Code:
<div style={{height: '100%’}}>
<div className="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
CSS (SCSS):
.container {
height: 100%;
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
top: 50%;
}
#rotate-container {
div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
}
What could I be missing or doing incorrectly? And how are they handling the resizing of elements? Any suggestions or guidance would be greatly appreciated it.
Thank you in advance and will be sure to accept and upvote answer.
You're close. both html and body need to be height: 100%;, too, otherwise it's children won't be 100% of the viewport.
.container doesn't need height: 100%;. Since you already have .container at top: 50%;, just use transform: translateY(-50%); to shift it back up 50% of it's own width so the center of it is in the center of the browser.
body, html {
height: 100%;
}
.container {
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
#rotate-container div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
<div style="height:100%;">
<div class="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
You can also use flexbox with align-items: center;
body,
html {
height: 100%;
}
.container {
position: relative;
padding: .5em;
margin: 0 auto;
max-width: 400px;
text-align: center;
}
#rotate-container div {
color: #fb3131;
font-size: 40px;
font-weight: bold;
display: block;
}
<div style="height:100%; display: flex; align-items: center;">
<div class="container">
<div id="rotate-container">
<div>
Center Me
</div>
</div>
<h1> We are undefined</h1>
<p>We're a creative agency with a focus on digital.</p>
</div>
</div>
Try:
body {
min-width: 970px;
padding-top: 70px;
padding-bottom: 30px;
}
.container {
width: 970px;
max-width: none !important;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
And adjust accordingly
I have a situation where I am loading content into a overlay window and sometimes it will have a scroll applied with overflow-y: auto; and if users scroll and then click the button again I would like the scroll to go back to the top, not where they last left it.
This works fine without using Bootstrap, but once you start using bootstrap methods to show/hide a overlay window it doesn't work.
Specifically this is what doesn't work:
$('#preview .main').scrollTop(0);
However, for whatever reason this does work:
$('#preview .main').scrollTop(1);
I have read this question but I am not using bootstrap modals, so it doesn't really apply to me; I also read this question but the accepted answer didn't work for me.
Sample code:
HTML
<section class="row collapse" id="preview">
<div class="wrapper">
<div class="side col-xs-2">
</div>
<div class="main col-xs-4">
<div class="content_wrapper">
<div class="loader">
loading...
</div>
<div class="content post">
</div>
</div>
</div>
</div>
</section>
<input type="button" id="btn" value="Click Me!" data-toggle="collapse" data-target="#preview">
<input type="button" id="hide" value="Hide Content" data-toggle="collapse" data-target="#preview">
CSS
#preview {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
z-index: 2000;
background-color: #fff;
}
#preview .wrapper {
display: table;
width: 100%;
padding: 0 !important;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #F2F2F2;
border-bottom: 1px solid #F2F2F2;
}
#preview .side {
display: table-cell;
text-align: center;
height: 200px;
padding: 10px 30px 15px 30px;
vertical-align: top;
background-color: #FAFAFA;
}
#preview .main {
display: table-cell;
height: 200px;
max-height: 200px;
padding: 10px 13px 16px 13px;
vertical-align: top;
overflow-y: auto;
}
#preview .main .content_wrapper {
padding-bottom: 32px;
line-height: 1.5;
}
#preview .main .content_wrapper .loader {
text-align: center;
}
#preview .main .content_wrapper .loader p {
margin-top: 15px;
font-weight: bold;
}
#preview .main .content_wrapper .content {
display: none;
}
#btn {
margin-top: 210px;
}
JS
$('#btn').click(function() {
var content_el = $('#preview .main .content_wrapper .content');
var loader_el = $('#preview .loader');
content_el.hide();
loader_el.show();
// Set the content
content_el.html('some content here...');
loader_el.hide();
// Show the content area
content_el.show();
// Reset the scroll position of preview window
$('#preview .main').scrollTop(0);
});
CodePen: http://codepen.io/anon/pen/rVzppz
Having to set it to 1 and not 0 isn't a big deal, so I guess just wondering why it works on 1 and not 0?