Have a Question? Ask Us! Have an update, suggestion, or found an error?
Email Us!
Hi all! Please check all the buttons out for me, and let me know if they don't work for you. Include what computer, browser, etc. that you're running. Also include what didn't work, e.g. buttons wouldn't link, stuck on metapage, navbar buttons don't wrap, etc.
I have a 5 button navbar up at the top. Here’s how it should work. Each button that you press 1-5, should take you to a Navbar Page with the corresponding number. You may notice the intermediate Metapage (again with the corresponding number) as it flashes by or not. There's a backup link on the Metapage if it does not forward automatically. But if you have to use the metapage link, then something is wrong. I want visitors to go where they wanted to go, not stop at the metapage. Also, when you reach the Navbar Page, going back should take you to the Navbar Index, NOT the Metapage. The navbar images should wrap to a second row if you make your browser too narrow for all the buttons to fit on one line.
Why do it this way? I can rearrange or completely replace any of those buttons at will without having to recode anything on the webpage. (Which means even when we have millions of webpages, I can completely change and reorganize the navbar without touching any of that HTML, just by playing with the 5 button image files). I've also directed the buttons to metapages which means I can change where the buttons link to by altering the metapages. (Same idea, instead of changing links on millions of pages, I just change the links on the 5 metapages and I can completely change the navbar links).
Here's the more detailed specs of what I did, so you don't have to slog through my code to find it. In my css file, I arranged the buttons by floating them left. It seems to have the liquid format I want on the computers and browsers I've checked. The buttons wrap underneath forming a new row(s) if they run out of room.
<!-- This is the Basic Header NavBar. -->
<div id="navbar">
<div class="navbarbutton">
<a href="Metapage1.html"><img height="50" width="120" src="Images/NavbarButton1_120x50.bmp" /></a>
</div>
<div class="navbarbutton">
<a href="Metapage2.html"><img height="50" width="120" src="Images/NavbarButton2_120x50.bmp" /></a>
</div>
<div class="navbarbutton">
<a href="Metapage3.html"><img height="50" width="120" src="Images/NavbarButton3_120x50.bmp" /></a>
</div>
<div class="navbarbutton">
<a href="Metapage4.html"><img height="50" width="120" src="Images/NavbarButton4_120x50.bmp" /></a>
</div>
<div class="navbarbutton">
<a href="Metapage5.html"><img height="50" width="120" src="Images/NavbarButton5_120x50.bmp" /></a>
</div>
<div class="contact">
<b style='font-size:20pt'>Have a Question? Ask Us!</b> Have an update, suggestion, or found an error?
<a href="#">Email
</div>
</div>
The metapages, use a meta tag that looks like this, and include a real link to the same page in case the browser doesn't forward them automatically for some reason (but I don't want people to have to use it):
<meta http-equiv="refresh" content="0; url=NavbarPage2.html">
So here are my questions for any web experts that are willing to add their two cents.
1) Is this going to cause bumps on certain platforms?
2) How long do you think this will remain valid? Nothing seems to be deprecated.
3) Would you use this technique? Or would you use something completely different? I think this should be more portable across platforms than javascripts. That's what I was looking into before I put this together. haha... like I know how to program in javascript anyway! ;) But I think this gives me control over both the look of the navbar (by redesigning the button images) and where they link to (by resetting the links on the metapages), without having to change any of the code on the webpage. So I could throw a couple thousand pages together with this code and still be able to completely redo my navbar from just 5 button images and 5 metapages. I think this will work like I want it to. But I'd appreciate any "Yeah, but..." that you can think of. Or anything else that I should worry about.
4) Is there anyway to mimic this for my contact email? Right now, if I needed to change the email address (like if it gets spammed out of existence) I would need to change it on every webpage, and I've no idea how to get around that. Ideas?