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;
Related
I've started tooling around with SVG and it is going good.
I am trying working the alignment of the image to the up corner of the left-hand side, however, I just could not make it well. I want to show a quarter of the circle on the front page.
I've set something up by margin, right and top but the effect is not for what I want. The SVG moves a little to the left-hand side of the page only still far away. (image below).
Guys- I am trying hard but if anyone could any resources or support then it would be highly appreciated.
The first image that I attached is what I made, but the second image is what I want to align.
Thank you
.topcon {
background-color: #f6f5f5;
position: relative;
width: 200px;
height:250px;
border: 15px;
padding: 50px;
margin: 150px auto 150px auto;
border-radius: 20px;
}
.top-circle
{
position: absolute;
right: 700px;
top: 40px;
margin: -200px auto -200px autp;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="stylesheet"href="css/styles.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Profile card component</title>
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
body {
background-color: #00B6C7;
width: 1440px;
}
</style>
</head>
<img class="top-circle"src="images/bg-pattern-top.svg" alt="big circle on top">
<body>
<div class="topcon">
<h1>This is for what I made</h1>
<h1>I want the circle could go up and only show quarter of the circle</h1>
Victor Crest
26
London
80K
Followers
803K
Likes
1.4K
Photos
</body>
</html>
enter image description here
enter image description here
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 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 making a website for some work and I have successfully made the background for the headers and all. But the problem is, I want to join it to the top of my webpage but it refuses to do that. How do I prevent it? (Not a duplicate of where the answer was adding !Important to the code)
Here is my code:
HTML:
<!DOCTYPE html>
<html class="html">
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>LMUN - Home</title>
<div class="header"></div>
</head>
</html>
CSS:
.html
{
background-color: #FFFFFF;
}
.header
{
background-color: #70A5DA;
height: 4.5%;
width: 90%;
box-sizing: content-box;
position:absolute;
margin-left:5%;
margin-right:5%;
margin-top:0 !important;
padding:0 !important;
}
Note: I want to keep position absolute as it allows me to set everything in percentage values which is very essential for me.
Try this
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>LMUN - Home</title>
</head>
<body>
<div class="header"></div>
</body>
</html>
CSS
body {
margin:0;
}
.html
{
background-color: #FFFFFF;
}
.header
{
background-color: #70A5DA;
height: 4.5%;
width: 90%;
box-sizing: content-box;
position:absolute;
margin-left:5%;
margin-right:5%;
margin-top:0 !important;
padding:0 !important;
}
Yes for this you need to set the margin for body and also you can add same for html as 0.Then it will reduce unnecessary spaces. Like for example.
html{margin:0;}
body{margin:0}