here is my HTML code for a project I am working on, im not sure if it is correct but please assist and fix anything that is incorrect.I have been moving the head code around alot but I see no difference when I click my HTML file. There are no images or color. I was supposed to have an Image of a bee.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="beekeeper.css">
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<script type="text/javascript">
function formValidation() {
var username = document.getElementById("userName").value;
var email = document.getElementById("email").value;
var birthday = document.getElementById("birthday").value;
var password = document.getElementById("password").value;
var verifyPassword = document.getElementById("verifyPassword").value;
if (username == "" || username == undefined) {
return false;
}
if (email == "" || email == undefined) {
return false;
}
if (birthday == "" || birthday == undefined) {
return false;
}
if (password == "" || password == undefined) {
return false;
}
if (verifyPassword == "" || verifyPassword == undefined) {
return false;
}
return true;
}
</script>
</head>
<body>
<h3>Bee Keeper Sign Up</h3>
<form name="signupForm" method="GET" action="beekeeper_completed.html"
onSubmit="return formValidation();">
<div id="signupFields" style="border: medium;">
<h3>User Info</h3>
<table border="1">
<caption>
Personal accounts allow only 1 private repo, please visit our <a href="https://www.amazon.com/">main site</a> for more information
</caption>
<tr>
<td>User Name<span style="color: red;">*</span></td>
<td><input type="text" name="userName" id="userName" /></td>
</tr>
<tr>
<td>Email<span style="color: red;">*</span></td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>Birth Date<span style="color: red;">*</span></td>
<td><input type="date" id="birthday" name="birthday"></td>
</tr>
<tr>
<td>Password<span style="color: red;">*</span></td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td>Verify Password<span style="color: red;">*</span></td>
<td><input type="password" name="verifyPassword" id="verifyPassword" /></td>
</tr>
<tr>
<td>Type</td>
<td>
<input type="radio" name=accountType value="personal" checked>Personal
<input type="radio" name="accountType" value="business">Business
<input type="radio" name="accountType" value="enterprise">Enterprise
<input type="radio" name="accountType" value="other">Other
</td>
</tr>
</table>
</div>
<div id="pricingFields">
<h3>Pricing Info</h3>
<table>
<tr>
<th> </th>
<th>Personal (1-3 users)</th>
<th>Business (4-20 users)</th>
<th>Enterprise (21 users)</th>
</tr>
<tr>
<td>1 Repo</td>
<td>free</td>
<td>$ 12 repo/month</td>
<td rowspan="3"><a href="">Contact Sales</a></td>
</tr>
<tr>
<td>2-9 Repos</td>
<td>$ 8 repo/month</td>
<td>$ 10 repo/month</td>
</tr>
<tr>
<td>10 Repos</td>
<td>$ 6 repo/month</td>
<td>$ 8 repo/month</td>
</tr>
</table>
</div>
<br /> <input type="submit" name="submit" value="Sign Up" />
</form>
</body>
</html>
this is my css code, i have entered the link in the html code above. Please help fix any errors I have not caught.
th
{
font-weight:bold;
height:65px;
border:1px solid black;
}
table{
width:75%;
border:1px solid black;
line-height:50px;
}
body{
background-image:url(beekeeper.jpg);/*from nature.com*/
background-position: right top, left top;
background-repeat: no-repeat, repeat;
text-align:center;
}
h1{
color:rgb(255,153,0);
}
legend{
font-weight:bold;
}
a:hover{
color:rgb(255,153,0);
}
tr,td{
border:1px solid black;
}
CodePudding user response：
Consider using <img src="beekeeper.jpg"> and put it wherever you would like your picture to show up. Be aware that the picture has to be in the same folder as your html and css in order for it to be found. If you have it in another folder consider using the full path for example <img src="C:/users/example/folder/beekeeper.jpg">.
In terms of your colour, i see in your css you are referencing h1 however you only have h3 tags on your html page, consider changing it to h3 to target the correct text.
Edit
I have gone through your code again and re-wrote the css as there was some formatting errors which somehow wasn't applying the code. Try this
CSS
th{
font-weight:bold;
height:65px;
border:1px solid black;
}
table{
width:75%;
border:1px solid black;
line-height:50px;
}
body{
background-image:url(11123337.jpg);/*from nature.com*/
background-position: right top, left top;
background-repeat: no-repeat, repeat;
text-align:center;
}
h3{
color: rgb(255, 153, 0);
}
legend{
font-weight:bold;
}
a:hover{
color:rgb(255,153,0);
}
tr,td{
border:1px solid black;
}
td, th{
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
table{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="beekeeper.css">
<script type="text/javascript">
function formValidation() {
var username = document.getElementById("userName").value;
var email = document.getElementById("email").value;
var birthday = document.getElementById("birthday").value;
var password = document.getElementById("password").value;
var verifyPassword = document.getElementById("verifyPassword").value;
if (username == "" || username == undefined) {
return false;
}
if (email == "" || email == undefined) {
return false;
}
if (birthday == "" || birthday == undefined) {
return false;
}
if (password == "" || password == undefined) {
return false;
}
if (verifyPassword == "" || verifyPassword == undefined) {
return false;
}
return true;
}
</script>
</head>
<body>
<h3>Bee Keeper Sign Up</h3>
<form name="signupForm" method="GET" action="beekeeper_completed.html"
onSubmit="return formValidation();">
<div id="signupFields" style="border: medium;">
<h3>User Info</h3>
<table border="1">
<caption>
Personal accounts allow only 1 private repo, please visit our <a href="https://www.amazon.com/">main site</a> for more information
</caption>
<tr>
<td>User Name<span style="color: red;">*</span></td>
<td><input type="text" name="userName" id="userName" /></td>
</tr>
<tr>
<td>Email<span style="color: red;">*</span></td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>Birth Date<span style="color: red;">*</span></td>
<td><input type="date" id="birthday" name="birthday"></td>
</tr>
<tr>
<td>Password<span style="color: red;">*</span></td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td>Verify Password<span style="color: red;">*</span></td>
<td><input type="password" name="verifyPassword" id="verifyPassword" /></td>
</tr>
<tr>
<td>Type</td>
<td>
<input type="radio" name=accountType value="personal" checked>Personal
<input type="radio" name="accountType" value="business">Business
<input type="radio" name="accountType" value="enterprise">Enterprise
<input type="radio" name="accountType" value="other">Other
</td>
</tr>
</table>
</div>
<div id="pricingFields">
<h3>Pricing Info</h3>
<table>
<tr>
<th> </th>
<th>Personal (1-3 users)</th>
<th>Business (4-20 users)</th>
<th>Enterprise (21 users)</th>
</tr>
<tr>
<td>1 Repo</td>
<td>free</td>
<td>$ 12 repo/month</td>
<td rowspan="3"><a href="">Contact Sales</a></td>
</tr>
<tr>
<td>2-9 Repos</td>
<td>$ 8 repo/month</td>
<td>$ 10 repo/month</td>
</tr>
<tr>
<td>10 Repos</td>
<td>$ 6 repo/month</td>
<td>$ 8 repo/month</td>
</tr>
</table>
</div>
<br /> <input type="submit" name="submit" value="Sign Up" />
</form>
</body>
</html>I removed your style from your HTML file and included them in the CSS and everything works as i think it should. I put a picture of mine and that also displays. So try and see if it works for you, if not just be careful how you write your CSS.
CodePudding user response：
You seem to have two closing </head> tags. Remove the one after internal style.