I have read through my small code and want the dots removed from my nav-bar. I have already explored other similar questions on stack over flow and tried their answer. But the outcome that I have seen is that is still not removing the dots but when I type in the code in code.io it removes it for me: https://codepen.io/abhirajsb/pen/xxVLrpW.
My HTML code in my code editor(VS-CODE):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multi-Vitamins</title>
</head>
<body>
<header id="header">
<img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
<nav id="nav-bar">
<ul>
<li>About</li>
<li>How it works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</body>
</html>
My CSS code:
li {
list-style-type: none;
padding: 0%;
margin: 0%;
}
The output on my extension live is always showing the dots:
Try This in the header replace styles.css with ur css:
<head>
<link rel="stylesheet" href="styles.css">
</head>
You just try list-style: none instead of list-style-type: none;
li {
list-style: none;
padding: 0%;
margin: 0%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multi-Vitamins</title>
</head>
<body>
<header id="header">
<img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
<nav id="nav-bar">
<ul>
<li>About</li>
<li>How it works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</body>
</html>
Could you please show us your CSS code? if this is all you have. Could you please try to do a hard reset. by clicking Ctrl + shift + R in your browser and check again with our answers.
Or try to run it on your local device. I don't see ay problem with your code as it run without any problem. anyway I tried it with list-style: none; and it worked
ul {
list-style: none;
}
that would solve your problem. if that doesn't work please let me know.
ul {
list-style: none;
}
<header id="header">
<img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
<nav id="nav-bar">
<ul>
<li>About</li>
<li>How it works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
I simply forgot to reference CSS style sheet to my HTML sheet.
solved it.
Related
I am new to html and css, I just desined sample website on xd adobe. image of it is attached. The html works but when I am working on the css part, its is not working, It does not show on the website. I am coding at a scss file and not css file. I will appreciate any help! You can see I wrote on the css file that the logo should be without underLine but still its not working
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap");
body {
background: #F2F2F2;
font-family: 'Poppins';
margin: 0;
}
.navbar {
background: white;
padding: 1em;
.logo2 {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 10em;
}
}
.container {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JustFly</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo2" href="#">JustFly</a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Hamburger Menu">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Hamburger Menu">
<ul class="primary-nav">
<li class="current"> Home </li>
<li> FAQ </li>
<li> Pricing </li>
</ul>
<ul class="secondary-nav">
<li> Contact </li>
<li class="GoPremiumBtn">Buy Now </li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="col">
<h1 class="head">Fly Like Never Before.</h1>
</div>
<img id="mainImage" class="mainImage" src="images/icons8-fighter-jet-96.png" alt="Fighet Plane Image">
</div>
</section>
</body>
</html>
[Code][1]
[Output][2]
[Design][3]
[1]: https://i.stack.imgur.com/K19ny.png
[2]: https://i.stack.imgur.com/Iluoa.png
[3]: https://i.stack.imgur.com/fGDMf.png
Your code looks fine and could also be tested successfully. The only thing which may cause your problem is your path to the CSS file.
Check if the path in <link rel="stylesheet" href="css/main.css"> is correct.
You said you are using scss for writing styles so you must be using local node setup or might be using the ruby compass thing.
Please check if your local development setup is outputting the css file at correct path.
you should try below command if using node-sass
sass --watch scss/main.scss:/css/main.css
Then add this to your HTML
<link rel="stylesheet" href="./css/main.css">
I am new to html and css, I just desined sample website on xd adobe. image of it is attached. The html works but when I am working on the css part is not workink, I does not shown on the website. I am coding at a scss file and not css file. I will appreciate any help! You can see I wrote on the css file that the logo should be without underLine but still its not working
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap");
body {
background: #F2F2F2;
font-family: 'Poppins';
margin: 0;
}
.navbar {
background: white;
padding: 1em;
.logo2 {
text-decoration: none;
font-weight: bold;
color: black;
font-size: 10em;
}
}
.container {
display: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JustFly</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<div class="container">
<a class="logo2" href="#">JustFly</a>
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Hamburger Menu">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Hamburger Menu">
<ul class="primary-nav">
<li class="current"> Home </li>
<li> FAQ </li>
<li> Pricing </li>
</ul>
<ul class="secondary-nav">
<li> Contact </li>
<li class="GoPremiumBtn">Buy Now </li>
</ul>
</nav>
</div>
</div>
<section class="hero">
<div class="container">
<div class="col">
<h1 class="head">Fly Like Never Before.</h1>
</div>
<img id="mainImage" class="mainImage" src="images/icons8-fighter-jet-96.png" alt="Fighet Plane Image">
</div>
</section>
</body>
</html>
Design in XD :
Code Image:
Output:
Try a.logo2:link, a:logo2:visited as a selector for that CSS rule. That should be more specific than the browser default a:link and a:visited and overrule them.
I'm trying to get my ul section to display my code on the same line yet it still presents it in a vertical list. I'm new to this and so can't figure out why it won't go on the same line. I've tried display:inline-block; and float:left; but that hasn't worked.
HTML:
<!doctype html>
<html>
<head>
<title>practice.co.uk</title>
<link href="main2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>My Webpage</h1>
<nav>
<ul>
<li>Home</li>
<li>Page 2</li>
</ul>
</nav>
<h2>Page 2</h2>
<p>All the content of Page 2</p>
</body>
</html>
CSS:
body nav ul li {
display: inline-block;
}
You have it right. Check that the css file is named correctly and that main2.css is in the same directory as your html file.
works as expected when put into a snippet - see below. Check the filepath for the stylesheet and typos...
body nav ul li{
display:inline-block;
}
<!doctype html>
<html>
<head>
<title>practice.co.uk</title>
<link href="main2.css" rel="stylesheet">
</head>
<body>
<h1>My Webpage</h1>
<nav>
<ul>
<li>Home</li>
<li>Page 2</li>
</ul>
</nav>
<h2>Page 2</h2>
<p>All the content of Page 2</p>
</body>
</html>
I've been trying to create a css rule within the html editor just to test if the selector "nav" works, but it doesn't. I tried my hardest but I've been stuck. For instance when I try to create a styling rule for nav, it is not recognized by the html editor, non of the anchored elements under nav is recognized. Any help/insight would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
nav {
color: white;
background-color: orange;
}
</style>
</head>
<body>
<header>
<a href="index.html">
<h1></h1>
<h2></h2>
</a)
<nav>
<ul>
<li>FoodFolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section>
<p>To enter frames.</p>
</section>
<footer>
<img src="Pics/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
<img src="Pics/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
<p>© 2014 </p>
</footer>
</body>
</html>
Nothing shows up when I try to put a background image in a div via CSS. I've tried adding properties like position, width, height. And, I am also able to place the photo via CSS in the <body> tag. But, obviously, I'd like to not have to leave it there. Here's my html:
<!DOCTYPE html/>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css"/>
<title>
Lovers & Fighters
</title>
</head>
<body>
<div id="photo">
</div>
<nav>
<ul id="main">
<li>Menu</li>
<li>About</li>
<li>Music</li>
<li>Videos</li>
<li>Photos</li>
<li>Contact</li>
</ul>
<ul id="social">
<li>
<img/>
</li>
<li>
<img/>
</li>
</ul>
</body>
</html>
Here's my CSS:
#photo{
background-image: url('../images/bandbanner.png')
}
<div id="photo">
</div>
in your dive you haven't set the size. for example:
#photo{
background-image: url('../images/bandbanner.png');
width:100px;
height:100px;
}
The div photo contains nothing, try adding
#photo{
background-image: url('../images/bandbanner.png');
width: 100%
padding : 100px;
//hopefully this will make the photo appear and you can go from there
}
Set height & width property of #photo.
See working example: http://jsfiddle.net/ihkawiss/2n0o9t9x/
The HTML:
<!DOCTYPE html/>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css"/>
<title>
Lovers & Fighters
</title>
</head>
<body>
<div class="photo">
<nav>
<ul id="main">
<li>Menu</li>
<li>About</li>
<li>Music</li>
<li>Videos</li>
<li>Photos</li>
<li>Contact</li>
</ul>
</nav>
<ul id="social">
<li>
<img/>
</li>
<li>
<img/>
</li>
</ul>
</div>
</body>
</html>
And the CSS:
.photo{
background-image: url('../images/bandbanner.png');
width:100px;
height:100px;
}
set your height and width
width: px;
height: px;