Bullets overlapping image aligned to left

Discussion in 'HTML' started by ComputerSnack, Apr 10, 2006.

  1. I am having a problem with bullets overlapping an image when it is
    aligned to the left of the text. See my HTML example below. I would
    expect the bullets to be indented starting at the right edge of the
    image, but this does not happen. Any ideas?

    <img height="156" src="soccer.jpg" width="200" align="left"
    alt="Youth Playing Soccer"><font color="#006633"><b>Sports
    Programs</b></font></p>
    <ul>
    <li>Little Tots Sports for ages 3-4</li>
    <li>Pee Wee Sports for ages 5-7</li>
    <li>Youth Sports for ages 8-11</li>
    <li>Teen Sports for ages 11-14</li>
    <li>Skyhawks Sports programs.</li>
    </ul>

    Thanks,

    Kevin
     
    ComputerSnack, Apr 10, 2006
    #1
    1. Advertising

  2. ComputerSnack

    dorayme Guest

    In article
    <>,
    "ComputerSnack" <> wrote:

    > I am having a problem with bullets overlapping an image when it is
    > aligned to the left of the text. See my HTML example below. I would
    > expect the bullets to be indented starting at the right edge of the
    > image, but this does not happen. Any ideas?
    >
    > <img height="156" src="soccer.jpg" width="200" align="left"
    > alt="Youth Playing Soccer"><font color="#006633"><b>Sports
    > Programs</b></font></p>
    > <ul>
    > <li>Little Tots Sports for ages 3-4</li>
    > <li>Pee Wee Sports for ages 5-7</li>
    > <li>Youth Sports for ages 8-11</li>
    > <li>Teen Sports for ages 11-14</li>
    > <li>Skyhawks Sports programs.</li>
    > </ul>
    >
    > Thanks,
    >
    > Kevin


    Put this in the head of your doc between <head> and </head>

    <style type="text/css" title="text/css">

    img {margin-right: 20px}

    </style>

    Try different px figures to suit... to get you all excited and
    tempt you to read up on how to style things with css.

    --
    dorayme
     
    dorayme, Apr 11, 2006
    #2
    1. Advertising

  3. That works, however it moves everything over, not just the bulleted
    text. I need to just move over the bulleted items. Any other ideas?

    -Kevin

    dorayme wrote:
    > In article
    > <>,
    > "ComputerSnack" <> wrote:
    >
    > > I am having a problem with bullets overlapping an image when it is
    > > aligned to the left of the text. See my HTML example below. I would
    > > expect the bullets to be indented starting at the right edge of the
    > > image, but this does not happen. Any ideas?
    > >
    > > <img height="156" src="soccer.jpg" width="200" align="left"
    > > alt="Youth Playing Soccer"><font color="#006633"><b>Sports
    > > Programs</b></font></p>
    > > <ul>
    > > <li>Little Tots Sports for ages 3-4</li>
    > > <li>Pee Wee Sports for ages 5-7</li>
    > > <li>Youth Sports for ages 8-11</li>
    > > <li>Teen Sports for ages 11-14</li>
    > > <li>Skyhawks Sports programs.</li>
    > > </ul>
    > >
    > > Thanks,
    > >
    > > Kevin

    >
    > Put this in the head of your doc between <head> and </head>
    >
    > <style type="text/css" title="text/css">
    >
    > img {margin-right: 20px}
    >
    > </style>
    >
    > Try different px figures to suit... to get you all excited and
    > tempt you to read up on how to style things with css.
    >
    > --
    > dorayme
     
    ComputerSnack, Apr 11, 2006
    #3
  4. ComputerSnack

    dorayme Guest

    In article
    <>,
    "ComputerSnack" <> wrote:

    > That works, however it moves everything over, not just the bulleted
    > text. I need to just move over the bulleted items. Any other ideas?
    >
    > -Kevin
    >
    > dorayme wrote:
    > > In article
    > > <>,
    > > "ComputerSnack" <> wrote:
    > >
    > > > I am having a problem with bullets overlapping an image when it is
    > > > aligned to the left of the text. See my HTML example below. I would
    > > > expect the bullets to be indented starting at the right edge of the
    > > > image, but this does not happen. Any ideas?
    > > >
    > > > <img height="156" src="soccer.jpg" width="200" align="left"
    > > > alt="Youth Playing Soccer"><font color="#006633"><b>Sports
    > > > Programs</b></font></p>
    > > > <ul>
    > > > <li>Little Tots Sports for ages 3-4</li>
    > > > <li>Pee Wee Sports for ages 5-7</li>
    > > > <li>Youth Sports for ages 8-11</li>
    > > > <li>Teen Sports for ages 11-14</li>
    > > > <li>Skyhawks Sports programs.</li>
    > > > </ul>
    > > >
    > > > Thanks,
    > > >
    > > > Kevin

    > >
    > > Put this in the head of your doc between <head> and </head>
    > >
    > > <style type="text/css" title="text/css">
    > >
    > > img {margin-right: 20px}
    > >
    > > </style>



    You need to supply a url at this stage so your whole doc can be
    seen. What browser? Please try not to top post.

    I would float your img left, your list would sit next to it
    right, the margins and padding controlled by css on both. But I
    can't sit here typing out the lot just now.

    However, old chap, let us continue the dirty work a bit:

    For now, try:

    <style type="text/css" title="text/css">

    img {margin-right: 20px;margin-left:0;}

    ul {margin-left: 10px;}

    body {margin:0;padding:0;}

    </style>

    --
    dorayme
     
    dorayme, Apr 11, 2006
    #4
  5. This does not work either. I don't have the page posted anywhere, other
    than the code above.

    -Kevin
     
    ComputerSnack, Apr 11, 2006
    #5
  6. ComputerSnack

    dorayme Guest

    In article
    <>,
    "ComputerSnack" <> wrote:

    > This does not work either. I don't have the page posted anywhere, other
    > than the code above.
    >
    > -Kevin


    Please quote what you are responding to, not all of us use Google
    and see (or remember) all the thread.

    If I recall, you wanted to have an image left and a list to the
    right. I gave you some quick and dirty markup. It worked to solve
    the first prob. Then you had an unwanted side-effect.

    In the end, you are not just going to have the two items you
    mention, you will probably go on to have something underneath and
    and on it goes. You need to be able to wrestle with a whole
    design.

    It would help a lot for you to put anything you keep wanting help
    for up so folk can take a look at the whole doc. Problems about
    margins and spacing can come from anywhere, including the doc
    type you use, even whether you use one or not, the browser you
    are using and on it goes.

    --
    dorayme
     
    dorayme, Apr 12, 2006
    #6
  7. Just wanted to let you know that I solved the problem. A very simple
    solution is to put the bulleted text in a table. This seems to work
    well.

    -Kevin



    -----------------------previous message-----------------------
    I am having a problem with bullets overlapping an image when it is
    aligned to the left of the text. See my HTML example below. I would
    expect the bullets to be indented starting at the right edge of the
    image, but this does not happen. Any ideas?

    <img height="156" src="soccer.jpg" width="200" align="left"
    alt="Youth Playing Soccer"><font color="#006633"><b>Sports
    Programs</b></font></p>
    <ul>
    <li>Little Tots Sports for ages 3-4</li>
    <li>Pee Wee Sports for ages 5-7</li>
    <li>Youth Sports for ages 8-11</li>
    <li>Teen Sports for ages 11-14</li>
    <li>Skyhawks Sports programs.</li>
    </ul>


    Thanks,


    Kevin
     
    ComputerSnack, Apr 12, 2006
    #7
  8. ComputerSnack wrote:
    > Just wanted to let you know that I solved the problem. A very simple
    > solution is to put the bulleted text in a table. This seems to work
    > well.


    Ugh!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 13, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. DU
    Replies:
    8
    Views:
    647
    Toby A Inkster
    Oct 8, 2003
  2. mre
    Replies:
    2
    Views:
    449
  3. =?Utf-8?B?QmlzaG95?=
    Replies:
    0
    Views:
    1,004
    =?Utf-8?B?QmlzaG95?=
    Dec 28, 2006
  4. dorayme
    Replies:
    35
    Views:
    1,326
    John Hosking
    Aug 26, 2008
  5. Jonathan N. Little

    Re: Unable to move bullets to left of table.

    Jonathan N. Little, Sep 4, 2008, in forum: HTML
    Replies:
    10
    Views:
    879
    Neredbojias
    Sep 8, 2008
Loading...

Share This Page