I'm new to coding in general, and I'm just beginning to code my first website, but when I run this code in Brackets Live Preview, the page shows up blank. Not sure if I'm missing something, or if I have an error in the code. Thanks for your help!
<!DOCTYPE html>
<html>
<head>
<title>My Finger Slipped</title>
</head>
<body bgolor="#000" text="#FFF">
<h1>My Finger Slipped</h1>
</body>
</html>
Actually your pages isn't blank just that you make your body text the color white so you think its blank. Try highlighting the page you will see that there is text there. Typically you would wanna make a separate CSS page for you HTML and link it this way you can change your whole website by just adding div and id's.
HTML
<title>My Finger Slipped</title>
</head>
<body>
<h1>My Finger Slipped</h1>
</body>
</html>
CSS
body {
background-color: #E5DAD3;
}
h1 {
color: white;
}
Related
I'm trying to make a fairly simple site which there's a div with some text inside, centered both horizontally and vertically on the page.
I wouldn't have thought this would be that difficult to do, but something quite weird's happening. Here's the source that does work. Let's call this source A.
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
and here's the source that doesn't work. Let's call this source B.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
They both use the same stylesheet, which is here:
* {
font-family: 'Josefin Sans';
margin: 0;
padding: 0;
}
div.wrap {
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
}
div.content {
border: 1px solid red;
text-align: center;
width: 100%;
}
And the problem is that the div.wrap is only vertically aligned when I link to the stylesheets outside of the html head tags. This is the only difference between the source that works and the source that doesn't.
I know that you're meant to include source inside the head tags and that's why I think it's so strange that it only works when I do the opposite of this.
I would include a link to some exampls on jsfiddle or something, but the problem is how I'm including the stylesheets, which jsfiddle doesn't let me change.
I've tried this on all of the browsers I have (Opera, Firefox, and Chrome,) and the problem persists between them.
Is this some sort of HTML bug? Or am I making some obvious mistake?
Here are some screenshots.
Source A:
Source B:
I viewed the source in a web browser, and even when I link to the stylesheet outside the head, it seems to put it in there. So, in both examples, when actually viewed, the stylesheet is automatically being put in the head tags.
If my question isn't clear, it's basically this:
Why is this strange behavior happening, and how can I fix it?
It's not strange but your HTML is invalid by doing it that way in A.
Browsers are required to do the best they can with invalid markup. The problem with that, of course, is that you are relying on the browser to guess correctly at your intentions so don't write invalid markup.
So I'm basically wondering if the code I wrote is supposed to just pop up a page with "This web page uses an external style sheet", in blue font. I've been trying for hours to get my CSS to link to my HTML code and finally I did but all it was, was blue font. P.S I'm supposed to turn this in tonight so need to be sure!
What it looks like
<!DOCTYPE html>
<html lang="en">
<head>
<title>External Styles</title>
<meta charset="utf-8">
<link rel="stylesheet" href="color.css">
</head>
<body>
<p>This web page uses an external style sheet.</p>
</body>
</html>
css:
body { backround-color: #0000FF;
color: #FFFFFF;
}
No it is not. It suppose to show with White Color font with a light background.
This is some other css or browser plugin's impact.
You can try on the fiddle first to verify what it can look like at a clean state.
https://jsfiddle.net/
First of all you have wrongly typed background-color.
The code you provided is giving you the Blue background with white text.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Fiddle</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="txtPopup">
<p>This web page uses an external style sheet</p>
</div>
</body>
</html>
CSS Code
body {
color: #FFFFFF;
background-color: #0000FF
}
I'm new to asp.net MVC and I need to have a full background image on the login page. Im getting confused with all of the cshtmls and getting lost on where to set the full background image. Help please..
I think that best solutions is to do that via style sheets (css). All styles should be in a separate css file. For beautiful code don't use in-line styling:
body {
background-image: url('your_img_path');
margin: 0;
}
Firstly I would say, treat '.cshtml' just like '.html' for all designing purposes.
To add background image in a view (.cshtml page in Asp.net MVC), you simply need to add it in < body > tag as 'background' attribute.
I have provided the sample code. Have a Look.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login Page</title>
</head>
<body background="~/Content/Images/sahb.png">
</body>
</html>
Regards!
SAHB
In case if you want change background in a particular View just add thise code
#section head{
<style type="text/css">
body {
background-image: url('/Images/paper.jpg');
margin: 0;
}
</style>
}
But dont forget in Layout of this View add following line
<head>
#RenderSection("head", required: false)
</head>
If you want it on all pages use Shared/_Layout.cshtml file
and change body tag similar to
Probably I would put only on the Home/Index.cshtml page so it appears only on the home page
To avoid that repeated across other pages I would add an ID to home page in the Shared/Index.chtml file as follows
<body id="HomepageBody" >
and change it in the Content/site.css file add
#HomepageBody { background-image: url("/images/7flowers.jpg" );
background-repeat:no-repeat; background-position:center; }
That would make it work across popular browsers like Chrome.
if you wanna use background-image: url('');
just do not use ~ symbol
use this code in cshtml page to insert background image on entire screen of your div section
<div style="background-image: url('/Areas/Admin/Content/Image/OIP7.jpg'); background-repeat:no-repeat; background-size:100% 100%">
one more thing ~ is not working in Url. start your image address with forward slash
/ link this '/Areas/Admin/Content/Image/OIP7.jpg'
In Index.cshtml:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/CSS/Main.css" />
</head>
<body
</body>
</html>
in Main.css:
body {
background-image: url(../Images/myBackgroundPictureName.png);
background-repeat:no-repeat;
background-size:cover;
}
It is very simple just use a css property background image on that div or that section you want.
<div style="background-image: url('/Content/images/image_2.jpg');"></div>
If your image is not displaying, you may have to add ~ tilde sign to the URL
Example :
<div style="background-image: url('~/Content/images/image_2.jpg');"></div>
<!DOCTYPE html>
<html>
<head>
<title>Earth Game</title>
This is the code below that is not showing up in Notepad++, any ideas why?
<style>
canvas {
position: absolute;
top: 0px;
left: 0px;
background: transparent;
}
</style>
Everything else is showing up as code, just the code above in the Style tags.
</head>
<body onload="init()">
<!-- The canvas for the panning background -->
<canvas id="background" width="600" height="360">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
<script src="EarthGamejs"></script>
</body>
</html>
What it looks like :
Make sure the code isn't collapsed, to do so check on the left of your code in np++, you should see a small square with a plus sign inside it, try clicking on it.
Edit: Notepad++ doesn't support CSS highlighting in an HTML file. One option you have is to create a new css file, do what you have to do with the css and then paste it back in the html file.
Duplicate
All I want to do is embed an image from my computer into this webpage. The image file is Avery.jpg, and it is on C:. Could my path be wrong, or am I doing something else completely wrong?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color:#CCFFFF;
<!--Baby Blue???-->
}
p {
color:#800080;
font:100px Verdana, sans-serif;
}
</style>
<title>birthday.html</title>
</head>
<Body>
<img src="Avery.jpg" alt="avery" />
<p>Happy Birthday!</p>
</Body>
</html>
it will appear normally if you put the image in the same root folder of your web page.
Put the HTML file and the image file in same location and try. It will work for you.