Re: [css-d] Image bullets and floated images
Hi Brian, Thanks for the information. I tried that, and the bullets are no longer centered. I will have to see if that visual presentation passes with our QA team and users. Otherwise, a solution by Bill Brown will most likely work as well. Thanks, Stephen -- Forwarded message -- From: Brian Hazelton bdh_2...@comcast.net To: CSS-D css-d@lists.css-discuss.org Date: Mon, 11 May 2009 12:58:13 -0600 Subject: Re: [css-d] Image bullets and floated images The best that I can come up with is that since it is just a circle and not anything too intricate, you can just use the image as the list-style type...list-style:url(image name); the only problem with this is that the image is not directly in the center of the text. Hope this helps. -- Forwarded message -- From: Stephen Tang clowwizarder...@gmail.com To: CSS-D css-d@lists.css-discuss.org Date: Mon, 11 May 2009 14:09:16 -0400 Subject: [css-d] Image bullets and floated images Hi, I have a div/image that is floated left from the rest of the content. My content consists primarily of p tags and lists. The text needs to wrap below the floated dv/image. This part is not difficult. However, I have a list where the bullets have been replaced with images. When I do this, the image bullets are all the way to the left of the page and collides with the floated div/image. When I check this in firebug, I noticed that the ul takes up the width of the parent element, so the bullet images are placed on the left side. I wanted the bullets to be immediately next to the list items (if I use the default bullets, the bullets appear next to the list item. Is there any way to get the bullet images next to the list items again? I don't want to jeopardize the text-wrapping either. Here is the URL: http://stephentang.info/floattest/test.html Thank you for your time in reading this. Sincerely, Stephen __ css-discuss [cs...@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] Image bullets and floated images
Hi Bill,
I did find one problem with your CSS. If the bullet item's content is
really long, it will no longer wraps around the image. Because of the
inline-block, it will simply move the entire list below the floated
element.
Thanks for your suggestion anyway.
--Stephen
-- Forwarded message --
From: Bill Brown macnim...@gmail.com
To: Stephen Tang clowwizarder...@gmail.com
Date: Mon, 11 May 2009 14:56:46 -0400
Subject: Re: [css-d] Image bullets and floated images
Stephen Tang wrote:
[snipped/]
list item. Is there any way to get the bullet images next to the list
items again? I don't want to jeopardize the text-wrapping either.
http://stephentang.info/floattest/test.html
Something like this ought to work for you:
~~~
body, ul, p, li, div
{margin:0;padding:0;}
.container
{height:600px;width:700px;border:1px red solid;}
.floatedobj
{border:1px blue solid;margin-right:20px;height:100px;width:300px;
float:left;}
p
{margin-bottom:5px;}
ul
{list-style:none;margin:0;padding:0;display:inline-block;}
ul
{display:inline!ie;}
ul li
{list-style:none;margin:0;padding:0 0 0 10px;
background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px;}
~~~
Hope it helps.
--Bill
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@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] Image bullets and floated images
Stephen Tang wrote:
Hi,
I have a div/image that is floated left from the rest of the content.
My content consists primarily of p tags and lists. The text needs
to wrap below the floated dv/image. This part is not difficult.
However, I have a list where the bullets have been replaced with
images. When I do this, the image bullets are all the way to the left
of the page and collides with the floated div/image.
When I check this in firebug, I noticed that the ul takes up the
width of the parent element, so the bullet images are placed on the
left side. I wanted the bullets to be immediately next to the list
items (if I use the default bullets, the bullets appear next to the
list item. Is there any way to get the bullet images next to the list
items again? I don't want to jeopardize the text-wrapping either.
Here is the URL:
http://stephentang.info/floattest/test.html
Thank you for your time in reading this.
Sincerely,
Stephen
Hello Stephen. This works in Firefox. Change this CSS.
ul li { background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px; }
to
ul li { background:transparent url(bullet_hdr.gif) no-repeat scroll
310px 8px; }
Image positions for list items vary widely across browserland. You may
have to hack browsers with this one.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@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] Image bullets and floated images
Hi Alan,
Thanks for your input. I may have to some browser hacking. If the
the bullet list item is long, it will wrap (which is what the end user
wants to happen). I think the positioning of the green bullet based
on coordinates 310px, 8px will not work for lists that are underneath
the floated element. This area is managed by a content management
system, so I don't have control over the content. I may try swapping
out the bullet image for a green disc, since the bullet image is
really a green disc.
Thanks,
Stephen
On Tue, May 12, 2009 at 10:40 AM, Alan Gresley a...@css-class.com wrote:
Stephen Tang wrote:
Hi,
I have a div/image that is floated left from the rest of the content.
My content consists primarily of p tags and lists. The text needs
to wrap below the floated dv/image. This part is not difficult.
However, I have a list where the bullets have been replaced with
images. When I do this, the image bullets are all the way to the left
of the page and collides with the floated div/image.
When I check this in firebug, I noticed that the ul takes up the
width of the parent element, so the bullet images are placed on the
left side. I wanted the bullets to be immediately next to the list
items (if I use the default bullets, the bullets appear next to the
list item. Is there any way to get the bullet images next to the list
items again? I don't want to jeopardize the text-wrapping either.
Here is the URL:
http://stephentang.info/floattest/test.html
Thank you for your time in reading this.
Sincerely,
Stephen
Hello Stephen. This works in Firefox. Change this CSS.
ul li { background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px; }
to
ul li { background:transparent url(bullet_hdr.gif) no-repeat scroll 310px
8px; }
Image positions for list items vary widely across browserland. You may have
to hack browsers with this one.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@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] Image bullets and floated images
Hi,
The final result of this line of thought is shown here:
http://stephentang.info/floattest/test2.html
Based on feedback here, I think this solves my issues:
- Changed the background bullet image into a list-style-image.
- Used position: relative and left properties on the ul to shift the
bulleted list away form the floated element, if the list extends past
the bottom of the floated element, wrapping occurs normally, which is
what was desired.
Thanks for those that who contributed advice to this.
--Stephen
On Tue, May 12, 2009 at 11:04 AM, Stephen Tang
clowwizarder...@gmail.com wrote:
Hi Alan,
Thanks for your input. I may have to some browser hacking. If the
the bullet list item is long, it will wrap (which is what the end user
wants to happen). I think the positioning of the green bullet based
on coordinates 310px, 8px will not work for lists that are underneath
the floated element. This area is managed by a content management
system, so I don't have control over the content. I may try swapping
out the bullet image for a green disc, since the bullet image is
really a green disc.
Thanks,
Stephen
On Tue, May 12, 2009 at 10:40 AM, Alan Gresley a...@css-class.com wrote:
Stephen Tang wrote:
Hi,
I have a div/image that is floated left from the rest of the content.
My content consists primarily of p tags and lists. The text needs
to wrap below the floated dv/image. This part is not difficult.
However, I have a list where the bullets have been replaced with
images. When I do this, the image bullets are all the way to the left
of the page and collides with the floated div/image.
When I check this in firebug, I noticed that the ul takes up the
width of the parent element, so the bullet images are placed on the
left side. I wanted the bullets to be immediately next to the list
items (if I use the default bullets, the bullets appear next to the
list item. Is there any way to get the bullet images next to the list
items again? I don't want to jeopardize the text-wrapping either.
Here is the URL:
http://stephentang.info/floattest/test.html
Thank you for your time in reading this.
Sincerely,
Stephen
Hello Stephen. This works in Firefox. Change this CSS.
ul li { background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px; }
to
ul li { background:transparent url(bullet_hdr.gif) no-repeat scroll 310px
8px; }
Image positions for list items vary widely across browserland. You may have
to hack browsers with this one.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@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] Image bullets and floated images
Hi, I have a div/image that is floated left from the rest of the content. My content consists primarily of p tags and lists. The text needs to wrap below the floated dv/image. This part is not difficult. However, I have a list where the bullets have been replaced with images. When I do this, the image bullets are all the way to the left of the page and collides with the floated div/image. When I check this in firebug, I noticed that the ul takes up the width of the parent element, so the bullet images are placed on the left side. I wanted the bullets to be immediately next to the list items (if I use the default bullets, the bullets appear next to the list item. Is there any way to get the bullet images next to the list items again? I don't want to jeopardize the text-wrapping either. Here is the URL: http://stephentang.info/floattest/test.html Thank you for your time in reading this. Sincerely, Stephen __ css-discuss [cs...@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] Image bullets and floated images
The best that I can come up with is that since it is just a circle and not anything too intricate, you can just use the image as the list-style type...list-style:url(image name); the only problem with this is that the image is not directly in the center of the text. Hope this helps. __ css-discuss [cs...@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] Image bullets and floated images
Hi Bill,
What is this style?
ul {display:inline!ie;}
Is this a browser hack?
--Stephen
On Mon, May 11, 2009 at 2:56 PM, Bill Brown macnim...@gmail.com wrote:
Stephen Tang wrote:
[snipped/]
list item. Is there any way to get the bullet images next to the list
items again? I don't want to jeopardize the text-wrapping either.
http://stephentang.info/floattest/test.html
Something like this ought to work for you:
~~~
body, ul, p, li, div
{margin:0;padding:0;}
.container
{height:600px;width:700px;border:1px red solid;}
.floatedobj
{border:1px blue solid;margin-right:20px;height:100px;width:300px;
float:left;}
p
{margin-bottom:5px;}
ul
{list-style:none;margin:0;padding:0;display:inline-block;}
ul
{display:inline!ie;}
ul li
{list-style:none;margin:0;padding:0 0 0 10px;
background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px;}
~~~
Hope it helps.
--Bill
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@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] Image bullets and floated images
Stephen Tang wrote:
[snipped/]
list item. Is there any way to get the bullet images next to the list
items again? I don't want to jeopardize the text-wrapping either.
http://stephentang.info/floattest/test.html
Something like this ought to work for you:
~~~
body, ul, p, li, div
{margin:0;padding:0;}
.container
{height:600px;width:700px;border:1px red solid;}
.floatedobj
{border:1px blue solid;margin-right:20px;height:100px;width:300px;
float:left;}
p
{margin-bottom:5px;}
ul
{list-style:none;margin:0;padding:0;display:inline-block;}
ul
{display:inline!ie;}
ul li
{list-style:none;margin:0;padding:0 0 0 10px;
background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px;}
~~~
Hope it helps.
--Bill
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.com
--
__
css-discuss [cs...@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/
