Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2008-01-18 15:01:13
- Gallex
- Member
- Registered: 2006-10-08
- Posts: 1,308
backgroundimage as backgrounds of menu links
i want to use backgroundimage for menu link state a:hover and a.active.
my CSS:
#sidebar-1 li a{
margin: 0;
padding:5px 0 5px 7px;
font-family:arial, Verdana, "Lucida Grande", Georgia;
color: #fff;
font-weight:bold;
text-decoration:none;
width:100%;
}
#sidebar-1 li a:hover{
background:transparent url(/images/9.jpg) no-repeat left center;
text-decoration:none;
}
#sidebar-1 li a.active{
background:transparent url(/images/9.jpg) no-repeat left center;
}but the backgroundimage ends right after the end of a link. how to force it to stretch to the right side of the menu.
poor explanation but i hope you understand my wish.
Offline
Re: backgroundimage as backgrounds of menu links
Use “display: block;” in #sidebar-1 li a and remove the “width”.
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
#3 2008-01-20 10:12:25
- Gallex
- Member
- Registered: 2006-10-08
- Posts: 1,308
Re: backgroundimage as backgrounds of menu links
thebombsite wrote:
Use “display: block;” in #sidebar-1 li a and remove the “width”.
yes! thank’s Stuart
Offline
#4 2008-01-20 12:08:10
- Gallex
- Member
- Registered: 2006-10-08
- Posts: 1,308
Re: backgroundimage as backgrounds of menu links
thebombsite wrote:
Use “display: block;” in #sidebar-1 li a and remove the “width”.
well-well… but now, ie somehow puts the extra space below the menu link :(
ok, setting height:28px; for li, did the trick, or…let’s say, almost did. because ie 6.0 still leaves a little bit more space between links than firefox and opera do
Last edited by Gallex (2008-01-20 12:36:32)
Offline
Re: backgroundimage as backgrounds of menu links
IE6 is a pain in the butt and IE7 has it’s moments. Some browsers have certain default settings for things like margin and padding so I always start any CSS with:-
* {
margin: 0;
padding: 0;
outline: 0;
border: 0;
}That will start most browsers at roughly the same place before you get on with your style. Of course you need to remember that if you need any margin, padding or border you will need to add them, for example the above CSS will remove the gaps between paragraphs and the borders around form inputs etc.
And yes, I forgot to mention adding height and you can also add width if needed to the “a” block if you didn’t want it to expand across the full “li”.
Last edited by thebombsite (2008-01-20 14:36:18)
Stuart
In a Time of Universal Deceit
Telling the Truth is Revolutionary.
Offline
#6 2008-01-21 09:58:39
- Gallex
- Member
- Registered: 2006-10-08
- Posts: 1,308
Re: backgroundimage as backgrounds of menu links
thebombsite wrote:
IE6 is a pain in the butt and IE7 has it’s moments. Some browsers have certain default settings for things like margin and padding so I always start any CSS with:-
* {
margin: 0;
padding: 0;
outline: 0;
border: 0;
}That will start most browsers at roughly the same place before you get on with your style.
didn’t help not much with extra spaces, but thank’s for a lesson, i will remember that
Offline