/    Sign up×
Community /Pin to ProfileBookmark

Navigation bar graphics question

Copy linkTweet thisAlerts:
Apr 09.2003

Hi,

I’ve been doing simple web pages for several years, but now I want to do a slick navigation bar. So I made a sample graphic then I “cut” it up into several smaller graphics (some were to be “button” or hot links)

[url]http://199.181.141.102/[/url]

….BUT when I view the page there are gaps between the individual graphics. AND if you make the we browser window narrow the graphics jump down a line like text would (I’ve seen other web pages where the graphics like this stay on one line).

How do you anchor the graphic elements and get them to fit together without spaces?

I was trying to use individual graphic elements so I need only update the “button” graphics instead of downloading a whole new navigation bar for each page on the site (sort of the way Apple.com does it).

I was using Netscape Communicator, but I now have the demo version of Dreamweaver. I’ve been on a crash course to learn that the past few days.

Any input apprciated,
Jeff-

to post a comment
HTML

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisApr 09.2003 — If you don't intend to swap parts of the image, you would be better off using an image map with the original whole image.

I tried putting your images in a table to see if they would look better, and it seems that your widths do not add up. You specify the top and bottom image to be 600, but the buttons only add up to 564.

Here is what I ended up with:<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td colspan=5><a href="http://199.181.141.102/Top20.900.GIF">
<img src="http://199.181.141.102/Top20.900.GIF" nosave="" height="20" width="564" border="0"></a></td>
</tr>
<tr>
<td><a href="http://199.181.141.102/DVRpower%20button.GIF">
<img src="http://199.181.141.102/DVRpower%20button.GIF" nosave="" alt="" height="26" width="162" border="0"></a></td>
<td><img src="http://199.181.141.102/DVR.GIF" alt="" width="80" height="26" border="0"></td>
<td><img src="http://199.181.141.102/Camera.GIF" alt="" width="80" height="26" border="0"></td>
<td><img src="http://199.181.141.102/Support.GIF" alt="" width="80" height="26" border="0"></td>
<td><img src="http://199.181.141.102/RblankButton2.GIF" alt="" width="162" height="26" border="0"></td>
</tr>
<td colspan=5><img src="http://199.181.141.102/Bottom.GIF" alt="" width="564" height="64" border="0"></td>
</table>
Copy linkTweet thisAlerts:
@khakiApr 09.2003 — I'll just offer that CSS provides pin-point positioning and does

not rely on [I]tables[/I] for laying-out navigational links.

poof... and then she was gone....

? k
Copy linkTweet thisAlerts:
@JeffNYauthorApr 09.2003 — Hi Gil,

>>If you don't intend to swap parts of the image, you would be better off using an image map with the original whole image. <<

I did want to swap parts of the image, but it seems to be too much of a hassle ?

>>and it seems that your widths do not add up. <<

Yea, I was experimenting to see if changing the width would fix some of the problems I had...

Thanks,

Jeff
Copy linkTweet thisAlerts:
@JeffNYauthorApr 09.2003 — Khaki,

>>I'll just offer that CSS provides pin-point positioning<<

Thanks for the tip! I''ll look into that.

Also, does anyone know why this vbulletin board is so wide in my web browsers? I have to keep scrolling left and right to read the messages and find the Reply button! Very strange. I use several other vbulletin boards and don't have this problem. hummm?

Jeff
Copy linkTweet thisAlerts:
@gil_davisApr 09.2003 — My fault. I used the CODE keyword, which keeps all formatting, so it didn't break the long line. I'll edit and put a break in it.
×

Success!

Help @JeffNY spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...