HTML/Website Help

[nitneylion452]

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!

[dk5sm5luigi]

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.

[synth3tk]

I can't reproduce it either.

What browser (and version) are you using?

[PriyankP]

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.

[nitneylion452]

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.

[synth3tk]

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

[Dan Zollman]

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.

[artdutra04]

Originally Posted by nitneylion452

Is there a way to make code only run once? I know some java and I know that you can use if-else statements to skip code if something is or is not true. Is there something in HTML that allows me to say something like if the frame is being displayed, do not redisplay it?

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.


* Small amounts of iframes (they're different from frames) are acceptable when used sparingly. I've used small iframes to do Gmail-style AJAX file upload before.

[nitneylion452]

Originally Posted by artdutra04

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.


* Small amounts of iframes (they're different from frames) are acceptable when used sparingly. I've used small iframes to do Gmail-style AJAX file upload before.

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!

[synth3tk]

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.

[Dan Zollman]

Originally Posted by nitneylion452

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!

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.

[nitneylion452]

Originally Posted by synth3tk

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.

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.

[nitneylion452]

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!

[1986titans]

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.

[gloomy_lion]

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.

http://validator.w3.org/

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 .