It seems that my external style sheet is not working for the body part. Here’s my code:
all.css:
body {
background: url(../texture1.jpg);
background-size: 600px 500px;
background-repeat: repeat;
}
HTML:
<head>
<link rel="stylesheet" type="text/css" href="all.css">
</head>
<body>
<div id="main">
<h3 id="h3">
<a class="a" href="home.php"><div id="active" style="left:20px;"><center>Work Load</div></a></br>
<a class="a" href="assign.php"><div class="div" style="left:210px"><center>Assign Employee</div></a></br>
<a class="a" href="accounts.php"><div class="div" style="left:400px"><center>Accounts</div></a>
</h3>
</div>
</body>
You have several flaws in your HTML code:
<style></style> - Empty style blocks, not really an issue
<center> tags don't seem to have a closing tag. This tag is deprecated, and you should consider using the CSS style text-align: center instead.
id="div" - Having multiple ID's with the same value is not recommended because it can have unexplained results. The purpose of these is make them unique.
</div> inside <a> tags - In HTML4, having block-level elements inside inline elements was not allowed. This has changed in HTML5, keep aware.
style="left:###px" - Having 'left' as a style property does nothing by itself. That element needs to have the associated position property set too, whether it's set to "relative", "absolute", "fixed", or even "static"
Fixing these issues are probably your top priority, because the structure of your page is messed up beyond repair that the browser doesn't render your (correct) CSS properly.
Also, make sure that your "texture1.jpg" is in the parent directory of all.css, which seems to be one directory above your home.php file. Try removing the "../", and you should be good if it's all in the same directory.
To be a little more elaborate, this is how your application sees your folder structure:
???
|--public_html <--- Root HTML directory
| |-- all.css <--- CSS File you provided
| |-- home.php <--- HTML file you provided
| |-- assign.php
| +-- accounts.php
+--picture1.jpg <--- Picture file? CSS/HTML file cannot access above public_html
If by your comment you say it's in the same as the HTML file, then inside all.css, change the line to just url('picture1.jpg').
As a rare favor, I'll see if I can fix everything from the information you've provided and all 3 files (CSS, HTML, JPG) are in the same directory. You don't seem to understand the concept of how classes and IDs work together.
home.php HTML (complete):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="all.css">
</head>
<body>
<div id="main">
<h3>
<a class="active" href="home.php">Work Load</a><br />
Assign Employee<br />
Accounts
</h3>
</div>
</body>
</html>
all.css CSS (with added styles, some sample):
body {
background: url('texture1.jpg');
background-size: 600px 500px;
background-repeat: repeat;
}
#main {
background-color: lightpink;
}
.active {
color: green;
}
h3 {
text-align: center;
}
I've created a working JSFiddle with this info and I hope you can use it as a learning lesson to see how selectors work in CSS and how it correlates to your HTML structure.
just add
{}
before body, it worked for me
Change lke this
<head>
<style>
body {
background: url(../texture1.jpg);
background-size: 600px 500px;
background-repeat: repeat;
}
<!--html page-->
</style>
<link rel="stylesheet" type="text/css" href="all.css"><style>
</head>
<body>
<div id="main">
<h3 id="h3">
<a id="a" href="home.php"><div id="active" style="left:20px;"><center>Work Load</div> </a></br>
<a id="a" href="assign.php"><div id="div" style="left:210px"><center>Assign Employee</div></a></br>
<a id="a" href="accounts.php"><div id="div" style="left:400px"><center>Accounts</div></a></h3>
</div>
</body>
Related
I have this HTML file whןch suppose to duplicate
an image and put it right next to the original.
so you get the same image twice, sort of connected
it does'nt work for some reason:
duplicate
<html>
<body>
<img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"><img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
</body>
</html>
thank you
I was expecting an image to duplicate
but it does not work
It does work. As Victor Svensson mentioned the comments, one way you could fix this is by setting a max width for the images.
img {
max-width: 50%;
}
<html>
<body>
<img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"><img src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
</body>
</html>
My answer can be a bit unrelated to your case, but still, it works as you described.
Add a CSS rule float: left which puts all the elements just right next to each other. The image you're using is too big, so you might consider specifying the width of the photo by adding one more rule called width: and the value you need.
You can add those rules in three ways: by adding them in the style attribute
<img style="float: left; width: 480px;" src="...">
or by creating a <style> tag in your HTML code
<html>
<head>
<style>
.my-imgs {
float: left;
width: 480px;
}
</style>
</head>
<body>
<img class="my-imgs" src="...">
</body>
</html>
or by creating a CSS-file, linking it to your HTML
Your HTML file:
<html>
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<img class="my-imgs" src="...">
</body>
</html>
Your CSS file (styles.css in this case, placed in the same folder as your html file)
.my-imgs {
float: left;
width: 480px;
}
I have checked the file order and closed off tags. It seems whatever I put at the top of the CSS file will not be read, however, everything below the very top segment of cod ,in this case, #tribute-info will not be applied to the HTML. If I moved #title to the top and refreshed the browser #title will not have its CSS anymore. Same situation for #img-caption.
<style>
#tribute-info{ /* <-- anything I put at the top of the file is not getting read. If I moved #img-caption here, and #tribute-info below it, #img-caption will not work. */
color: blue;
}
#img-caption{
color: red;
}
#title{
text-align: center;
color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/design.css" />
<meta charset="utf-8">
</head>
<body>
<div id="main">
<h1 id="title">History´s First Programmer</h1>
<div id="img-div">
<div class="row">
<div class="column">
<img src="images/ada_lovelace_house_emblem.jpg" alt="Ada Lovelace depicted in an emblem" id="image">
</div>
</div>
<p id="img-caption">The Mother of computer programming</p>
<div id="tribute-info">
<p>“The more I study, the more insatiable do I feel my genius for it to be.”</p>
<p>“Your best and wisest refuge from all troubles is in your science.”</p>
<p>“Mathematical science shows what is. It is the language of unseen relations between things.
But to use and apply that language, we must be able to fully to appreciate, to feel, to seize the unseen, the unconscious.”</p> <!-- this segment of code is not changing -->
</div>
<a href="https://en.wikipedia.org/wiki/Ada_Lovelace" target="_blank" id="tribute-link">Click here to learn
more about Ada Ada_Lovelace</a>
</div>
</div>
</body>
</html>
The code works fine if you remove the <style> tag from your css file
directory:
index.html
Images
(inside Images folder) Logo.png
CSS
.landing-page_logo{
display: block;
background-image: url("Images/Logo.png");
width: 300px;
height: 300px;
background-size: cover;
}
<section class="landing-page">
<div class="landing-page_logo">
</div>
<h3>Welcome</h3>
<h4>This is ......</h4>
<div>
Animated Text header
</div>
</section>
Image is in correct folder. Tried using <img> tag and that was working. But background-image tag is not working
If you have your images within folders then try this
background-image: url(/resources/Images/Logo.jpg);
don't forget to put backslash in front of the first folder.
Make sure you include the link to the css stylesheet.
Your html should look something like this:
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="landing-page">
<div class="landing-page_logo"></div>
<h3>Welcome</h3>
<h4>This is ......</h4>
<div>
Animated Text header
</div>
</section>
</body>
</html>
Of course make sure to change 'style.css' to your css file name.
My background-image won't show up. Do I need to tag the image in the HTML? Maybe position reference or something? Please help!
<html>
<head>
<link type="text/css" rel="stylesheet" href="sespe.css"/>
<title>Sespe Pizza Co.</title>
</head>
<body>
<div id="header1">
<h1>Sespe Pizza Co.</h1>
</div>
<div id="mb1"></div>
<div id="mb2"></div>
<div id="mb3"></div>
<div id="mainPage">
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>
<div id="b5"></div>
</body>
</html>
CSS.....
body {
background-image: url('/Users/Username/Downloads/3634195609_f6b7edac1b_b.jpg');
}
Your path is the problem. You are navigating to your downloads folder. Place your image in a folder in your site folder, call it say 'images' and then call it into your css like this. If your new 'images' folder is on the same level as your css folder, the first option would work. ../because you are going up one folder to get to images.
body {
background-image: url('../images/3634195609_f6b7edac1b_b.jpg');
}
Edit: Seems in your case, your css file is not in a css folder, so you can just get to your images folder without going to a different level:
body {
background-image: url('images/3634195609_f6b7edac1b_b.jpg');
}
I have created a small PSD Mockup of a about page for my website. However I have no idea how to code HTML and CSS.
I currently have the following code:
index.html
<html>
<link rel=StyleSheet href="css.css"
type="text/css">
<head><title>title</title></head>
<body>
<div id=body>
</div>
<div id=header>
<h3><font title=Futura>Header</font></h3>
</div>
</body>
css.css
body {
background-image: url("background.png");
background-position: 50% 50%;
background-repeat: no-repeat;
}
header {
background-image: url("otherBackground.png");
background-position: 50% 50%;
background-repeat: no-repeat;
}
I would like to have the background image of body to have the background image of header on top of it and then some text ontop of that.
How could I achieve this?
In this case, you'll want to utilize nesting and begin to understand general document flow. You are able and encouraged to place HTML elements inside of other HTML elements to establish a parent::child flow and control the position of the elements on your page. Notice how I moved the header element inside of the body div
<html>
<link rel="StyleSheet" href="css.css"
type="text/css">
<head><title>title</title></head>
<body>
<div id="body">
<div id="header">
<h3><font title="Futura">Header</font></h3>
</div>
</div>
</body>
You also need to make sure you surround your element attributes with quotation marks. In your css, if you are targeting a div, you need to specify that by prefixing a # to the element name.
Not a bad start, but keep reading tutorials - you'll get the hang of it!
You need to add the # before "header"
#header { }