Solved

css Bullets aliment,

Posted on 2011-02-13
14
224 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Suggested Solutions

Title # Comments Views Activity
social media icons disappear on small screens 4 28
Put check in your check box 7 16
Link not working 6 42
Table doesn't show the lines! 3 24
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
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 …
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…

749 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