Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Bullets overlapping image aligned to left

Reply
Thread Tools

Bullets overlapping image aligned to left

 
 
ComputerSnack
Guest
Posts: n/a
 
      04-10-2006
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

 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      04-10-2006
In article
<(E-Mail Removed) .com>,
"ComputerSnack" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
ComputerSnack
Guest
Posts: n/a
 
      04-11-2006
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
> <(E-Mail Removed) .com>,
> "ComputerSnack" <(E-Mail Removed)> 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


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      04-11-2006
In article
<(E-Mail Removed) .com>,
"ComputerSnack" <(E-Mail Removed)> 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
> > <(E-Mail Removed) .com>,
> > "ComputerSnack" <(E-Mail Removed)> 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
 
Reply With Quote
 
ComputerSnack
Guest
Posts: n/a
 
      04-11-2006
This does not work either. I don't have the page posted anywhere, other
than the code above.

-Kevin

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      04-12-2006
In article
<(E-Mail Removed) .com>,
"ComputerSnack" <(E-Mail Removed)> 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
 
Reply With Quote
 
ComputerSnack
Guest
Posts: n/a
 
      04-12-2006
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

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      04-13-2006
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: Unable to move bullets to left of table. Jonathan N. Little HTML 10 09-08-2008 10:06 PM
Re: Unable to move bullets to left of table. dorayme HTML 35 08-26-2008 12:16 AM
Dynamic Menu Items is not right aligned with Right to Left documen =?Utf-8?B?QmlzaG95?= ASP .Net 0 12-28-2006 11:39 AM
left-right-center aligned mre HTML 2 03-10-2005 07:21 PM
H1 header: left or center aligned DU HTML 8 10-08-2003 07:05 AM



Advertisments