making nav bar expandable

in photoshop

[precision]

I have a nav bar that is approx 780 by 80 pixels that I made in in photoshop. I want it to display accross the whole page no matter what resolution or browser the user is viewing it on. Can anyone tell me an easy way to do this using photoshop?

Also, do people recommend using image maps or slices to make the links in the nav bar?

Thanks alot

-G

[coho75]

I am not sure I understand your question. You can make a nav bar as big as you want using Photoshop, and it will fit across any screen but look terrible on some. However, I somehow think that you want a nav bar that resizes with the users screen. To do something like that you would have to set the nav up in a table and use percentages to set the table size (i.e. - width="100%"). For your second question I would say that slices work better than an image map (and they are usually easier to set up).

coho75

[precision]

You are right, I do want one that resizes with the users screen. If I put it in a table, won't my image be stretched out on some browsers and compressed on others?

[PatrickDeese]

The obvious thing to do is to separate the navigation elements from the background, and then make a cell with 100% width using a repeatable background image - then float the navigation elements with either relative (%) or precise (px) distances.

You may find that a huge graphic as a navigation element (using an image map, i suppose?) will not be very search engine friendly.

[precision]

So how would I go about floating the navigation elements relative to the background using photoshop?

[smokeyb]

Have you got this page up somewhere? If you have sticky mail me the address (don't post a URL, and I'll see if it can be done effectively

[PatrickDeese]

> So how would I go about floating the navigation elements relative to the background using photoshop?

umm. you can't.

you have to use a table or a div.

let's say that your nav bar is like this:

------------------
¦ link ¦ link ¦ link ¦
------------------

so you make a repeatable background image (something that doesn't tile.

then you take your link - let's assume one is "home".

so you use some fancy font and make the word home.

save it as a transparent gif - with a background that matches your tile.

then you make a table:

<center>
<table width="100%" border=1 align=center background="background.gif">
<tr>
<td width="33%" align="center"><img src="home.gif"></td>
<td width="34%" align="center"><img src="catalog.gif"></td>
<td width="33%" align="center"><img src="contact.gif"></td>
</tr>
</td>
</table>
</center>

I left out the <a href=""> but obviously to make a link you need that too.

You can't make an expandable image in photoshop - not without it distorting at different widths.

[mr_f]

So, your navbar is purely graphical? If so, I'm not aware of any all-purpose method for on-the-fly 'resizing'. Plus, as noted by others, graphics are not the best way to go vis-a-vis search engines...text-links or a mix of text & graphics would be better.

But I do have a few impromptu ideas, listed below in increasing order of effort required. :-)

(1) Any navigation elements in the middle of your navbar? If not, engineer a 'break' there and float the two halves in DIVs (or table elements) so that as the page resizes the graphic can 'stretch'. Add BG color (or a second graphic) to the DIV to fill the gap, making the effect less obvious. Obviously, this would work best with less-complex graphics.

(2) Make the graphic as big as you'd like, then use it as the background (only) for a floating DIV, as described above. Add navigational elements via HTML, as overlaid text. A cleverly-designed graphic will look fine (if somewhat different) at various screen settings, plus adding text-links makes the navbar more SE-friendly.

(3) ...or, create several versions of your navbar. Use a script-type 'sniffer' to determine the reader's screen resolution, then (again, via a script) feed his browser the appropriate graphic...or a different page, for that matter. Of course, this is tricky coding - and some browsers don't reveal user settings to the host-server.

Hope this helps.

Mr F