html cannot display when render - javascript

I expect a custom navbar where I set nav background to black and set a tag to display inline-block and padding 10. But, HTML do not render anything when I add css. Though, It is rendering when I remove CSS. Please, can someone explain why and how can to make it work?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.topvav {
width: 100%;
background: #000;
border: 1px solid #000;
}
a {
display: inline-block;
text-decoration: none;
color: white;
padding: 10px;
}
a:hover {
display: inline-block;
/* float: left; */
background: white;
}
<!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="stylesheet" href="test.css" />
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
</div>
</body>
</html>

Typo: In the CSS file replace .topvav with .topnav

Related

Strikethrough text list, at mouse click

I need the strikethrough text with just the mouse click on the text.
List css is outside form line margin
I tried several methods and failed.
I changed the code several times and I couldn't.
I searched a lot on the site, but I didn't find a solution.
I tried to solve it and I didn't find something to solve this problem
$(document).ready(function() {
$('form').on('submit', function(e) {
e.preventDefault();
const listaDeTarefa = $('#lista-de-tarefa').val();
const novoItem = $('<li></li>');
$(`<li>${listaDeTarefa}</li>`).appendTo(novoItem);
$(novoItem).appendTo('ul');
$("li").click(function() {
$(this).addClass("riscado");
});
$('#lista-de-tarefa').val("");
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Roboto, sans-serif;
}
.container {
margin: 100px auto;
max-width: 640px;
width: 100%;
}
form {
margin-top: 40px;
}
input,
textarea,
button {
display: block;
padding: 8px;
margin-bottom: 8px;
width: 100%;
resize: none;
}
button {
background-color: #2e9ccc;
border: none;
text-transform: uppercase;
color: #fff;
font-weight: bold;
font-size: 18px;
font-style: italic;
cursor: pointer;
}
button:hover {
background-color: #18a9e9;
}
input:focus,
textarea:focus {
outline-color: #18a9e9;
}
ul {
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="pt-br">
<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>jQuery</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<header>
<h1>Lista de tarefas</h1>
</header>
<form id="formulario">
<input type="text" id="lista-de-tarefa" required /> <button type="submit">Cadastrar</button>
</form>
<div class="lista">
<ul>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
There were some bugs, i commented on the spots:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<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>jQuery</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="container">
<header>
<h1>Lista de tarefas</h1>
</header>
<form id="formulario">
<input type="text" id="lista-de-tarefa" required />
<button type="submit">Cadastrar</button>
</form>
<div class="lista">
<ul></ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="./main.js"></script>
<script>
$(document).ready(function () {
//👇remove from the submit, otherwise it will add a new event every time, causing problems
//changed to on to make it target dynamic added elements
$("ul").on("click", "li", function () {
$(this).toggleClass("riscado"); //changed to toggle to be able to remove on click
});
$("form").on("submit", function (e) {
e.preventDefault();
const listaDeTarefa = $("#lista-de-tarefa").val();
$(`<li>${listaDeTarefa}</li>`).appendTo("ul");
$("#lista-de-tarefa").val("");
});
});
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Roboto, sans-serif;
}
.container {
margin: 100px auto;
max-width: 640px;
width: 100%;
}
form {
margin-top: 40px;
}
input,
textarea,
button {
display: block;
padding: 8px;
margin-bottom: 8px;
width: 100%;
resize: none;
}
button {
background-color: #2e9ccc;
border: none;
text-transform: uppercase;
color: #fff;
font-weight: bold;
font-size: 18px;
font-style: italic;
cursor: pointer;
}
button:hover {
background-color: #18a9e9;
}
input:focus,
textarea:focus {
outline-color: #18a9e9;
}
li {
cursor: pointer; /* 👈looks better this cursor where clicking does something */
user-select: none; /* 👈prevent selection for better UX */
}
.riscado { /* 👈 changed ul to the class */
text-decoration: line-through;
}
</style>
</body>
</html>

the letter-spacing used in my hover selector on my nav-links is making my logo shift sideways in my navigation bar

I created a conventional nav-bar using flexbox.
the nav-bar contained 3 divs. Two just had a navlink each while the third contained an image(logo).
the 3 divs are aligned horizontally. the image being in center
I styled the two nav-links with a hover effect that separates the letters when a cursor hovers over it.
*{
box-sizing:border-box;
}
body{
background-color:rgb(139, 200, 50);
}
nav{
display:flex;
justify-content:space-between;
}
#Logo{
padding:10px;
margin:0;
border:0;
background-color: black;
}
#button{
align-self:center;
}
#button a {
text-align: center;
padding: 10px 30px;
border: white solid;
border-radius: 30px;
cursor: pointer;
text-decoration: none;
font-family: 'Heebo', sans-serif;
color:white;
letter-spacing: 1px;
transition: 0.8s;
}
#button a:hover{
color: rgb(139, 200, 50);
padding: 15px 35px;
letter-spacing: 3px;
background-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">
<link rel="stylesheet" href="/style.css">
<title>Treetop</title>
</head>
<body>
<nav >
<div id="button">
PRODUCTS
</div>
<div id="logo">
<img src="/img/logo.png" alt="logo">
</div>
<div id="button">
CONTACT
</div>
</nav>
<body>
NOW, the issue is that my image keeps shifting sideways anytime i hover over those nav-links . I do not want the logo to move at all when the nav-links are being hovered. please what should I do? please help.
use min-width in button for movement your logo position when hover
*{
box-sizing:border-box;
}
body{
background-color:rgb(139, 200, 50);
}
nav{
display:flex;
justify-content:space-between;
}
#Logo{
padding:10px;
margin:0;
border:0;
background-color: black;
}
#button{
align-self:center;
}
#button a {
text-align: center;
padding: 10px 30px;
border: white solid;
border-radius: 30px;
cursor: pointer;
text-decoration: none;
font-family: 'Heebo', sans-serif;
color:white;
letter-spacing: 1px;
transition: 0.8s;
}
#button a:hover{
color: rgb(139, 200, 50);
padding: 15px 35px;
letter-spacing: 3px;
background-color:#fff;
}
/*Add this**/
div#button {
min-width: 190px;
}
<!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">
<link rel="stylesheet" href="/style.css">
<title>Treetop</title>
</head>
<body>
<nav >
<div id="button">
PRODUCTS
</div>
<div id="logo">
<img src="/img/logo.png" alt="logo">
</div>
<div id="button">
CONTACT
</div>
</nav>
<body>
in your css you have given #Logo instead of
#logo
and give position absolute to #logo wherever you want to position it.

nav bar dissapears(in full size window) after using the menu button in mobile size

I've been following a tutorial about nav bars and everything is good except when I make the window small and try the menu button and re-scale the window to normal size everything disappears.
I've tried adding an if statement in the JavaScript but that doesn't solve the problem.
https://codepen.io/diegopiscoya/pen/yZJWBy
<script type="text/javascript">
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(500);
})
})
</script>
I expected the script to work only when the window size is <900 but it works always, so when the menu button hides the nav bar it does it in full size as well.
So, let's understand what is happening on the code...
When $(".menu").click(...) is triggered, it fires $("nav").slideToggle(500);, the slide toggle method on its final action will add a inline css property on the nav element, it will be display: block; if nav was hidden, or display: none if nav was displayed.
Then when you open and close the mobile menu and you re-scale the window wider than 900px, the inline display: none still on the nav, so it is not displaying because the inline CSS is in effect.
The solution would be:
A workaround you can do is to "force" the CSS to apply display:block to your nav if the window is wider than 900px, by using the #media and setting the !important rule.
So:
#media(min-width: 901px) {
nav#navegacion {
display: block !important;
}
}
This is a CSS solution, of course there is many different ways to do it by the CSS and Javascript. But I believe that is a simple one.
$(document).ready(function(){
$(".menu").click(function(){
$("nav").slideToggle(500);
})
})
body{
margin: 0px;
padding: 0px;
font-family: "Bree serif", serif;
}
#navegacion{
width: 100%;
padding: 0 50px;
box-sizing: border-box;
}
.logo{
margin: 0;
padding: 15px 20px;
float: left;
}
#nav-list{
padding: 0;
margin: 0;
float: right;
}
#nav-list li{
list-style: none;
display: inline-block;
padding: 20px 30px;
transition: .5s;
}
#nav-list li a{
color: black;
text-decoration: none;
}
.nav_li:hover{
background: rgba(0, 0, 0, 0.089);
}
.resp-menu{
width: 100%;
background:#fff;
padding: 10px 30px;
box-sizing: border-box;
display: none;
}
.resp-menu a{
margin: 0;
padding: 3px 0;
float: left;
}
.resp-menu h4{
margin: 0;
padding: 5px 10px;
color: #fff;
float: right;
background: yellow;
text-transform: uppercase;
cursor: pointer;
}
#media(max-width: 900px)
{
#navegacion{
display: none;
padding: 0;
}
.resp-menu{
display: block;
}
.logo{
display: none;
float: none;
}
#nav-list{
float: none;
display: block;
}
#nav-list li{
display: block;
color: black;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(12, 8, 8, 0.1);
}
.resp-menu a{
display: block;
}
}
#media(min-width: 901px) {
nav#navegacion {
display: block !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=no">
<meta http-equiv="X-UA-compatible" content="ie=edge">
<title>document</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
</head>
<body>
<nav id="navegacion">
<img src="wilphar_logo2.png" width="70">
<ul id="nav-list">
<li class="nav_li">Inicio</li>
<li class="nav_li">Nosotros</li>
<li class="nav_li">Productos</li>
<li class="nav_li">Contacto</li>
</ul>
<div style="clear: both"></div>
</nav>
<div class="resp-menu">
<img src="wilphar_logo2.png" width="70">
<h4 class="menu">menu</h4>
<div style="clear: both"></div>
</div>
</body>
</html>

How to make menu slide from Viewport to the Header

I am learning (just began) jQuery and now I want to make a menu like on this site
I mean, I want the menu to slide down out of the viewport to the header, just like in template in the link.
I tried to look at jQuery API documentation, some videos on YT about menus etc, but I did not find anything relevant.
Can anyone please learn me, how to do this?
Thank you very much
PS: I just have this:
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Sans Pro', sans-serif;
box-sizing: border-box;
background-color: #4E4F53;
font-weight: 400;
}
.container {
max-width: 980px;
margin: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2d2d2d;
padding: 20px 0;
}
.logo {
float: left;
}
ul {
position: relative;
float: right;
margin: 5px;
display: flex;
flex-direction: row;
}
ul.active {}
ul li {
list-style: none;
}
ul li a {
color: #FFF;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.25em;
display: block;
font-size: 1em;
}
.menu-toggle {
margin: 0 1em;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RISE</title>
<link rel="stylesheet" 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">
</head>
<body>
<header>
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".menu").toggle();
});
});
</script>
</body>
</html>
Use translateY(); css class and jQuery to toggle classes.
This code snippet should get you where you need to be! It will need a bit of editing to fit your needs.
I've added a div called .offsite-canvas that houses your "offscreen" container. When you press the menu toggle button, jQuery toggles a class that puts the offscreen container in view for the user.
$( ".menu-toggle" ).click(function() {
$(".offsite-canvas").toggleClass("open");
});
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');
* {
margin: 0;
padding: 0;
}
.offsite-canvas {
position: relative;
transform: translateY(-400px);
transition: all .5s;
z-index: 100;
}
.offsite-canvas.open {
position: relative;
transform: translateY(0);
}
body {
font-family: 'Source Sans Pro', sans-serif;
box-sizing: border-box;
background-color: #4E4F53;
font-weight: 400;
}
.container {
max-width: 980px;
margin: auto;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2d2d2d;
padding: 20px 0;
}
.logo {
float: left;
}
ul {
position: relative;
float: right;
margin: 5px;
display: flex;
flex-direction: row;
}
ul.offcanvas {
display: flex;
float: none;
z-index: 100;
}
ul.active {}
ul li {
list-style: none;
}
ul li a {
color: #FFF;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.25em;
display: block;
font-size: 1em;
}
.menu-toggle {
margin: 0 1em;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RISE</title>
<link rel="stylesheet" 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">
</head>
<body>
<div class="offsite-canvas">
<ul class="offcanvas">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
<header>
<div class="container">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-toggle">
<i class="fas fa-bars"></i>
</div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".menu").toggle();
});
});
</script>
</body>
</html>
I would suggest if you want to make a nav menu that comes onto the screen when a button is clicked, create the menus as normal, and then place it off the screen on either the left or the right by using translateX() in css.
From that point on, when the button is clicked, Toggle a class that would translate the menu one the x axis so that it is visible.

How to stop li tag from stepping down after content addition?

I've been working on my portfolio site and I've been trying to use li tags to display the different projects. One problem that I noticed is that everytime I add content to the li, it steps down and refuses to stay inline like I want. In the example below, I added "pp" and the first li stepped down. Once the content is removed from the li, it goes back in its original line. Any help would be greatly appreciated.
.works ul.project_ul {
padding: 0;
text-align: center;
margin-top: 40px;
margin-bottom: 50px;
}
.works ul.project_ul li {
width: 25.3%;
height: 230px;
display: inline-block;
list-style: none;
margin: 1%;
border-radius: 12px;
}
.works ul.project_ul li:nth-child(1) {
border: 1px solid #202124;
}
.works ul.project_ul li:nth-child(2) {
background-color: red;
}
.works ul.project_ul li:nth-child(3) {
background-color: #08171f;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="works">
<ul class="project_ul">
<li>
pp
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</body>
</html>
Just add the rule vertical-align: top; for your li selector
.works ul.project_ul {
padding: 0;
text-align: center;
margin-top: 40px;
margin-bottom: 50px;
}
.works ul.project_ul li {
width: 25.3%;
height: 230px;
display: inline-block;
list-style: none;
margin: 1%;
border-radius: 12px;
box-sizing: border-box;
vertical-align: top;
}
.works ul.project_ul li:nth-child(1) {
border: 1px solid #202124;
}
.works ul.project_ul li:nth-child(2) {
background-color: red;
}
.works ul.project_ul li:nth-child(3) {
background-color: #08171f;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="works">
<ul class="project_ul">
<li>
pp
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</body>
</html>

Categories