Solved

css Bullets aliment,

Posted on 2011-02-13
14
221 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
 

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 500 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

920 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now