I'm trying to make a navigation bar for my site using Notepad++ but my CSS code for the navigation bar won't link to my HTML file. I've tried linking the files together using this method:
<link rel="stylesheet" type="text/css" href="main.css" />
But it doesn't seem to make any changes to my HTML file.
Here is the HTML code that I would like the CSS code to link to:
<ul id="nav">
<li>Home</li>
<li>Popular Stories</li>
<li>Q&A Page</li>
<li>Popular Stitch Sessions</li>
<li>Video Stories</li>
<li>Secrets Section</li>
</ul>
Here is the CSS code that I would like to be linked to the HTML code:
/*CSS Document*/
* {margin:0px; padding:0px;}
body {
width: 600px;
margin-right: auto;
margin-left: auto;
font-family: Verdana, Geneva, sans-serif:
font-size: 86x;
}
/*NAVIGATION*/
*nav {
margin-bottom:20px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}
*nav li {
display:inline;
margin-left:-3px;
margin-right:-3px;
}
*nav a {
text-decoration: none;
background-color:#999;
padding: 10px;
margin-bottom:10px;
}
*nav a:link{
}
*nav a:hover {
background-color:#FFF
}
#nav a:visited {
}
You're using an asterisk for your ID selector. It should be a hash tag (#nav, not *nav).
Here is what the rest of the HTML should look like assuming your CSS file is in the same folder:
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>Stylesheet Linking</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
</body>
</html>
Keep file in same directory than in your htmml file type below code
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
</body>
</html>
Related
I can apply "color:red" on hover, but not margin
can't figure out what I'm doing wrong
my css
.contact{
color:black;
position:relative;
}
.contact:hover{
color:red;
margin-top:20px;
}
my html
<ul>
<li>
<a class="contact">move me on hover</a>
</li>
</ul>
It is an inline element. You should set the display for it to block or inline-block to make margin work.
.contact{
display: block;
color:black;
}
.contact:hover{
color:red;
margin-top:20px;
}
You can't set top margin to an inline element. You need to make your element block or inline-block if you want to set top margin in your element.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.contact {
color: black;
position: relative;
display:block;
}
.contact:hover {
color: red;
margin-top: 20px;
}
</style>
</head>
<body>
<ul>
<li>
<div>abc</div>
<a class="contact">move me on hover</a>
</li>
</ul>
</body>
</html>
Use top instead of margin-top:
.contact:hover{
color:red;
top:-20px;
}
<!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>
<style>
.contact{
color:black;
}
li:hover{
color:red;
margin-top: 20px;
}
.contact:hover{
color:red;
}
</style>
</head>
<body>
<ul>
<li>
<a class="contact">move me on hover</a>
</li>
</ul>
</body>
</html>
I'm mocking up a site as an assignment and my text is appearing behind my nav bar. I need it to be under the nav bar how can I fix this?
so I've tried setting the margin-bottom to 50px and setting it as important.
I've tried setting the nav bar as static.
I've tried messing with a bunch of different settings as well but I can't seem to find something to work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="gregslist.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
</head>
<header>
<nav>
<ul>
<li class="greg">Greg's List</li>
<li>Post</li>
<li>Account </li>
</ul>
</nav>
</header>
<body>
<div class="search">
<input type="text" placeholder="Search Software Jobs"> </input>
<label> Search Jobs </label> </div>
</body>
</html>
head{
font-family: 'Roboto', sans-serif;
height:100%vh;
}
nav{
top:0;
right:0;
left:0;
background-color:#dddd;
position:fixed;
padding:10px;
}
ul {
width:100%vp;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
float: right;
text-align:center;
}
.greg{
float:left;
text-align:center;
font-size:25px;
}
li a {
display:block;
padding:8px;
color:purple;
font-size:20px;
text-decoration:none;
}
Because your nav is position: fixed;, it doesn't push the rest of your content down the page. Anything absolutely positioned, be it absolute,sticky, or fixed, is not a part of the DOM in the same way that a normal element is. To non-absolute positioned elements it may as well not exist. What you want to do is add a margin-top to your content like this:
head{
font-family: 'Roboto', sans-serif;
height:100%vh;
}
nav{
top:0;
right:0;
left:0;
background-color:#dddd;
position:fixed;
padding:10px;
}
ul {
width:100%vp;
margin: 0;
padding: 0;
}
li {
list-style-type: none;
float: right;
text-align:center;
}
.greg{
float:left;
text-align:center;
font-size:25px;
}
li a {
display:block;
padding:8px;
color:purple;
font-size:20px;
text-decoration:none;
}
body{
margin-top: 80px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="gregslist.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li class="greg">Greg's List</li>
<li>Post</li>
<li>Account </li>
</ul>
</nav>
</header>
<div class="search">
<input type="text" placeholder="Search Software Jobs"> </input>
<label> Search Jobs </label> </div>
</body>
</html>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
how can I get rid of the spacing between the navigation menu links? I want them to look as if they are in one cell and instead use borders between them!
body { background-color:white;
}
ul { list-style-type:none; text-align:center; margin:0auto; text-align:center; padding:0px; display:block; overflow:hidden;}
li a {display:block;text-decoration:none; text-transform:uppercase; padding:8px; background-color: #dddddd;}
li {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="prova.css">
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Using display: inline-block, simply removing the line breaks is enough to remove the space, since the <li>s are behaving like text.
body { background-color:white;
}
ul { list-style-type:none; text-align:center; margin:0auto; text-align:center; padding:0px; display:block; overflow:hidden;}
li a {display:block;text-decoration:none; text-transform:uppercase; padding:8px; background-color: #dddddd;}
li {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="prova.css">
</head>
<body>
<ul>
<li>Home</li><li>News</li><li>Contact</li><li>About</li>
</ul>
</body>
</html>
so try this
li {
margin-left: -4px;
display: inline-block;
}
I am not able to change background color using an external style sheet. when i try this with internal style sheet it works perfect.
Here is the code.
ext1.css
<style>
body{
background-color: red;
}
ul{
color:green;
}
:link{
color:aquamarine;
}
p{
font-family:"arial";
font-size:20px;
}
</style>
HTML DOC
<!doctype html>
<html>
<head>
<title> Defining external style sheet</title>
<link href="ext1.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li> Home</li>
<li> News</li>
<li> Contact</li>
<li> About</li>
</ul>
<p> NOTE: We use href="#" for test links , in real web sites we will use URL's </p>
You can't have the HTML <style> tags in your external CSS.
Your CSS file should look like this:
body {
background-color: red;
}
ul {
color: green;
}
:link {
color: aquamarine;
}
p {
font-family: "arial";
font-size: 20px;
}
index.html and style.css are on my local machine to practice coding.
Chrome and Safari are rendering the CSS correctly but FireFox 29 is not. Firefox recognize the css file but it's not rendering it. I've tried on a different machine and still have the same issue.
I've already validated my code and there were no errors. Am I missing any tag that is preventing this from rendering in Firefox?
<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<link rel="stylesheet" type="test/css" href="style.css">
<title>Welcome!</title>
</head>
<body>
<div id="pagewrap">
<!-- Top Head of My Page -->
<div id="header">
<nav id="nav">
<div id="socialnetwork">
<img src="./Social_Icons/Linkedin.png" alt="LinkedIn">
<img src="./Social_Icons/facebook.png" alt="FB">
<img src="./Social_Icons/Instagram.png" alt="InstaGram">
<img src="./Social_Icons/Twitter.png" alt="Twitter">
<img src="./Social_Icons/Skype.png" alt="Yelp">
<!-- Icons from Dribble by Dawid Dapszus https://dribbble.com/dashoo-->
</div>
<!-- End of Social Network Links-->
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Resume</li>
<li>About Me</li>
<li>Contact </li>
</ul>
</nav>
</div>
</div>
<!--End of Page Wrap -->
</body>
</html>
body {
font-family:'Century Gothic', sans-serif;
}
a {
text-decoration: none;
}
#pagewrap {
width:950px;
margin: 0 auto;
}
#socialnetwork {
padding-top: 100px;
float:right;
}
#socialnetwork img{
height:30px;
}
#nav ul{
text-align: left;
border-bottom: groove;
}
#nav li{
margin:0 15px 0 0;
display: inline;
}
#nav li a:link{
color:#868686;
}
#nav li a:visited{
color:#868686;
}
#nav li a:hover{
color:#324EDC;
}
#nav li a:active{
color:#324EDC;
}
You are typing the wrong word in Link tag attribute value, you are typing "test/css" instead of "text/css"
Your Tag:
<link rel="stylesheet" type="test/css" href="style.css">
Updated Tag:
<link rel="stylesheet" type="text/css" href="style.css">
type="test/css"
Shouldn't it be: text/css?