I have been trying to have bins that show up on the right side but they don't appear to have been placed very well, I'm new to CSS, I have looked through the internet and no luck (or I didn't make sense of it).
The bin seems to be not in proportion with the background, and so if I want to make it fill the tag it will just overflow off the box.
#container {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
width: 360px;
background-color: #f7f7f7;
margin: 100px auto;
}
.completed {
color: gray;
text-decoration: line-through;
}
body {
font-family: Roboto;
background: #FFAFBD;
background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD);
background: linear-gradient(to right, #ffc3a0, #FFAFBD);
}
li {
background-color: white;
height: 40px;
line-height: 40px;
color: #666;
}
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px ;
box-sizing: border-box;
color: #2980b9;
}
input:focus{
background-color: white;
border: 3px solid #2980b9;
outline: none;
}
li:nth-child(2n){
background-color: #f7f7f7;
}
span {
height: 35px;
width: 40px;
display: inline-block;
margin-right: 20px;
margin: 0 auto;
text-align: center;
color: white;
background-color: #e74c3c;
}
h1 {
background-color: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#plus {
width: 20px;
height: 20px;
float: right;
margin-top: 3px;
}
.remove {
height: 20px;
width: 15px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/CSS/todo.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="">
<title>Trello</title>
</head>
<body>
<div id="container">
<h1>To-do List <img id="plus" src="assets/Plus.png" alt=""></h1>
<input type="text" placeholder="Add New Todo...">
<ul>
<li><span><img class="remove" src="assets/Bin.png" alt=""></span> Go to potions class</li>
<li><span><img class="remove" src="assets/Bin.png" alt=""></span> Buy New Robes</li>
<li><span><img class="remove" src="assets/Bin.png" alt=""></span> Visit Hagrid</li>
</ul>
</div>
<script src="assets/JS/lib/Jquery.js"></script>
<script src="assets/JS/Custom/todos.js"></script>
</body>
</html>
Thanks for the help in advance.
Use Flexbox! Give to your <li> and to the <span> a display: flex; This way you can have control of the positioning of its children (in this case your <img>).
li {
display: flex;
}
span {
display: flex;
justify-content: center;
align-items: center;
margin: 0 2px 0 0;
}
Here's a working Codepen.
Here's a nice guide to Flexbox.
How about making you span elements the same height as the li so that the red bg fills up completely?
span {
height: 40px;
}
Just like this?
Related
Anyone who make is toggle menu. I am trying a long time i am unable to make this toggle menu below are the my html file and css and attach pic create same this. i want to create border radius like this picture for mobile screen.enter image description here
Below are my code pasted anyone can do this. I am very thankful to you
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.hero{
width: 100%;
min-height: 100vh;
background: #eceaff;
color: #525252;
}
nav{
padding: 20px 10%;
align-items: center;
justify-content: space-between;
position: relative;
}
.user-pic{
padding: 15px;
float: right;
border-radius: 50rem;
cursor: pointer;
background-color: white;
border-radius: 50rem;
}
nav ul{
width: 100%;
text-align: right;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
color: white;
text-decoration: none;
}
nav ul li a:hover{
color: yellow;
}
.sub-menu-link{
background-color: white;
border-radius: 50rem;
}
.sub-menu-wrap{
position: absolute;
top: 100%;
right: 10%;
width: 320px;
max-height: 0px;
overflow: hidden;
}
.sub-menu-wrap.open-menu{
max-height: 400px;
margin-top: 30px;
}
.sub{
background: rgb(245, 7, 7);
padding: 20px;
width: 65%;
margin: 10px 0.5px 0px;
border-bottom-right-radius: 2rem;
opacity: 1;
}
.sub-menu{
background: rgb(245, 7, 7);
padding: 20px;
margin: 0px 0.5px 40px 0.5px;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
border-top-left-radius: 1rem;
}
.user-info{
display: flex;
align-items: center;
}
.user-info h3{
font-weight: bold;
}
.user-info span{
width: 60px;
border-radius: 50%;
margin-right: 15px;
}
.sub-menu-link{
display: flex;
align-items: center;
text-decoration: none;
color: #525252;
margin: 12px 0;
}
.sub-menu-link p{
width: 100%;
}
.sub-menu-link img{
width: 40px;
background: #e5e5e5;
border-radius: 50%;
padding: 8px;
margin-right: 15px;
}
.sub-menu-link span{
font-size: 22px;
transition: transform 0.5s;
}
.sub-menu-link:hover span{
transform: translate(5px);
}
.sub-menu-link:hover p{
font-weight: 600;
}
<!DOCTYPE html>
<!-- Creadted by Coding Pakistan Youtube Channel -->
<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> Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<nav >
<div class="p">
<div onclick="toggleMenu()" class="user-pic">
<span >CK</span>
</div></div>
<div class="sub-menu-wrap" id="subMenu">
<div class="sub">
</div>
<div class="sub-menu">
<a href="#" class="sub-menu-link">
<img src="images/profile.png">
<p>User Profile</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/help.png">
<p>Privacy and Safety</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/setting.png">
<p>Settings</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/logout.png">
<p>Sign Out</p>
</a>
</div>
</div>
</nav>
</div>
<script>
let subMenu = document.getElementById("subMenu");
function toggleMenu(){
subMenu.classList.toggle("open-menu");
}
</script>
</body>
</html>
Try this:
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.hero{
width: 100%;
min-height: 100vh;
background: #eceaff;
color: #525252;
}
nav{
padding: 20px 10%;
align-items: center;
justify-content: space-between;
position: relative;
}
.user-pic{
padding: 15px;
float: right;
border-radius: 50rem;
cursor: pointer;
background-color: white;
border-radius: 50rem;
border: 15px solid rgb(245, 7, 7);
box-shadow: 0 0 0 15px rgb(245 7 7);
}
nav ul{
width: 100%;
text-align: right;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
color: white;
text-decoration: none;
}
nav ul li a:hover{
color: yellow;
}
.sub-menu-link{
background-color: white;
border-radius: 50rem;
}
.sub-menu-wrap{
position: absolute;
top: 100%;
right: 9%;
width: 320px;
max-height: 0px;
overflow: hidden;
}
.sub-menu-wrap.open-menu{
max-height: 400px;
margin-top: 44px;
}
.sub{
background: rgb(245, 7, 7);
padding: 20px;
width: 65%;
margin: 10px 0.5px 0px;
border-bottom-right-radius: 2rem;
opacity: 1;
}
.sub-menu{
background: rgb(245, 7, 7);
padding: 20px;
margin: 0px 0.5px 40px 0.5px;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
border-top-left-radius: 1rem;
}
.user-info{
display: flex;
align-items: center;
}
.user-info h3{
font-weight: bold;
}
.user-info span{
width: 60px;
border-radius: 50%;
margin-right: 15px;
}
.sub-menu-link{
display: flex;
align-items: center;
text-decoration: none;
color: #525252;
margin: 12px 0;
}
.sub-menu-link p{
width: 100%;
}
.sub-menu-link img{
width: 40px;
background: #e5e5e5;
border-radius: 50%;
padding: 8px;
margin-right: 15px;
}
.sub-menu-link span{
font-size: 22px;
transition: transform 0.5s;
}
.sub-menu-link:hover span{
transform: translate(5px);
}
.sub-menu-link:hover p{
font-weight: 600;
}
<!DOCTYPE html>
<!-- Creadted by Coding Pakistan Youtube Channel -->
<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> Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<nav >
<div class="p">
<div onclick="toggleMenu()" class="user-pic">
<span >CK</span>
</div></div>
<div class="sub-menu-wrap" id="subMenu">
<div class="sub-menu">
<a href="#" class="sub-menu-link">
<img src="images/profile.png">
<p>User Profile</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/help.png">
<p>Privacy and Safety</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/setting.png">
<p>Settings</p>
</a>
<a href="#" class="sub-menu-link">
<img src="images/logout.png">
<p>Sign Out</p>
</a>
</div>
</div>
</nav>
</div>
<script>
let subMenu = document.getElementById("subMenu");
function toggleMenu(){
subMenu.classList.toggle("open-menu");
}
</script>
</body>
</html>
I've been working in a small text editor. Every content I typed on my id=content with any ^ should be replaced for nothing (^ for ''). Let's say I'm typed good ^night when I clicked on the ^ button at the top left of my editor should return just good night. I tried to organize it as best as possible to make my question clear. I'm just starting to code and I'm recently starting to browse and participate in forums. I added my stylesheet along with my code. Thanks for all the help in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>AT - Text Editor</title>
</head>
<body>
<div class="container">
<div class="toolbar">
<div class="btn-toolbar">
<button onclick = "escapeRegExp">^</button>
</div>
</div>
<div id="content" contenteditable="true" spellcheck="false">
</div>
</div>
</body>
</html>
My function
<script>
function escapeRegExp() {
return content.replace(^, '');
}
</script>
My style.css
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
li {
margin-left: 16px;
}
a {
cursor: pointer;
}
.container {
max-width: 991px;
width: 100%;
background: #fff;
border-radius: 8px;
overflow: hidden;
}
.toolbar {
padding: 16px;
background: #eee;
}
.toolbar .head {
display: flex;
grid-gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.toolbar .head > input {
max-width: 100px;
padding: 6px 10px;
border-radius: 6px;
border: 2px solid #ddd;
outline: none;
}
.toolbar .head select {
background: #fff;
border: 2px solid #ddd;
border-radius: 6px;
outline: none;
cursor: pointer;
}
.toolbar .head .color {
background: #fff;
border: 2px solid #ddd;
border-radius: 6px;
outline: none;
cursor: pointer;
display: flex;
align-items: center;
grid-gap: 6px;
padding: 0 10px;
}
.toolbar .head .color span {
font-size: 14px;
}
.toolbar .head .color input {
border: none;
padding: 0;
width: 26px;
height: 26px;
background: #fff;
cursor: pointer;
}
.toolbar .head .color input::-moz-color-swatch {
width: 20px;
height: 20px;
border: none;
border-radius: 50%;
}
.toolbar .btn-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
grid-gap: 10px;
}
.toolbar .btn-toolbar button {
background: #fff;
border: 2px solid #ddd;
border-radius: 6px;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.toolbar .btn-toolbar button:hover {
background: #f3f3f3;
}
#content {
padding: 16px;
outline: none;
max-height: 50vh;
overflow: auto;
}
#show-code[data-active="true"] {
background: #eee;
}
It seems this is only for "^" which would mean you could use
content.replaceAll('^', '');
Unless I misunderstood the question.
This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(21 answers)
Closed 4 months ago.
I created a simple form using HTML and CSS, but when I tried inspecting it on my browser by adjusting the width everything goes out of place i.e. I want the responsiveness of the website to smartly scale components to a smaller screen size.
So here's my form at different widths:
initial #1903px (as expected) adjusted #1619px (as expected) adjusted #1164px (not as expected i.e. distribute, buy and sell should maintain some distance away from the margin of fullname) adjusted #1103px (not as expected i.e. distribute, buy and sell should be together) adjusted #784px (not as expected i.e. distribute, buy and sell should be together) adjusted #483px (not as expected i.e. distribute, buy and sell should be together, drop-down-arrow for distribution-route falls out of place)
HTML 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>Form</title>
</head>
<body>
<!--Form-->
<section class="applicant">
<div class="login-center">
<div class="text">
<h2>CREATE</h2>
</div>
<div class="links">
<button type="button" class="app-button active">Distribute</button>
<button type="button" class="app-button">Buy</button>
<button type="button" class="app-button">Sell</button>
</div>
<div class="form-u">
<form action="" class="form">
<label for="uname"><b>Full Name:</b></label>
<input type="text" name="student matric no"placeholder="Enter full name"required>
<label for="psw"><b>Password:</b></label>
<input type="password" name="password" placeholder="Enter password"required>
<label for="sem"><b>Location:</b></label>
<div class="selector">
<div id="selectField">
<p id="selectText">Select a Location</p>
<img src="logo/arrow_down.png" alt="" id="arrowIcon">
</div>
</div>
<button type="submit" class="button-u">SUBMIT</button>
</form>
</div>
</div>
</section>
<!--Here is the CSS:-->
<style>
* {
box-sizing: border-box;
list-style: none;
text-decoration: none;
padding: 0;
margin: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
display: flex;
font-size: 16px;
user-select: none;
}
/* APPLICATION */
.applicant {
width: 60%;
margin: auto;
text-align: left;
margin: 90px auto;
padding-top: 100px;
padding-bottom: 100px;
}
.login-center {
height: 100%;
flex-basis: 41%;
background: #ffffff;
padding: 35px 5px 0px 5px;
box-sizing: border-box;
box-shadow: 0 0 50px 0px #e1e1e1;
}
.text h2 {
text-align: center;
font-size: 35px;
font-weight: 600;
color: #000;
}
.links {
text-align: center;
margin-left: -20px;
margin-right: -20px;
margin: 0 auto;
padding-top: 50px;
}
.app-button {
color: #c4c4c4;
background-color: #ffffff;
border: 1px solid #000;
font-weight: bold;
font-size: 17px;
width: 200px;
margin: 0 20px;
display: inline-block;
line-height: 40px;
padding: 5px;
cursor: pointer;
}
.app-button:hover {
background: #c4c4c4;
color: #000000;
transition: 0.5s;
}
/* ACTIVE STATE */
.links .active,
.app-button:hover {
border: 1px solid #c4c4c4;
background-color: #c4c4c4;
color: #000;
}
/* FORM */
.form input::placeholder {
font-size: 14px;
color: #000;
}
.form label {
color: #000;
margin: 20px 0;
font-size: 17px;
}
.form-u {
margin: 70px 0;
padding: 0px 100px;
}
.form input {
width: 100%;
padding: 20px;
margin: 20px 0;
box-sizing: border-box;
border: none;
outline: none;
background: #ffffff;
border: 1.7px solid #e1e1e1;
}
.form input:focus {
border-color: #c4c4c4;
box-shadow: 0 0 15px 0px #e1e1e1;
}
.button-u {
color: #c4c4c4;
background-color: #000;
border: 1px solid rg#c4c4c4;
font-weight: bold;
font-size: 17px;
width: 100%;
margin: 40px 0;
display: inline-block;
line-height: 40px;
padding: 5px;
cursor: pointer;
}
/* DROPDOWN FOR LOCATION*/
.form input {
font-size: 15px;
color: #000;
}
.selector {
width: 100%;
padding-top: 20px;
margin-bottom: 25px;
position: relative;
}
#selectField p {
font-size: 15px;
}
#selectField {
width: 100%;
background: #ffffff;
box-sizing: border-box;
border: 1px solid #c4c4c4;
padding: 20px 20px;
color: #000;
font-size: 15px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
position: relative;
}
/*RESPONSIVE*/
/* WHAT DO I DO ? */
</style>
My goal is to use media query to make the form responsive on all screens, please how can I make my form smartly responsive?
Your Question is how to use media query, right?
it's really simple. lets says I have button with width 200px. and I want width button become smaller in smaller device.
/* // Extra small devices (portrait phones, less than 576px) */
#media (max-width: 575.98px) {
button{
width: 100px;
}
}
/* // Small devices (landscape phones, 576px and up) */
#media (min-width: 576px) and (max-width: 767.98px) {
button{
width: 150px;
}
}
/* // Medium devices (tablets, 768px and up) */
#media (min-width: 768px) and (max-width: 991.98px) {
button{
width: 180px;
}
}
/* // Large devices (desktops, 992px and up) */
#media (min-width: 992px) and (max-width: 1199.98px) {
button{
width: 190px;
}
}
/* // Extra large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) {
button{
width: 200px;
}
}
just add the media query on your css and add element or classes name that you want to customize into each media queries.
You can use the vw, vh, vmin and vmax units to size your content relative to your viewport size.
<!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>Form</title>
</head>
<body>
<!--Form-->
<section class="applicant">
<div class="login-center">
<div class="text">
<h2>CREATE</h2>
</div>
<div class="links">
<button type="button" class="app-button active">Distribute</button>
<button type="button" class="app-button">Buy</button>
<button type="button" class="app-button">Sell</button>
</div>
<div class="form-u">
<form action="" class="form">
<label for="uname"><b>Full Name:</b></label>
<input type="text" name="student matric no"placeholder="Enter full name"required>
<label for="psw"><b>Password:</b></label>
<input type="password" name="password" placeholder="Enter password"required>
<label for="sem"><b>Location:</b></label>
<div class="selector">
<div id="selectField">
<p id="selectText">Select a Location</p>
<img src="logo/arrow_down.png" alt="" id="arrowIcon">
</div>
</div>
<button type="submit" class="button-u">SUBMIT</button>
</form>
</div>
</div>
</section>
<!--Here is the CSS:-->
<style>
* {
box-sizing: border-box;
list-style: none;
text-decoration: none;
padding: 0;
margin: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
display: flex;
font-size: 1vw;
user-select: none;
}
/* APPLICATION */
.applicant {
width: 60%;
margin: auto;
text-align: left;
margin: 6.2vw auto;
padding-top: 6.5vw;
padding-bottom: 6.5vw;
}
.login-center {
height: 100%;
flex-basis: 41%;
background: #ffffff;
padding: 2.5vw 0.2vw 0px 0.2vw;
box-sizing: border-box;
box-shadow: 0 0 50px 0px #e1e1e1;
}
.text h2 {
text-align: center;
font-size: 3vw;
font-weight: 600;
color: #000;
}
.links {
text-align: center;
margin-left: -1.3vw;
margin-right: -1.3vw;
margin: 0 auto;
padding-top: 3.2vw;
}
.app-button {
color: #c4c4c4;
background-color: #ffffff;
border: 1px solid #000;
font-weight: bold;
font-size: 1vw;
width: 13vw;
margin: 0 1.3vw;
display: inline-block;
line-height: 2.6vw;
padding: 0.2vw;
cursor: pointer;
}
.app-button:hover {
background: #c4c4c4;
color: #000000;
transition: 0.5s;
}
/* ACTIVE STATE */
.links .active,
.app-button:hover {
border: 1px solid #c4c4c4;
background-color: #c4c4c4;
color: #000;
}
/* FORM */
.form input::placeholder {
font-size: 1vw;
color: #000;
}
.form label {
color: #000;
margin: 1.3vw 0;
font-size: 1vw;
}
.form-u {
margin: 4.5vw 0;
padding: 0px 6.5vw;
}
.form input {
width: 100%;
padding: 1.3vw;
margin: 1.3vw 0;
box-sizing: border-box;
border: none;
outline: none;
background: #ffffff;
border: 1.7px solid #e1e1e1;
}
.form input:focus {
border-color: #c4c4c4;
box-shadow: 0 0 15px 0px #e1e1e1;
}
.button-u {
color: #c4c4c4;
background-color: #000;
border: 1px solid rg#c4c4c4;
font-weight: bold;
font-size: 1vw;
width: 100%;
margin: 2.6vw 0;
display: inline-block;
line-height: 2.5vw;
padding: 0.3vw;
cursor: pointer;
}
/* DROPDOWN FOR LOCATION*/
.form input {
font-size: 1vw;
color: #000;
}
.selector {
width: 100%;
padding-top: 1.3vw;
margin-bottom: 1.5vw;
position: relative;
}
#selectField p {
font-size: 1vw;
}
#selectField {
width: 100%;
background: #ffffff;
box-sizing: border-box;
border: 1px solid #c4c4c4;
padding: 1.3vw 1.3vw;
color: #000;
font-size: 1vw;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
position: relative;
}
/* I only used vw here, but it's not necessarily the best approach */
</style>
You can quickly look up the CSS Units, and google for each in depth if you need more clarification.
Also, if you need to know your viewport size: What is my viewport.
var schakkel = document.getElementById('schakkelaar').style.transform;
if (90 < schakkel && schakkel < 140){
console.log('it workssss');
}
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
background-color: #F7F7F7;
}
#border-buiten-tekst1 {
font-family: 'Raleway', sans-serif;
margin-left: 32.5vw;
margin-top: -3vw;
border: solid;
position: absolute;
}
#flex-container-pijlen {
position: absolute;
display: flex;
margin-left: 30vw;
margin-top: -3.2vw;
}
#pijl-links {
width: 3.5vw;
}
#pijl-rechts {
width: 3.5vw;
margin-left: 15vw;
margin-left: 22vw;
}
#gloeilamp {
margin-left: 65vw;
max-width: 5vw;
max-height: 5vw;
position: absolute;
}
#schakkelaar2 {
margin-left: 55.7vw;
margin-top: -20vw;
position: relative;
transform: rotate(37deg);
}
#schakkelaar {
margin-left: 35.2vw;
margin-top: 29.35vw;
position: relative;
transform: rotate(37deg);
}
#border-buiten-tekst2 {
font-family: 'Raleway', sans-serif;
margin-left: 34.4vw;
margin-top: 4vw;
padding-top: .2vw;
text-align: center;
width: 20vw;
border-left: solid;
border-right: solid;
border-bottom: solid;
}
.menu-area li a{
text-decoration: none;
color: #F7F7F7;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
padding: 0px 25px;
font-size: 14px;
line-height: 30px;
position: relative;
z-index: 1;
}
.menu-area li{
list-style: none;
display: inline-block;
}
.custom-padding{
padding-top: 20%;
}
nav{
position: relative;
padding: 10px 20px 10px 10px;
text-align: center;
z-index: 1;
background: #8CC63E;
margin: 0 auto;
width: calc(100% - 60px);
margin-top: 30px;
}
#border-spel {
background-image: url("../img/speelveld.png");
position: absolute;
margin-left: calc(42vw - 600px);
margin-top: .5vw;
width:1320px !important;
height: 36vw;
}
#border-buiten {
margin-left: calc( 30vw - 450px );
margin-top: 4.4vw;
width: 1650px;
height: 41vw;
background-color: #8CC63E;
}
.logo{
width: 20vh;
float: left;
margin-top: -30px;
margin-left: 10px;
}
.menu-area li a:hover{
background: #432064;
color: #F7F7F7;
}
nav:before{
position: absolute;
content: '';
left: 0;
top: 100%;
border-top:10px solid #333333;
border-right:10px solid #333333;
border-left: 10px solid transparent;
border-bottom:10px solid transparent;
}
nav:after{
position: absolute;
content: '';
left: 0;
top: 100%;
border-top:10px solid #333333;
border-right:10px solid #333333;
border-left: 10px solid transparent;
border-bottom:10px solid transparent;
}
.menu-area h2{
color:#F7F7F7;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin-left: 50px;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #432064;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<script src="js/js.js"></script>
<meta charset="UTF-8">
<meta name="description" content="Stagair local spot">
<meta name="keywords" content="Technolab, Stagairs, Workshops">
<meta name="author" content="Ravi Breugom, Alexander Wallaard, Natascha van Baal">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<title>Technolab Stagairspot</title>
</head>
<body data-gr-c-s-loaded="true">
<header>
<div class="custom=padding">
<nav>
<a href="../../beveiligd.php"><img class="logo"
src="../../img/WhatsApp%20Image%202018-09-20%20at%2010.44.00.jpeg"
alt="Logo"></a>
<ul class="menu-area">
<li>Workshops</li>
<li>Agenda</li>
<li>Leerdoelen</li>
<li>Contact</li>
<div class="dropdown">
<li><a class="dropbtn">⚙
<i class="fa fa-caret-down"></i>
</a></li>
<div class="dropdown-content">
<a href='../../uitloggen.php'>Uitloggen</a>
<a><?php
session_start();
if ($_SESSION['ingelogd'] == "ja") {
echo $_SESSION['username'] . "<br>";
} else {
header("Location: ../../login_form.php");
}
?></a>
</div>
</div>
</div>
</header>
<div id="border-buiten">
<h1 id="border-buiten-tekst1">Stroom Geeft energy game.</h1>
<p id="border-buiten-tekst2">het doel van dit spel is om het lampje van stroom te vorzien! lukt het jouw om het
lampje te laten branden?</p>
<section id="flex-container-pijlen">
<img id="pijl-links" alt="pijl-links" src="img/pijl-links.png">
<img id="pijl-rechts" alt="pijl-rechts" src="img/pijl-rechts.png">
</section>
<canvas id="border-spel">
</canvas>
<!--spel plaatjes-->
<div id="gloeilamp">
<img id="gloei-uit" alt="gloeiaan" src="img/gloeilamp-uit.png"/>
<img id="gloei-aan" alt="gloeiuit" src="img/gloeilamp-aan.jpg" style="display:none;"/>
</div>
<div id="schakkelaar"><img id="target" style="transform: rotate(-126.828deg);" src="img/schakkelaar.png"/></div>
<script src="./bl.ocks.org_files/rotate.js.download"></script>
<div id="schakkelaar2"><img id="target2" style="transform: rotate(-126.828deg);" src="img/schakkelaar.png"/></div>
<script src="./bl.ocks.org_files/rotate2.js.download"></script>
<footer id="copyright">© Technolab Leiden</footer>
</body>
</html>
ey everyone, i have a question about this code. i am making a simple js game, i need to get the rotation info of a image, so when you rotate the image in that game then something needs to happen when the image is being rotated between 90 and 140 degrees. But it keeps saying that the result is null, can anybody help me? i searched everywhere on the internet but i didn't found an answer. Sorry that the HTML & CSS is messy but i always make the code nice when i finished the project
If you set transform: rotate(50deg) to your element
const schakkel = document.getElementById('schakkelaar').style.transform; will return the string rotate(50deg) to you.
What you need to if you want to get the actual transformvalue is to use getComputedStyle: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
Then window.getComputedStyle(schakkel).transform will output the matrix transform of your element matrix(0.996195, 0.0871557, -0.0871557, 0.996195, 0, 0)
See more on how to use it on this good article at CSSTricks: https://css-tricks.com/get-value-of-css-rotation-through-javascript/
Here is the exactly what you need.
Try this you can remove the remaining deg.
HTML
<div id="banner-message"; style="transform: rotate(360deg)">
</div>
<script>
let style = $("#banner-message").attr('style');
let pos = style.indexOf("(")+1;
console.log(style.slice(pos, style.lastIndexOf(")")));
</script>
I've gotten sort of close with this hamburger menu but it's still not functioning. Any help would be great. (I'm sure it's obvious but forest for the trees and all that.) To a newb, it seems like my js isn't functioning/triggering/whatever the correct word is. Perhaps I linked it wrong?
<!DOCTYPE html>
<title>Bad Doc</title>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$('.menu-btn').click(function(){
$('.responsive-menu').toggleClass('expand')
})
</script>
<style>
.clearfix:after {
content: "";
display: table;
clear: both;
}
.body {
margin: 0;
padding: 0;
}
a:hover {
background-color: #D3D3D3;
}
a:link {
text-decoration: none;
}
p {
font-family: "Garamond", Times, serif;
}
.wrapper {
border: 1px solid blue;
padding: 1px;
background-color: gray;
}
.main-nav {
border: 1px solid blue;
float: left;
margin: 0 5px 0 0;
}
.content {
border: 1px solid blue;
overflow: auto;
}
h1 {
font-size: 72px;
text-align: center;
margin: 0 0 20px 0;
font-family: "Garamond", Times, serif;
}
ul {
margin-right: 10px;
padding: 0 20px 0 20px;
}
li {
list-style-type:none;
font-family: "Garamond", Times, serif;
font-size: 14px;
}
.photos {
text-align: center;
}
img {
max-width: 30%;
height: auto;
opacity: 0.7;
filter: alpha(opacity=70);
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
#footer p {
text-align: center;
font-size: 14px;
border: 1px solid blue;
margin: 3px 0 0 0;
padding: 3px;
background-color: gray;
}
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
img {max-width: 70%; padding-bottom: 10px;
}
h1 {
font-size: 30px;
}
.content {
background-color: black;
padding-right: 0;
margin-left: 60px;
margin-right: 60px;
}
.menu-btn div{
float: left;
padding-right: 8px;
margin-top: 1em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 25px;
height: 4px;
margin-bottom: 5px;
background: rgb(0,0,0);
z-index: 99;
}
.responsive-menu{
display: none;
overflow: hidden;
}
.responsive-menu ul {
margin: 0;
padding: 0;
width: 100px;
float: left;
}
.responsive-menu li {
margin: 0;
padding: 0;
list-style-type: none;
}
.expand {
display: block !important;
}
<!-- nav ends here-->
</style>
</head>
<body>
<!-- added clearfix here with style at top of style list-->
<div class="wrapper clearfix">
<h1>gage</h1>
<!-- this is nav-->
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
<div class="main-nav responsive-menu">
<ul>
<li>about</li>
<li>contact</li>
</ul>
</div>
</div>
<!-- this is main body of page -->
<div class="content">
<div class="photos">
<img src="25612060593_b222234b86_b.jpg">
<img src="25612060593_b222234b86_b.jpg">
<img src="25612060593_b222234b86_b.jpg">
<img src="25612060593_b222234b86_b.jpg">
<img src="25612060593_b222234b86_b.jpg">
<img src="25612060593_b222234b86_b.jpg">
</div>
</div>
<!-- this is footer (inside or outside last div???) -->
</div>
<div id="footer">
<p>More stuff</p>
</div>
</body>
</html>
The better option is to move your scripts to the end of the body tag.
If you can't, you need to wrap this code:
$('.menu-btn').click(function(){
$('.responsive-menu').toggleClass('expand')
})
With $(document).ready
Like this:
$(document).ready(function() {
$('.menu-btn').click(function() {
$('.responsive-menu').toggleClass('expand')
})
});
http://jsbin.com/gelode/edit?html,js