Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Location
    California
    Posts
    511
    Thanks
    1
    Thanked 1 Time in 1 Post

    Making a graphic menu but have run across a snag

    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
    Code:
    <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
    When traveling down the road of life, Try not to drag your face in the gravel.

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <style type="text/css">
    a img { border: 0; }
    </style>

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Location
    California
    Posts
    511
    Thanks
    1
    Thanked 1 Time in 1 Post
    Cool it works thanks for your help man
    When traveling down the road of life, Try not to drag your face in the gravel.

  • #4
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Also, it'd be better to turn it into an unordered list (<ul>).

  • #5
    Regular Coder
    Join Date
    Sep 2002
    Location
    California
    Posts
    511
    Thanks
    1
    Thanked 1 Time in 1 Post
    Ive been down the list road....didnt like it lol, This is all generated thru photoshop too so it makes it nice n easy =)
    When traveling down the road of life, Try not to drag your face in the gravel.

  • #6
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Sep 2002
    Location
    California
    Posts
    511
    Thanks
    1
    Thanked 1 Time in 1 Post
    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
    Last edited by Mhtml; 10-11-2004 at 01:13 AM.
    When traveling down the road of life, Try not to drag your face in the gravel.

  • #8
    Senior Coder Mhtml's Avatar
    Join Date
    Jun 2002
    Location
    Sydney, Australia
    Posts
    3,531
    Thanks
    0
    Thanked 1 Time in 1 Post
    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!
    Omnis mico antequam dominus Spookster!

  • #9
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Regular Coder
    Join Date
    Sep 2002
    Location
    California
    Posts
    511
    Thanks
    1
    Thanked 1 Time in 1 Post
    oops lol soz ill control the language next time

    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?
    When traveling down the road of life, Try not to drag your face in the gravel.

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS, presentation

    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 (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?)
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •