I have an issue and i really dont know how to solve it because of my lack of knowledge( i am a begginer) . Well let me explain you. I am building a blogspot, so i have a header and a footer files which I want to get loaded in every .html files in the project. In order to achieve that I used a script which I found in stack overflow.
The script works fine but I have some minor issues with it. But before continue, let me paste my index.html and header.html and my css files to understand better. This is my index.html file which includes the script.
<!doctype html>
<html lang="en">
<head>
<title>The Spooky Side</title>
<meta charset="utf-8">
<meta name="description" content="Front Page">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="articles-box.css">
<link rel="stylesheet" href="``header-footer-style.css">
<link href="https://fonts.googleapis.com/css?
family=Anton|Dosis|Montserrat|Nosifer&display=swap" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header-id").load("header.html");
$("#footer-id").load("footer.html");
});
</script>
</head>
<body>
<div class="header-cl" id="header-id"></div>
<div class="footer-cl" id="footer-id"></div>
</body>
</html>
This is the header.html file
<!doctype html>
<html lang="en">
<head>
<title>The Spooky Side</title>
<meta charset="utf-8">
<meta name="description" content="Header Page">
<link href="https://fonts.googleapis.com/css?
family=Anton|Dosis|Montserrat|Nosifer&display=swap" rel="stylesheet">
<link rel="stylesheet" href="header-footer-style.css">
</head>
<body>
<div class="header-cl" id="header-id">
<a class="header-company-name" href="">The Spooky Side</a>
<a class="header-content" id="about1" href="">About</a>
<a class="header-content" href="../blog/blog.html">Blog</a>
<a class="header-content" href="">Contact</a>
</div>
</body>
And finally this is my css file.
/*H E A D E R */
.header-cl{
display:flex;
grid-column:1/-1;
background-color: white;
}
.header-company-name{
font-family: 'Nosifer', cursive;
color:black;
font-size: 2em;
padding-top:17px;
padding-left:30px;
text-decoration:none;
transition-duration: 1.2s;
}
.header-content{
font-family: 'Dosis', sans-serif;
color:black;
font-size: 1.6em;
text-decoration:none;
padding: 20px;
transition-duration: 0.7s;
/*^^^space between buttons^^^*/
}
/*F O O T E R */
.footer-cl {width : 100%;grid-column:1/-1;background-color:
black;color:white;
}
.footer-company-name {
display:flex;
justify-content: center;
align-items: center;
font-family: 'Dosis', sans-serif;
font-size: 1.4em;
padding-top:20px
}
.footer-content{
display: flex;
justify-content: center;
align-items: center;
margin:0px;
}
.footer-anchors{
font-family: 'Dosis', sans-serif;
color:white;
font-size: 1em;
text-decoration:none;
}
/*HOVERS DAMN*/
.header-content:hover{
color: #FF0000;
}
.footer-anchors:hover {
color: #510000;
}
.header-company-name:hover{
color:#FF0000;
}
/*I D S */
#about1{
margin-left: auto;
}
/*space between blog's name and other options */
And now which is the issue. I am going to post three screenshot. When I run the header.html I got this result which is the right one,(I dont post the footer.html because is the same with the header)which is looks like this.
header.html
But when I run the index.html in the Atom it looks like this.
index.html run in Atom
And finally when I run my code in google chrome it looks like this[Index HTML run in google chrome3
As you can see this is my problem. In google the header and the footer are not displayed,and i really dont know why. But in the atom the index.html displays the header but without the correct form, and finally in the header.html when I run it its correct. Anyone have idea why this happening or how can I fix that?
how folder looks
It looks like you need to load a fragment (just the contents of #header-id from header.html into #header-id on index.html)
Try this:
$("#header-id").load("header.html #header-id");
https://api.jquery.com/load/#loading-page-fragments
Related
Im a beginner in Visual Studio and my html file/code work fine but my css file doesn't work. My problem is not detected in the workspace.
I also try to do this, nothing happen :
<link href= "CSS\index.css" rel="stylesheet" type="text/css">
CSS code :
style
h1 {
background-color: blue;
}
I am also new but I think I can help. You have two options, that I am aware of.
The first and ideal option would be to reference to a separate style.css file to go along side your maim html page (ex: index.html & style.css).
(index.html)
<!DOCTYPE html>
<html>
<head>
<title>yourwebsite.com</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<img src="your.jpg" alt="Handsome Man" width="100"
height="100">
<h1><b>your name</b></h1>
<p>your tag line</p>
<a href="https://twitter.com/yourtwitter"</a>
</body>
</html>
(styles.css)
body{
background-color: #f4f4f4;
color: #555555;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
/* Same as above */
/* font: normal 12px Arial, Helvetica, sans-serif; */
line-height: 1.6em;
}
h1{
color: #00ff00;
}
p{
color: rgb(0,0,255);
}
The second and worst option is to include your css within your main html file.
(Copied from https://ryanstutorials.net/css-tutorial/css-
including.php)
<!doctype html>
<html>
<head>
<title>Embedded CSS example</title>
<meta name="description" content="A page with embedded css">
<meta name="keywords" content="html css embedded">
<style>
h1 {
text-decoration: underline;
color: #4583c2;
}
p {
padding-left: 20px;
font-size: 18px;
}
</style>
</head>
<body>
...
</body>
</html>
Make sure the index.css file is inside the CSS folder, then add the below link tag.
<link rel="stylesheet" href="./CSS/index.css">
i'm using vs code
i tried :
-removing all other styles but one
-checking all semicolons and tags
-using another browser
none of these worked.
please reply if you have a plausible answer :) thanks!
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/body_favicon.ico" type="image/x-icon"/>
<a class = "one" href = "/index.html">MAIN</a>
</head>
<body>
<p id="p1">Websites by Froggy Sites!</p>
<p id="p2">Nelson Mandela - The Promotion</p>
<style>
html {
background-color: #0096FF;
}
#font-face {
font-family: neonclubmusic_bold;
src: url(NEON\ CLUB\ MUSIC_bold.otf);
}
#font-face {
font-family: neonclubmusic;
src: url(NEON\ CLUB\ MUSIC.otf);
}
a.one:link, a.one:visited, a.one:active {
font-family: "neonclubmusic_bold";
font-size: 20px;
color: black;
text-decoration: none;
}
a.one:hover {
color: black;
font-size: 25px;
text-decoration: underline brown 5px;
}
.p1 {
font-family: "neonclubmusic_bold";
font-size: 30px;
text-align: center;
}
.p2 {
font-family: "neonclubmuic";
font-size: 20px;
text-align: left;
}
</style>
</body>
</html>
Your are probably using your CSS without including it or in wrong place.
Try using in style tag in head section above your body or create a new file named for example index.css and connect this file to your code.
If you use external version. For example
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
<title>My site</title>
</head>
<body>
Other HTML STUFF HERE
</body>
</html>
Or if you use style tag
<!DOCTYPE html>
<html lang="en">
<head>
<style>
all styling here
body {
margin: 0;
}
</style>
<title>My site</title>
</head>
<body>
All HTML HERE
</body>
</html>
You are trying to access a class name while using: .p1, however it looks like your html is set up with p1 as an id. To access IDs in css you will need to change the "." to a "#".
ex. #p1{ ... } instead of .p1{ ... }
As stated above first you should make sure to reference the elements
in the proper way, either if you need to do it by class (".") or by
Id ("#") in the CSS code.
I have give some standard order to your code within the HTML
structure for improving readability.
Also there are some typos and invalid spaces.
Check the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/body_favicon.ico" type="image/x-icon"/>
<style>
html {
background-color: #0096FF;
}
#font-face {
font-family: neonclubmusic_bold;
src: url(NEON/CLUB/MUSIC_bold.otf);
}
#font-face {
font-family: neonclubmusic;
src: url(NEON/CLUB/MUSIC.otf);
}
a.one:link, a.one:visited, a.one:active {
font-family: "neonclubmusic_bold";
font-size: 20px;
color: black;
text-decoration: none;
}
a.one:hover {
color: black;
font-size: 25px;
text-decoration: underline brown 5px;
}
.p1 {
font-family: "neonclubmusic_bold";
font-size: 30px;
text-align: center;
}
.p2 {
font-family: "neonclubmuic";
font-size: 20px;
text-align: left;
}
</style>
<title>Main</title>
</head>
<body>
<a class="one" href="index.html">MAIN</a>
<p class="p1">Websites by Froggy Sites!</p>
<p class="p2">Nelson Mandela - The Promotion</p>
</body>
</html>
I left the HTML and CSS in one single file as it is in your initial example.
So I'm new to programming and I've been learning on my own through the Odin Project. The first project I've been working on is a recreation of the Google search site. I've got some of the basic HTML layout but my CSS is not being applied, I originally started this project on codepin and everything worked. When I switched to vscode... nothing. Here's what I have so far for HTML and CSS.
.flex-container {
height: 100vh;
border: 3px solid blue;
display: flex;
justify-content: center; /* x-axis */
align-items: center; /* y-axis */
}
.flex-item {
font-size: 90px;
font-family: 'Noto Sans JP', sans-serif;
#G {
color: #4885ed;
}
#o {
color: #db3236;
}
#o1 {
color: #f4c20d;
}
#g {
color: #4885ed;
}
#l {
color: #3cba54;
}
#e {
color: #db3236;
}
.foot {
background-color: #A5A6A1;
height: 2em;
}
.ad {
color: blue;
}
<!DOCTYPE html>
<html>
<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>Google</title>
<style>
#import url('https://fonts.googleapis.com/css2? family=Noto+Sans+JP&display=swap');
</style>
</head>
<body>
<div class ='flex-container'>
<!-- Try using 'span' instead of a div for 'Google'.-->
<div class='flex-item'>
<span id='G'>G</span>
<span id='o'>o</span>
<span id='o1'>o</span>
<span id='g'>g</span>
<span id='l'>l</span>
<span id='e'>e</span>
</div>
<input type="Search">
</div>
<footer class='foot'>
<span id='ad'>Advertising</span>
<span>Business</span>
<span>How search works</span>
</footer>
</body>
</html>
This is my first post so hopefully its a good question. Any and all help is appreciated. Thanks!
You forgot to link your css file to your html file. Add a link tag at the end of the head tag, in case you have the html and css files in the same directory and your css file's name is styles, you can do like this:
<head>
...
<link rel="stylesheet" href="styles.css">
</head>
The reason it works on Codepen is because they do the linking work for you, so the html, js and css file are automatically connected to each other
Looking at CSS code it seems like it is in different file. So in this case you have to link CSS to HTML file you can do this by using <link rel="stylesheet" href="yourfilepath"> inside head tag.
-- You have to call the css file that you made with:
<link rel="stylesheet" href="the file of the css">
In the index.html file I am able to do this an it works as designed:
<!DOCTYPE html>
<html>
<head>
<body style="background-color: #A8E4A0;">
<meta charset="utf-8" />
<title>Demo</title>
My partner would like to keep the background-color in our css file user-interface.css. Which makes sense to me but it is not working as I would expect.
When I enter the background-color it doesn't show up and leaves my background-color as white.
What am I missing?
* Universal Settings */
.body{
background-color : AE8E4A0;
font-family: Arial;
}
/* Search bar */
.heading {
font-size: 30px;
padding: 16px 0;
color: #444;
text-align: center;
}/*Container*/`enter code here`
Thanks
Scott
You have a minor error on your code. You should not put the dot (.) in front of body as it is not a class name, it's an element. Same for the heading. So your code should be like:
/* Universal Settings */
body{
background-color : #AE8E4A0;
font-family: Arial;
}
/* Search bar */
heading {
font-size: 30px;
padding: 16px 0;
color: #444;
text-align: center;
}/*Container*/
<!DOCTYPE html>
<html>
<head>
<link href="cssfilename.css">
<body style="background-color: #A8E4A0;">
<meta charset="utf-8" />
<title>Demo</title>
Also, you would need to link your CSS to your HTML file. Not that the "cssfilename.css" need to be replaced by the filename of your css file, and they need to be in the same directory.
added to CSS background-color: #A8E4A0; and verified the link in my htlm was correct
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My first Website!</title>
<style>
body {
background-color: #A8E4A0;
font-family: arial;
}
p {
color: green;
}
</style>
</head>
<body>
<p>This is a paragraph!</p>
</body>
</html>
If you want the style in a seperate .css file, try this:
/* style.css */
/* Needs to be in the same folder/directory as the .html file is. */
body {
background-color: #A8E4A0;
font-family: arial;
}
p {
color: green;
}
<!-- Index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<title>My first Website!</title>
</head>
<body>
<p>This is a paragraph!</p>
</body>
</html>
This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 6 years ago.
I was working on an html page, got halfway through, and decided to start styling somethings. . . All of my styling worked fine! That is until I tried to get a Google Font. I followed all of the instructions and inserted everything into css correctly. However, when I view the page on Chrome, it only displays the "fallback" generic sans-serif font. Here is my css:
#page-first-open {
border: 1px solid black;
width: 1000px;
height: 500px;
text-align: center;
margin: auto;
position: relative;
top: 50px;
}
#import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open p {
font-size: ;
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
Could someone please tell me what I am doing wrong (If I a doing it wrong), or point me in the right direction of getting it to work?
Try to put your import on the top of your file, before any declaration.
Include the #import directive at the top of the file.
#import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open {
border: 1px solid black;
width: 1000px;
height: 500px;
text-align: center;
margin: auto;
position: relative;
top: 50px;
}
#page-first-open p {
font-size: ;
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
You can remove:
#import url(https://fonts.googleapis.com/css?family=Raleway);
And add:
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
To your <head>. Like so:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
Try to add the following in the head section of your html code and see if it fixed the problem:
<meta charset="UTF-8">
In addition, you need to move the #import to the top of the CSS file, so the font will load