Link to home
Start Free TrialLog in
Avatar of kensy11
kensy11Flag for Belgium

asked on

Gif file problem

Hello,

I have made a image text in photoshop and i want to use it in my website in gif file,

but when i use it its not clear i get white space around the characters ?

how can i fix it ?
my website is http://mohsen1.110mb.com/
I upload the image here

look at the  Attached Files
white-space.gif
home.gif
ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of kensy11

ASKER

thank you

How can do this

 3.) Don't use text in images for your navigation. Instead, fill button area with background color and put html text on top. This will create the sharpest text.


THanks again
I pulled this from a recent project. You can substitute your image files where appropriate. Also you will have to adjust widths. Css below. Html attached.
#ul-1
{
      display:block;
      padding:0px;
      list-style:none;
      width:884px;
}
#ul-1 li
{
      float:left;
      height:30px;
      padding-bottom:0px;
      padding-top:5px;
      text-align:center;
      font-family:Arial;
      font-size:.9em;
      background-image:url('images/navBarFill.jpg');
      background-repeat:repeat-x;
}
#ul-1 li.li-hover:hover
{
      border:0px;
      background-image:url('images/navBarFill_over.jpg');
      background-repeat:repeat-x;
}
#ul-1 a
{
      color:#FFFFCC;
      text-decoration:none;
}
#ul-1 li.li-fill
{
      width:260px;
      text-align:center;
      color:#FFFFFF;
      background-image:url('images/navBarFill.jpg');
      background-repeat:repeat-x;
}

<div id="menu">
	<ul id="ul-1">
		<li class="li-hover" id="link1" style="width:140px;"><a href="index.php?page=you1">home</a></li>
<li class="li-hover" id="link2" style="width:140px;"><a href="index.php?page=collection">collection</a></li>
<li class="li-hover" id="link3" style="width:140px;"><a href="index.php?page=about">about</a></li>
<li class="li-hover" id="link4" style="width:140px;"><a href="index.php?page=brands">brands</a></li>
<li class="li-hover" id="link5" style="width:140px;"><a href="index.php?page=jobs">jobs</a></li>
<li class="li-hover" id="link6" style="width:140px;"><a href="index.php?page=contact">contact</a></li>

	<img src="images/home.gif" width="53" height="9" />
	</ul>

Open in new window

Show have mentioned this. The example I posted causes the background fill to change on rollover, not the text color. This means, to use it as is, you will need to create a background for rollovers and use it where I have "navBarFill_over.jpg".