im trying to create a disney plus clone and im just starting out. In the navbar the links should be white and without the underline i have the no text decoration but it still shows up i dont understand.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #0c111b;
position: relative;
font-family: roboto, sans-serif;
}
.navbar{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
padding: 0 4%;
background: #0c111b;
z-index: 9;
display: flex;
align-items: center;
}
.brand-logo{
height: 70px;
}
.nav-links{
margin-top: 10px;
display: flex;
list-style: none;
text-decoration: none;
}
.nav-items{
text-decoration: none;
margin-left: 20px;
text-transform: capitalize;
color: #fff;
opacity: 0,9;
}
.right-container{
display: block;
margin-left: auto;
}
.search-box{
border: none;
border-bottom: 1px solid #aaa;
background: transparent;
outline: none;
height: 30px;
color: #fff;
width: 250px;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
transition: .5s;
}
.search-box:focus{
width: 400px;
border-color: #1f80e0;
}
.sub-btn{
background: #1f80e0;
height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
margin: 0 10px;
}
.login-link{
color: #fff;
opacity: 0.9;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
<!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>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="">
<ul class="nav-links">
<li class="nav-items">TV</li>
<li class="nav-items">movies</li>
<li class="nav-items">sports</li>
<li class="nav-items">premium</li>
</ul>
<div class="right-container">
<input type="text" class="search-box" placeholder="search">
<button class="sub-btn">Subscribe</button>
login
</div>
</nav>
</body>
</html>
Default browser styles for the <a> element include values for properties:
color
text-decoration
and these default values will always apply unless you explicitly override them:
.nav-items {
margin-left: 20px;
text-transform: capitalize;
opacity: 0.9;
}
.nav-items a {
text-decoration: none;
color: #fff;
}
Browsers are applying embedded CSS.
by default, links are blue (purple then visited) and underlined, this is why you have these styles.
You can check the option to see the browser styles to verify this.
In every project you will always have to override default CSS styles, unless you use CSS frameworks, such as bootstrap, etc
Use text-decoration:none;for your nav-items a element in your css.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
background: #0c111b;
position: relative;
font-family: roboto, sans-serif;
}
.navbar{
width: 100%;
height: 80px;
position: fixed;
top: 0;
left: 0;
padding: 0 4%;
background: #0c111b;
z-index: 9;
display: flex;
align-items: center;
}
.brand-logo{
height: 70px;
}
.nav-links{
margin-top: 10px;
display: flex;
list-style: none;
text-decoration: none;
}
.nav-items{
text-decoration: none;
margin-left: 20px;
text-transform: capitalize;
color: #fff;
opacity: 0,9;
}
.right-container{
display: block;
margin-left: auto;
}
.search-box{
border: none;
border-bottom: 1px solid #aaa;
background: transparent;
outline: none;
height: 30px;
color: #fff;
width: 250px;
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
transition: .5s;
}
.search-box:focus{
width: 400px;
border-color: #1f80e0;
}
.sub-btn{
background: #1f80e0;
height: 30px;
padding: 0 20px;
color: #fff;
border-radius: 5px;
border: none;
outline: none;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
margin: 0 10px;
}
.login-link{
color: #fff;
opacity: 0.9;
text-transform: uppercase;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
.nav-items a {
text-decoration: none;
color: #fff;
}
<!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>
<nav class="navbar">
<img src="images/logo.png" class="brand-logo" alt="">
<ul class="nav-links">
<li class="nav-items">TV</li>
<li class="nav-items">movies</li>
<li class="nav-items">sports</li>
<li class="nav-items">premium</li>
</ul>
<div class="right-container">
<input type="text" class="search-box" placeholder="search">
<button class="sub-btn">Subscribe</button>
login
</div>
</nav>
</body>
</html>
You have targeted wrong css just add anchor tag to .nav-items class.Bydefault it has blue color and text-decoration-underline property so remove the default behavior by adding your css.
.nav-items a {
text-decoration: none;
color: #fff;
}
Related
I want to make a online card game with html/css/js and i want to make a place that shows all your cards but i want them to be inline and inline-block because i need to give it a custom width and height but when i do that it doesnt work
heres the code :
var players =
[
{
"id":1,
"name":"messi",
"price":100
},
{
"id":2,
"name":"ronaldo",
"price":100
}
];
for (var i = 0; i<players.length; i++){
document.getElementById('cards').innerHTML += `<li><div class="card" style="background-image: url('images/${players[i].name}.png');background-size: 80px 110px;"><h1>${players[i].name}</h1></div></li>`;
}
.coin{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: gold;
border-radius: 50%;
box-shadow: 0 0 10px goldenrod;
}
.xp{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: darkblue;
border-radius: 50%;
box-shadow: 0 0 10px blue;
}
.navbar{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.nav-item {
float: left;
}
.nav-item a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.card{
display: inline-block;
width: 80px;
text-align: center;
height: 110px;
border-radius: 5px;
margin: 5px;
color: #fff;
font-size: 12px;
box-shadow: 0 0 5px black;
}
.cards{
list-style-type: none;
display: inline;
background-color: rgb(56, 56, 56);
padding: 5px;
margin: 20px;
border-radius: 5px;
}
* {
font-family: "Helvetica Neue",Helvetica,Arial;
}
<!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">
<script src="script.js" defer></script>
</head>
<body style="background-color: rgb(53, 53, 53);">
<ul class="navbar">
<li class="nav-item"><div class="coin" >0</div></li>
<li class="nav-item"><div class="xp">0</div></li>
<li class="nav-item" style="float:right"><a>EFOOTBALL</a></li>
</ul>
<ul class="cards" id="cards">
</ul>
</body>
</html>
if you run the snippet its not horizontal
please help me i need help fast
Instead of making it inline u should make it display: flex
edit: to make cards go to next line use flex-wrap: wrap
var players =
[
{
"id":1,
"name":"messi",
"price":100
},
{
"id":2,
"name":"ronaldo",
"price":100
}
];
for (var i = 0; i<players.length; i++){
document.getElementById('cards').innerHTML += `<li><div class="card" style="background-image: url('images/${players[i].name}.png');background-size: 80px 110px;"><h1>${players[i].name}</h1></div></li>`;
}
.coin{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: gold;
border-radius: 50%;
box-shadow: 0 0 10px goldenrod;
}
.xp{
display: inline-block;
margin-top: 5px;
margin-left: 10px;
text-align: center;
width: 25px;
height: 25px;
background-color: darkblue;
border-radius: 50%;
box-shadow: 0 0 10px blue;
}
.navbar{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.nav-item {
float: left;
}
.nav-item a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.card{
display: block;
width: 80px;
text-align: center;
height: 110px;
border-radius: 5px;
margin: 5px;
color: #fff;
font-size: 12px;
box-shadow: 0 0 5px black;
}
.cards{
list-style-type: none;
display: flex;
flex-wrap: wrap;
background-color: rgb(56, 56, 56);
padding: 5px;
margin: 20px;
border-radius: 5px;
}
* {
font-family: "Helvetica Neue",Helvetica,Arial;
}
<!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">
<script src="script.js" defer></script>
</head>
<body style="background-color: rgb(53, 53, 53);">
<ul class="navbar">
<li class="nav-item"><div class="coin" >0</div></li>
<li class="nav-item"><div class="xp">0</div></li>
<li class="nav-item" style="float:right"><a>EFOOTBALL</a></li>
</ul>
<ul class="cards" id="cards">
</ul>
</body>
</html>
I have created a login form button on my website.
It is opening but the closing button is not working.
HTML:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Welcome to Hotel</title>
<!-- font cdn useful -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<!-- css file link -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- hearder section -->
<header>
<a href="#"class="logo"><span>H<span>otel<a>
<nav class="navbar">
home
books
packages
services
gallery
reviews
contact
</nav>
<div class="icons">
<i class="fas fa-search" id="search-btn"></i>
<i class="fas fa-user" id="login-btn"></i>
</div>
<form action="" class="search-bar-container">
<input type="search" id="search-bar" placeholder="search here...">
<label for="search-bar" class="fas fa-search" ></label>
</form>
</header>
<!-- header endeing -->
<!-- login form container -->
<div class="login-form-container">
<i class="fas fa-times" id="form-close"></i>
<form action="">
<h3>login</h3>
<input type="email" class="box" placeholder="enter your email">
<input type="password" class="box" placeholder="enter your password">
<input type="submit" value="login" class="btn">
<input type="checkbox" id="remember">
<label for="remember">Remember me</label>
<p>Forgot password? click here</p>
<p>dont have a account? register here</p>
</form>
</div>
<!-- js file link -->
<script src="main.js"></script>
</body>
</html>
css:
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600;700&family=Ubuntu&display=swap');
:root{
--orange:#ffa500;
}
*{
font-family: 'Nunito', 'sans-serif';
margin: 0;
padding: 0;
box-sizing: border-box;
text-transform: capitalize;
outline: none;
border: none;
text-decoration: none;
transition: all 0.2s linear;
}
*::selection{
background:var(--orange);
color: #fff;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 6rem;
scroll-behavior: smooth;
}
.btn{
display: inline-block;
margin-top: 1rem;
background:var(--orange);
color: #fff;
padding: .8rem 3rem;
border: .2rem solid var(--orange);
cursor: pointer;
font-size: 1.7rem;
}
.btn:hover{
background: rgba(255,165,0,.2);
color: var(--orange);
}
header{
position: fixed;
top: 0;
left: 0;
right: 0;
background: #333;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 2rem 9%;
}
header .logo{
font-size: 2.5rem;
font-weight: bolder;
color: #fff;
text-transform: uppercase;
}
header .logo span{
color: var(--orange);
}
header .navbar a{
color: #fff;
font-size: 2rem;
margin: .8rem;
}
header .navbar a:hover{
color: var(--orange);
}
header .icons i{
font-size: 2.5rem;
color: #fff;
cursor: pointer;
margin-right: 2rem;
}
header .icons i:hover{
color: var(--orange);
}
header .search-bar-container{
position: absolute;
top: 100%;
left: 0;
right: 0;
padding:1.5rem 2rem;
background: #333;
border-top: .1rem solid rgba(255,255,255,.2);
display: flex;
align-items: center;
z-index: 1001;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
header .search-bar-container.active{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
header .search-bar-container #search-bar{
width: 100%;
padding: 1rem;
text-transform: none;
color: #333;
font-size: 1.7rem;
border-radius: 1rem;
}
header .search-bar-container label{
color: #fff;
cursor: pointer;
font-size: 3rem;
margin-left: 1.5rem;
}
header .search-bar-container label:hover{
color: var(--orange);
}
.login-form-container{
position: fixed;
top: -120%;
left: 0;
z-index: 10000;
min-height: 100vh;
width: 100%;
background: rgba(0,0,0,.7);
display: flex;
align-items: center;
justify-content: center;
}
.login-form-container.active{
top: 0;
}
.login-form-container form{
margin: 2rem;
padding: 1.5rem 2rem;
border-radius: .5rem;
background: #fff;
width: 50rem;
}
.login-form-container form h3{
font-size: 3rem;
color: #444;
text-transform: uppercase;
text-align: center;
padding: 1rem 0;
}
.login-form-container form .box{
width: 100%;
padding: 1rem;
font-size: 1.7rem;
color: #333;
margin: .6rem 0;
border: .1rem solid rgba(0,0,0,0.3);
text-transform: none;
}
.login-form-container form .box:focus{
border-color: var(--orange);
}
.login-form-container form #remember{
margin: 2rem 0;
}
.login-form-container form label{
font-size: 1.5rem;
}
.login-form-container form .btn{
display: block;
width: 100%;
}
.login-form-container form p{
padding: .5rem 0;
font-size: 1.5rem;
color: #666;
}
.login-form-container form p a{
color: var(--orange);
}
.login-form-container form p a:hover{
color:#333;
text-decoration: underline;
}
.login-form-container #form-close{
position: absolute;
top: 2rem;
right: 3rem;
font-size: 5rem;
color: #fff;
cursor: pointer;
}
JS(the problem)
let searchbtn = document.querySelector('#search-btn');
let searchbar = document.querySelector('.search-bar-container');
let formbtn = document.querySelector('#login-btn');
let loginForm = document.querySelector('.login-form-container');
let formclose = document.querySelector('.form-close');
window.onscroll = () =>{
searchbtn.classList.remove('fa-times');
searchbar.classList.remove('active');
}
searchbtn.addEventListener('click', () =>{
searchbtn.classList.toggle('fa-times');
searchbar.classList.toggle('active');
});
formbtn.addEventListener('click', () =>{
loginForm.classList.add('active');
});
formclose.addEventListener('click', () =>{
loginForm.classList.remove('active');
});
console reply:
[enter image description here][1]
[1]: https://i.stack.imgur.com/vfdtp.png
You made a small typo in the javascript file.
let formclose = document.querySelector(".form-close");
Should be
let formclose = document.querySelector("#form-close");
Since the element has an id of form-close and not a class, you need to use the '#' instead of the '.'
I want to add dropdown to my current nav bar. I tried this code but dropdown content disappeared and now I don´t have any ideas to edit code to this be working. I tried some edits but isn´t do with dropdown. Dropdown, dropbtn was added to previous code. Can you help me with this? Thanks very much!
Here is code:
<!DOCTYPE html>
<html>
<head>
<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 rel="shortcut icon" type="image/x-icon" href="menu.png" />
<title>MENU | Úvodné menu</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
height: 100%;
background-image: linear-gradient(orange, red);
}
</style>
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: linear-gradient(orange, red);
min-height: 100%;
background-position: full;
background-size: ;
}
</style>
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.header {
overflow: hidden;
background-color: orange;
padding: 20px 10px;
}
.header a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: red;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.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 {
float: left;
overflow: hidden;
}
.dropdown:hover .dropdown-content {
display: block;
}
tyle>
</head>
<body onload="startTime()">
<div class="header">
<a id="txt" hidden></a>
<img src="https://i.ibb.co/6Nkbdb3/dlhemenu-1-1-1.png" class="logo" title="Odhlásiť sa" alt="MENU logo" width="150" height="50" onclick="window.location='/logout.php'">
 
<a class="dropbtn"><i class="fa fa-user"> </i>Dropdown
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="header-right">
<a class="active" href="/welcome.php">Úvodné menu</a>
Online hodiny
Testy na vyplnenie
Známky
Rozvrh hodín
Dochádzka
Učebný materiál
Hry
O mne
</div>
</div>
add hover css to display the drop-down content
.dropbtn:hover ~ .dropdown-content {display: block;}
I first set .submenu to display:none;. And then I set .recipe:hover .submenu{display:block;} . When I hover over the .recipe, I wanted to make .submenu display: block;. But it isn't working. Can you tell me why it isn't working? I can't really figure this out. Is using javascript the only way I can solve this problem? Here's my code. Thank you
<!DOCTYPE html>
<html>
<meta charset="utf-8">
</html>
<head>
<title>
TEST
</title>
<style>
body{
margin: 0px;
}
#logo{
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title{
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu{
border: 1px solid rgb(155,155,155);
text-align: center;
height: 30px;
padding-top: 17px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a:nth-of-type(1){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(2){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(3){
flex-grow: 1;
}
.submenu{
background-color: #f2efed;
height: 190px;
font-size: 16px;
font-weight: 300;
padding-top: 10px;
padding-left: 10px;
text-decoration: underline;
position: absolute;
margin-top: 36px;
width: 100%;
display: none;
}
a{
color: black;
text-decoration: none;
}
.recipe:hover .submenu{
display: block;
}
#font-face { font-family: 'IBMPlexSansKR-Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff'); font-weight: normal; font-style: normal; }
</style>
</head>
<body>
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<div class="mainmenu">
home
Recipe
QNA
<div class="submenu">
coffee
</div>
</div>
</body>
I'm not the best with this, but I'd say it might have something to do with selecting the .recipe:hover and then selecting .submenu right after it:
.recipe:hover .submenu{
display: block;
}
You need to actually add the recipe class onto an element, then in your CSS, you need to add ~ to signify that the elements are on the same level in the DOM.
I have also made some modifications to the CSS in order to make sure the submenu does not disappear.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
</html>
<head>
<title>
TEST
</title>
<style>
body {
margin: 0px;
}
#logo {
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title {
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu {
border: 1px solid rgb(155, 155, 155);
text-align: center;
height: 30px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a + a {
box-shadow: -4px -3px 0 -3px rgb(155, 155, 155);
}
.submenu {
background-color: #f2efed;
height: 190px;
font-size: 16px;
font-weight: 300;
padding-top: 10px;
padding-left: 10px;
text-decoration: underline;
position: absolute;
margin-top: 36px;
width: 100%;
display: none;
}
a {
color: black;
text-decoration: none;
flex-grow: 1;
height: 30px;
padding-bottom: 6px;
}
.recipe:hover ~ .submenu {
display: block;
}
.submenu:hover {
display: block;
}
#font-face {
font-family: 'IBMPlexSansKR-Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<div class="mainmenu">
home
Recipe
QNA
<div class="submenu">
coffee
</div>
</div>
</body>
For more information on the general sibling combinator (~), please read the MDN docs.
As NoahRGB said, CSS selectors cannot have that syntax.
This:
.recipe:hover .submenu
will not work.
If you want it to select the hover of both the submenu and the recipe classes, "chain" them:
.recipe.submenu:hover
being sure not to put any spaces between .recipe and .hover.
If you wanted to set it to display: block; when the .recipe is hovered and the .submenu is not hovered, simply put display: block; in the .submenu class selector independently from the .recipe:hover selector like this:
.submenu {
...
display: block;
}
.recipe:hover {
...
display: block;
}
.recipe:hover .submenu{display:block;} implies that your .submenu element is a child of .recipe.
You need to change your markup to something like:
<a class="recipe" href="Recipe.html">
Recipe
<span class="submenu">
coffee<
</span>
</a>
Or, for a fore semantic markup, especially if your sub-menu will receive more items you could do:
<ul class="menu">
<li>
<a class"recipe" href="Recipe.html">Recipe</a>
<ul class="submenu">
<li>coffee</li>
</ul>
</li>
</ul>
and change your css to:
.menu li:hover .submenu { display:block; }
You can absolutely do this in CSS3 now using the ~ adjacent sibling selector.
triggerSelector:hover ~ targetSelector {
display: block;
}
as per the post How to change one element while hovering over another
!DOCTYPE html>
<html>
<meta charset="utf-8">
</html>
<head>
<title>
TEST
</title>
<style>
body{
margin: 0px;
}
#logo{
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title{
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu{
border: 1px solid rgb(155,155,155);
text-align: center;
height: 30px;
padding-top: 17px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a:nth-of-type(1){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(2){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(3){
flex-grow: 1;
}
.submenu{
background-color: #f2efed;
height: 190px;
font-size: 16px;
font-weight: 300;
padding-top: 10px;
padding-left: 10px;
text-decoration: underline;
position: absolute;
margin-top: 36px;
width: 100%;
display: none;
}
a{
color: black;
text-decoration: none;
}
.recipe:hover ~ .submenu{
display: block;
}
#font-face { font-family: 'IBMPlexSansKR-Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff'); font-weight: normal; font-style: normal; }
</style>
</head>
<body>
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<div class="mainmenu">
home
<a class="recipe" href="Recipe.html">Recipe</a>
QNA
<div class="submenu">
coffee
</div>
</div>
</body>
</html>
You simply add ~ between selectors to adjance them together:
.recipe:hover ~ .submenu{
display: block;
}
I would say that you have to style your submenus in a structural way so that when you hover the element they would be visible when you try to hover submenus.
In your case submenu will get hidden if you try to make it visible. I have changed the structure a bit to show the submenu. You can more optimise it.
body {
margin: 0px;
}
#logo {
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title {
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu {
border: 1px solid rgb(155, 155, 155);
text-align: center;
height: 30px;
padding-top: 17px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a:nth-of-type(1) {
flex-grow: 1;
border-right: 1px solid rgb(155, 155, 155);
}
a:nth-of-type(2) {
flex-grow: 1;
border-right: 1px solid rgb(155, 155, 155);
}
a:nth-of-type(3) {
flex-grow: 1;
}
.submenu {
position: absolute;
margin-top: 36px;
}
.submenuwrapper {
position: absolute;
background-color: #f2efed;
width: 200px;
height: 190px;
font-size: 16px;
font-weight: 300;
padding: 40px;
text-decoration: underline;
display: none;
}
a {
color: black;
text-decoration: none;
}
.recipe:hover>.submenuwrapper {
display: block;
}
#font-face {
font-family: 'IBMPlexSansKR-Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<ul class="mainmenu">
<li>home</li>
<li class="recipe">Recipe
<div class="submenuwrapper">
<div class="submenu">
coffee
</div>
</div>
</li>
<li>QNA</li>
</ul>
You can add !important after your code to make it principal.
.recipe:hover .submenu{
display: block !important;
}
Can you upload the whole code in a codeopen.io? So you can show us exactly what you need.
I have created a basic content editable section using the tutorial from this website. HTML 5 Contenteditable
I have made a save button within the .toolbar at the top. When I go to change the text and press the .saveContent button, it doesn't save the content to localStorage so once refreshed, it disappears and goes back to the default text.
I have made the page as a .php page due to a login system I have made, would this be a factor at all in why it isn't working.
Code Here:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
if(localStorage.getItem('newContent')) {
theContent.html(localStorage.getItem('newContent'));
}
/* ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019. */
html > body {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', sans-serif;
}
#wrapper {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #1B315E;
}
.backdrop {
background-image: url(Assets/Images/backdrop.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.loginBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 420px;
background: rgba(0,0,0,0.6);
color: #FFF;
padding: 40px 30px;
box-sizing: border-box;
}
.loginBox p {
margin: 0;
padding: 0;
font-weight: bold;
}
.loginBox input {
width: 100%;
margin-bottom: 20px;
}
.loginBox input[type="text"], input[type="password"] {
border: none;
outline: none;
border-bottom: 1px solid #FFF;
background: transparent;
height: 40px;
font-size: 14px;
color: #FFF;
}
.loginBox input[type="submit"] {
border: none;
outline: none;
height: 40px;
font-size: 16px;
color: #FFF;
background: #777;
font-weight: bold;
}
.loginBox input[type="submit"]:hover {
cursor: pointer;
color: #FFF;
background: #888;
}
.institution, .message {
font-size: 12px;
text-align: justify;
}
* {
box-sizing: border-box;
}
.navigation {
background: #333;
overflow: hidden;
font-family: 'Trebuchet MS', sans-serif;
}
.navLinks {
margin-top: 8px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.navLinks:hover {
background: #A5A5A5;
}
.menuDropDown {
float: left;
overflow: hidden;
}
.menuDropDown > .menuButton {
border: none;
outline: none;
color: #FFF;
background: inherit;
font: inherit;
margin: 0;
font-size: 16px;
padding: 12px 6px;
}
.menuButton:hover, .navigation > .menuDropDown:hover > .menuButton {
background: #999;
color: #1B315E;
outline: none;
border: none;
}
.menuContent {
display: none;
width: 100%;
background: none;
position: absolute;
z-index: 1;
left: 0;
overflow: auto;
max-height: 85vh;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.menuDropDown:hover > .menuContent {
display: block;
}
.menuColumn {
float: left;
width: 25%;
padding: 8px;
overflow-y: auto;
background: #999;
height: 235px;
}
.menuColumn > a {
float: none;
color: #1B315E;
padding: 10px;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
}
.menuRow:after {
content: "";
display: table;
clear: both;
}
.menuColumn > a:hover {
background: #A5A5A5;
}
.menuColumn > a.current {
background: #B6B6B6;
}
.menuHeader {
color: #1B315E;
margin-top: 0px;
margin-bottom: 8px;
}
.workspaceMain {
float: left;
width: 72.5%;
height: calc(100vh - 43px);
position: relative;
overflow: auto;
padding-right: 2px;
background: #FFF;
}
.toolbar {
background: #777;
border-bottom: 1px solid #666;
}
.toolbar > .saveContent {
color: #1B315E;
border: none;
outline: none;
background: #B6B6B6;
padding: 6px 6px;
font-size: 12px;
font: inherit;
}
.saveContent, .saveContent:hover, .toolLinks:hover {
background: #A5A5A5;
}
.toolLinks {
margin-top: 2px;
margin-right: 4px;
float: right;
border: none;
outline: none;
color: #1B315E;
background: #B6B6B6;
padding: 4px 6px;
font-size: 16px;
text-align: center;
}
.mainHeader {
text-align: center;
color: #1B315E;
}
table {
width: 100%;
font-size: 12px;
}
.tableName {
color: #1B315E;
font-size: 14px;
font-weight: bold;
}
<!DOCTYPE HTML>
<!--
~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">
<head>
<title>Welcome — Summit — School Name</title>
<link rel="stylesheet" type="text/css" href="../style.css"> <!-- Internal Stylesheet -->
<script src="https://kit.fontawesome.com/d3afa470fb.js"></script> <!-- Vector Icons -->
<link rel="shortcut icon" href="../Assets/Images/favicon.png"> <!-- Favicon -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<?php
session_start();
if (!isset($_SESSION['loggedin']) || $_SESSION['loggedin'] == false ) {
header("Location: index.php");
}
?>
<div id="wrapper">
<div class="navigation">
<button class="navLinks" title="Logout"><i class="fas fa-sign-out-alt"></i></button>
<button class="navLinks" title="Help"><i class="fas fa-question-circle"></i></button>
<button class="navLinks" title="Quick Links"><i class="fas fa-bookmark"></i></button>
<div class="menuDropDown">
<button class="menuButton" title="Site Navigation"><i class="fas fa-bars"></i> Menu</button>
<div class="menuContent">
<div class="menuRow">
<div class="menuColumn"> <!-- Home Workspace -->
<h5 class="menuHeader">Home Workspace</h5>
<i class="fas fa-door-open"></i> Welcome
</div>
<div class="menuColumn"> <!-- Learning Workspace -->
</div>
<div class="menuColumn"> <!-- Student Management Workspace -->
</div>
<div class="menuColumn"> <!-- Administration Workspace -->
</div>
</div>
</div>
</div>
</div>
<div class="workspaceMain">
<div class="toolbar">
<button class="saveContent" title="Save Changes"><i class="fas fa-save"></i> Save</button>
<button class="toolLinks" title="Collapse Panel"><i class="fas fa-arrow-right"></i></button>
<button class="toolLinks" title="Change Background Colour"><i class="fas fa-fill-drip"></i></button>
</div>
<h3 class="mainHeader" id="editable" contenteditable="true">SCHOOL NAME</h3>
<table class="tableSet" id="editable" contenteditable="true">
<caption class="tableName">Weekly Outline</caption>
</table>
</div>
<div class="workspaceSide"></div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Thanks, Tom
You need to use localStorage.setItem('key', value) to store the value in local storage
Your will then look like:
var theContent = $('#editable');
$('.saveContent').on('click', function() {
var editedContent = theContent.html();
localStorage.setItem('newContent',editedContent)
});
You are using the id "editable" twice, could you change that and retry?
<span (focusout)="JumpTo()" contenteditable="true">Click to Change text</span>
JumpTo(){
var contenteditable = document.querySelector('[contenteditable]');
localStorage.setItem('newContent',contenteditable.textContent);
}
If you want to change it instantly use ngOnChanges()