kensy11
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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('imag es/navBarF ill.jpg');
background-repeat:repeat-x ;
}
#ul-1 li.li-hover:hover
{
border:0px;
background-image:url('imag es/navBarF ill_over.j pg');
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('imag es/navBarF ill.jpg');
background-repeat:repeat-x ;
}
#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('imag
background-repeat:repeat-x
}
#ul-1 li.li-hover:hover
{
border:0px;
background-image:url('imag
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('imag
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>
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".
ASKER
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