Re: [css-d] Replacing text link with image
On Fri, 3 May 2013, J.C. Berry wrote:
I forgot, I still have a problem with the nav items (background images)
jumping when one is moused over. This is due to the border appearing on
hover. How could I fix this?
Set a default transparent border:
whatever { border: 2px solid transparent; }
whatever:hover { border: 2px solid red; }
--
Chris F.A. Johnson,
Re: [css-d] Replacing text link with image
I forgot, I still have a problem with the nav items (background images)
jumping when one is moused over. This is due to the border appearing on
hover. How could I fix this? Sorry for the repeated emails.
On Fri, May 3, 2013 at 1:07 PM, J.C. Berry wrote:
> OK, I found a solution. Any foreseeable problems with this?
>
> #catmidpagenav ul#subnav li.menu-mlid-2379,#catmidpagenav ul#subnav
> li.menu-mlid-588{background:url('/sites/all/themes/img/pressrel-icon.gif')
> no-repeat;}
> #catmidpagenav ul#subnav li.menu-mlid-2379 a,#catmidpagenav ul#subnav
> li.menu-mlid-588 a{padding:73px 0 0
> 0;overflow:hidden;height:0;width:113px;}
>
> (Also, I forgot this supporting CSS:
>
> #catmidpagenav{position:absolute;width:1170px;margin-left:-585px;left:50%;height:100px;background:url("/sites/all/themes/img/category-midpagenav-divider.gif")
> repeat-x;text-align:center;}
> #catmidpagenav
> ul#subnav{margin-top:0;position:relative;top:7px;display:inline-block;}
> #catmidpagenav ul#subnav
> li{border:none;list-style-type:none;display:inline-block;margin:0 0 0
> 90px;padding:0;vertical-align:middle;}
> #catmidpagenav ul#subnav li:first-child{margin-left:0;}
> #catmidpagenav ul#subnav li:last-child{margin-top:-1px;}
> #catmidpagenav ul#subnav li.active{border:2px solid #739701;}
> #catmidpagenav ul#subnav li a:hover{background-image:none;}
> #catmidpagenav ul#subnav li:hover{border:2px solid #739701;} )
>
>
> On Fri, May 3, 2013 at 12:11 PM, J.C. Berry wrote:
>
>> Hello all,
>> I have the following HTML right now:
>>
>> ul#subnav li.menu-mlid-2379, ul#subnav
>> li.menu-mlid-588{background:url('/ui/img/pressrel-icon.gif');height:73px;width:116px;}
>> ul#subnav li.menu-mlid-2379 a, ul#subnav li.menu-mlid-588
>> a{padding-left:2000px;}
>>
>> You can see I pushed the link off to the right, but then the clickable
>> area is that wide as well. Is there way to remove the text of a link and
>> replace with a linked image?
>>
>> Thanks.
>>
>>
>> --
>> J.C. Berry, M.A.
>> UI Developer
>> 619.306.1712(m)
>> jcharlesbe...@gmail.com
>> portfolio: http://www.mindarc.com
>>
>>
>>
>> This E-mail is covered by the Electronic Communications Privacy Act, 18
>> U.S.C. ?? 2510-2521 and is legally privileged. This information is
>> confidential information and is intended only for the use of the individual
>> or entity named above. If the reader of this message is not the intended
>> recipient, you are hereby notified that any dissemination, distribution or
>> copying of this communication is strictly prohibited.
>>
>>
>>
>
>
>
> --
> J.C. Berry, M.A.
> UI Developer
> 619.306.1712(m)
> jcharlesbe...@gmail.com
> portfolio: http://www.mindarc.com
>
>
>
> This E-mail is covered by the Electronic Communications Privacy Act, 18
> U.S.C. ?? 2510-2521 and is legally privileged. This information is
> confidential information and is intended only for the use of the individual
> or entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any dissemination, distribution or
> copying of this communication is strictly prohibited.
>
>
>
--
J.C. Berry, M.A.
UI Developer
619.306.1712(m)
jcharlesbe...@gmail.com
portfolio: http://www.mindarc.com
This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged. This information is
confidential information and is intended only for the use of the individual
or entity named above. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Replacing text link with image
OK, I found a solution. Any foreseeable problems with this?
#catmidpagenav ul#subnav li.menu-mlid-2379,#catmidpagenav ul#subnav
li.menu-mlid-588{background:url('/sites/all/themes/img/pressrel-icon.gif')
no-repeat;}
#catmidpagenav ul#subnav li.menu-mlid-2379 a,#catmidpagenav ul#subnav
li.menu-mlid-588 a{padding:73px 0 0
0;overflow:hidden;height:0;width:113px;}
(Also, I forgot this supporting CSS:
#catmidpagenav{position:absolute;width:1170px;margin-left:-585px;left:50%;height:100px;background:url("/sites/all/themes/img/category-midpagenav-divider.gif")
repeat-x;text-align:center;}
#catmidpagenav
ul#subnav{margin-top:0;position:relative;top:7px;display:inline-block;}
#catmidpagenav ul#subnav
li{border:none;list-style-type:none;display:inline-block;margin:0 0 0
90px;padding:0;vertical-align:middle;}
#catmidpagenav ul#subnav li:first-child{margin-left:0;}
#catmidpagenav ul#subnav li:last-child{margin-top:-1px;}
#catmidpagenav ul#subnav li.active{border:2px solid #739701;}
#catmidpagenav ul#subnav li a:hover{background-image:none;}
#catmidpagenav ul#subnav li:hover{border:2px solid #739701;} )
On Fri, May 3, 2013 at 12:11 PM, J.C. Berry wrote:
> Hello all,
> I have the following HTML right now:
>
> ul#subnav li.menu-mlid-2379, ul#subnav
> li.menu-mlid-588{background:url('/ui/img/pressrel-icon.gif');height:73px;width:116px;}
> ul#subnav li.menu-mlid-2379 a, ul#subnav li.menu-mlid-588
> a{padding-left:2000px;}
>
> You can see I pushed the link off to the right, but then the clickable
> area is that wide as well. Is there way to remove the text of a link and
> replace with a linked image?
>
> Thanks.
>
>
> --
> J.C. Berry, M.A.
> UI Developer
> 619.306.1712(m)
> jcharlesbe...@gmail.com
> portfolio: http://www.mindarc.com
>
>
>
> This E-mail is covered by the Electronic Communications Privacy Act, 18
> U.S.C. ?? 2510-2521 and is legally privileged. This information is
> confidential information and is intended only for the use of the individual
> or entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any dissemination, distribution or
> copying of this communication is strictly prohibited.
>
>
>
--
J.C. Berry, M.A.
UI Developer
619.306.1712(m)
jcharlesbe...@gmail.com
portfolio: http://www.mindarc.com
This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged. This information is
confidential information and is intended only for the use of the individual
or entity named above. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Replacing text link with image
Hello all,
I have the following HTML right now:
ul#subnav li.menu-mlid-2379, ul#subnav
li.menu-mlid-588{background:url('/ui/img/pressrel-icon.gif');height:73px;width:116px;}
ul#subnav li.menu-mlid-2379 a, ul#subnav li.menu-mlid-588
a{padding-left:2000px;}
You can see I pushed the link off to the right, but then the clickable area
is that wide as well. Is there way to remove the text of a link and replace
with a linked image?
Thanks.
--
J.C. Berry, M.A.
UI Developer
619.306.1712(m)
jcharlesbe...@gmail.com
portfolio: http://www.mindarc.com
This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged. This information is
confidential information and is intended only for the use of the individual
or entity named above. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
