enter image description here
The HTML:
<!DOCTYPE html>
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript" src="Jquery Cycle Slideshow/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="Jquery Cycle Slideshow/js/cycle2.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="cssforsliding.css">
</head>
<body>
The stylesheet:
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: black;
...
I am using notepad++ and I have saved my CSS file in the notepad++ documents file as cssforsliding.css and I believe I have linked my HTML and CSS correctly but it doesn't seem to be working!
Help would be greatly appreciated.
EDIT: Sorry I should have been clearer: the CSS part in my question is the CSS for an EXTERNAL CSS file. So I actually want to link my HTML to an EXTERNAL CSS file.
EDIT2: I have moved my css file inside another folder within the folder where my HTML (and CSS) is located and specify that folder in my HTML and now it works strangely! Thanks everyone :)
enter image description here
I can't try this solution at the machine I'm on (at work), but it might work if you just close the tag
<link rel="stylesheet" type="text/css" media="screen" href="cssforsliding.css" />
If not, it looks tidier and follows HTML5 in any case.
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="cssforsliding.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 704px;
overflow: hidden;
background: black;
}
</style>
</head>
<body>
</body>
</html>
Related
Would anyone know why css is not working in my html? It is linked to my html, but not working. It is also showing empty in chrome inspect - css tab. I see that css is linking , but not sure why it is not working.. Thank you in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quierra Marriott</title>
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px
font-family: 'Roboto', sans-serif;
color: #eee;``
}
body {
width: 100%;
height: 100%;
background: url() no-repeat center fixed;
background-size: cover;
}
Your css is invalid:
html {
font-size: 10px /* You're missing a semi-colon here*/
color: #eee;`` /* You don't need the strings `` here...*/
...
It may be of interest to you to find a tool like w3c css validator: https://jigsaw.w3.org/css-validator/.
Missing semicolon and empty string are problem but they are only affecting font-size property of html selector.
If your intention was to add background to body then you should fill image url
body {
width: 100%;
height: 100%;
background: url('http://image-url.com/image') no-repeat center fixed;
background-size: cover;
}
These is main reason for empty page
Didn't see any 'body' tag in your HTML that's why I think it's not working
Okay I can't comment on any other questions that's why I am posting a new question.
I've tried all solutions suggested in this answer, this as well.
#head {
text-align: center;
font-family: roboto;
}
body, html {
height: 100%;
}
.parallax {
background-image: url('.../pics/parallax.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/text.css">
<script src="scripts/jquery-3.1.0.min.js"></script>
<script src="scripts/jquery.animate-color.js"></script>
<script src="scripts/custom_scripts.js"></script>
<title>Yadullah.me</title>
</head>
<body>
<h1 id="head"> Hi there!</h1>
</body>
</html>
Pretty simple right? But for some reason the background image just refuses to show up.
I have tried with my CSS, HTML, and image in the same folder with no success. Tried in different sub-directories, no success.
I have checked file name, extension and all of that stuff. Tried without quotes and what not. Tried different images even. Tried removing all other CSS files as well, nothing works.
You have a few too many stops in your style property. Your css should look like this:
.parallax {
background-image: url('../pics/parallax.jpg');
...
}
#head {
text-align: center;
font-family: roboto;
}
body, html {
height: 100%;
}
.parallax {
background-image: url('.../pics/parallax.jpg'); // In Here try put absolute URL or change .../ in ../
height: 100%;
width:100%; //and try add width
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
You can try add base tag for example like this
<!doctype html>
<html>
<head>
<base href="http://YourSite.com/">
<meta charset="utf-8">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/text.css">
<script src="scripts/jquery-3.1.0.min.js"></script>
<script src="scripts/jquery.animate-color.js"></script>
<script src="scripts/custom_scripts.js"></script>
<title>Yadullah.me</title>
</head>
<body>
<h1 id="head"> Hi there!</h1>
</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
I have a question or two about floating headers.
Currently, I'm working with two CSS files, bootstrap.min.css and main.css, the latter being a custom file, containing the following
* {
margin: 0;
padding: 0;
}
#heading {
padding: 0;
margin: 0;
border: 0;
background-color: #acc7dc;
height: 10%;
width: 100%;
z-index: 10;
position: fixed;
font-family: 'Merriweather', serif;
text-align: center;
}
which to the best of my understanding should start the heading block at the very top of the screen. However, sometimes when testing the HTML, there is a whitespace between the top of the screen and the header.
The HTML is structured like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/main.css" >
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<title>Trial</title>
</head>
<body>
<div id="heading">
<header>
<h1>Trial</h1>
</header>
</div>
</body>
</html>
I don't modify this behaviour anywhere else. Any ideas what the problem might be?
Since you are using Bootstrap you could utilize the .navbar-fixed-top class, that should correct for the gap . If you want to apply your own custom styes to the header, you would just need to apply both the class and the id styling:
<div class='navbar-fixed-top' id="heading">
<header>
<h1>Trial</h1>
</header>
</div>
I am teaching myself css and html and I created a stylesheet and broke it up into different elements (background image, cursors, etc). I am referencing the entire css file in the main html file but when I run the application I get a blank screen. What am I missing? Here is my code. First, the stylesheet
html, body
{
overflow: auto;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#background
{
background-image: url("../Assets/Graphics/background.jpg");
background-color: #cccccc;
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.5;
}
#mycursor
{
cursor: url(../Assets/Graphics/cursor.cur), auto;
}
And now the html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Destiny Saga</title>
<link rel="stylesheet" type="text/css" href="Style/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="Assets/Graphics/title.ico" />
</head>
<body>
</body>
</html>
Here is what you probably meant:
html, body {
overflow: auto;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#background {<--It is Bad to name an ID background... you probably want to just do div here...-->
background-image: url("../Assets/Graphics/background.jpg");
background-color: #cccccc;
background-size: 100% 100%;
background-repeat: no-repeat;
opacity: 0.5;
}
#mycursor { <---you could just add cursor to the above so that it will be like that in the above div-->
cursor: url(../Assets/Graphics/cursor.cur), auto;
}
And now the html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="Style/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="./Assets/Graphics/title.ico" />
</head>
<body>
<div id="background">
<h1> Hello World</h1>
<div id="mycursor">
</div>
</div>
<script type="text/javascript" src="./Javascript/Main.js"></script>
</body>
</html>
Things that are certainly wrong:
The img element is missing a src attribute
The #mycursor selector matches an element with id="mycursor" and you have id="#mycursor"
The #background ruleset doesn't match any element
You might have other issues (such as incorrect URLs).
In short, there is nothing in your HTML that should create a visible effect, and none of the styles that apply to it will change that.
Change:
<img id="#mycursor">
to:
<img id="mycursor">
In css you use # for ids, but in html you dont have to write the #