Basically, my CSS code is working for the top right and top left buttons for close and minimize but won't work for the individual mod menu options, if you run the code below you'll see the buttons working except for the ones in the bottom right panel.
In Chrome dev tools It works when setting the hover state active but that's when it only works, My mouse is not actually hovering the object. I used z-index: 255; and it still wouldn't work.
This is for a Tauri app but should still work the same as a webpage
html,body {
margin: 0;
font-family: monospace;
width: 100%;
height: 100%;
overflow: hidden;
}
#Background{
z-index: -5;
position:absolute;
width: 100%;
height: 100%;
background-color: black;
}
#titleBar{
background-color: #444;
width: 100%;
height: 32px;
float: top;
z-index: -1;
}
#mainWindow{
background-color: #555;
width:62%;
height: calc(96% - 12px);
top: 12px;
margin-left: -12px;
position: absolute;
border-radius: 8px;
z-index: -1;
border-radius: 8px;
}
#modsWindow{
background-color: #555;
width: 40%;
height: calc(96% - 12px);
position: absolute;
left: 62%;
top: 12px;
margin-left: 1.5px;
z-index: -1;
}
#titleBar #close{
margin-right: 0 !important;
}
#titleBar #folder{
float: left !important;
}
#titleBar #title{
width: 50%;
height: 100%;
color: white;
background-color: transparent;
position: relative;
left: 25%;
text-align: center;
font-weight: bold;
user-select: none;
font-size: 2.1em;
}
#titleBar .button{
width: 32px;
height: 32px;
float: right;
border: none;
background-color: #333;
color: white;
transition: all 0.25s;
}
#titleBar .button:hover{
background-color: #555;
}
/* Mod Tab */
#modsWindow *{
width: 100%;
height: 5%;
color: white;
text-align: center;
font-size: auto;
word-wrap: break-word;
overflow: hidden;
font-size: 0.75em;
font-weight: bold;
background-color: transparent;
transition: all 0.25s;
border: none;
}
#modsWindow .ACTIVE{
color: green !important;
}
#modsWindow .INACTIVE{
color: red !important;
}
#modsWindow .ACTIVE:hover, #modsWindow .INACTIVE:hover{
background-color: #222;
color: white !important;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="index.css">
<script type="module" src="index.js"></script>
<body>
<div data-tauri-drag-region id="titleBar">
<!-- Close,Minimize, Title & File Buttons-->
<button id="close" class="button">X</button>
<button id="minimize" class="button">-</button>
<button id="folder" class="button">F</button>
<div data-tauri-drag-region id="title">DBFZ Mod Manager</div>
<!-- <div id="title">DBFZ Mod Manager</div> -->
</div>
<div id="Background">
<div id="mainWindow">
</div>
<div id="modsWindow">
<button id="modName" class="ACTIVE">MODNAME [ACTIVE]</button>
<button id="modName" class="INACTIVE">MODNAME [INACTIVE]</button>
</div>
</body>
</html>
In css when you want to hover a child, parent z-index should not be negative
Your problem is here :
#Background{
z-index: -5;
}
change it to
#Background{
z-index: 1;
}
Related
So I am trying to write a script to add a whole, newly added, section to Adobe Analytics. I am not sure I can do it though, so I will appreciate your help. I thought I should add a class name to the section and use document.getElementsbyClassName but it does not seem to work? I also need to add the nested divs and their styles again using JS?
Here is my code:
<section class="flex-columns" style="
background-color: crimson;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
">
<div style="
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
">
<p style="
top: 187px;
left: 391px;
width: 31px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
opacity: 1;
margin-top: 65px;
margin-left: 30px;
color: black;
border-style: solid;
border-color: black;
">1</p>
<p style="
top: 326px;
left: 391px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
">Find your nearest store</p>
</div>
<div style="
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
">
<p style="
top: 187px;
left: 811px;
width: 66px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
color: black;
opacity: 1;
margin-top: 65px;
margin-left: 30px;
">2</p>
<p style="
top: 326px;
left: 811px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
">Book a free hearing test</p>
</div>
<div style="
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
">
<p style="
top: 187px;
left: 1231px;
width: 68px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
color: black;
border: 2px;
border-color: black;
margin-top: 65px;
margin-left: 30px;
">3</p>
<p style="
top: 326px;
left: 1231px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
/* margin-bottom: 0px; */
">Get supported by our experts</p>
</div>
</section>
Since the post editing queue is full, I am sharing the current work in this area again. Could you explain the problem more clearly?
/* I don't understand what the problem is and what you want to do! */
.section-style {
background-color: crimson;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
}
/* Common */
.columns {
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
}
.titles{
top: 187px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
margin-top: 65px;
margin-left: 30px;
color: black;
}
.contents{
top: 326px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
}
/* Titles */
.title-first {
left: 391px;
width: 31px;
opacity: 1;
border-style: solid;
border-color: black;
}
.title-second {
left: 811px;
width: 66px;
opacity: 1;
}
.title-thirth {
left: 1231px;
width: 68px;
border: 2px;
border-color: black;
}
/* Contents */
.content-first {
left: 391px;
height: 152px;
}
.content-second {
left: 811px;
}
.content-thirth {
left: 1231px;
/* margin-bottom: 0px; */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Application</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="flex-columns section-style">
<div class="columns">
<p class="titles title-first">1</p>
<p class="contents content-first">Find your nearest store</p>
</div>
<div class="columns">
<p class="titles title-second">2</p>
<p class="contents content-second">Book a free hearing test</p>
</div>
<div class="columns">
<p class="titles title-thirth">3</p>
<p class="contents content-thirth">Get supported by our experts</p>
</div>
</section>
</body>
</html>
I am trying to load my HTML page into a container. However, when I try to load the HTML page, the container doesn't re-adjust its size to accommodate the Page. The contents of my page are still visible but they look like they are overflowing without the background of the container. I am new to WebDev and have no idea about this.
I have three containers. Container Big holds other two containers. ContainerMain holds navigation bar in it and I load page into containerPage whenever someone clicks the nav bar. I want containerMain and ContainerPage to look like a scrollable continous box at the center of container Big with some top and bottom margins but, whenever I load the page into containerPage, it fails to resize itself for the page (in this case, homepage).
<div id="ContainerBig">
<div id="ContainerMain"></div>
<div id="containerPage"></div>
</div>
Here is css for my containers:
#ContainerBig {
left: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
position: absolute;
}
#ContainerMain {
top:10%;
left: 10%;
right: 10%;
width: 80%;
height: 10%;
max-height: 77px;
border-radius: 5px;
position: absolute;
background-color: #262523;
border: 1px solid #111;
}
#containerPage {
top: min(20%,160px);
left: 10%;
right: 10%;
width: 80%;
height: auto;
padding-bottom: 5%;
margin-bottom: 10%;
display: block;
overflow: auto;
position: absolute;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
And I'm trying to load the following webpage:
// Just in case you need it, the code I'm using to load the page is:
function changePage(page, context) {
$(".navItem").removeClass("active");
$(context).addClass("active");
var contain = $("#containerPage");
contain.slideUp("10ms", "linear", function change() {
contain.load(page);
contain.slideDown("10ms");
});
if ($(window).width() < 1126) {
var element = document.getElementById("nav");
element.style.display = "none";
}
}
body {
font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #777;
font-size: 13px;
}
#vertical_line {
position: absolute;
left: 69%;
bottom: 12%;
top: 12%;
border-left: 1px solid #c1c1c1;
}
.pic_owner {
top: 15%;
left: 3%;
width: 25%;
height: auto;
position: absolute;
border: white 10px solid;
border-radius: 10px;
}
.description_owner {
display: block;
position: absolute;
top: 8%;
left: 34%;
width: 33%;
line-height: 21px;
}
#more {
display: block;
font-weight: 400;
}
#heading {
color: #333;
font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 40px;
}
.social {
position: absolute;
top: 8%;
left: 72%;
right: 6%;
line-height: 21px;
}
.socialButton {
-webkit-appearance: button;
top: 10px;
width: 90%;
padding: 6%;
position: relative;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
text-align: center;
text-decoration: none;
margin-bottom: 5px;
}
.fa:hover {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
opacity: 0.9;
}
.fa-instagram {
background: #E1306C;
}
.fa-linkedin {
background: #007bb5;
}
.fa-facebook {
background: #3B5998;
}
.fa-github {
background: #141414;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styleSheets/styleHomePage.css"/>
<script type="text/javascript" src="jss/homepage.js"></script>
</head>
<body>
<div id="content">
<img class="pic_owner" src="Resources/picture_aayush.jpg">
</img>
<div class="description_owner">
<h1 id="heading">DEVELOPER</h1>
<p><strong id="desc_detail">Loading.....</strong></p>
<p id="more">Loading....</p>
</div>
<span id="vertical_line"></span>
<div class="social">
<p id="addition"></p>
 
<a href="" class="socialButton fa fa-linkedin"
type="button">  Aayush Singla</a>
 
</div>
</div>
</body>
</html>
Please bare with me if this is a simple question. I am stuck on this from kinda week now.
update:
It looks to me like if you want both the header and the page content to scroll together, you need a container element with overflow: auto on it.
<!-- HTML -->
<div id="ContainerBig">
<div id="Container">
<div id="ContainerMain"></div>
<div id="containerPage"></div>
</div>
</div>
//CSS
#ContainerBig {
left: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
position: absolute;
}
#Container {
position: absolute;
top:10%;
left: 10%;
right: 10%;
width: 80%;
height: 80%;
overflow: auto;
}
#ContainerMain {
height: 10%;
max-height: 77px;
border-radius: 5px;
background-color: #262523;
border: 1px solid #111;
}
#containerPage {
height: auto;
padding-bottom: 5%;
margin-bottom: 10%;
display: block;
overflow: auto;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
Here's a working pen: https://codepen.io/jacob_124/pen/ZEQoBxE?editors=1100
Note: It's a bad idea to rely on position absolute for layouts. Especially for when you don't have to. This layout could be easily accomplished with relative positioning.
Here's a pen with position relative: https://codepen.io/jacob_124/pen/BajxQbv
I have simple HTML 5 video player, I have a function which opens a pop up when the current time is 0:07s, unfortunately, the pop on a small device flow out of a div.
Problem in graphic:
I want the popup to be centered in inside a video player in all devices like this.
Here is Plunker of what I am trying to do: HTML 5 Video Player
Here is HTML
<div class="video-container">
<div class="box1"></div>
<div class="box2"></div>
<video id="video1" class="video-js vjs-default-skin" controls autoplay="true">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="lightbox popUpQuestion1">
<div class="row row-no-padding">
<div class="product-left-col">
<div class="product-main-pic">
<div id="imgContent">
<!-- Sinon si pas de coloris et pas de default Sku
-> Affiche le premier SKU. -->
<img id="popinMainPic" src="http://www.sephora.pl/media/catalog_ProductCatalog/m11470681_P2264_princ_medium.jpg">
</div>
</div>
</div>
<div class="product-right-col">
<div class="prodcut-title">
<H1>Rose Deep Hydration Moisturizer</h1>
</div>
<div class="description-text">
An ultra-hydrating gel cream powered
by hyaluronic acid and time-release
technology for petal-soft skin.
</div>
<div class="product-price">
<span>299,00 zł</span>
</div>
<a target="_blank" href="http://www.sephora.pl/Makijaz/Oczy/Kredki-do-oczu-i-khol/Mini-kredka-do-powiek/P2255003?skuId=315720">
<div class="buy-button animates-in show">KUP TERAZ </div>
</a>
</div>
</div>
</div>
</div> <!-- End of Container -->
Here is css I have so far
body{
background-color: #f0f0f0;
overflow-x: hidden;
margin: 0em 0em;
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
font-weight: bold;
}
p{
margin: 0;
}
a{
text-decoration: none;
}
video{
width: 1266px;
height: 100%;
left: 0px;
top: 0px;
margin-left: 0px;
margin-top: 0px;
}
img{
float: left;
margin-right: 25px;
}
.container{
width: 100%;
margin: 0px auto;
overflow: hidden;
margin-top: 50px;
}
.descArea{
background-color: #fff;
box-shadow: 0 0 3px #c8c8c8;
padding: 15px;
box-sizing: border-box;
}
/* .videoArea{
position: relative;
} */
.video-container{
position: relative;
height: 100%;
width: 100%;
background-color: #000;
margin:0 auto;
}
.box1{
position: absolute;
background-color: rgba(40, 169, 220, 0);
width: 200px;
height: 200px;
top: 50px;
left: 630px;
cursor: pointer;
}
.box2{
position: absolute;
background-color: rgba(207, 50, 53, 0);
width: 200px;
height: 200px;
top: 70px;
left: 150px;
cursor: pointer;
}
.lightbox{
display: none;
}
.longBtns{
display: block;
}
.buy-button {
background-color: #555;
color: #fff;
font-size: 2em;
cursor: pointer;
width: 182px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
/* right: 10px; */
/* bottom: 41px; */
}
.product-modal{
background-color: #f5f5f5;
font-size: 1.2em;
width: 65em;
height: 46.3em;
}
.row-no-padding{
display: flex;
}
.sku-label-brand{
font-family: georgia;
letter-spacing: .2em;
}
.description-text {
margin-top: 1%;
line-height: 1.4;
/* font-size: 1.7em; */
/* width: 50%; */
font-size: 24.444px;
font-family: "Century Gothic";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
margin-bottom: 60px;
}
.product-right-col{
width: 60%;
}
.product-left-col{
width: 50%;
margin-right: 45px;
}
#popinMainPic{
width: 100%;
height: 100%;
}
.sku-link{
margin-bottom: 20px;
}
.product-price{
margin-bottom: 20px;
font-size: 36px;
font-family: "Century Gothic";
color: rgb(0, 0, 0);
font-weight: bold;
line-height: 1.2;
text-align: left;
}
.prodcut-title > h1{
font-size: 30.556px;
font-family: "Century Gothic";
color: rgb(0, 0, 0);
font-weight: bold;
line-height: 1.2;
text-align: left;
margin-bottom: 14px
}
.vjs-marker{
width: 6px !important;
border-radius: 30%;
background-color: white !important;
margin-left: -3.5px;
left: 29.2002%;
height: 6px !important;
border-radius: 100px !important;
bottom: 11px;
-webkit-border-radius: 100px !important;
-moz-border-radius: 100px !important;
-ms-border-radius: 100px !important;
-o-border-radius: 100px !important;
}
.video-js .vjs-big-play-button {
display: none !important;
}
.vjs-has-started .vjs-control-bar {
background: linear-gradient(to bottom,rgba(0,0,0,.1) 0,rgba(0,0,0,.69) 99%,rgba(0,0,0,.7) 100%);
}
.video-js{
width: 100% !important;
}
.video1-dimensions {
height: 100% !important;
width: 100% !important;
}
.featherlight .featherlight-content{
transform: scale(0.7);
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
}
I have tried to add overflow:hidden to parent div still the same.
What is wrong with my code? any idea or help will be apreciated.
featherlight basically provides you a window sized popup that has position: fixed and is set to be placed at center horizontally and vertically. If you look at the CSS of featherlight, then you'll see it has top: 0; bottom: 0; left: 0; right: 0;. This is the intended behaviour of this plugin.
Moreover, the way this plugin works is by cloning your modal content to its own div and then displaying it. Hence giving you little less control over its positioning.
To override this behaviour, you need to manually calculate top, left and height of the video and then apply this to .featherlight by javascript. This would force the featherlight modal to be displayed over the video only irrespective of the the device width/height.
Hope this helps.
I am currently studying front - end web development and I am at the stage where I am building projects for my portfolio.
I am currently working on a TO DO list website, I have coded most of the functionality however I am struggling with the CSS aspect.
If you can give a newbie developer some feedback on the code below I would really appreciate it.
So what I am asking for today;
I want to position an icon over the border of the text just like this:
I want to achieve this
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Your To Do List</title>
</head>
<body>
<!--ICON LINK
<i id="addItem" class="fas fa-plus-circle"></i>
-->
<h1>Your todo list</h1>
<div id="item-list">
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkMark"></span>
</label>
</div>
<script src="js/script.js"></script>
</body>
</html>
My JS:
var toDoItems = [];
var userInput;
var checkBox;
document.getElementById("addItem").onclick = function (){
userInput = prompt("Enter your Todo: ")
toDoItems.push(userInput);
stylePara();
document.getElementById("item-list").insertAdjacentHTML('beforeend', stylePara());
}
function stylePara(){
var html = '';
html += '<label class="container">';
html += '<input type="checkBox">';
html += '<span class="checkMark"></span>';
html += '<span class="checkLabel">' + userInput + '</span>';
html += '</label>';
return html;
}
My CSS:
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: white;
}
h1{
text-align: center;
font-family: 'Roboto Slab', serif;
margin-top: 50px;
color: black;
margin-bottom: 35px;
text-decoration: underline;
}
h4{
text-align: center;
margin-top: 20px;
}
item-list {
width: 100%;
margin-left: 50%;
background-color: red;
display: inline-block;
}
.container {
width: 100%;
margin-left: 40%;
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input{
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkMark {
position: absolute;
top: -5px;
left: 0;
height: 35px;
width: 35px;
background-color: black;
}
.container input:checked~.checkMark{
background-color: darkgreen;
}
.checkLabel {
background: white;
margin-left: 20px;
color: white;
padding: 5px 20pxl
}
.container input:checked~.checkLabel{
text-decoration: line-through;
background: green;
color: blue;
padding: 5px 20px;
}
.checkMark:after{
content: "";
position: absolute;
display: none;
}
.container input:checked~.checkMark:after{
display: block;
top: 10px;
left: 15px;
}
.container .checkMark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
You can use absolute positioning:
.your-class {
position: absolute;
top: 10px; /* space from top */
right: 10px; /* space from right */
}
For your puropses the top and right are:
Remember to give parent element:
.position:relative;
Then your absolute positioning will be to the container that has position:relative not to the whole page. Example code: https://jsfiddle.net/2vaphyq3/12/
Edit:
But maybe cleaner way will be to use pseudo element like :after
Something in this manner should work. Added to your existing code.
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: white;
}
h1{
text-align: left;
font-family: 'Roboto Slab', serif;
margin-top: 50px;
padding: 10px;
color: black;
margin-bottom: 35px;
}
h4{
text-align: center;
margin-top: 20px;
}
item-list {
width: 100%;
margin-left: 50%;
background-color: red;
display: inline-block;
}
.container {
width: 100%;
margin-left: 40%;
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input{
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkMark {
position: absolute;
top: -5px;
left: 0;
height: 35px;
width: 35px;
background-color: black;
}
.container input:checked~.checkMark{
background-color: darkgreen;
}
.checkLabel {
background: white;
margin-left: 20px;
color: white;
padding: 5px 20pxl
}
.container input:checked~.checkLabel{
text-decoration: line-through;
background: green;
color: blue;
padding: 5px 20px;
}
.checkMark:after{
content: "";
position: absolute;
display: none;
}
.container input:checked~.checkMark:after{
display: block;
top: 10px;
left: 15px;
}
.container .checkMark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*Added This*/
.wholeItem {
width: 400px;
height: auto;
}
h1.todoL{
position: relative;
background: #c7c9d6;
border-bottom: 1px solid #999;
}
.todoI {
position: absolute;
right: 25%;
bottom: -25px;
width: 50px;
height: 50px;
background: #da5048;
border-radius: 50%;
color: #fff;
line-height: 50px;
text-align: center;
font-weight: light;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Your To Do List</title>
</head>
<body>
<!--ICON LINK
<i id="addItem" class="fas fa-plus-circle"></i>
-->
<div class="wholeItem">
<h1 class='todoL'>Your todo list<div class="todoI">+</div></h1>
<div id="item-list">
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkMark"></span>
</label>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
So I need some help with overlapping content on page when a button is being pressed. Right now I have a function for an active button which helps me with opening a div(div panel) and closing it. I just want to know how you would go about making this div panel stetch across the page, when the button is being pressed.
I made it work with the overlap with a function by making my container active but I realised that it was completely wrong and had to change it. So right now (as I said before) I have active buttons.
Try to make it work through my current function with the buttonS, but nothing really changed. Maybe some z-index? Check the code out.
Any suggestions?
Thanks!
Here's the code:
<!--Accordion script-->
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.nextElementSibling.classList.toggle("show");
}
}
//active container overlap
$('button').click(function(event) {
$(this).toggleClass('active');
})
//onClose function and refresh function
//var inFormOrLink;
//$('a').on('click', function() { inFormOrLink = true; });
//$('form').on('submit', function() { inFormOrLink = true; });
//$(window).on("beforeunload", function() {
//return inFormOrLink ? "Do you really want to close?" : null;
//})
body {
width: 100% margin: 0 auto;
}
.container {
width: 45%;
height: 90%;
position: absolute;
margin-top: 2%;
margin-left: 27%;
background-color: #FAF3E9;
}
#header {
width: 100%;
height: 10%;
background-color: #fff;
}
/*Del 1*/
.d1knapp button {
background-color: #fff;
cursor: pointer;
padding: 18px;
width: 70%;
border: none;
text-align: left;
outline: none;
align-items: center;
margin-top: 3%;
margin-left: 15%;
}
.nextstep button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
}
/*Del 1 slut*/
/*Del 2*/
.box {
width: 70%;
font-size: large;
color: #17202A;
outline: none;
border: none;
padding: 12px;
border: 1px solid grey;
margin-left: 11%;
margin-top: none;
border-radius: 8px;
}
#datum {
width: 80%;
margin: -2% 11%;
}
.datumStart {
width: 30%;
float: left;
padding: 1px;
}
.datumSlut {
width: 30%;
padding: 1px;
float: left;
margin-left: 35%;
}
.skapa button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 5%;
}
/*Del 2 slut*/
/* Del 3 */
button.accordion {
background-color: #fff;
color: #444;
cursor: pointer;
padding: 12px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-top: 2%;
}
button,
.accordion h3 {
text-align: center;
}
button.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: #FAF3E9;
max-height: 0;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
text-align: center;
}
div.panel.show {
opacity: 1;
max-height: 700px;
}
.container div.active {
height: 91%;
margin-top: 9%;
margin-bottom: 5%;
background-color: #FAF3E9;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
transition-duration: 0.2s;
align-items: center;
text-align: center;
}
#savechanges button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 45%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
position: fixed;
}
#addfiles button {
background-color: #158F49;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
}
/* Del 3 slut */
/* Media del 1 */
#media only screen and (max-width: 768px) {
body {
width: 100%;
margin: 0 auto;
}
.container {
width: 80%;
margin: 7% 11%;
}
/* Del 1 */
.d1knapp button {
width: 100%;
align-items: center;
margin-left: 0;
margin-top: 6%;
position: relative;
}
.nextstep button {
position: relative;
width: 100%;
margin-top: 17%;
}
/* Del 1 slut */
/* Del 2 */
#datum {
float: left;
}
.skapa button {
position: relative;
width: 100%;
margin-top: 10%;
}
/* Del 2 slut */
/* Del 3 */
/* Del 3 slut */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="header">
<img class="logo" src="logo.png">
<!--<span style="color: blue; float: right; text-decoration: underline; text-align: center; margin-right: 5%; margin-top: 0.5%; font-family:Arial,serif;"><h3>English</h3></span>-->
</div>
<div class="dokumentation">
<button class="accordion"><h3>Dokumentation</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div class="rättigheter">
<button class="accordion"><h3>Rättigheter</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div class="aktiviteter">
<button class="accordion"><h3>Aktiviteter</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div id="savechanges">
<button><h2>Spara ändringarna</h2></button>
</div>
</div>
Firstly you have an error in your css, please change body to this:
body {
width: 100%;
margin: 0 auto;
}
Next, Change your container class to this:
.container {
width: 100%;
height: 90%;
position: absolute;
margin-top: 2%;
background-color: #FAF3E9;
}
By setting width:100% each element takes up the entire width of it's parent. So setting the width to 100% for body and container should solve your problem.
As the previous answer stated, you have an error in the definition of the body style. There is a ; missing after width: 100%;
As for your question, you could solve your problem by adding position: absolute to your panels, like so:
div.panel {
padding: 0 18px;
background-color: #FAF3E9;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
text-align: center;
left: 0;
box-sizing: border-box;
position: absolute;
}
You also need to remove the max-height:0 property, to allow the div to expand to the maximum height.
Adding box-sizing: border-box; prevents the panel from adding margings or paddings to the 100% width and in so becoming bigger than their parents.
Also, adding width and height of 100% to your panels when active, makes them fill up the page:
div.panel.show {
opacity: 1;
width: 100%;
height: 100%;
}