html{
background-color:#abb2bc;
}
body{
margin:0;
}
h1 {
margin:0;
background-color: #363b42;
}
img{
width:250px;
}
.navbar{
text-align:center;
}
.blogpost{
background-color:white;
padding:5%;
margin:3%
}
#blogheader{
margin-top:15px;
}
.blogimage{
margin-top:25px;
}
<!DOCTYPE html>
<html>
<head>
<title>GamingCoachBlog</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="navbar">
<h1>GamingCoach</h1>
</div>
</header>
<main>
<div class="blogpost">
<h2 id="blogheader">Recent Blog Posts</h2>
<img class="blogimage" src="/Users/david/Desktop/Blog/Images/How to get more wins in Fortnite.png" alt="How to get more wins in Fortnite">
</div>
</main>
</body>
</html>
I connected my github repository to my netlify website and it loads fine. In my github repo it has an images folder but my images will not load.
I also have a link set to the images that has another html file linked to it but whenever i click on it it says page not found. Please explain why this is happening.
You must specify the path that you want to link at or it won't know where do you want to point at.
<!DOCTYPE html>
<html>
<head>
<title>GamingCoachBlog</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="navbar">
<h1>GamingCoach</h1>
</div>
</header>
<main>
<div class="blogpost">
<h2 id="blogheader">Recent Blog Posts</h2>
<img class="blogimage" src="C:/Users/david/Desktop/Blog/Images/How to get more wins in Fortnite.png" alt="How to get more wins in Fortnite">
</div>
</main>
</body>
</html>
Related
.main_banner {
background-image: url("../images/main_banner.png");
width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<heading>
<title>
**********
</title>
<link rel="stylesheet" href="styles/styles.css" type="text/css" />
</heading>
<header>
<nav>
<!--Navigation Placeholder-->
</nav>
</header>
<body>
<div class="main_banner">
<!--Main Banner-->
</div>
<div class="main_content">
</div>
</body>
</html>
I have a div tag in my HTML assigned a class of main_banner.
For some reason, I cannot get my image that is specified in my stylesheet to display.
I have my main project folder which contains the following: index.html, images (folder), and styles (folder). My image, main_banner.png, is located in my images folder.
What am I missing?
.main_banner {
background-image: url('../images/main_banner.png');
}
Assuming you have referenced your style sheet correctly, you will need to specify a width and height in your CSS. The DOM only sees your block elements as empty. Once you give a height and width your image will show up.
.main_banner {
background: url("../images/main_banner.jpg");
/*background: url("https://media.istockphoto.com/photos/christmas-lights-defocused-background-bokeh-gold-blue-picture-id613518332?k=6&m=613518332&s=612x612&w=0&h=Own5MdgJXjNhFd0YUyED1UP3mQsHeNhfML9F-DQYdYw=");*/
width: 100%;
height: 300px;
}
<!DOCTYPE html>
<html>
<head>
<title>
**********
</title>
<link type="text/css" rel="stylesheet" href="styles/styles.css" />
</head>
<body>
<header>
<nav>
<!--Navigation Placeholder-->
</nav>
</header>
<div class="main_banner">
<!--Main Banner-->
</div>
<div class="main_content">
</div>
</body>
</html>
I can't get any pics or links of pics to show. I tried using multiple
links and pics. Nothing works. All files in the same folder, and CSS
connected. I don't know what to do any more.
HTML
<!doctype html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset= "utf-8">
<title> portfolio website </title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<html>
<body>
<section class:"main">
<div id="container">
<div class:"header">
<nav>
Home
About
Portfolio
</nav>
</div>
</div>
</section>
</body>
</html>
CSS
Body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.main{
height: 100%;
width: 100%;
margin: auto;
background-image: url("rockets.jpg");
background-repeat: none;
background-size: cover;
}
Wrong:
<section class:"main">
<div class:"header">
<nav>
<a href:"index.html">Home</a>
<a href:"About.html">About</a>
<a href:"Portfolio.html">Portfolio</a>
</nav>
</div>
</section>
Answer:
<section class="main">
<div class="header">
<nav>
Home
About
Portfolio
</nav>
</div>
</section>
NOT ":" YOU MUST USE "="
I cannot get Slogan! (id h2) to raise above the picture. h1 is perfectly fine, but not h2.
I am new to CSS, HTML, and Stackoverflow if that meens anything.
I appreciate the help in advance.
The HTML:
<html>
<head>
<link href="HomePage.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Icon">
<div id="h1">Name</div>
<img src="RightArrow.jpg" class="img-circle">
<div id="h2">Slogan!</div>
</div>
The CSS:
#h1{
line-height:120px;/*to lower it*/
position:absolute;
left:-150px;
font-size:38.5px;
}
#h2{
line-height:-300px/*to raise it*/
position:absolute;
right:400px;
font-size:38.5px;
}
#Icon{
position:relative;
margin-top:25px;
margin-bottom:100px;
margin-left:600px;
}
Line height should not be used to move anything. Use relative or absolute positioning. However, here's a simpler solution:
<html>
<head>
<link href="HomePage.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Icon">
<div id="h1">Name</div>
<div id="h2">Slogan!</div>
<img src="RightArrow.jpg" class="img-circle">
</div>
What do you exactly want to do???
Raise above image can be done just by
<div id="h2">Slogan!</div>
<img src="RightArrow.jpg" class="img-circle">
I am not getting what u want to do???
Please be more specfic about your requirement...
When i try to add a <img> tag, IE8 automatically add a 'Empty Text Node' after the image tag.
HTML :-
<html>
<head>
<title>Railway Services</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="img/icon.png" />
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="header">
<div id="wrapper">
<div class="logo">
<img src="img/logo.png"/>
</div>
</div>
</div>
<div id="page" class="homePage">
<div id="wrapper">
<h1>Home Page</h1>
</div>
</div>
<div id="footer">
<div id="wrapper">
<p class="copyRight">Copyright©2012 Railway Services. All rights reserved</p>
</div>
</div>
</body>
</html>
styles.css :-
#CHARSET "ISO-8859-1";
body{
margin:0px;
padding:0px;
font-size:12px;
color:#123456;
font-family:verdana,_sans,arial;
text-align:center;
}
#wrapper{
width:98%;
margin:0 auto;
}
#page{
float:left;
width:100%;
}
p{
margin:0px;
padding:0px;
}
/**********************HEADER*********************/
#header{
float:left;
width:100%;
}
.logo{
float:left;
width:20%;
height:150px;
cursor:pointer;
}
.logo img{
width:100%;
height:100%;
}
/************************HEADER END***************/
/************************FOOTER*******************/
#footer{
float:left;
width:100%;
}
/***********************FOOTER END****************/
See this image
In the above image you can see the IE generates Empty Text Node after the <img> tag.
I can't found why IE generate empty text node.Can anybody help me..?
IE shows this to any elements in the page that has a blank space between tags. This may not cause any problem.
The only consideration is when your content is inline and it adds a space between the elements. In this case, all you have to do is eliminate the blank space between the tags.
There is a line break and some whitespace for indentation after the image tag, which leads to creating an empty text node.
If you write your code like that:
<div class="logo"><img src="img/logo.png"/></div>
you will not have the empty text node any more.
Since it's really IE specific, I think it's just a bug of the parser.
I want to link my css code with the html code for my website. I am using Aptana Studio 3. It appears to work, but when I preview it in Aptana my css styling does not show up. Here is my code:
<!DOCTYPE HTML>
<title>jampens</title>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div align="left">
About
Contact
Products
</div>
<div align="center">
<h1>JAM Pens</h1>
<div>
<p>Welcome to the official website of JAM Pens.</p>
</div>
</div>
</div>
</body>
</html>
And my css code:
.body {
font-family: cursive;
}
When I preview it, the css style doesn't show up.
All my files are saved in the same folder so I don't know why this is not working. Thanks in advance for your help.
.body refeers to a container with a body class, if you want to be applied to the body tag remove that dot
body { font-family: cursive; }
.some its applied to class="some"
#some its applied to id="some"
some its applied to <some></some>
You can not set the font family in the body.
Html code:
<!DOCTYPE HTML>
<title>jampens</title>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div align="left" class="navagation">
About
Contact
Products
</div>
<div align="center">
<h1>JAM Pens</h1>
<div>
<p>Welcome to the official website of JAM Pens.</p>
</div>
</div>
</div>
</body>
</html>
Css:
.navagation{
font-family: cursive;
}