...

View Full Version : Making a graphic menu but have run across a snag



Bry Man
10-09-2004, 06:16 AM
Hi
I recently decided to design my site so its more appealing to the eye or what not by drawing up some graphics in photoshop CS and slicing them and then outputting them as html/images, everything was going fine until I loaded the html and images onto my site. There seems to be a somewhat think purple outline around the graphics that are hotlinked....also it appears to be tileing horzontally even though its a fixed width...anyways here is the site im testing it on http://www.trio.5gigs.com/ just to save some people some time I know theres stuff that isnt needed and it looks like crap etc etc its jsut a test for right now, the menu in question is located at the left if anyone can help me out that'd be nice cuz I hardly have time to do anything nowdays.

Here is the code for the menu in question

<table id="Table_01" width="196" height="216" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/menu_01.gif" width="196" height="39" alt="">ONONNB</td>
</tr>
<tr>
<td><a href="http://www.trio.5gigs.com/"><img src="images/menu_02.gif" width="196" height="18"></td>
</tr>
<tr>
<td><a href="http://www.trio.5gigs.com/"><img src="images/menu_03.gif" width="196" height="18" alt=""></td>
</tr>
<tr>
<td background="images/menu_04.gif" width="196" height="18" alt=""></td>
</tr>
<tr>
<td background="images/menu_05.gif" width="196" height="18" alt=""></td>
</tr>
<tr>
<td background="images/menu_06.gif" width="196" height="18" alt=""></td>
</tr>
<tr>
<td background="images/menu_07.gif" width="196" height="18" alt=""></td>
</tr>
<tr>
<td background="images/menu_08.gif" width="196" height="18" alt=""></td>
</tr>
<tr>
<td background="images/menu_09.gif" width="196" height="18" alt=""></td>
</tr>
<tr>
<td>
<img src="images/menu_10.gif" width="196" height="18" alt=""></td>
</tr>
<tr>
<td background="images/menu_11.gif" width="196" height="15" alt=""></td>
</tr>
</table>

Also all the link attributes like text decoration and stuff are set to none

AaronW
10-09-2004, 12:39 PM
<style type="text/css">
a img { border: 0; }
</style>

Bry Man
10-09-2004, 07:08 PM
Cool it works thanks for your help man :thumbsup:

gsnedders
10-09-2004, 08:34 PM
Also, it'd be better to turn it into an unordered list (<ul>).

Bry Man
10-10-2004, 06:12 AM
Ive been down the list road....didnt like it lol, This is all generated thru photoshop too so it makes it nice n easy =)

Kurashu
10-10-2004, 07:22 PM
It is in my expereince that PS makes some crappy HTML. I'm starting to get into lists for menus, they are lots of fun, easier to style and manage too.

Bry Man
10-10-2004, 07:38 PM
Ya, the stuff that Ps has kicked out is startin to tick me off im havin difficulties trying to get my center box to position correctly and resize, i didnt like lists because all I could do was style them with code, I kinda like the graphic style but the more and more I deal with it the more and more I fell taht im screwin people with low resolutions and slow connections....All the fancy systems like Nuke and phpBb make the graphic gui's look so simple lol

Mhtml
10-11-2004, 01:16 AM
Bry Man, I know you didn't mean to offend, but colorful language on these forums is prohibited. We have people that are 10 and younger who visit a lot so we need to keep it clean as you can imagine. It makes for a much nicer community in the long run.

Have fun! :thumbsup:

AaronW
10-11-2004, 02:27 AM
Woah now, using lists does not mean you have to have ditch graphics ;)

CSS lets you set backgrounds, and that's all you need to simulate any button style you can make in Photoshop. It's fairly difficult to find an example of a button you couldn't mimic with CSS and lists, especially since you could just use an image replacement method on the whole list item.

Bry Man
10-11-2004, 02:40 AM
:o oops lol soz ill control the language next time :thumbsup:

I thought that a list could only contain one graphic and that lists would not line up like cells of a table so that you could have, say, a rounded corner menu with middle section that would expand and contract with screen size?

ronaldb66
10-11-2004, 01:15 PM
A list is a semantically meaningful way of marking up what is basically a list of links, aka a menu; through CSS, such a list can be styled to your heart's content, just as any table could be, or perhaps even better.

Presentational aspects like graphic menu items are best done with CSS anyway as opposed to image elements in the markup.

A useful tutorial on styling lists for menu purposes can be found here: Listutorial (http://css.maxdesign.com.au/listutorial/index.htm) (to regular visitors: yes, this may appear to be my standard answer to any and all menu questions, but it seems it just needs repeating, doesn't it? And, why repeat what is neatly written out and illustrated somewhere already?)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum