Re: [css-d] Positioning a list bullet image
> I would
> like to more accurately position this leaf, and it sounds like
> making it a
> background image is the way to do that. However, the entire list is
> right-justified, so setting the position of the leaf to the left of
> the text
> looks like it may not be possible, as one would have to know the exact
> length of each heading in order to place the leaf to the left of
> it. Is
> this correct -- am I limited to list-style: url("images/leaf.gif")
> because
> the list is right-justified?
Your 's aren't blocks, so they'll shrink-wrap to the link text.
Just set the leaf image as a left-aligned background image on the
links themselves, instead of the list items, then give those links
left padding so the text doesn't overlap the leaf.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning a list bullet image
On 20 May 2006, at 5:21 pm, Marc Funaro wrote:
> Related question...
>
> Still working on my design at
> http://nyslittreedata.advantex.net/new/default/default.htm. The list
> "headings" in the left navigation bar have a leaf next to them. I
> would
> like to more accurately position this leaf, and it sounds like
> making it a
> background image is the way to do that. However, the entire list is
> right-justified, so setting the position of the leaf to the left of
> the text
> looks like it may not be possible, as one would have to know the exact
> length of each heading in order to place the leaf to the left of
> it. Is
> this correct -- am I limited to list-style: url("images/leaf.gif")
> because
> the list is right-justified?
Hi Marc,
Is that url OK? I don't see any navigation bar (Safari, FF or IE/
Windows).
Regarding the question, provided that you have made your list item
anchor tag display:block then you can specify a width, and right-
range the text within that. The width you set takes care of the
placement of the background image, so the width of the text doesn't
matter. You have a lot of control over where you place the background
image.
Ian.
--
Dr Ian M Piper
[EMAIL PROTECTED]
skype: ianmpiper
--
Where is the wisdom we have lost in knowledge?
Where is the knowledge we have lost in information?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning a list bullet image
> Thanks all. I have gone for background-image. I wish I
> could have used list-style-image though - it feels like
> it should be the right way to do it.
Related question...
Still working on my design at
http://nyslittreedata.advantex.net/new/default/default.htm. The list
"headings" in the left navigation bar have a leaf next to them. I would
like to more accurately position this leaf, and it sounds like making it a
background image is the way to do that. However, the entire list is
right-justified, so setting the position of the leaf to the left of the text
looks like it may not be possible, as one would have to know the exact
length of each heading in order to place the leaf to the left of it. Is
this correct -- am I limited to list-style: url("images/leaf.gif") because
the list is right-justified?
marc
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning a list bullet image
Ian Piper wrote:
> On 19 May 2006, at 6:37 pm, David McFarland wrote:
>
>> Add 3 pixels of empty space to the top of the graphic. I prefer to
>> use background-image and background-position because they allow
>> control over the placement of the bullets.
>>
>> --dave mcfarland
>
> Thanks all. I have gone for background-image. I wish I could have
> used list-style-image though - it feels like it should be the right
> way to do it.
>
> Ian.
Hi Ian:
This is some code which I found...not quite sure where. It uses a
background image for IE, and sends all standards compliant browsers the
image as a list-style-image.
/* Begin CSS */
.content li {
padding-left: 14px;
background-image: url(../img/Global/bullet_green.gif);
background-repeat: no-repeat;
background-position: 0 6px;
}
html[xmlns] .content ul {padding-left: 14px;}
html[xmlns] .content li {
background: none; /* undo the background-image */
list-style-image: url(../img/Global/bullet_green.gif);
padding: 0;
}
It is more code, but then, if you'd like to do it the "right" way, while
accomodating less-compliant browsers, then this works.
Regards,
Rahul.
Hope this helps,
Rahul.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning a list bullet image
On 19 May 2006, at 6:37 pm, David McFarland wrote: > > Add 3 pixels of empty space to the top of the graphic. I prefer to > use background-image and background-position because they allow > control over the placement of the bullets. > > --dave mcfarland Thanks all. I have gone for background-image. I wish I could have used list-style-image though - it feels like it should be the right way to do it. Ian. -- Dr Ian M Piper [EMAIL PROTECTED] skype: ianmpiper -- Where is the wisdom we have lost in knowledge? Where is the knowledge we have lost in information? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Positioning a list bullet image
On May 19, 2006, at 3:08 AM, Ian Piper wrote: > I am using the list- > style-image approach for the main content list. You can see that the > musical note image is slightly high wrt the text. I'd like to drop it > by 3 pixels or so. Add 3 pixels of empty space to the top of the graphic. I prefer to use background-image and background-position because they allow control over the placement of the bullets. --dave mcfarland __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Positioning a list bullet image
Hi all, I want to use a custom graphic as a bullet in a list. I can do this (at least) two ways in CSS, by using list-style-image and by using background-image. I wanted to know whether it is possible to vertically position the bullet if I use list-style-image. I can't find anything in any of my books but thought I would ask here. For an example, look here: http://www.tellura.co.uk/soundsteps/franchise_package.htm On this page I am using the background method for the menus with the triangular bullets and I am happy with that. I am using the list- style-image approach for the main content list. You can see that the musical note image is slightly high wrt the text. I'd like to drop it by 3 pixels or so. Any help much appreciated. Thanks, Ian. -- Dr Ian M Piper [EMAIL PROTECTED] skype: ianmpiper -- Where is the wisdom we have lost in knowledge? Where is the knowledge we have lost in information? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
