?
Solved

css Bullets aliment,

Posted on 2011-02-13
14
Medium Priority
?
233 Views
Last Modified: 2012-05-11
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>
0
Comment
Question by:vkchaitu82
  • 8
  • 4
  • 2
14 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 34884068
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

0
 

Author Comment

by:vkchaitu82
ID: 34884211
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?
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34884226
Could you please draw a layout of the page?
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 

Author Comment

by:vkchaitu82
ID: 34884382
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
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34884444
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
0
 
LVL 16

Accepted Solution

by:
SSupreme earned 2000 total points
ID: 34884469
<img LOWER CASE TAGS NAME
style="PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 5px"
alt=sample align=left src="final20/DSC106.JPG" width=193
height=217 /> Proper way to close tags with "/" at the end or <p></p>
0
 
LVL 17

Expert Comment

by:gops1
ID: 34884505
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?
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34884523
He wants to have next to the image unordered list and to know how to fix it, I guess.
0
 

Author Comment

by:vkchaitu82
ID: 34884750
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
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34884833
Please check this example: Profile.htm
0
 

Author Comment

by:vkchaitu82
ID: 34885134
Thanks SSupreme for the response.

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

Expert Comment

by:SSupreme
ID: 34886093
What is a problem?
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34886989
Add margin:15px: to ul
0
 
LVL 17

Expert Comment

by:gops1
ID: 34894368
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

0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

590 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question