Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 22
  1. #1
    Member
    Join Date
    Nov 2005
    Posts
    55
    Member #
    11943
    I'm trying to float an image on the left of a page. (easy)
    I have text wrapping around it on the right. (so far so good)

    But when I add an unordered list to the text, the bullets don't indent, they float over the image.

    I've tried everything, going so far as to forgo the <ul> tag altogether by adding a single bullet image to the background of a <p> tag and adding a margin to the left of the text (no luck). The closest I've come is adding a "list-style: inside;" to the css for the ul tag. That works, but then it's not a true bullet style text. (bullet to the left, text aligned to the right of it) It just puts a bullet in front of the paragraph.

    Here's an example of what I'm seeing and what I'm trying to fix:
    http://www.paultrautwein.com/bullet_test/

    Any help would be appreciated.
    Thanks.

  2.  

  3. #2
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Well a simple fix would be to add another 5 or 10 px to the right margin of the image, this moves the ul over. Is there a reason you have not done that?

    Another simple fix is to add a margin to the ul slightly wider than your image, I tried 210px.

    If you don't like those then....

    Another alternative is to wrap the ul in a div and float it left also. See below.

    Code:
     <style type="text/css">
    div    {width: 500px; border: 1px solid black;}
    p     {font-family: verdana; font-size: 11px; margin: 0 0 10px 0; padding:0;}
    ul    {font-family: verdana; font-size: 11px; margin: 0 0 0 10px; padding:0;}
     #bullets {
        width: 290px; /*watch the width, it needs to be right*/
        float: left;
        border: none; /*Had to remove border to cancel the border you had on div tag*/
    }
    li     {margin-bottom: 10px;}
    img    {float: left; margin: 0 10px 10px 0;}
    </style>
    
    </head>
    <body>
    <div>
    <img src="DSC_6420.jpg" alt="test image" width="200" height="208" border="0" />
     <div id="bullets">
    <p>text goes here.</p>
    
    <ul>
        <li>First bullet. This is the first in a series of bullets supposed to wrap around an image.</li>
    
        <li>Second bullet. This is the second in a series of bullets supposed to wrap around an image.</li>
    
        <li>Third bullet. This is the third in a series of bullets supposed to wrap around an image.</li>
    </ul>
     </div>
    <p>I need the bullets to align with the left justified text. Works when it's sitting on it's own, but the moment it has to wrap around an image the bullets jump to the left.</p>
    
    <p style="clear: both;">Here's how it looks without the image:</p>
    
    <ul>
        <li>First bullet. This is the first in a series of bullets supposed to wrap around an image.</li>
    
        <li>Second bullet. This is the second in a series of bullets supposed to wrap around an image.</li>
    
        <li>Third bullet. This is the third in a series of bullets supposed to wrap around an image.</li>
    </ul>
    
    </div>
    The problem with this method would be that if the content in that #bullets div is long, it will push the text below down past the bottom of the image leaving some unsightly space. I don't see a way around that though if the ul extends past the image.

  4. #3
    Member
    Join Date
    Nov 2005
    Posts
    55
    Member #
    11943
    Thanks for the response.

    Unfortunately, none of these solutions will work in this case. I'm afraid my example was not complete enough. I've modified it to show what's happening better:
    http://www.paultrautwein.com/bullet_test/

    Well a simple fix would be to add another 5 or 10 px to the right margin of the image, this moves the ul over. Is there a reason you have not done that?
    This will shove any <p> tag paragraph sitting above the unordered list over as well.

    Another simple fix is to add a margin to the ul slightly wider than your image, I tried 210px.

    If you don't like those then....

    Another alternative is to wrap the ul in a div and float it left also. See below.
    This won't work if the unordered list moves beyond the height of the photo. See new example.

    Thanks for the ideas, though. Any other thoughts?

  5. #4
    Junior Member
    Join Date
    Mar 2009
    Posts
    1
    Member #
    18531
    I've got the same problem issue about my left float sidebar.. I am trying to fix it the bullets but I dont know to do it. I was read this thread and help me a lot..

    Thank you guys!
    tnomeralc web design toys

  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Quote Originally Posted by PaulT
    This will shove any <p> tag paragraph sitting above the unordered list over as well.
    That's correct. That's also expected behavior, however. The point of the default list style is that it pushes the bullet to the left of the paragraph line. The trouble is the changing effect of the left margins/paddings that are usually used to then push the list into the paragraph when faced with a float on the left.

    Honestly, I can find no way to do this, both in my own experimentation and with some cursory searches. I would recommend floating the image right instead of left, which will not be a problem and is more traditional in print media, at least.

  7. #6
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    If that ul extends past the bottom of that image then you can't do anything without it looking wierd. I think shadow is on with floating the img to the right. You don't really see ul's floated around things to the right anyway, probably because it causes problems.

    EDIT:: Oh I just looked at your new example and I would definitely float the image right, it looks funny with those bullets floating down and then under the image.

  8. #7
    Member
    Join Date
    Nov 2005
    Posts
    55
    Member #
    11943
    This is a case of a Print Designer (the client) trying to match what they can do in InDesign/Quark on the web. They added the image to the left of the bullet list, and I was trying to make it work. I'm stumped too - and also did a bunch of research, and tried a bunch of hacks - nothing I tried worked.

    I was trying to come up with a standard, (and easy code) because I'm turning the pages over to the client to pass on to a company that will be updating the files on their own. (gulp)

    And I know the client was also doing the same thing. The layout has an image in the same place for a series of articles. One image per article: standard throughout. One of the articles had bullets.

    Thanks for looking at it. I appreciate the effort.

  9. #8
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Man, yeah, that sucks :-/ I guess the only way to really reproduce that would be to split the bulleted list into one part that lives next to the image and one that overflows, but that would be very page-dependent.

  10. #9
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    And dependent upon text size. This one bugs me, one of those things that you think about when you go to sleep. Just tell them the web is not a drag and drop environment like print design, and they will have to live with it. (in nice professional words of course)

    One more alternative would be to put a small image which looks like a bullet in front of paragraphs and get rid of the ul. It would work but not very symantic.

  11. #10
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Hah! Nailed this sucker!

    Ok, here's a way to help make it work. Disclaimer: I've only tested this briefly in Safari as I made it happen with the developer console and inspector.

    * Wrap the li children in divs.
    * Give the list a [minicode]list-style: inside;[/minicode].
    * Give the li div children [minicode]float: right; width: 100%;[/minicode].
    * Give those same children a [minicode]margin-left[/minicode] to shift them away from the bullet.
    * Give those same children a [minicode]margin-top[/minicode] to move them back up to where the bullet is (they should probably be a little further down than needed) (-10px in my experimentation).
    * Give the li an [minicode]overflow: auto;[/minicode] to automatically make them clear their inner floats, thus pushing the following lis down.

    It's looking exactly the way it should here, but it's possible that this may be a serendipitous combination of your particular example + Safari's particular rendering of percentages and floats. Hopefully it actually works, though

    EDIT: Definitely let us know if it works, I'd like to post it on my blog in that case


Page 1 of 3 1 2 3 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

bullet points floating image alignment

,

bullets going under floated image

,
css bulleted list floated image
,
div bullets wrap
,
float moves bullet points css
,
html bullets now flowing around image
,
html floating an image to left of a bulleted list
,

left floated image bulleted list

,
troubleshooting bullets floating
,
ul over float image
Click on a term to search for related topics.
All times are GMT -6. The time now is 04:59 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com