Re: SPAM-LOW: Re: [WSG] list links
Hi, Is it possible to target specific classes in a list to apply different background image to the different links in a list nav? tried everything i could think of but cant get it to work. something like: #navlist li .furniture a or applying the different images to the anchors instead of the lis? tried but no use... -best kevin Prisca schmarsow wrote: Kevin, have a look at this sample page here: http://graphiceyedea.info/experiments/css/ul_sprite_rollovers/ Check out the image used for rollover (as it includes both rollover states, you could have more, of course) - and view the CSS for more info. Hope this helps :) Prisca Thanks Prisca, i will use that. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: SPAM-LOW: Re: [WSG] list links
I use this on the following pages, http://solutions.liveperson.com/enterprise/industries/retail.asp check the list in the right hand side, check the css and the html, hopefully it makes sense. The default bkgd image is the pdf icon, but I also created an alternate for flash. You are definitely on the right track. Clare --Original Message-- From: kevin mcmonagle Sender: [EMAIL PROTECTED] To: wsg@webstandardsgroup.org ReplyTo: wsg@webstandardsgroup.org Sent: Jul 11, 2008 7:16 AM Subject: Re: SPAM-LOW: Re: [WSG] list links Hi, Is it possible to target specific classes in a list to apply different background image to the different links in a list nav? tried everything i could think of but cant get it to work. something like: #navlist li .furniture a or applying the different images to the anchors instead of the lis? tried but no use... -best kevin Prisca schmarsow wrote: Kevin, have a look at this sample page here: http://graphiceyedea.info/experiments/css/ul_sprite_rollovers/ Check out the image used for rollover (as it includes both rollover states, you could have more, of course) - and view the CSS for more info. Hope this helps :) Prisca Thanks Prisca, i will use that. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** Sent via BlackBerry from T-Mobile *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: SPAM-LOW: Re: [WSG] list links
On 11 Jul 2008, at 12:16, kevin mcmonagle wrote: Hi, Is it possible to target specific classes in a list to apply different background image to the different links in a list nav? tried everything i could think of but cant get it to work. something like: #navlist li .furniture a or applying the different images to the anchors instead of the lis? tried but no use... Hi Kevin; Sure. But take care where you attach your classes with reference to how you structure your CSS. If (as it sounds) you are attaching the class to the list item, then your CSS should be: #navlist li.furniture a not #navlist li .furniture a Note the removal of the space; li.furniture refers to a list item that has the class 'funiture'; li .furniture refers to some other element with a class=furniture *that is contained within* a list item. HTH -- Rick Lecoat www.sharkattack.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: SPAM-LOW: Re: [WSG] list links
Rick Lecoat wrote: Note the removal of the space; li.furniture refers to a list item that has the class 'funiture'; li .furniture refers to some other element with a class=furniture *that is contained within* a list item. oh boywell that explains it.. Thanks for the tip on the anchor element darren. thanks a mill everyone. -best kevin *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] list links
Kevin,
make sure to apply your padding ad background image to the link - not the
list item :)
have a look at this page here:
http://ghostcogs.co.uk/category/sketchbook/
which uses this CSS:
#work a {
display: block;
font-size: 0.8em;
padding: 0.3em 0 0.6em 3.6em;
background: transparent url(images/rollover_nav.png) no-repeat;
background-position: 0 0;
}
Hope this helps :)
Prisca
On Thu, Jul 10, 2008 at 2:25 PM, kevin mcmonagle [EMAIL PROTECTED]
wrote:
hi,
im doing a list with a background image and some text. how can an make the
whole li area hot and not just the text.
i forgot how to do that
-best
kevin
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
• graphiceyedea.co.uk • eyedea.eu • eyelearn.org •
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] list links
On 10 Jul 2008, at 14:25, kevin mcmonagle wrote: im doing a list with a background image and some text. how can an make the whole li area hot and not just the text. i forgot how to do that The main thing is to make sure that the list item is set to display: block. -- Rick Lecoat www.sharkattack.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] list links
doh, thanks. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] list links
Rick Lecoat wrote: The main thing is to make sure that the list item is set to display: block. I had tried that rick but i was putting the padding in the li not the li a. Do i still need to make li's block elements for ie? -best kevin *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] list links
On 10 Jul 2008, at 15:12, kevin mcmonagle wrote:
I had tried that rick but i was putting the padding in the li not
the li a.
Do i still need to make li's block elements for ie?
Sorry Kevin, I meant to say that the a *inside* the li should be
set to display: block. list items are block level by default.
However, with reference to the IE part of your question, you might
need some jiggery-pokery if you run into the IE bug where it inserts
gaps between list items that contain block elements. The workaround is
add two rules one after the other:
li a {display: inline-block;}
li a {display: block;}
See Berea street for further info:
http://tinyurl.com/ts8ye
Sorry for the bum steer earlier.
--
Rick Lecoat
www.sharkattack.co.uk
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] list links
Sorry Kevin, I meant to say that the a *inside* the li should be
set to display: block. list items are block level by default.
no problem thanks for the help.
Theres another issue with this nav bar. There are 3 primary links that
have images - the rest are just text. Ive used an id to include the
background image.
Is it possible to put hover states on these images as well?
there allready is a hover state on the plain li a's and i cant get it
working
best
-kevin
http://pattersons.s34978.gridserver.com/indexnew.html
#navlist li a
{
}
#navlist li a:link {
color: #EFEFEF;
}
#navlist li a:visited
{
color: #EFEFEF;
}
#navlist li a:hover
{
background: none;
color: #3399FF;
}
#kitchens a{
background-image: url(../images/sink.png);
.
}
#kitchens li a:hover{
background-image: url(../images/sinkover.png);
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] list links
Kevin,
have a look at this sample page here:
http://graphiceyedea.info/experiments/css/ul_sprite_rollovers/
Check out the image used for rollover (as it includes both rollover states,
you could have more, of course) - and view the CSS for more info.
Hope this helps :)
Prisca
On Thu, Jul 10, 2008 at 7:08 PM, kevin mcmonagle [EMAIL PROTECTED]
wrote:
Sorry Kevin, I meant to say that the a *inside* the li should be set
to display: block. list items are block level by default.
no problem thanks for the help.
Theres another issue with this nav bar. There are 3 primary links that have
images - the rest are just text. Ive used an id to include the background
image.
Is it possible to put hover states on these images as well?
there allready is a hover state on the plain li a's and i cant get it
working
best
-kevin
http://pattersons.s34978.gridserver.com/indexnew.html
#navlist li a
{
}
#navlist li a:link {
color: #EFEFEF;
}
#navlist li a:visited
{
color: #EFEFEF;
}
#navlist li a:hover
{
background: none;
color: #3399FF;
}
#kitchens a{
background-image: url(../images/sink.png);
.
}
#kitchens li a:hover{
background-image: url(../images/sinkover.png);
}
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
• graphiceyedea.co.uk • eyedea.eu • eyelearn.org •
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
