Solved

css Bullets aliment,

Posted on 2011-02-13
14
228 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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
 
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.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

623 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