asked on

css Bullets aliment,

Can you please let me know what is the Error in this code.

I want to have a Image and next to that Image I want to have Bullets with Text.?

===
<html>
<head>
<style type="text/css">
LI.list1 {list-style: circle outside; color:green;}
LI.list2 {list-style: square inside; color:blue}

</style>
</head>

<body>
<div>
<p>IMG style="PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px" alt=sample align=left src="final20/DSC1067.JPG" width=193 height=217></P>

<ul>

<li class="list1">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the

style we defined for the list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line

that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</ul>
<br>
<br>
<ul>

<li class="list2">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the

style we defined for the list.

</ul>

</div>
</body>
</html>

SSupreme

Try it:

<html>
<head>
<style type="text/css">
LI.list1 {list-style: circle outside; color:green;}
LI.list2 {list-style: square inside; color:blue}
p {float: left; width:195px;}
#left {float: left;width: 600px;}
</style>
</head>

<body>
<div>
<p>IMG style="PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px" alt=sample align=left src="final20/DSC1067.JPG" width=193 height=217></P>
</div>

<div id="left" >
<ul>

<li class="list1">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the

style we defined for the list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line

that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssThis is another line that is much longer than the

first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the

list.sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
</ul>
<br>
<br>
<ul>

<li class="list2">This is another line that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the

style we defined for the list.

</ul>


</div>
</body>
</html>

Open in new window

sigma19

ASKER

Thank you but why is the text coming on right side
It should be a image. if the image is not there than at least a image block should be created?

SSupreme

Could you please draw a layout of the page?

sigma19

ASKER

Thanks again.

I did some changes and I am able to get the point where I have the issue.

Attached is the code (actual) and the Image file.
Can you please let me know how to fix.

Profile.htm
untitled.bmp

SSupreme

How to fix what?
You should follow the rules when you are writing HTML 4.01 in order to avoid errors. Have a look at validated version. Profile.htm

ASKER CERTIFIED SOLUTION

SSupreme

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

gops1

chaitu, cant make out what you are really looking for. Could you please explain what you are expecting and what issue you are pointing at?

SSupreme

He wants to have next to the image unordered list and to know how to fix it, I guess.

sigma19

ASKER

SSupreme, that was my mistake. While deleting lot of un related text/divs to this problem ,I forgot and deleted the closing Tags.

Gops, As SSupreme said, I want to create a un ordered list next to a image.

I still have the issue. the text is not getting aligned as it should be for a Bullets.

As I showed you in the image, it is not aligned,.

untitled.bmp

SSupreme

Please check this example: Profile.htm

sigma19

ASKER

Thanks SSupreme for the response.

Still that issue with the Bullet alignment is not resolved
untitled.bmp

SSupreme

What is a problem?

SSupreme

Add margin:15px: to ul

gops1

Not sure what is expected or this is going to fit in a layout. Try this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
  <style>

    .list1{
      margin:0;
      padding:0;
      list-style:none;
      float:left;
      width:500px;
    }

    .list1 li{
        list-style:none;
        background:url("final20/arrow.gif") no-repeat left 5px;
        padding-left:10px;
    }

    .imgleft{
      margin-left:-1px;
      width:230px;
      float:left;

    }
  </style>
</head>

<body>
  <div>
    <p class="imgleft"><IMG alt=sample src="final20/DSC1067.JPG" width=193 height=217></p>
    <ul class="list1">
      <li>This is another line that is much longer than the first. But it isn't a black line si nce we did not specify a style for the text that goes here other than the
      style we defined for the list.</li>
      <li>
      This is another line
      that is much longer than the first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the
      list.</li>
      <li>This is another line that is much longer than the
      first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the
      list.</li>
      <li>This is another line that is much longer than the
      first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the
      list. </li>
      <li>This is another line that is much longer than the
      first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the
      list.</li>
      <li>This is another line that is much longer than the
      first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the
      list.</li>
      <li>This is another line that is much longer than the
      first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the
      list.</li>
      <li>This is another line that is much longer than the
      first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the
      list. </li>
      <li>This is another line that is much longer than the
      first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the
      list.</li>
      <li>This is another line that is much longer than the
      first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the
      list. </li>
      <li>This is another line that is much longer than the
      first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the
      list. </li>
      <li>This is another line that is much longer than the
      first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the
      list.</li>
      <li>This is another line that is much longer than the
      first. But it isn't a black line since we did not specify a style for the text that goes here other than the style we defined for the
      list.</li>
    </ul>
  </div>
</body>

</html>

Open in new window