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>
Related
Im trying to create my first web project using Brackets and cannot get the background image to show up.
My css code is
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
.header {
background-image: url(../img/hero.jpg);
background-size: cover;
height: 100vh;
}
h1 {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super healthy meals.</h1>
I'm hungry!
Show me more
</div>
</header>
</body>
</html>
I've been following a course online and have typed all the code in identically. I don't know why my background image wont appear. I dont think its a problem with the file tree as when I click on the url(../img/hero.jpg) Brackets shows me that it recognizes the image. Any help would by greatly appreciated. Thank you.
You are targeting the class .header instead of the tag header.
header { /* Change from .header to header */
background-image: url("../img/hero.jpg"); /* Add Quotes */
background-size: cover;
height: 100vh;
}
I think there are two things going on here that will get it working again:
Your css declaration for header is referencing a class but I think you want it to reference a tag header.
Will want to make sure the url path is relative and surrounded by quotes. The example below references one that is hosted online. The snippet you supplied didn't have the path inside quotes: '../url/destination'
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
header {
background-image: url('https://global-uploads.webflow.com/5ef5480befd392489dacf544/5f9f5e5943de7e69a1339242_5f44a7398c0cdf460857e744_img-image-p-1080.jpeg');
background-size: cover;
height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<title>Omnifood</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super healthy meals.</h1>
I'm hungry!
Show me more
</div>
</header>
</body>
</html>
Apparently CSS is not recognizing the file path. I suggest you describe it more extensively to resolve this error: "C:\Users\Name\img\hero.jpg"
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
The problem that I have with my code is that the <p>Welcome to my Profile</p> will not center. I've tried using Bootstrap's text-center class but it doesn't work desirably. I've also tried multiple things like using text-align: center; in CSS and even using width: 100%; for both the header and the div. Are there any solutions? Thanks in advance.
HTML:
<!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">
<title>Jane's Personal Profile</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<ul>
<li>Social Media</li>
<li>Portfolio</li>
</ul>
</header>
<div class="row">
<div class="span8 offset2 text-center">
<p>Welcome to my Profile</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
header {
height: 75px;
padding-left: 10px;
box-shadow: 5px 5px 10px grey;
width: 100%;
}
header > h1 {
float: left;
}
ul {
display: table-row;
float: right;
list-style: none;
}
ul > li {
display: table-cell;
vertical-align: middle;
height: 70px;
padding: 10px;
padding-right: 20px;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', cursive;
}
Looks like you're using "text-center" as a class. Unless you set your CSS to recognize the class, there is nothing for the CSS to do.
Try adding this to your CSS
.text-center {
text-align: center;
}
You should always provide a jsFiddle for problems like this, btw ;)
If Bootstrap has a class setting the paragraph element to align left, you may also need to change the paragraph to a div. Alternatively, you could add a class to the paragraph such as "center-me" and add CSS
p.center-me {
text-align: center;
}
Bootstrap adds a giant bunch of CSS. Make sure, when you are using Bootstrap, to check if it has CSS styles that are affecting what you want to accomplish. Most browsers contain a developer's window where you can see what styles are being applied to any window. In Chrome, you can right click on any element and select "Inspect" to pull up this window and see both the HTML and the styles that are being applied from any CSS source.
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 am making a website for my friend but when using CSS the image doesn't show up.
<html>
<head>
<title>Bobby & Rose | Pillow Service</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrapper">
</div>
</body>
</html>
CSS:
* {
margin: 0px;
padding: 0px;
font-family: Arial, Sans-Serif;
font-size: 14px;
background-color: grey;
}
.wrapper {
margin: 30px;
background-image: url(../img/warpper.png);
}
My image is the header menu background but when I try the website it doesn't show up.
Here is mistake in your HTML
<title>Bobby & Rose | Pillow Service</title>
Solution - JSFIddle
HTML
<title>Bobby & Rose | Pillow Service</title>
CSS
.wrapper {
width: 100%;
background-image: url(../img/warpper.png);
min-width: 100px;
min-height: 100px;
}
If still not working at your end then you should check the path of the image it is incorrect.
The DIV has no Content therefore the size is 0x0px, means no place to show the image.
Add
width:200px;
height:200px;
to your CSS. Instead of 200px youse what ever you want.
Determine the size, I also use id instead of class
CSS
#wrapper {
height:200px; <!--on me here -->
margin: 30px;
background-image:url('wrapper.png');
}
HTML
<html>
<head>
<title>Bobby & Rose | Pillow Service</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
</div>
Just noticed your image name is spelled 'warpper' while the div is 'wrapper'.
Perhaps two letters being switched?
On another note - depending on the size of your image, and how you'd want it to fill the div, you may need to add:
background-size: contain;