So I have this image that 300px by 100px and its 3 icons in one I want to use it using html and css but I cannot access the folder the image is on my desktop and the path of my file html is C:\Users\User\Desktop\index1.html. Here is the html and css any help I am new to this so I am kinda lost.
HTML FILE
<!DOCTYPE html>
<html>
<head>
<head>
<link rel= "stylesheet" href="primary2.css">
</head>
<body>
<ul class="button">
<li class="yellow"></li>
<li class="purple"></li>
<li class= "red"></li>
</ul>
</body>
</html>
primary.css file
.button{
list-style: none;
margin:0;
padding:0;
}
.button li {
width:100px;
height:100px;
display:inline-block;
background-color: #000;
margin-right:10px;
}
.button li.info{
background : url(../sprite.JPEG) no repeat;
}
The relative path ../ refers to the parent folder, i.e. C:\Users\User\ when called from C:\Users\User\Desktop\
To refer to files in the same directory as your file, you can use the relative path ./, or in most cases, the preceding slash isn't necessary... just specifying the file name should suffice for files located within the same folder.
../sprite.JPEG from C:\Users\User\Desktop\ refers to C:\Users\User\sprite.JPEG whereas ./sprite.JPEG or sprite.JPEG would refer to C:\Users\User\Desktop\sprite.JPEG.
Notice also how you've specified the .css file in your html link tag...
My comment obfuscated the code a bit, so I'll put the revision to the CSS here:
.button{
list-style: none;
margin:0;
padding:0;
}
.button li {
width:100px;
height:100px;
display:inline-block;
background-color: #000;
margin-right:10px;
}
.button li.yellow {
background : url(sprite.JPEG) no-repeat;
}
the only changes were to the last style definition.
Related
i have made a simple website using a free template. i am confused because the images on my version are not showing but the images on the demo version are working and both have exactly the same css files and html because i copy pasted. i will post them below. my confusion lies in the fact that i dont see any of the images reffered to in either the html or the css stylesheet. the styling is there for the images but no link to the file location. 2 questions.
this is what the site should look like:
http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/
this is what my site looks like:
https://cherry-cupcake-30790.herokuapp.com/
as you can see background, background to the navbar and main images are missing but other styling and css are implemented.
why are the images not showing on my version?
why are the images showing on the demo version 0hen there seems to be no reference to the actual file location of the image (only styling of the image)?
thanks.
html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>NightBeach | florida web design</title>
</head>
<body>
<div id="container">
<div id="mainpic">
<h1>Green<span class="off">Mountain</span></h1>
<h2>A template by Bryant Smith</h2>
</div>
<div id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">About</li>
<li class="menuitem">Products</li>
<li class="menuitem">Services</li>
<li class="menuitem">Design</li>
<li class="menuitem">Contact</li>
</ul>
</div>
<div id="content">
<h2>You may use this template in any manner you like. All I ask is that you leave the link back to my site at the bottom of the page. </h2>
<p> </p>
<p> </p>
<h3>Template Notes</h3>
<p>The main image can be changed by either replacing the current image with another one of the same size (900x402), or using a new one of what ever dimensions you'd like. If you choose the latter, you must open up style.css and change the dimensions of #mainpic, as well as the file name if that is different. If you would like to move the heading around in the above image, find "#mainpic h1" in style.css and modify it's "left" and "top" properties, this is also true for the h2 tag.</p>
<p> </p>
<h3>More information</h3>
<p>I decided to leave the content portion open for the templates users to do as they wish with a blank canvas. I don't like to restrict my users too much, and for this reason I leave the defining of any content related styles to you.</p>
<p> </p>
<h3>Template Notes</h3>
<p>The main image can be changed by either replacing the current image with another one of the same size (900x402), or using a new one of what ever dimensions you'd like. If you choose the latter, you must open up style.css and change the dimensions of #mainpic, as well as the file name if that is different. If you would like to move the heading around in the above image, find "#mainpic h1" in style.css and modify it's "left" and "top" properties, this is also true for the h2 tag.</p>
<p> </p>
<h3>More information</h3>
<p>I decided to leave the content portion open for the templates users to do as they wish with a blank canvas. I don't like to restrict my users too much, and for this reason I leave the defining of any content related styles to you.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="footer"><h3>florida web design</div>
</div>
</div>
</body>
</html>
css file:
/* A Free Design by Bryant Smith (bryantsmith.com) */
body {
margin: 0;
padding: 0;
text-align: left;
font: 12px Arial, Helvetica, sans-serif;
font-size: 13px;
color: #061C37;
background: #EEEFE4;
background-image:url(images/background.png);
background-repeat:repeat-x;
}
*
{
margin: 0 auto 0 auto;
text-align:left;}
#container
{
display: block;
height:auto;
position: relative;
width: 940px;
}
#mainpic h1
{
position:absolute;
text-align:right;
color:#F8FDEE;
font-size:30px;
color:#FFF;
left:60px;
top:20px;
}
#mainpic h2
{
position:absolute;
text-align:right;
color:#E1E7F7;
left:60px;
top:50px;
}
#mainpic
{
background-image:url(images/main.jpg);
background-repeat:no-repeat;
width:900px;
height:354px;
}
.off
{
color:#3A6028;
}
#menu
{
background-image:url(images/menu.png);
background-repeat:no-repeat;
width:940px;
height:69px;
float:left;
clear:both;
}
#content
{
width:880px;
height:auto;
background-color:#FFF;
padding-left:10px;
padding-right:10px;
padding-bottom:5px;
}
#footer
{
width:inherit;
height:auto;
}
#footer h3 a,#footer h3 a:visited
{
display:inline;
text-align:center;
font-size:12px;
text-decoration:none;
color:#7198E1;
}
#menu ul {
list-style: none;
padding: 0px;
margin-left:auto;
width:900px;
}
#menu li {
list-style: none;
padding: 0px;
display: inline;
}
#menu a {
float: left;
width: 150px;
height: 40px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
padding-top: 17px;
font-size: 15px;
}
#menu a:hover{
color:#BEE399;
}
#content p
{
}
html, body {
text-align: center;
}
p {text-align: left;}
[1]: http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/
for problem 1, because your website's css is empty, nothing in. The css link is https://cherry-cupcake-30790.herokuapp.com/assets/application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css .
for problem 2, the image link refer is not in the html, but in the css file.
#mainpic {
background-image: url(images/main.jpg);
background-repeat: no-repeat;
width: 900px;
height: 354px;
}
the image link is http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/images/main.jpg
I have an external CSS file name main.css. The ID of nav and footer are working fine but the ID of header doesn't work. When I put the header part in HTML file, it works.
Why does it not work in CSS file.
HTML File:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<meta charset="UTF-8">
</head>
<body>
<div id="header">
<h1>Furkan İlhan</h1>
</div>
<div id="nav">
Hakkında<br>
Kariyer<br>
</div>
<div id="footer">
Tüm Hakkı Saklıdır. Furkanilhan.com
</div>
</body>
</html>
CSS File:
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
The image of result
Because You Use class="header" Property And External CSS Defined ID # Header.
So You Change
#header {
}
Use This Code In CSS
.header {
}
Work 100% Perfectly
Dhaval is wrong - You had it right with the #header since you have it as an id in your HTML.
remove the <style></style> tags from your CSS sheet.
Let me know how you go
Regards,
Kostantinos
It seems the links require id to be defined in each <div></div> to work, not just the class name.
My case was a bit different, where the links didn't work with just class defined in html and .clasname defined in css file.
Image not getting aligned and near image label should come but its not working correctly
<style>
label{
color:red;
font-family: "Times New Roman";
font-size: 25px;
}
label.desc{
color:blue;
font-family: "Times New Roman";
font-size: 12px;
position: relative;
left: -20px;
}
img{
float:left;
width:300;
height:300;
}
</style>
Put every image and corresponding labels in a div like this:
<div id="a">
<image src="http://upload.wikimedia.org/wikipedia/commons/3/38/Heart.gif"/>
<label>1<label>
<label>2<label>
<label>3<label>
</div>
and give that div width:
#a{
width: 260px;
}
make sure the file extension is .css and not .txt
You may be hiding your file extensions. Check http://windows.microsoft.com/en-us/windows/show-hide-file-name-extensions#show-hide-file-name-extensions=windows-7
Then put this:
<link href="style.css" rel="stylesheet" type="text/css" />
between the
<head></head>
tags in your HTML file to call your stylesheet.
Make sure to rename "style.css" with whatever you name your new stylesheet.
I have 2 css files:
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/day/style.css" rel="stylesheet" type="text/css">
main.css
#MainHeader
{
position:absolute; top:0; left:0; right:0;
width:100%;
height:300px;
}
#ContentContainor
{
width: 80%;
position:absolute;
top: 350px;
left: 10%;
}
style.css
#MainHeader
{
background:green;
}
#ContentContainor
{
background: yellow;
}
I want one to position the site: main.css and the other is a user chosen style style.css.
The main.css works correctly but the style.css dosn't seem to be working.
I'll be honest I don't know if this is even possible; I'm experimenting.
If some one has a solution please comment.
What you're stating is absolutely possible.
Let's say you have two stylesheets, as you mentioned:
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/day/style.css" rel="stylesheet" type="text/css">
The main.css will hold your structural (position, dimensions, etc) CSS, and the day/style.css will hold your design (color, animations, etc) CSS.
If your css/main.css has the following CSS:
#main_header {
position:absolute;
top:0;
left:0;
right:0;
width:100%;
height:300px;
}
#content_container{
width: 80%;
position:absolute;
top: 350px;
left: 10%;
}
you can append styles (in css/day/style.css) as follows:
#main_header {
background-color: #00F;
}
#content_container{
color: #F00;
background-color: #0F0;
}
you can also override and 'lock' styles (in css/day/style.css) as follows:
#main_header {
height: 200px; /* override */
}
#content_container{
position: relative !important; /* override and 'lock' */
}
As a last note, you want to make sure your CSS files are being loaded and that your HTML is correctly formatted. Use your browsers Developer Tool / Firebug to make sure that the CSS is being loaded. For example, in Chrome, clicking on the Developer Tool (F12) tab called Network and reloading the page will tell you whether files are being loaded ok (200/304) or whether there are issues (ie, 404, 403, 500, etc)
I have a fairly simple HTML file that i'm running on a local server, as it's soon to be turned into a php file. When I run it from the server however, the CSS doesn't display on the page. Opening the index.html file in a web browser shows it just fine.
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="description" content="Content goes here"/>
</head>
<body>
<div class="header">
<div class="logo">
<img src="images/logo.png"/>
</div>
<div class="navigation">
<ul>
<li>
<a href="mailto:support#link.com">
<img src="images/email.png"/>
</a>
</li>
<li>
<a href="http://Twitter.com/link">
<img src="images/twitter.png"/>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS file:
.header {
width: 700px;
margin: 0 auto;
margin-top: 25px;
margin-bottom: 25px;
height: 61px;
}
.logo {
float: left;
margin-top: 10px;
}
.navigation {
float: right;
}
.navigation li {
width:60px;
height:60px;
float:left;
margin-left:14px;
border-radius:30px;
}
.navigation li a {
width:60px;
height:60px;
float:left;
background-color:#576f85;
border-radius:30px;
}
.navigation li a img {
padding-left:14px;
padding-top:14px;
padding-right:14px;
padding-bottom:14px;
}
Press ctrl + shift + del, and remove all cache from your browser :) I have to that once in a while to get css working wi
Include the css file like this:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
I would assume you had included the CSS within the HTML originally, viewed it within your browser (locally) then moved it to a separate .css file and forgotten to include the link as per hitchdiddy's answer above.
Now when you view it on your local server it can't find the CSS but the older page has been cached by your browser for the local page which is why you still see your styling when viewing it directly.