I am trying to figure out how to test how my code works but I cant seem to figure out why they wont link. They are in the same folder. I am also trying to add a facebook pixel and analytics to this page. Would I embed that code into my HTML file?
Thanks in Advance
Here is my code
Html
<!DOCTYPE html>
<head>
<title>Full Screen Landing Page</title>
<link href rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Welcome To The Tribe</h1>
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
</body>
</html>
#import url('https//fonts.googleapis.com/css?family=Raleway');
#import url('https//fonts.googleapis.com/css?family=Oswald');
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro{
height: 100%;
width: 100%;
margin: auto;
background: url() no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width:none;
}
it not <link href rel="stylesheet" href="style.css">
its
<link rel="stylesheet" href="style.css">
it read the initial href value as it is empty its not reading any css file
You shouldn't need to have href before rel when you link your stylesheet. Also, you have a closing html tag but no opening html tag.
Either put your custom css classes into the style.css file, or use style tag to include them, also you have duplicate href attribute inside link tag
<head>
<title>Full Screen Landing Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro{
height: 100%;
width: 100%;
margin: auto;
background: url() no-repeat 50% 50%;
display: table;
top: 0;
background-size: cover;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width:none;
}
</style>
</head>
<body>
<section class="intro">
<div class="inner">
<div class="content">
<h1>Welcome To The Tribe</h1>
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
</body>
Related
I'm trying to display an html webpage that has an image that covers the entire page. Text that is centered at the top of image, but obviously in front so it can be seen.
Example : https://gyazo.com/8f7015a61a296f71c02e2b4030710074
This is what I'm getting :https://gyazo.com/0a2f9ad37eaf05cd1cb5a623f75d6bca
My text is displaying at the bottom, nor is it over the image.
Here is my CSS:
body {
background-color:brown;
}
.container {
position: relative;
text-align: center;
}
.title {
position: absolute;
top: 50%;
left: 50%;
text-align:top;
}
Here is my HTML:
<!doctype HTML>
<html>
<body>
<div class="container">
<img src="images/image.jpg" alt="Loading Image.." style="width:100%;">
<div class="title">Oregon Trail:Marist Edition</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/index.css">
</body>
</html>
Can someone show me what I'm doing wrong?
Check this. You have given the style for .title instead of .Title. Please check that. Everything else works as expected.
body {
margin: 0;
}
.container {
position: relative;
text-align: center;
}
.title {
position: absolute;
top: 10px;
left: 0;
right: 0;
}
<html>
<body>
<div class="container">
<img src="https://www.dike.lib.ia.us/images/sample-1.jpg/image" alt="Loading Image.." style="width:100%;">
<div class="title">Oregon Trail:Marist Edition</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/index.css">
</body>
</html>
I am trying to set a background image for a header. This is what I want it to look like:
This is what I am getting:
So, a tiny weird strip at the bottom end. Here is my code:
html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="JavaScript2.js"></script>
</head>
<body>
<div id="header">
<nav class="cf" id="menu">
<ul>
<li>ABOUT</li>
<li>FOLK</li>
<li>JAZZ</li>
<li>SIGNATURE</li>
<li>NYLON</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="container">
<div id="logo">
<img id="rays" src="Images/PNGs/rayons.png">
<img id="base" src="Images/PNGs/baseLogo.png">
<img id="roue" src="Images/PNGs/roue.png">
<img id="letters" src="Images/PNGs/title.png">
</div>
</div>
<div id="footer">
</div>
<script type="text/javascript" src="JavaScript2.js"></script>
</body>
</html>
css
html, body {
margin: 0px;
padding: 0px;
height: 100vh;
}
#header {
position: absolute;
background-image: url("Images/menu.jpg");
width: 100vw;
height: 10vh;
opacity: 1;
z-index: 6;
background-size: 100% 100px;
}
I have tried adding a size property to the background, like so:
background-size: 100% 100px;
And that's how I am getting the tiny strip at the bottom. Without that property I get nothing at all. Also, the header is not as long as the page although I have set the width at 100vw. Thanks of your time.
I made some changes to your header:
#header {
/*position: absolute;*/
background-image: url("Images/menu.jpg");
/*width: 100vw;
height: 10vh;
opacity: 1;
z-index: 6;*/
background-size:cover;/*added this*/
padding: 5px;/*added this*/
}
JSfiddle: https://jsfiddle.net/sg7dfpzj/
Hope that helps, cheerio!
Remove height for #header Class
#header {
position: absolute;
background-image: url("Images/menu.jpg");
width: 100vw;
/*height: 10vh;*//*Remove this*/
opacity: 1;
z-index: 6;
background-size: 100% 100px;
}
Add a padding top and bottom for the header until you have all the image showing, the problem with empty spaces, you dont tell the browser how to show the image,
add some more content or add a padding top and bottom.
Where is your code for the class="cf" and id="menu" for the line <nav class="cf" id="menu"> in the body section of the HTML code?
There might be an error there. Check it out.
I want the logo of my page on the top left corner surrounded by a black background. However, the background color does not cover the area on the right of the image. I am using HTML and CSS.
This is my code:
#title {
width: 100%;
height: 100%;
background-color: black;
}
#title img {
width: 50%;
height: 50%;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<body>
<div id="title">
<a href="index.html">
<img src="http://i.stack.imgur.com/WE2r4.png" align="left" />
</a>
</div>
</body>
</html>
Remove align="left" attribute. It acts similar as if you made image float: left, however you never clear the float after so the parent collapses and you simply can't see background:
#title {
width: 100%;
height: 100%;
background-color: black;
}
#title img {
width: 50%;
height: 50%;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<body>
<div id="title">
<a href="index.html">
<img src="http://i.stack.imgur.com/WE2r4.png" />
</a>
</div>
</body>
</html>
If you want to make logo left-aligned you should use text-align: left of the #title, it will work properly because img is inline-block by default.
You have to add a display rule to your title element so that it actually gets a placement in the flow:
#title {
display: inline-block;
width: 100%;
height: 100%;
background-color: black;
}
#title img {
width: 50%;
height: 50%;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />
<body>
<div id="title">
<a href="index.html">
<img src="http://i.stack.imgur.com/WE2r4.png" align="left" />
</a>
</div>
</body>
</html>
This is my code. I have done the CSS and the HTML code so that this logo image that I have moves to the right.
However, the image remains still. What am I doing wrong?
HTML CODE:
#logo {
width: 200px;
height: 200px;
position: absolute;
top: 0px;
right: 200 px;
border: 25px black;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="template.css">
</head>
<body>
<div id="logo">
<img src="LogoSIEM.PNG" alt="logo" style="width:200px;height:200px">
</div>
</body>
</html>
Change right: 200 px; to right: 200px;
The space before px is invalid, so it doesn't recognize it as being 200px from the right.
add:
body {
position:relative;
}
Use float:right instead of what you have tried to do in your css....
#logo {
width: 200px;
height: 200px;
border: 25px black;
float:right;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="template.css">
</head>
<body>
<div id="logo">
<img src="LogoSIEM.PNG" alt="logo" style="width:200px;height:200px">
</div>
</body>
</html>
My html page is:
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
My css file is:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
display: block;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
But the content div is not centered properly.
I am using IE7 to view this page.
You should add a <!doctype> to the beginning of your document, also remove the display: block; from your div selector, a div is by default a block level element so this declaration has no meaning. (this won't break the layout, it just makes no sense to tell an already block level element to be block again.)
Other than that, your CSS is perfectly fine :)
HTML:
<!doctype html>
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>
CSS:
html, body{
width: 100%;
height: 100%;
}
div#content{
width: 80%;
margin: 0 auto;
height: 90%;
border: 1px solid red;
}
http://jsfiddle.net/u5w8F/
For IE 7 quirksmode (and IE 6) you can add
html, body{
text-align: center;
}
div#content{
text-align: left;
}
to center the div... (old skool)