I am just learning how to use HTML to make a website, an this is what I have so far: http://www.team3167.webs.com
I have one problem, every time the home link is clicked, a new red bar with the FIRST logo appears. Does anyone have any ideas on why this is happening? I’ll attach the code as soon as I save it to notepad. Thanks in advance for your help!
home.txt (1.33 KB)
index.txt (280 Bytes)
home.txt (1.33 KB)
index.txt (280 Bytes)
Welcome to the world of HTML. I can’t replicate the problem, but it is probably because you are using frames. Frames are an older technology in the web world and really shouldn’t be used anymore. The new HTML5 standard doesn’t even support them.
If you use DIVs and style them with stylesheets you should be able to get the same effect.
Let us know if you have any questions.
I can’t reproduce it either.
What browser (and version) are you using?
I couldn’t reproduce the error with Firefox but this code might explain the red.
<frame noresize="noresize" style="background-color:red"
src="http://www.iolani.honolulu.hi.us/robotics/newweb/allimg/home/first_logo_1.jpg" width="10%" height="100%"">
<frame noresize="noresize" src="home.htm">
Try taking the “background-color:red” out and see if that solves the problem.
I had since originally posting edited the code, which fixed the error to the new bar would come up only after going to a different page, then clicking home. I just changed the code back to exactly how it was before, so you may be able to reproduce the problem now. I’ve used IE 6, IE 7, IE 8, Firefox 3.5.9, and Firefox 3.6.
You might want to play around with this:
http://www.w3schools.com/tags/att_a_target.asp
Also, this is how I see the site from Google Chrome (it’s fine for other browsers):
http://team964.com/misc/imgs/team3167.png
Those nav links open in the same frame, so the “Home” link is opening index.htm within that frame. But index.htm contains multiple frames, so you’re opening a page with frames inside a frame.
I’d either look at the target attribute as synth3tk suggested, or just change the home link to “home.htm” instead of “index.htm”.
I’d also avoid using anything but another HTML page for the frame content (namely, in the top frame).
Also, remember that using frames means users can’t bookmark individual frames on the site. At the same time, you can’t prevent people from going directly to one of the pages (e.g. http://www.team3167.webs.com/About_3167.htm) in which case they won’t see the top frame at all.
The first rule of post-1990s web development is don’t use frames. The second rule is don’t use frames.*
Sorry if it sounds harsh, but using frames to build modern websites is like designing a car to run off of a steam engine. Yes, it’ll work, but there’s a very good reason why the production of steam-powered cars was abandoned (it’s very inefficient). Frames will technically work to make websites, but they have so many problems and require so many awful “hacks” just to make them work somewhat decently, that the practice of using them to make websites has been officially abandoned.
I used frames for one reason and one reason only: That’s what was in the W3C schools tutorial. I got a similar effect on the site now by adding the images to the top before the nav bar and using aligning and page percentages. I think it looks better now than it did before.
Thanks everyone for your suggestions!
If you really want to get advanced, you could do this with PHP (assuming you’re using PHP instead of straight HTML).
Create a file named “header.php”, then use a php include to pull that “header.php” in every page (you’ve got to put the code on each page).
The benefit is obvious: make changes to header.php, and it changes on every page that calls it, across the site. Another benefit is that you won’t run into pesky frame issues.
But I don’t know what you’re using to edit/publish this site, so the above may not work for you.
Yeah, frames aren’t a great idea for layout, but they’re worth learning since they’re still used in many web apps (often invisibly). The key with what you were trying to do is to be precise with your links.
I’m using webs.com to host and edit the site. The only files they allow when creating a page are .htm and .html files.
I’m back with a new problem and figured that it would be best to just continue this thread, rather than start a new one.
I made the website and have the basic layout set up as far as a header, body, and footer. The website looks exactly how I want it to look in Mozilla Firefox, but in Internet Explorer 6,7, and 8, it looks terrible. If you use IE, take a look at what I mean http://www.team3167.webs.com If you could, can anyone look at the HTML and give a possible explanation as to why it appear as it does? (For people using browsers other than IE or Mozilla Firefox, it would be greatly appreciated if you could tell me what the website appears like by possibly including a picture.)
Thank you in advance for your help!
It looks like that in Firefox too, at least on Ubuntu.
This seems to be the culprit:
<img src="http://www.iolani.honolulu.hi.us/robotics/newweb/allimg/home/first_logo_1.jpg" height="90%" width="90%" align="center">
That would mean that it’s taking up 90% of the page vertically and horizontally. Use pixel values (“100px” etc.) instead as it wouldn’t change with window size/screen resolution.
I recommend getting your HTML valid before going on. Firefox can be pretty forgiving when it comes to misplacing tags and not closing elements, but IE requires you to be really careful with your coding.
Personally, I think the problem is being caused by the following code:
</head>
<div id="container">
<a href="http://www.usfirst.org" target="_blank"> <img src="http://www.iolani.honolulu.hi.us/robotics/newweb/allimg/home/first_logo_1.jpg" border="0" width="10%" height="10%"></a>
<a href="http://www.comcast.com" target="_blank"> <img src="http://gothampr.files.wordpress.com/2009/12/comcast_logo.jpg" border="0" width="15%" height="10%" align="right" image-align="top"></a>
<a href="http://www.etcusa.com" target="_blank" > <img src="http://etcusa.com/img/logo.gif" border="0" width="20%" height="10%" align="right"></a>
<style type="text/css">
<!--
#navbar ul {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
-->
</style>
</head>
<div id="body">
<body>
You enclose your links and your styles between two </head> tags. Get rid of the first </head> tag, and hopefully you’ll be on the right track. You also include a <div> element outside of the <body> tags, which is probably also why IE is giving you grief. Just be careful to keep your code valid and your troubles with cross-browser compatibility should be somewhat lessened 
.
I’d start by proofreading the HTML. The head and body elements are a little scrambled up, and there are two opening body tags. Put the style and link tags into the head section.
Also check the rest of the structure–make sure tags are nested properly, the document is organized into a tree, etc.
No problems with the CSS jump out at me, but it’ll be hard to tell until the HTML is fixed and reorganized.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<title>Team 3167-Home</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
<!--
#navbar ul {
margin: 0;
padding: 5px;
list-style-type: none;
text-align: center;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
-->
</style>
<link href="http://images.freewebs.com/Styles/blog.css" type="text/css" rel="stylesheet">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://blogs.members.webs.com/Members/Blogs/viewBlogRSS.jsp?userid=56345546">
<style type="text/css">
p.c5 {background-color:black;color:white}
div.c4 {text-align:right}
img.c3 {border: 0px;}
p.c2 {color:black}
p.c1 {color: black}
</style>
</head>
<body>
<div id="container"><a href="http://www.usfirst.org" target="_blank"><img src="http://www.iolani.honolulu.hi.us/robotics/newweb/allimg/home/first_logo_1.jpg" border="0" width="10%" height="10%"></a> <a href="http://www.comcast.com" target="_blank"><img src="http://gothampr.files.wordpress.com/2009/12/comcast_logo.jpg" border="0" width="15%" height="10%" align="right"></a> <a href="http://www.etcusa.com" target="_blank"><img src="http://etcusa.com/img/logo.gif" border="0" width="20%" height="10%" align="right"></a>
<div id="body">
<div id="navbar">
<ul>
<li><a href="http://www.team3167.webs.com/index.htm">Home</a></li>
<li><a href="http://www.team3167.webs.com/About_3167.htm">About 3167</a></li>
<li><a href="http://www.team3167.webs.com/About_FIRST.htm">About FIRST</a></li>
<li><a href="http://www.team3167.webs.com/Photos.htm">Photos</a></li>
<li><a href="http://www.team3167.webs.com/Videos.htm">Videos</a></li>
<li><a href="http://www.team3167.webs.com/Contact.htm">Contact Us</a></li>
</ul>
</div>
<p class="c1"><big><strong>Welcome to the Official <abbr title="FIRST Robotics Competition">FRC</abbr> Team 3167 Website!</strong></big></p>
<p class="c2">This site is under construction, and will be here for you to enjoy soon.<br>
In the meantime, <a href="http://www.fatherjudgerobotics.webs.com">take a look at our temporary site</a>.</p>
<img src="http://www.iolani.honolulu.hi.us/robotics/newweb/allimg/home/first_logo_1.jpg" height="90%" width="90%" align="center"> <!--- Start Freewebs Blog Code =-->
<!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js">
</script><script src="http://images.freewebs.com/JS/blog.js" type="text/javascript">
</script> <script type="text/javascript">
startBlog(56345546);
</script><script type="text/javascript">
initBlog();
</script>
<div class="c4"><a title="View RSS feed" href="http://blogs.members.webs.com/Members/Blogs/viewBlogRSS.jsp?userid=56345546"><img class="c3" alt="View RSS feed" src="http://images.freewebs.com/Images/rss.gif"></a></div>
<!--- End Freewebs Blog Code --->
<br>
<br>
<div id="footer"><!-- Footer -->
<p id="footer" class="c5">Copyright ©2010 Father Judge High School 3301 Solley Avenue Philadelphia, PA 19136<br>
<!-- Freewebs Sticker -->
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_roundred.js" type="text/javascript">
</script></p>
</div>
</div>
</div>
<!-- --><script type="text/javascript" src="http://images.webs.com/static/global/js/webs/usersites/escort.js">
</script><script type="text/javascript">
if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}
</script>
</body>
</html>
I put the html through a service called HTML Tidy, and that’s what it gave me. I put it through a validator and it won’t validate because something in one of the lined is no utf-8. Is there anything that looks wrong with the HTML? It’s the same as it was before, but reorganized by that program.
According to the W3C validator, you’ve got 7 errors and 1 warning. The warning (which is the UTF-8 bit) is ok to ignore for now, but you should focus on the errors.
I hope you used this to validate: http://validator.w3.org/
The w3 validator validated the HTML, but the page still looks awful in IE. Is there anything else I can do?
Edit
It validates only when I directly put the code into the validator, but if I type “http://www.team3167.webs.com/index.htm” into the “validate by URL tab” I get a fatal error about line 80 containing something that is not utf-8.
I don’t know much about coding but I think you should close the <head>? I only saw a starting tag but not an ending one.