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?
Related
Here in the below code i am trying to put my contact section to the right in the header section .Also i have tried using float to right but it is not working in this section.
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<span class="spans" id="firstSpan">Logo</span>
<span class="spans">About</span>
<span class="spans">Portfolio</span>
<span class="spans">Services</span>
<span class="spans">Contact</span>
</div>
</body>
</html>
I think it can help you.
.spans:last-child {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<span class="spans" id="firstSpan">Logo</span>
<span class="spans">About</span>
<span class="spans">Portfolio</span>
<span class="spans">Services</span>
<span class="spans">Contact</span>
</div>
</body>
</html>
I think if you want a colorful themed type you can use this
.header {
padding: 80px;
text-align: left;
background: #1abc9c;
color: white;
}
.spans:last-child {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
<span class="spans" id="firstSpan">Logo</span>
<span class="spans">About</span>
<span class="spans">Portfolio</span>
<span class="spans">Services</span>
<span class="spans">Contact</span>
</div>
</body>
</html>
Float is not intended for styling purpose. Its a mis-used hack. float is for floating images within a paragraph.
The modern approach is to use flexbox: .header { display: flex; }
to move the contact element to the right, you have to give it a margin: auto;. this will make it consume all remaining space. You can target the contact element with: .header span:last-of-type.
On a sidenote, do not use spans but take an <ul> for a navbar like the sample below:
nav ul {
display: flex;
list-style: none;
padding: 0;
}
nav ul li {
margin: 5px;
}
nav ul li:last-of-type {
margin-left: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>cssss</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav>
<ul>
<li>Logo</li>
<li>About</li>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
</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>
As my title suggests, my content goes off screen.
I've looked through my css file, and there's isn't any margins with minus something. So why is the content going off screen at both sides?
Appreciate any suggestions to why this is.
Thanks.
body{
background: linear-gradient(rgb(100,50,50), rgb(80,20,20)) no-repeat;
color: white;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
img{
margin: 1%;
}
/*Header*/
header {
background-color: #1d1e21;
height: 100vh;
position: relative;
}
header span {
color: #fff;
}
header input {
margin-top: 20px;
}
p#slogan {
color: #fff;
letter-spacing: 2px;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
padding: 0 0 0 10px;
}
ul li a {
color: #fff;
list-style-type: none;
}
ul li a:hover {
color: black;
list-style-type: none;
text-decoration: none;
}
/*Main*/
/*sloganAndSocial*/
#sloganAndSocial {
background-color: #1d1e21;
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NBC 2011</title>
<link rel="stylesheet" href="css/main.css" type="text/css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
<!--Header section-->
<header>
<div id="topBar">
<div class="row">
<h1 class="pull-left"><span>NORDIC </span>BARISTACUP</h1>
<form class="pull-right">
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div class="row">
<p class="pull-left" id="slogan">be together act together learn together</p>
<ul class="pull-right">
<li>ABOUT NBV</li>
<li>2011 EVENT</li>
<li>NORDIC ROASTER</li>
<li>RESULTS</li>
<li>LINKS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!--Main section-->
<div class="main">
<img src="" alt="bo!" class="cover" />
</div>
<div id="sloganAndSocial">
<div class="container">
<div class="row">
<h2 class="pull-left">"To create an environment in which knowledge<br>about coffee and its sphere can be obtained"</h2>
<ul class="share-buttons">
<li><img alt="Share on Facebook" src="images/flat_web_icon_set/inverted/Facebook.png"></li>
<li><img alt="Tweet" src="images/flat_web_icon_set/inverted/Twitter.png"></li>
<li><img alt="Share on Google+" src="images/flat_web_icon_set/inverted/Google+.png"></li>
<li><img alt="Pin it" src="images/flat_web_icon_set/inverted/Pinterest.png"></li>
<li><img alt="Send email" src="images/flat_web_icon_set/inverted/Email.png"></li>
</ul>
</div>
</div>
</div>
</header>
<!--Section1-->
</body>
</html>
You have two divs in your topBar with class row but which are not inside an element with class container. That is not intended by Bootstrap and therefore leads to unintended behaviour. You have to wrap those two divs in another div with class container.
Also, as #nik_m mentioned: Why are you wrapping the whole page in a header? That's not, what headers are supposed to do.
Remove pull-left and pull-right classes from the elements and better use flexbox for your alignments. It will make your life much easier!
Also, why the wrapper of the whole site is inside a header???
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="nav">
<ul>
<li>Rooms</li>
<li>Food</li>
<li>Events</li>
<li>Offers</li>
</ul>
</div>
<div class="jumbotron">
<h1> Welcome</h1>
<p>Enjoy your stay</p>
</div>
</body>
</html>
.nav li{
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
display:inline;
list-style-type:none;
}
.jumbotron{
background-image:url(http://4.bp.blogspot.com/-NPN-yWZyRIM/T4jMz_3o0SI/AAAAAAAAAAA/LGEgW7642Rs/s1600/Greenlake_Room-Greenlake-01-1061468546-O.jpg');
height:300px;
}
My ul and background image do not show up when i run the code. Please help, im a beginner.
disregard:..........................................................................................................................
You Missed a quotes in this line
background-image:url(http://4.bp.blogspot.com/-NPN-yWZyRIM/T4jMz_3o0SI/AAAAAAAAAAA/LGEgW7642Rs/s1600/Greenlake_Room-Greenlake-01-1061468546-O.jpg');
To be corrected as
background-image:url('http://4.bp.blogspot.com/-NPN-yWZyRIM/T4jMz_3o0SI/AAAAAAAAAAA/LGEgW7642Rs/s1600/Greenlake_Room-Greenlake-01-1061468546-O.jpg');
You miss single quotes at the beggining of the image url
Try this
background-image:url('http://4.bp.blogspot.com/-NPN-yWZyRIM/T4jMz_3o0SI/AAAAAAAAAAA/LGEgW7642Rs/s1600/Greenlake_Room-Greenlake-01-1061468546-O.jpg');
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>