Custom navigation Bar and DIV

[pacificblue03]

AHH smart smart thinking that would be awesome to know how might i accomplish this?

By the way all pages have the new layout applied

Antonio.

[pacificblue03]

Antonio, well done. You have come a long way in a few weeks.

Also.....for what its worth..... I think your welcome message is a bit too long and a little confusing.

haha yea i have to re think my welcome or remove it

also im finally better at this because im studying web design at the moment and it rocks

Antonio.

[Synewave]

YOU are a god

No, there can only be one Cumulus 'god' and his name begins with S....

Members helping you Antonio are just 'saints' (with a lot of patience).

[pacificblue03]

YOU are a god

No, there can only be one Cumulus 'god' and his name begins with S....

Members helping you Antonio are just 'saints' (with a lot of patience).

Yes well thank you all very lovely people you really are the best technical support i have ever dealt with keep the great work up

P.S thanks for being patient with me

Antonio.

[pacificblue03]

by the way what do you mean by highlighted?

In this example, my mouse is not on the tab, but I can still see what page I am on as the tab is a different color

highlight.png

So i understand to do this it must be a Css or javascript code am i right?

Antonio.

[Synewave]

Antonio, well done. You have come a long way in a few weeks.

Also.....for what its worth..... I think your welcome message is a bit too long and a little confusing.

haha yea i have to re think my welcome or remove it

also im finally better at this because im studying web design at the moment and it rocks

Antonio.

I would suggest removing it all, apart from "Hello and welcome to Ballina NSW Weather" and maybe "Press F5 to refresh". You are assuming all users have IE with reference to pressing the two green arrows to refresh, Firefox doesn't have this. I think F5 will suffice, all computers have that button (unless it's broken off).

You also don't need to tell users on the index page what info is on all the other pages, most interested in viewing your site will know what they are looking for.

[pacificblue03]

How does it look now? better to read?

Antonio.

[Synewave]

Hello and welcome to Ballina NSW Weather. Typically the data starts running from 8am and will be stopped at 10pm or later. The data is updated every 1 minute and If You would like to get the latest data simply refresh your page, you may do this by pressing the F5 key on the keyboard.

Or maybe:

Hello and welcome to Ballina NSW Weather. The weather station data is uploaded once a minute, press the F5 key on the keyboard to refresh the page.

Please note data is only uploaded between approximately 8am and 10pm local time.

[pacificblue03]

haha why didnt i think of that

so does anyone have a solution to help me make my active tab a different color?

Antonio.

[Synewave]

so does anyone have a solution to help me make my active tab a different color?

Try this:

You've coded your new menu buttons in every page. So, make the code slightly different for each page. For example in indexT.htm have:

Code: Select all

<div id ="buttonholder">
                
         <div class ="buttons1" >
         <a href="index.htm"><img src="buttons/homehover.png" width="124" height="29" border="0" /></a></div>
		 
	 <div class ="buttons2" >
         <a href="gauges.htm"><img src="buttons/invisible.png" width="115" height="25" border="0" /></a></div>
         
         </div>
.
.
.
.

Note that img src for index.htm is the hover image.

Then in gaugesT.thm for example, code this:

Code: Select all

<div id ="buttonholder">
                
         <div class ="buttons1" >
         <a href="index.htm"><img src="buttons/invisible.png" width="124" height="29" border="0" /></a></div>
		 
	 <div class ="buttons2" >
         <a href="gauges.htm"><img src="buttons/gaugeshover.png" width="124" height="29" border="0"  /></a></div>
         
     
         </div>
.
.
.
.

Note that img src for gauges.htm is the hover image.

You need to follow the same logic for the rest of your links in each of your pages. You also may have to fiddle with the dimensions.

Also note that I've coded border="0" to remove the boxes you have on your buttons.

There may be a simpler way (probably).

I've tested it and it works.

[RayProudfoot]

You are assuming all users have IE with reference to pressing the two green arrows to refresh, Firefox doesn't have this. I think F5 will suffice, all computers have that button (unless it's broken off).

Forgive me for butting in but I made the F5 assumption when using my nephew's Apple Mac to view the web.
The Apple uses a different key combo for page refreshes. Command + R also called apple + R.

[Synewave]

Thanks Ray for pointing that out, as I'm not a Mac user I was too unaware.

Don't worry about this Antonio! Your welcome message is perfect!

[pacificblue03]

Synewave

thank you for the code will give it a whirl when i return from my class today

Antonio.

[pacificblue03]

so does anyone have a solution to help me make my active tab a different color?

Try this:

You've coded your new menu buttons in every page. So, make the code slightly different for each page. For example in indexT.htm have:

Code: Select all

<div id ="buttonholder">
                
         <div class ="buttons1" >
         <a href="index.htm"><img src="buttons/homehover.png" width="124" height="29" border="0" /></a></div>
		 
	 <div class ="buttons2" >
         <a href="gauges.htm"><img src="buttons/invisible.png" width="115" height="25" border="0" /></a></div>
         
         </div>
.
.
.
.

Note that img src for index.htm is the hover image.

Then in gaugesT.thm for example, code this:

Code: Select all

<div id ="buttonholder">
                
         <div class ="buttons1" >
         <a href="index.htm"><img src="buttons/invisible.png" width="124" height="29" border="0" /></a></div>
		 
	 <div class ="buttons2" >
         <a href="gauges.htm"><img src="buttons/gaugeshover.png" width="124" height="29" border="0"  /></a></div>
         
     
         </div>
.
.
.
.

Note that img src for gauges.htm is the hover image.

You need to follow the same logic for the rest of your links in each of your pages. You also may have to fiddle with the dimensions.

Also note that I've coded border="0" to remove the boxes you have on your buttons.

There may be a simpler way (probably).

I've tested it and it works.

This does work yes BUT the image that will be replacing the invisible is not as big as the original button and wont fit over all of it?

Antonio.

[Synewave]

Like I said, you may have to fiddle with the dimensions?